Update list display layout and responsiveness

Add @vueuse/core dependency
Add default avatar for users without profile image
2025-08-31 18:12:34 +02:00 · 2025-08-31 18:12:19 +02:00 · 2025-08-16 15:58:10 +02:00 · 2025-08-16 15:07:09 +02:00 · 2025-08-16 12:56:58 +02:00 · 2025-08-16 12:00:33 +02:00
9 changed files with 442 additions and 201 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,18 +1,25 @@
 <template>
-<v-app>
-    <NavBar />
+    <v-app>
+        <NavBar />

-    <!-- Main content of the application -->
-    <v-main>
-        <NuxtPage />
+        <!-- Main content of the application -->
+        <v-main :theme="$vuetify.theme.current.dark ? 'dark' : 'light'">
+            <NuxtPage />
+        </v-main>

-    </v-main>
-
-    <AppFooter />
-
-</v-app>
+        <AppFooter />
+    </v-app>
 </template>

-<script>
+<script setup>
+import { onMounted } from "vue";
+import { useTheme } from "vuetify";

+const theme = useTheme();
+
+onMounted(() => {
+    console.log(theme.name);
+});
 </script>
+
+<style></style>
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -4,7 +4,7 @@
        app
        color="secondary"
        height="30"
-        v-if="status === 'authenticated'"
+        v-if="status !== 'unauthenticated'"
    >
        <v-container class="text-caption text-center">
            © {{ new Date().getFullYear() }} SharedLists - All Rights Reserved
--- a/app/components/NavBar.vue
+++ b/app/components/NavBar.vue
@@ -1,16 +1,27 @@
 <template>
    <!-- Toolbar at the top of the screen -->
    <v-app-bar
-        color="rgba(27, 94, 32, 0.8)"
+        app
+        color="primary-darken-1"
+        class="text-white"
        height="48"
-        v-if="status === 'authenticated'"
+        v-if="status !== 'unauthenticated'"
    >
        <!-- Title of the application with adjusted margin and font size -->
        <v-app-bar-title class="text-h6 ms-3 text-white">
-            <v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
+            <v-icon
+                color="info"
+                icon="mdi-apps"
+                @click="drawer = !drawer"
+            ></v-icon>

-            <span class="ms-1 text-white"
-                >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>

@@ -18,24 +29,39 @@
        <v-spacer />

        <!-- Menu icons on the right side of the toolbar -->
+        <template v-slot:append>
+            <v-btn
+                color="info"
+                @click="theme.toggle()"
+                text="Light / Dark"
+            ></v-btn>
+            <v-btn icon="mdi-logout" color="warning" @click="logout"> </v-btn>
+        </template>
    </v-app-bar>

    <v-navigation-drawer v-model="drawer" temporary>
        <v-list-item
-            :prepend-avatar="data && data.image ? data.image : ''"
+            class="ma-4 ml-8"
+            :prepend-avatar="
+                data && data.image
+                    ? data.image
+                    : 'https://cdn.vuetifyjs.com/images/logos/v-alt.svg'
+            "
            :title="data && data.name ? data.name : ''"
        ></v-list-item>

        <v-divider></v-divider>

-        <v-list density="compact" nav>
+        <v-list density="compact" nav active-class="bg-active">
            <v-list-item
+                :active="$route.name === 'index'"
                prepend-icon="mdi-home"
                title="Home"
                value="home"
                @click="navigateTo('/')"
            ></v-list-item>
            <v-list-item
+                :active="$route.name === 'profile'"
                prepend-icon="mdi-account"
                title="Profile"
                value="profile"
@@ -47,8 +73,23 @@

 <script setup>
 import { ref, capitalize } from "vue";
+import { useSystemStore } from "~/stores/system";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
 const drawer = ref(false);
-const { data, status } = useAuth();
+const { data, status, signOut } = useAuth();
+const systemStore = useSystemStore();
+
+const logout = async () => {
+    await systemStore.deleteCookies();
+    await signOut({ callbackUrl: "/login" });
+};
 </script>

-<style></style>
+<style>
+.bg-active {
+    background-color: grey;
+    color: white !important;
+}
+</style>
--- a/app/pages/Login.vue
+++ b/app/pages/Login.vue
@@ -123,11 +123,16 @@ const passwordRules = [
        "La contraseña debe tener al menos 5 caracteres",
 ];

