From c471b7993f2c0af87b48ee22aa5d7b9bd8c6190c Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Tue, 7 Apr 2026 12:05:57 +0200
Subject: [PATCH] fix : add missing UI components, maintenance page, fix
 useRoute warning

- components/ui/SidebarLink.vue and AppTopNav.vue
- infra/prod/maintenance.html
- Remove useRoute() call in useApi onResponseError (fixes middleware warning)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/components/ui/AppTopNav.vue   | 48 ++++++++++++++++++++++++
 frontend/components/ui/SidebarLink.vue | 52 ++++++++++++++++++++++++++
 frontend/composables/useApi.ts         |  5 +--
 infra/prod/maintenance.html            | 49 ++++++++++++++++++++++++
 4 files changed, 150 insertions(+), 4 deletions(-)
 create mode 100644 frontend/components/ui/AppTopNav.vue
 create mode 100644 frontend/components/ui/SidebarLink.vue
 create mode 100644 infra/prod/maintenance.html

diff --git a/frontend/components/ui/AppTopNav.vue b/frontend/components/ui/AppTopNav.vue
new file mode 100644
index 0000000..e6b914d
--- /dev/null
+++ b/frontend/components/ui/AppTopNav.vue
@@ -0,0 +1,48 @@
+<template>
+    <header class="border-b border-neutral-200 bg-primary-500 px-3 py-2 text-white sm:px-5 sm:py-2 max-h-[60px]">
+        <div class="flex h-full items-center justify-between">
+            <MalioButtonIcon
+                icon="mdi:menu"
+                aria-label="Menu"
+                variant="ghost"
+                icon-size="24"
+                button-class="lg:hidden text-white hover:bg-primary-600"
+                @click="ui.openMobileSidebar()"
+            />
+            <div class="hidden items-center gap-2 lg:flex">
+                <h1 class="text-lg font-bold tracking-tight">Coltura</h1>
+            </div>
+            <div class="ml-auto flex items-center gap-4 text-xl text-white sm:gap-8">
+                <div class="group relative flex gap-2 sm:gap-4">
+                    <Icon name="mdi:account-circle-outline" class="self-center cursor-pointer" size="36" />
+                    <p class="hidden self-center cursor-pointer sm:block">{{ user?.username }}</p>
+                    <div class="invisible absolute right-0 top-full z-50 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
+                        <button
+                            type="button"
+                            class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
+                            @click="handleLogout"
+                        >
+                            Deconnexion
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+</template>
+
+<script setup lang="ts">
+import type { UserData } from '~/services/dto/user-data'
+
+defineProps<{
+    user?: UserData | null
+}>()
+
+const auth = useAuthStore()
+const ui = useUiStore()
+
+async function handleLogout() {
+    await auth.logout()
+    await navigateTo('/login')
+}
+</script>
diff --git a/frontend/components/ui/SidebarLink.vue b/frontend/components/ui/SidebarLink.vue
new file mode 100644
index 0000000..f008b77
--- /dev/null
+++ b/frontend/components/ui/SidebarLink.vue
@@ -0,0 +1,52 @@
+<template>
+    <NuxtLink
+        :to="to"
+        class="group/link relative flex items-center transition-colors hover:text-primary-500"
+        :class="linkClasses"
+        :active-class="exact ? '' : activeClass"
+        :exact-active-class="exact ? activeClass : ''"
+    >
+        <Icon :name="icon" :size="sub ? '20' : '24'" class="flex-shrink-0" />
+        <span
+            v-if="!collapsed"
+            class="self-baseline whitespace-nowrap overflow-hidden transition-opacity duration-300"
+            :class="sub ? 'text-sm' : 'text-md'"
+        >
+            {{ label }}
+        </span>
+        <div
+            v-if="collapsed"
+            class="pointer-events-none absolute left-full z-50 ml-2 rounded-md bg-neutral-800 px-2 py-1 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/link:pointer-events-auto group-hover/link:opacity-100 whitespace-nowrap"
+        >
+            {{ label }}
+        </div>
+    </NuxtLink>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    to: string
+    icon: string
+    label: string
+    collapsed: boolean
+    sub?: boolean
+    exact?: boolean
+}>()
+
+const activeClass = computed(() => {
+    if (props.collapsed) {
+        return '!text-primary-500 bg-primary-500/10'
+    }
+    return '!text-primary-500 bg-tertiary-500'
+})
+
+const linkClasses = computed(() => {
+    if (props.collapsed) {
+        return 'justify-center w-10 h-10 mx-auto my-1 p-2 rounded-lg text-neutral-600 hover:text-primary-500 hover:bg-primary-500/10'
+    }
+    if (props.sub) {
+        return 'gap-3 px-4 py-2 pl-12 text-sm font-semibold text-neutral-700'
+    }
+    return 'gap-3 px-4 py-3 text-md font-semibold text-neutral-700'
+})
+</script>
diff --git a/frontend/composables/useApi.ts b/frontend/composables/useApi.ts
index 212fe53..cc977dd 100644
--- a/frontend/composables/useApi.ts
+++ b/frontend/composables/useApi.ts
@@ -126,10 +126,7 @@ export function useApi(): ApiClient {
           if (!isHandlingUnauthorized) {
             isHandlingUnauthorized = true
             auth.clearSession()
-            const route = useRoute()
-            if (route.path !== '/login') {
-              await navigateTo('/login')
-            }
+            await navigateTo('/login')
             isHandlingUnauthorized = false
           }
         }
diff --git a/infra/prod/maintenance.html b/infra/prod/maintenance.html
new file mode 100644
index 0000000..648b6f1
--- /dev/null
+++ b/infra/prod/maintenance.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Maintenance en cours</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background-color: #f3f4f6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            margin: 0;
+        }
+        .container {
+            background: #fff;
+            border-radius: 12px;
+            box-shadow: 0 4px 24px rgba(0,0,0,0.10);
+            padding: 48px 40px;
+            max-width: 480px;
+            text-align: center;
+        }
+        .icon {
+            font-size: 48px;
+            margin-bottom: 16px;
+        }
+        h1 {
+            font-size: 24px;
+            color: #111827;
+            margin: 0 0 12px;
+        }
+        p {
+            font-size: 16px;
+            color: #6b7280;
+            margin: 0;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="icon">&#128736;</div>
+        <h1>Maintenance en cours</h1>
+        <p>L'application est temporairement indisponible pour mise a jour. Elle sera de retour dans quelques instants.</p>
+    </div>
+</body>
+</html>