From f17173e249cc123cdf68f7a541f9591246789a47 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 31 Aug 2022 22:10:45 +0800
Subject: [PATCH 1/3] clean up unused import & class in tab1

---
 playground/pages/tabs/tab1.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/playground/pages/tabs/tab1.vue b/playground/pages/tabs/tab1.vue
index 590afd9c..4831b9bb 100644
--- a/playground/pages/tabs/tab1.vue
+++ b/playground/pages/tabs/tab1.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { add } from 'ionicons/icons'
-
 definePageMeta({
   alias: ['/', '/tabs'],
 })
@@ -9,7 +7,7 @@ definePageMeta({
 <template>
   <ion-page>
     <ion-header translucent>
-      <ion-toolbar class="toolbar">
+      <ion-toolbar>
         <ion-thumbnail slot="start">
           <ion-img src="/icon.png" />
         </ion-thumbnail>

From 798f0d8f4aa51ef300bd893e2e485a88bb9ff5ef Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 31 Aug 2022 22:11:12 +0800
Subject: [PATCH 2/3] align tab4 title to "Animation examples"

---
 playground/pages/tabs/tab4.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/playground/pages/tabs/tab4.vue b/playground/pages/tabs/tab4.vue
index 5cf4f111..a79935fb 100644
--- a/playground/pages/tabs/tab4.vue
+++ b/playground/pages/tabs/tab4.vue
@@ -2,13 +2,13 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Tab 3</ion-title>
+        <ion-title>Animation examples</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">Tab 3</ion-title>
+          <ion-title size="large">Animation examples</ion-title>
         </ion-toolbar>
       </ion-header>
 

From 6b277f5244e6e14b539bb8df8dc1bc8c69a15f8a Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 31 Aug 2022 22:30:11 +0800
Subject: [PATCH 3/3] clean up tab2

---
 playground/pages/tabs/tab2.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/playground/pages/tabs/tab2.vue b/playground/pages/tabs/tab2.vue
index 8b5e2cbb..3f1e3b04 100644
--- a/playground/pages/tabs/tab2.vue
+++ b/playground/pages/tabs/tab2.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { actionSheetController } from '@ionic/vue'
-import { camera, trash, close } from 'ionicons/icons'
+import { UserPhoto } from '@/composables/usePhotoGallery'
 const { photos, takePhoto, deletePhoto } = usePhotoGallery()
 
 const showActionSheet = async (photo: UserPhoto) => {
@@ -10,14 +10,14 @@ const showActionSheet = async (photo: UserPhoto) => {
       {
         text: 'Delete',
         role: 'destructive',
-        icon: trash,
+        icon: ioniconsTrash,
         handler: () => {
           deletePhoto(photo)
         },
       },
       {
         text: 'Cancel',
-        icon: close,
+        icon: ioniconsClose,
         role: 'cancel',
         handler: () => {
           // Nothing to do, action sheet is automatically closed
@@ -44,18 +44,15 @@ const showActionSheet = async (photo: UserPhoto) => {
       </ion-header>
       <ion-grid>
         <ion-row>
-          <ion-col size="6" :key="photo" v-for="photo in photos">
-            <ion-img
-              :src="photo.webviewPath"
-              @click="showActionSheet(photo)"
-            ></ion-img>
+          <ion-col size="6" :key="photo.filepath" v-for="photo in photos">
+            <ion-img :src="photo.webviewPath" @click="showActionSheet(photo)"></ion-img>
           </ion-col>
         </ion-row>
       </ion-grid>
 
       <ion-fab vertical="bottom" horizontal="center" slot="fixed">
         <ion-fab-button @click="takePhoto()">
-          <ion-icon :icon="camera"></ion-icon>
+          <ion-icon :icon="ioniconsCamera"></ion-icon>
         </ion-fab-button>
       </ion-fab>
     </ion-content>