+// TODO - cuando hace login cambiar el último login del usuario
 const login = async () => {
-    await signIn(
-        { username: "admin", password: "admin" },
-        { callbackUrl: "/" },
-    );
+    try {
+        await signIn(
+            { username: "joseko", password: "kpdrlp00" },
+            { callbackUrl: "/" },
+        );
+    } catch (error) {
+        alert("Ha ocurrido un error. Comprueba tus credenciales");
+    }
 };
 </script>

--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,12 +1,58 @@
 <template>
    <v-container
-        class="fill-height d-flex flex-column align-center justify-center text-center"
+        class="d-flex flex-column align-center justify-center text-center"
    >
-        <div class="mt-3">My Application's Home Page</div>
-        <div>
-            {{ listasStore.listas }}
-            {{ data }}
-        </div>
+        <div class="mt-3">Listas</div>
+        <v-card
+            class="ma-5 mx-auto"
+            v-if="listasStore.listas.length > 0"
+            max-width="100%"
+            width="1000%"
+        >
+            <v-list-item
+                class="text-black ma-10 pa-5 rounded-lg full-height flex-column"
+                :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-if="width > 600">
+                    <div class="d-flex flex-column full-height">
+                        <small class="ml-2 text-red">{{ lista.owner }}</small>
+                        <template v-if="lista.sharedListas.length > 0">
+                            <small
+                                v-for="shared in lista.sharedListas"
+                                :key="shared"
+                                class="ml-2 text-orange-darken-3"
+                                >{{ shared }}</small
+                            ></template
+                        >
+                    </div>
+                </template>
+
+                <!-- TODO template número de compartidos -->
+
+                <template v-slot:append>
+                    <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></div>
    </v-container>
 </template>

@@ -14,14 +60,18 @@
 definePageMeta({
    auth: true,
 });
+import { useWindowSize } from "@vueuse/core";
 const { data } = useAuth();
 import { ref, onMounted } from "vue";
 import { useSystemStore } from "~/stores/system";
 import { useListasStore } from "~/stores/listas";
+
 const listasStore = useListasStore();
 const systemStore = useSystemStore();
+const { width, height } = useWindowSize();

 onMounted(async () => {
    await listasStore.getData();
+    console.log(listasStore.listas);
 });
 </script>
--- a/app/pages/profile.vue
+++ b/app/pages/profile.vue
@@ -1,5 +1,6 @@
 <template>
    <v-container
+        v-if="data"
        class="fill-height d-flex align-center justify-center text-center"
    >
        <div class="full-height flex-column mr-5">
@@ -8,19 +9,21 @@
                    :width="200"
                    aspect-ratio="16/9"
                    cover
-                    :src="imagenVista"
+                    :src="data.image"
                    :alt="data.name"
                ></v-img>
            </v-avatar>

            <v-file-input
                accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp"
-                label="File input"
+                label="Subir imagen"
                @input="handleFileInput"
                type="file"
                v-model="imagen"
+                click:clear="limpiar_input"
+                clearable
            /><v-btn
-                color="primary"
+                color="secundary"
                :disabled="files.length <= 0 || !validateFileType()"
                @click="uploadImage"
            >
@@ -29,11 +32,13 @@
        </div>
        <div class="full-height flex-column">
            <h3>Último login:</h3>
-            <p>{{ data?.last_login ? data.last_login : "Nunca" }}</p>
+            <p>{{ data.last_login ? data.last_login : "Nunca" }}</p>
            <h3>Username:</h3>
            <p>{{ data.username }}</p>
            <h3>Nombre:</h3>
-            <p>{{ data.name }} {{ data.last_name }}</p>
+            <p>{{ data.name }}</p>
+            <h3>Apellidos:</h3>
+            <p>{{ data.last_name }}</p>
            <h3>Correo:</h3>
            <p>{{ data.email }}</p>
            <h3>Listas:</h3>
@@ -51,7 +56,7 @@
 definePageMeta({
    auth: true,
 });
-const { data, token } = useAuth();
+const { data, token, getSession } = useAuth();
 import { ref, onMounted } from "vue";
 import { useSystemStore } from "~/stores/system";
 import { useListasStore } from "~/stores/listas";
@@ -59,7 +64,6 @@ const listasStore = useListasStore();
 const systemStore = useSystemStore();
 const { handleFileInput, files } = useFileStorage();
 let imagen = ref([]);
