From 021bd8aae2b75f8ab2316ce5679e9e58549b557b Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Sat, 16 Aug 2025 12:00:33 +0200
Subject: [PATCH] Enhance list items UI and progress display

---
 app/pages/index.vue | 42 +++++++++++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 3371af1..0294782 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -2,37 +2,49 @@
     <v-container
         class="fill-height d-flex flex-column align-center justify-center text-center"
     >
-        <div class="mt-3">My Application's Home Page</div>
+        <div class="mt-3">Listas</div>
         <v-card
-            class="mx-auto"
+            class="mx-auto ma-5"
             v-if="listasStore.listas.length > 0"
             min-width="50vw"
         >
             <v-list-item
-                class="text-black bg-primary"
+                class="text-black ma-10 pa-5 rounded-lg"
+                :class="
+                    lista.owner == data.email
+                        ? 'bg-green-lighten-2'
+                        : 'bg-green-darken-1'
+                "
                 v-for="lista in listasStore.listas"
                 :key="lista.id"
                 :subtitle="lista.descripcion"
                 :title="lista.name"
             >
                 <template v-slot:prepend>
-                    <v-avatar color="grey-lighten-1">
-                        <v-icon color="white">mdi-account</v-icon>
-                    </v-avatar>
+                    <div class="d-flex flex-column">
+                        <v-icon color="grey-lighten-2" class="mx-auto"
+                            >mdi-account</v-icon
+                        >
+                        <small class="ml-2">{{ lista.owner }}</small>
+                    </div>
                 </template>
 
                 <template v-slot:append>
-                    <v-btn
-                        color="grey-lighten-1"
-                        icon="mdi-information"
-                        variant="text"
-                    ></v-btn>
+                    <v-badge
+                        class="mr-3"
+                        location="top right"
+                        color="grey-lighten-2"
+                        :content="`${lista.countItems}/${lista.completedItems}`"
+                    >
+                        <v-btn
+                            color="black"
+                            icon="mdi-counter"
+                            variant="text"
+                        ></v-btn>
+                    </v-badge>
                 </template> </v-list-item
         ></v-card>
-        <div>
-            {{ listasStore.listas }}
-            {{ data }}
-        </div>
+        <div></div>
     </v-container>
 </template>