Enhance list items UI and progress display

app/components/NavBar.vue

@@ -15,8 +15,13 @@
                 @click="drawer = !drawer"
             ></v-icon>
 
-            <span class="ms-1 text-warning"
-                >Listas de Front - {{ capitalize($route.name) }}</span
+            <span class="ms-1 text-info"
+                >{{ data?.email ? data?.email : "" }} -
+                {{
+                    capitalize($route.name) == "Index"
+                        ? "Listas"
+                        : capitalize($route.name)
+                }}</span
             >
         </v-app-bar-title>
 

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>