-let imagenVista = ref("");

 const uploadImage = async () => {
    const url = "http://" + systemStore.url_backend + "/auth/users/me/";
@@ -71,39 +75,43 @@ const uploadImage = async () => {
    formData.append("last_name", data.value.last_name);
    formData.append("image", imagen.value ? imagen.value : null);

-    await $fetch(url, {
+    const response = await $fetch(url, {
        headers: {
            Authorization: `${token.value}`,
        },
        method: "PUT",
        body: formData,
-    })
-        .then((response) => {
-            imagenVista.value = response.image;
-            files.value.pop();
+    });
+    if (response) {
+        //imagenVista.value = response.image;
+        files.value.pop();
+        if (imagen.value != null) {
            imagen.value = null;
-        })
-        .catch((e) => {
-            console.error(e);
-        });
+        }
+        await getSession();
+    } else {
+        console.error(response);
+    }
 };

 const validateFileType = () => {
-    var fileName = imagen.value.name;
-    var idxDot = fileName.lastIndexOf(".") + 1;
-    var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
-    if (
-        extFile == "jpg" ||
-        extFile == "jpeg" ||
-        extFile == "png" ||
-        extFile == "gif"
-    ) {
-        return true;
-    } else {
-        alert("Only jpg, jpeg, png and gif files are allowed!");
-        files.value.pop();
-        imagen.value = null;
-        return false;
+    if (imagen.value != null) {
+        var fileName = imagen.value.name;
+        var idxDot = fileName.lastIndexOf(".") + 1;
+        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
+        if (
+            extFile == "jpg" ||
+            extFile == "jpeg" ||
+            extFile == "png" ||
+            extFile == "gif"
+        ) {
+            return true;
+        } else {
+            alert("Only jpg, jpeg, png and gif files are allowed!");
+            files.value.pop();
+            imagen.value = null;
+            return false;
+        }
    }
 };

@@ -115,12 +123,12 @@ const openImageDialog = () => {
    // TODO Implement image dialog logic
 };

+const limpiar_input = () => {
+    imagen.value = null;
+    files.value.pop();
+};
+
 onMounted(async () => {
    await listasStore.getData();
-    if (data) {
-        console.log(data.value.image);
-
-        imagenVista.value = data.value.image;
-    }
 });
 </script>
--- a/app/plugins/vuetify.js
+++ b/app/plugins/vuetify.js
@@ -1,7 +1,149 @@
 import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+
+const lightTheme = {
+  dark: false,
+  colors: {
+    background: "#F8FAF7",
+    surface: "#FFFFFF",
+    primary: "#88D8B0",
+    "primary-darken-1": "#6BC49A",
+    secondary: "#C8E6C9",
+    "secondary-darken-1": "#A5D6A7",
+    accent: "#D4EDDA",
+    error: "#FF9A8B",
+    info: "#B3E0FF",
+    success: "#A5D6A7",
+    warning: "#FFE0B2",
+    "on-primary": "#2E3A32",
+    "on-surface": "#2E3A32",
+  },
+  variables: {
+    "border-color": "#E0E0E0",
+    "border-opacity": 0.12,
+  },
+};
+
+const darkTheme = {
+  dark: true,
+  colors: {
+    background: "#121F17",
+    surface: "#1E2922",
+    primary: "#4A7856",
+    "primary-darken-1": "#3A6A46",
+    secondary: "#3D5A45",
+    "secondary-darken-1": "#2D4A35",
+    accent: "#5D8C6C",
+    error: "#D32F2F",
+    info: "#2196F3",
+    success: "#4CAF50",
+    warning: "#FFA000",
+    "on-primary": "#E8F5E9",
+    "on-surface": "#E0E0E0",
+  },
+  variables: {
+    "border-color": "#37474F",
+    "border-opacity": 0.24,
+  },
+};
+
+const minimalLightTheme = {
+  dark: false,
+  colors: {
+    background: "#FFFFFF",
+    surface: "#F5F5F5",
+    primary: "#7C90DB", // Azul suave
+    "primary-darken-1": "#6A7EC9",
+    secondary: "#E0E0E0", // Gris neutro
+    "secondary-darken-1": "#C7C7C7",
+    accent: "#A5C4D4", // Azul pastel
+    error: "#FF6B6B", // Rojo coral suave
+    info: "#88C9F2",
+    success: "#77DD77", // Verde menta
+    warning: "#FFD166", // Amarillo pastel
+    "on-primary": "#2D3748", // Gris oscuro
+    "on-surface": "#2D3748",
+  },
+  variables: {
+    "border-color": "#E2E8F0",
+    "border-opacity": 0.16,
+  },
+};
+
+const minimalDarkTheme = {
+  dark: true,
+  colors: {
+    background: "#1E2B3A",
+    surface: "#2C3E50",
+    primary: "#8A9EFF", // Azul lavanda (inalterado)
+    "primary-darken-1": "#778CEB",
+    secondary: "#4A5568", // Gris azulado (reemplaza grises neutros)
+    "secondary-darken-1": "#3C4758",
+    accent: "#A7BED3", // Azul polvo (inalterado)
+    error: "#FF8A8A",
+    info: "#90CAF9",
+    success: "#81C784",
+    warning: "#FFD54F",
+    "on-primary": "#F7FAFC", // Blanco casi puro (mejor contraste)
+    "on-surface": "#E2E8F0", // Gris claro azulado
+  },
+  variables: {
+    "border-color": "#4A5568", // Coordinado con secondary
+    "border-opacity": 0.3,
+  },
+};
+
+const softDarkTheme = {
+  dark: true,
+  colors: {
+    background: "#2C3E50", // Gris-azul medio (como cielo nocturno)
+    surface: "#34495E", // 15% más claro que el fondo
+    primary: "#7F9CF5", // Azul lavanda más claro
+    "primary-darken-1": "#6B8BEA",
+    secondary: "#4B5563", // Gris neutro cálido
+    "secondary-darken-1": "#3E4A5A",
+    accent: "#94A3B8", // Gris-azul claro (para detalles)
+    error: "#FCA5A5", // Rojo suave
+    info: "#93C5FD", // Azul cielo
+    success: "#86EFAC", // Verde menta claro
+    warning: "#FCD34D", // Amarillo miel
+    "on-primary": "#F8FAFC", // Blanco niebla
+    "on-surface": "#E5E7EB", // Gris muy claro
+  },
+  variables: {
+    "border-color": "#475569", // Borde sutil
+    "border-opacity": 0.25,
+  },
+};

 export default defineNuxtPlugin((nuxtApp) => {
-  const vuetify = createVuetify({ components });
+  const vuetify = createVuetify({
+    components,
+    directives,
+    theme: {
+      defaultTheme: "light",
+      themes: {
+        light: minimalLightTheme,
+        dark: softDarkTheme,
+      },
+      variations: {
+        colors: ["primary", "secondary"],
+        lighten: 2,
+        darken: 2,
+      },
+    },
+    defaults: {
+      VBtn: {
+        color: "primary",
+        variant: "flat",
+      },
+      VCard: {
+        elevation: 1,
+        rounded: "lg",
+      },
+    },
+  });
+
  nuxtApp.vueApp.use(vuetify);
 });
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
      "dependencies": {
        "@mdi/font": "^7.4.47",
        "@pinia/nuxt": "^0.11.2",
-        "@sidebase/nuxt-auth": "^0.6.7",
+        "@sidebase/nuxt-auth": "^1.0.1",
+        "@vueuse/core": "^13.8.0",
        "nuxt": "^4.0.1",
        "pinia": "^3.0.3",
        "vue": "^3.5.18",
@@ -1706,9 +1707,9 @@
      }
    },
    "node_modules/@next/env": {
-      "version": "15.4.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.4.6.tgz",
-      "integrity": "sha512-yHDKVTcHrZy/8TWhj0B23ylKv5ypocuCwey9ZqPyv4rPdUdRzpGCkSi03t04KBPyU96kxVtUqx6O3nE1kpxASQ==",
+      "version": "13.5.11",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.11.tgz",
+      "integrity": "sha512-fbb2C7HChgM7CemdCY+y3N1n8pcTKdqtQLbC7/EQtPdLvlMUT9JX/dBYl8MMZAtYG4uVMyPFHXckb68q/NRwqg==",
      "license": "MIT",
      "peer": true
    },
@@ -3729,22 +3730,26 @@
      ]
    },
    "node_modules/@sidebase/nuxt-auth": {
-      "version": "0.6.7",
-      "resolved": "https://registry.npmjs.org/@sidebase/nuxt-auth/-/nuxt-auth-0.6.7.tgz",
-      "integrity": "sha512-cfCRL0LTtv2Ih8VQSkyLyuYAJwNxYXT7ocAXRF9Ys0Lru0XtCl8gbtZMkbjk4iPDlCJv8QIqXCUM0t5TRUcytA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@sidebase/nuxt-auth/-/nuxt-auth-1.0.1.tgz",
+      "integrity": "sha512-mQ40v2VULxhvjr/zif+zH4tuYCN8W6wANuQNxPmyyfQqQJRSmthg9WVLSVg/48wYvNJPEVpa4DudAeLu1ihmcg==",
      "license": "MIT",
      "dependencies": {
-        "@nuxt/kit": "^3.4.2",
-        "@vueuse/core": "^9.13.0",
-        "defu": "^6.1.2",
-        "h3": "^1.6.4",
-        "knitwork": "^1.0.0",
-        "nitropack": "^2.3.2",
+        "@nuxt/kit": "^3.17.6",
+        "defu": "^6.1.4",
+        "h3": "^1.15.3",
+        "knitwork": "^1.2.0",
+        "nitropack": "^2.11.13",
        "requrl": "^3.0.2",
-        "ufo": "^1.1.1"
+        "scule": "^1.3.0",
+        "ufo": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=20",
+        "pnpm": ">=9.4.0"
      },
      "peerDependencies": {
-        "next-auth": "^4.21.1"
+        "next-auth": "~4.21.1"
      }
    },
    "node_modules/@sidebase/nuxt-auth/node_modules/@nuxt/kit": {
@@ -3811,13 +3816,13 @@
      "license": "CC0-1.0"
    },
    "node_modules/@swc/helpers": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
