feat : add project archiving feature

Allow projects to be archived/unarchived from the ProjectDrawer, with a
toggle filter on the projects page to show/hide archived projects.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/pages/projects/index.vue

@@ -2,12 +2,24 @@
     <div>
         <div class="flex items-center justify-between">
             <h1 class="text-2xl font-bold text-primary-500">Projets</h1>
-            <button
-                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
-                @click="openCreate"
-            >
-                + Ajouter un projet
-            </button>
+            <div class="flex items-center gap-3">
+                <button
+                    class="flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition"
+                    :class="showArchived
+                        ? 'bg-amber-100 text-amber-700 hover:bg-amber-200'
+                        : 'text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700'"
+                    @click="toggleArchived"
+                >
+                    <Icon :name="showArchived ? 'mdi:archive-arrow-up-outline' : 'mdi:archive-outline'" size="18" />
+                    {{ showArchived ? $t('projects.hideArchived') : $t('projects.showArchived') }}
+                </button>
+                <button
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                    @click="openCreate"
+                >
+                    + Ajouter un projet
+                </button>
+            </div>
         </div>
 
         <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
@@ -15,11 +27,18 @@
                 v-for="project in projects"
                 :key="project.id"
                 class="cursor-pointer rounded-[6px] border border-neutral-200 bg-tertiary-500 p-4 shadow-sm transition hover:shadow-md"
+                :class="{ 'opacity-60': project.archived }"
                 @click="navigateTo(`/projects/${project.id}`)"
             >
                 <div class="flex items-center justify-between">
                     <div class="flex items-center gap-3">
                         <h3 class="text-md font-bold" :style="{ color: project.color }">{{ project.name }}</h3>
+                        <span
+                            v-if="project.archived"
+                            class="rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700"
+                        >
+                            Archivé
+                        </span>
                     </div>
                     <button
                         class="p-1 text-neutral-400 hover:text-primary-500"
@@ -37,7 +56,7 @@
                 v-if="projects.length === 0 && !isLoading"
                 class="col-span-full py-12 text-center text-neutral-400"
             >
-                Aucun projet trouvé.
+                {{ showArchived ? 'Aucun projet archivé.' : 'Aucun projet trouvé.' }}
             </div>
         </div>
 
@@ -66,12 +85,13 @@ const clients = ref<Client[]>([])
 const isLoading = ref(true)
 const drawerOpen = ref(false)
 const selectedProject = ref<Project | null>(null)
+const showArchived = ref(false)
 
 async function loadData() {
     isLoading.value = true
     try {
         const [p, c] = await Promise.all([
-            projectService.getAll(),
+            projectService.getAll({ archived: showArchived.value }),
             clientService.getAll(),
         ])
         projects.value = p
@@ -81,6 +101,11 @@ async function loadData() {
     }
 }
 
+function toggleArchived() {
+    showArchived.value = !showArchived.value
+    loadData()
+}
+
 function openCreate() {
     selectedProject.value = null
     drawerOpen.value = true