al darle a la papelera entra

- enlaces azules
- botón de crear item y back
- nombre de la lista arriba
- nombre de la lista en el navbar

src/layouts/MainLayout.vue

@@ -9,7 +9,7 @@
               ? "Listas"
               : $router.currentRoute.value.path == "/perfil"
               ? "Perfil"
-              : "Otra ruta"
+              : lista.nombre
           }}
         </q-toolbar-title>
 
@@ -26,10 +26,18 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useListaStore } from "../stores/lista.js";
 import { useRouter } from "vue-router";
 
 const $router = useRouter();
 const listaStore = useListaStore();
+
+const lista = ref("");
+
+onMounted(async () => {
+  lista.value = await listaStore.pb
+    .collection("lista")
+    .getOne($router.currentRoute.value.params.id);
+});
 </script>

src/pages/ListasPage.vue

@@ -22,21 +22,20 @@
       v-for="lista in listas"
       :key="lista.id"
     >
-      <router-link :to="`/lista/${lista.id}`">
-        <p class="bg-cyan-7 q-pa-md text-weight-bold text-h6 rounded-borders">
-          {{ lista.nombre
-          }}<q-icon
-            class="float-right cursor-pointer q-mt-xs"
-            name="delete"
-            @click="eliminarLista(lista)"
-          />
-          <q-badge
-            color="cyan-5"
-            text-color="black"
-            :label="lista.items.length"
-            class="float-right q-ma-sm"
-          /></p
-      ></router-link>
+      <p class="bg-cyan-7 q-pa-md text-weight-bold text-h6 rounded-borders">
+        <router-link :to="`/lista/${lista.id}`">{{ lista.nombre }}</router-link
+        ><q-icon
+          class="float-right cursor-pointer q-mt-xs"
+          name="delete"
+          @click="eliminarLista(lista)"
+        />
+        <q-badge
+          color="cyan-5"
+          text-color="black"
+          :label="lista.items.length"
+          class="float-right q-ma-sm"
+        />
+      </p>
     </div>
   </div>
 </template>
@@ -122,3 +121,11 @@ onMounted(() => {
   listListas();
 });
 </script>
+<style scoped>
+a:link,
+a:visited,
+a:active {
+  text-decoration: none;
+  color: black;
+}
+</style>

src/pages/listas/indexPage.vue

@@ -1,6 +1,27 @@
 <template>
+  <div class="row">
+    <div class="col q-ma-md">
+      <q-btn
+        round
+        color="deep-orange"
+        icon="keyboard_return"
+        @click="$router.push('/')"
+      />
+    </div>
+    <div class="col-10">
+      <div
+        class="flex flex-center bg-teal-7 q-ma-md cursor-pointer rounded-borders"
+      >
+        <h3 style="font-weight: 615">
+          {{ lista?.nombre }}
+        </h3>
+      </div>
+    </div>
+  </div>
   <div v-for="item in items" :key="item.id">
-    <p class="bg-cyan-7 q-pa-md text-weight-bold text-h6 rounded-borders">
+    <p
+      class="bg-cyan-7 q-pa-md q-mx-md text-weight-bold text-h6 rounded-borders"
+    >
       {{ item.nombre }}
     </p>
   </div>
@@ -30,3 +51,11 @@ onMounted(async () => {
   );
 });
 </script>
+<style scoped>
+a:link,
+a:visited,
+a:active {
+  text-decoration: none;
+  color: gray;
+}
+</style>