-      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
      "license": "Apache-2.0",
      "peer": true,
      "dependencies": {
-        "tslib": "^2.8.0"
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@tybys/wasm-util": {
@@ -3871,9 +3876,9 @@
      "license": "MIT"
    },
    "node_modules/@types/web-bluetooth": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
      "license": "MIT"
    },
    "node_modules/@types/yauzl": {
@@ -4301,91 +4306,41 @@
      "license": "MIT"
    },
    "node_modules/@vueuse/core": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
-      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "version": "13.8.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.8.0.tgz",
+      "integrity": "sha512-rmBcgpEpxY0ZmyQQR94q1qkUcHREiLxQwNyWrtjMDipD0WTH/JBcAt0gdcn2PsH0SA76ec291cHFngmyaBhlxA==",
      "license": "MIT",
      "dependencies": {
-        "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.13.0",
-        "@vueuse/shared": "9.13.0",
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.8.0",
+        "@vueuse/shared": "13.8.0"
      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "vue": "^3.5.0"
      }
    },
    "node_modules/@vueuse/metadata": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
-      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "version": "13.8.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.8.0.tgz",
+      "integrity": "sha512-BYMp3Gp1kBUPv7AfQnJYP96mkX7g7cKdTIgwv/Jgd+pfQhz678naoZOAcknRtPLP4cFblDDW7rF4e3KFa+PfIA==",
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      }
    },
    "node_modules/@vueuse/shared": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
-      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "version": "13.8.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.8.0.tgz",
+      "integrity": "sha512-x4nfM0ykW+RmNJ4/1IzZsuLuWWrNTxlTWUiehTGI54wnOxIgI9EDdu/O5S77ac6hvQ3hk2KpOVFHaM0M796Kbw==",
      "license": "MIT",
-      "dependencies": {
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "vue": "^3.5.0"
      }
    },
    "node_modules/@whatwg-node/disposablestack": {
@@ -4891,6 +4846,18 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "peer": true,
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
    "node_modules/c12": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/c12/-/c12-3.2.0.tgz",
@@ -6793,6 +6760,13 @@
        "node": ">= 6"
      }
    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "license": "BSD-2-Clause",
+      "peer": true
+    },
    "node_modules/global-directory": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-4.0.1.tgz",
@@ -8112,69 +8086,63 @@
      }
    },
    "node_modules/next": {
-      "version": "15.4.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.4.6.tgz",
-      "integrity": "sha512-us++E/Q80/8+UekzB3SAGs71AlLDsadpFMXVNM/uQ0BMwsh9m3mr0UNQIfjKed8vpWXsASe+Qifrnu1oLIcKEQ==",
+      "version": "13.5.11",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.5.11.tgz",
+      "integrity": "sha512-WUPJ6WbAX9tdC86kGTu92qkrRdgRqVrY++nwM+shmWQwmyxt4zhZfR59moXSI4N8GDYCBY3lIAqhzjDd4rTC8Q==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
-        "@next/env": "15.4.6",
-        "@swc/helpers": "0.5.15",
-        "caniuse-lite": "^1.0.30001579",
+        "@next/env": "13.5.11",
+        "@swc/helpers": "0.5.2",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001406",
        "postcss": "8.4.31",
-        "styled-jsx": "5.1.6"
+        "styled-jsx": "5.1.1",
+        "watchpack": "2.4.0"
      },
      "bin": {
        "next": "dist/bin/next"
      },
      "engines": {
-        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+        "node": ">=16.14.0"
      },
      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.4.6",
-        "@next/swc-darwin-x64": "15.4.6",
-        "@next/swc-linux-arm64-gnu": "15.4.6",
-        "@next/swc-linux-arm64-musl": "15.4.6",
-        "@next/swc-linux-x64-gnu": "15.4.6",
-        "@next/swc-linux-x64-musl": "15.4.6",
-        "@next/swc-win32-arm64-msvc": "15.4.6",
-        "@next/swc-win32-x64-msvc": "15.4.6",
-        "sharp": "^0.34.3"
+        "@next/swc-darwin-arm64": "13.5.9",
+        "@next/swc-darwin-x64": "13.5.9",
+        "@next/swc-linux-arm64-gnu": "13.5.9",
+        "@next/swc-linux-arm64-musl": "13.5.9",
+        "@next/swc-linux-x64-gnu": "13.5.9",
+        "@next/swc-linux-x64-musl": "13.5.9",
+        "@next/swc-win32-arm64-msvc": "13.5.9",
+        "@next/swc-win32-ia32-msvc": "13.5.9",
+        "@next/swc-win32-x64-msvc": "13.5.9"
      },
      "peerDependencies": {
        "@opentelemetry/api": "^1.1.0",
-        "@playwright/test": "^1.51.1",
-        "babel-plugin-react-compiler": "*",
-        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
-        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
        "sass": "^1.3.0"
      },
      "peerDependenciesMeta": {
        "@opentelemetry/api": {
          "optional": true
        },
-        "@playwright/test": {
-          "optional": true
-        },
-        "babel-plugin-react-compiler": {
-          "optional": true
-        },
        "sass": {
          "optional": true
        }
      }
    },
    "node_modules/next-auth": {
-      "version": "4.24.11",
-      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.11.tgz",
-      "integrity": "sha512-pCFXzIDQX7xmHFs4KVH4luCjaCbuPRtZ9oBUjUhOk84mZ9WVPf94n87TxYI4rSRf9HmfHEF8Yep3JrYDVOo3Cw==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.21.1.tgz",
+      "integrity": "sha512-NYkU4jAPSVxWhCblE8dDFAnKM7kOoO/QEobQ0RoEVP9Wox99A3PKHwOAsWhSg8ahJG/iKIWk2Bo1xHvsS4R39Q==",
      "license": "ISC",
      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@panva/hkdf": "^1.0.2",
-        "cookie": "^0.7.0",
-        "jose": "^4.15.5",
+        "cookie": "^0.5.0",
+        "jose": "^4.11.4",
        "oauth": "^0.9.15",
        "openid-client": "^5.4.0",
        "preact": "^10.6.3",
@@ -8182,25 +8150,21 @@
        "uuid": "^8.3.2"
      },
      "peerDependencies": {
-        "@auth/core": "0.34.2",
-        "next": "^12.2.5 || ^13 || ^14 || ^15",
+        "next": "^12.2.5 || ^13",
        "nodemailer": "^6.6.5",
-        "react": "^17.0.2 || ^18 || ^19",
-        "react-dom": "^17.0.2 || ^18 || ^19"
+        "react": "^17.0.2 || ^18",
+        "react-dom": "^17.0.2 || ^18"
      },
      "peerDependenciesMeta": {
-        "@auth/core": {
-          "optional": true
-        },
        "nodemailer": {
          "optional": true
        }
      }
    },
    "node_modules/next-auth/node_modules/cookie": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
-      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
      "license": "MIT",
      "peer": true,
      "engines": {
@@ -10732,6 +10696,15 @@
      "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==",
      "license": "MIT"
    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "peer": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/streamx": {
      "version": "2.22.1",
      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.1.tgz",
@@ -10887,9 +10860,9 @@
      "license": "ISC"
    },
    "node_modules/styled-jsx": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
-      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -10899,7 +10872,7 @@
        "node": ">= 12.0.0"
      },
      "peerDependencies": {
-        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
      },
      "peerDependenciesMeta": {
        "@babel/core": {
@@ -12068,6 +12041,20 @@
        }
      }
    },
+    "node_modules/watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/web-streams-polyfill": {
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
  "dependencies": {
    "@mdi/font": "^7.4.47",
    "@pinia/nuxt": "^0.11.2",
-    "@sidebase/nuxt-auth": "^0.6.7",
+    "@sidebase/nuxt-auth": "^1.0.1",
+    "@vueuse/core": "^13.8.0",
    "nuxt": "^4.0.1",
    "pinia": "^3.0.3",
    "vue": "^3.5.18",
Author	SHA1	Message	Date
clonbg	90bf54e991	Update list display layout and responsiveness	2025-08-31 18:12:34 +02:00
clonbg	6885df22e8	Add @vueuse/core dependency	2025-08-31 18:12:19 +02:00
clonbg	84e1ca555c	Add default avatar for users without profile image	2025-08-16 15:58:10 +02:00
clonbg	0fc0aa95d3	Add error handling to login and improve user profile The login changes add try/catch error handling with a user-friendly message, while the profile page now displays first and last names separately. Also includes a fix for optional chaining in index.vue.	2025-08-16 15:07:09 +02:00
clonbg	d65fe6e353	Fix image upload validation and clearing	2025-08-16 12:56:58 +02:00
clonbg	021bd8aae2	Enhance list items UI and progress display	2025-08-16 12:00:33 +02:00
clonbg	82fb58c785	Add user email and improve nav title formatting	2025-08-16 12:00:18 +02:00
clonbg	52cfe98a1b	Fix file input clear and improve upload handling The change adds image clearing functionality and improves input validation by adding null checks and clearable state to the file input component.	2025-08-15 11:32:42 +02:00
clonbg	36f8bac508	Update NavBar styling and theme controls	2025-08-15 11:32:31 +02:00
clonbg	a04a66a176	Add minimal and soft color themes	2025-08-15 11:32:21 +02:00
clonbg	6dc8f5c39e	Update list item color and background styles	2025-08-15 10:05:11 +02:00
clonbg	8b55efa318	Use theme prop instead of class for v-main background	2025-08-15 10:04:59 +02:00
clonbg	28beddb785	Add theme customization and component defaults	2025-08-15 10:04:45 +02:00
clonbg	2abfd38dd7	Add list view component to homepage	2025-08-14 16:37:52 +02:00
clonbg	1cdfafc90f	Add padding to navigation drawer profile item	2025-08-14 16:37:42 +02:00
clonbg	b3d4e4e565	Set Vuetify default theme to light mode	2025-08-14 15:27:58 +02:00
clonbg	c624b3ccf6	Change file input label to Spanish	2025-08-14 15:27:48 +02:00
clonbg	1ec98f2bf3	Sort imports and add spacing in index.vue	2025-08-14 15:27:30 +02:00
clonbg	f7715bb494	Add theme toggle button to navigation bar	2025-08-14 15:27:10 +02:00
clonbg	af91640c2b	Add theme-based background color to main content	2025-08-14 15:26:46 +02:00
clonbg	909d49a3e2	Add active state styling to navigation menu items	2025-08-14 12:59:16 +02:00
clonbg	c6790ed645	Upgrade @sidebase/nuxt-auth to v1.0.1	2025-08-14 12:59:02 +02:00
clonbg	78c4e2b46b	Add logout button and display header on loading state	2025-08-14 09:11:58 +02:00
clonbg	3b2198598e	Fix profile image handling and data flow The commit improves image handling by removing the separate imagenVista ref, using data.image directly, and properly refreshing session data after image upload. Also adds v-if guard for data availability.	2025-08-14 09:11:45 +02:00