feat: onglets Réglages & Aide + icône Gitea

Réglages : préférences (langue, notifications push + test), gestion complète des tokens d'accès (liste/création/révocation, garde anti lock-out sur le dernier token), URL Gitea configurable, infos serveur en lecture seule (port/bind/origines/VAPID + flags CLI). Aide : documentation bilingue EN/FR de toutes les fonctionnalités, avec recherche. Icône Gitea (lien externe) dans la nav (sidebar + MoreSheet mobile).

Backend : routes /api/v1/auth/tokens (GET/POST/DELETE) + tokenId dans /me ; routes/settings.ts (GET/PATCH, allow-list stricte gitea_url, aucun secret exposé, URL validée http/https anti-XSS) ; AuthService.listTokens/revokeToken (transaction). Front : NavItem gère les liens externes, nav primaire/secondaire, store settings, vues SettingsView/HelpView.

236 tests verts (+15 nouveaux : auth-tokens, settings-routes).

packages/web/src/components/layout/AppShell.vue

@@ -23,6 +23,7 @@ import { onMounted, onUnmounted } from 'vue';
 import { useSessionsStore } from '../../stores/sessions';
 import { useWorktreesStore } from '../../stores/worktrees';
 import { useGroupsStore } from '../../stores/groups';
+import { useSettingsStore } from '../../stores/settings';
 import AppSidebar from './AppSidebar.vue';
 import MobileTabBar from './MobileTabBar.vue';
 
@@ -31,11 +32,14 @@ defineProps<{ fullbleed?: boolean }>();
 const sessions = useSessionsStore();
 const worktrees = useWorktreesStore();
 const groups = useGroupsStore();
+const settings = useSettingsStore();
 
 onMounted(() => {
   void worktrees.fetchAll();
   void sessions.fetchSessions();
   void groups.fetchGroups();
+  void settings.fetch(); // alimente l'icône de nav Gitea et la vue Réglages
+
   worktrees.startRealtime();
   sessions.startRealtime();
   groups.startRealtime();

packages/web/src/components/layout/AppSidebar.vue

@@ -15,7 +15,7 @@
     </button>
     <nav class="flex flex-1 flex-col gap-1 px-2">
       <NavItem
-        v-for="item in items"
+        v-for="item in primary"
         :key="item.key"
         :to="item.to"
         :icon="item.icon"
@@ -25,6 +25,19 @@
         orientation="row"
       />
     </nav>
+    <nav class="flex flex-col gap-1 px-2 pb-1">
+      <NavItem
+        v-for="item in secondary"
+        :key="item.key"
+        :to="item.to"
+        :href="item.href"
+        :icon="item.icon"
+        :label="item.label"
+        :badge="item.badge"
+        :active="isActive(item.match)"
+        orientation="row"
+      />
+    </nav>
     <div class="border-t border-zinc-800/80 p-3">
       <AppShellFooter />
     </div>
@@ -40,6 +53,6 @@ import NavItem from './NavItem.vue';
 import AppShellFooter from './AppShellFooter.vue';
 
 const { t } = useI18n();
-const { items, isActive } = useNav();
+const { primary, secondary, isActive } = useNav();
 const palette = useCommandPalette();
 </script>

packages/web/src/components/layout/MobileTabBar.vue

@@ -4,7 +4,7 @@
     style="padding-bottom: env(safe-area-inset-bottom)"
   >
     <NavItem
-      v-for="item in items"
+      v-for="item in primary"
       :key="item.key"
       :to="item.to"
       :icon="item.icon"
@@ -17,24 +17,27 @@
     <button
       type="button"
       class="flex flex-1 flex-col items-center gap-0.5 py-2 text-zinc-500 transition-colors hover:text-zinc-300 focus-visible:outline-none"
+      :class="moreActive ? 'text-emerald-400' : ''"
       @click="showMore = true"
     >
-      <Settings :size="20" :stroke-width="1.75" />
-      <span class="text-[10px]">{{ t('nav.settings') }}</span>
+      <Menu :size="20" :stroke-width="1.75" />
+      <span class="text-[10px]">{{ t('nav.more') }}</span>
     </button>
     <MoreSheet v-if="showMore" @close="showMore = false" />
   </nav>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Settings } from '@lucide/vue';
+import { Menu } from '@lucide/vue';
 import { useNav } from '../../composables/useNav';
 import NavItem from './NavItem.vue';
 import MoreSheet from './MoreSheet.vue';
 
 const { t } = useI18n();
-const { items, isActive } = useNav();
+const { primary, secondary, isActive } = useNav();
 const showMore = ref(false);
+// « More » est actif quand la route courante appartient aux items secondaires (Réglages/Aide).
+const moreActive = computed(() => secondary.value.some((i) => isActive(i.match)));
 </script>

packages/web/src/components/layout/MoreSheet.vue

@@ -7,7 +7,22 @@
         style="padding-bottom: calc(1rem + env(safe-area-inset-bottom))"
       >
         <div class="mx-auto mb-3 h-1 w-10 rounded-full bg-zinc-700" />
-        <AppShellFooter />
+        <nav class="mb-3 flex flex-col gap-1">
+          <NavItem
+            v-for="item in secondary"
+            :key="item.key"
+            :to="item.to"
+            :href="item.href"
+            :icon="item.icon"
+            :label="item.label"
+            :active="isActive(item.match)"
+            orientation="row"
+            @click="emit('close')"
+          />
+        </nav>
+        <div class="border-t border-zinc-800/80 pt-3">
+          <AppShellFooter />
+        </div>
         <BaseButton class="mt-3 w-full" @click="emit('close')">{{ t('common.close') }}</BaseButton>
       </div>
     </div>
@@ -16,9 +31,12 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
+import { useNav } from '../../composables/useNav';
+import NavItem from './NavItem.vue';
 import AppShellFooter from './AppShellFooter.vue';
 import BaseButton from '../ui/BaseButton.vue';
 
 const { t } = useI18n();
+const { secondary, isActive } = useNav();
 const emit = defineEmits<{ close: [] }>();
 </script>

packages/web/src/components/layout/NavItem.vue

@@ -1,7 +1,12 @@
 <template>
-  <RouterLink
-    :to="to"
-    :aria-current="active ? 'page' : undefined"
+  <!-- RouterLink pour une route interne ; <a target=_blank> pour un lien externe (ex. Gitea). -->
+  <component
+    :is="href ? 'a' : RouterLink"
+    :to="href ? undefined : to"
+    :href="href"
+    :target="href ? '_blank' : undefined"
+    :rel="href ? 'noopener noreferrer' : undefined"
+    :aria-current="!href && active ? 'page' : undefined"
     :class="orientation === 'col' ? colClass : rowClass"
   >
     <span class="relative">
@@ -20,16 +25,19 @@
     >
       {{ badge }}
     </span>
-  </RouterLink>
+  </component>
 </template>
 
 <script setup lang="ts">
 import { computed, type Component } from 'vue';
-import type { RouteLocationRaw } from 'vue-router';
+import { RouterLink, type RouteLocationRaw } from 'vue-router';
 
 const props = withDefaults(
   defineProps<{
-    to: RouteLocationRaw;
+    // `| undefined` requis par exactOptionalPropertyTypes : les items de nav passent `to`/`href`
+    // potentiellement undefined (l'un ou l'autre selon route interne vs lien externe).
+    to?: RouteLocationRaw | undefined;
+    href?: string | undefined;
     icon: Component;
     label: string;
     badge?: number;

packages/web/src/components/settings/ServerRow.vue

@@ -0,0 +1,33 @@
+<template>
+  <!-- Ligne de config serveur en lecture seule : label + valeur (+ flag CLI) + copier. -->
+  <div class="flex flex-wrap items-center gap-x-3 gap-y-0.5 py-2">
+    <dt class="w-40 shrink-0 text-sm text-zinc-400">{{ label }}</dt>
+    <dd class="flex min-w-0 flex-1 items-center gap-2">
+      <span :class="['min-w-0 flex-1 break-all text-sm text-zinc-200', mono ? 'font-mono text-xs' : '']">{{ value }}</span>
+      <span v-if="flag" class="hidden shrink-0 font-mono text-[11px] text-zinc-600 sm:inline" :title="t('settings.flagHint', { flag })">{{ flag }}</span>
+      <BaseButton size="sm" variant="ghost" icon-only :icon="copied ? Check : Copy" :aria-label="t('settings.copy')" @click="copy" />
+    </dd>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Check, Copy } from '@lucide/vue';
+import BaseButton from '../ui/BaseButton.vue';
+
+const props = defineProps<{ label: string; value: string; flag?: string; mono?: boolean }>();
+const { t } = useI18n();
+
+const copied = ref(false);
+// Auto-contenu : on ne confirme (✓) qu'après la résolution réelle de l'écriture presse-papiers.
+async function copy(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(props.value);
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 1500);
+  } catch {
+    /* presse-papiers indisponible (http non sécurisé) : silencieux */
+  }
+}
+</script>

packages/web/src/components/ui/GiteaIcon.vue

@@ -0,0 +1,31 @@
+<template>
+  <!-- Lucide n'a pas d'icône Gitea : motif « tasse de thé fumante » (git + tea), trait cohérent
+       avec les icônes Lucide (currentColor, coins arrondis). stroke-width hérité via fallthrough. -->
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <!-- vapeur = mini-branche git -->
+    <path d="M9 5.5V4" />
+    <path d="M13 5.5V3" />
+    <circle cx="9" cy="3" r="0.6" fill="currentColor" stroke="none" />
+    <circle cx="13" cy="2.5" r="0.6" fill="currentColor" stroke="none" />
+    <!-- tasse -->
+    <path d="M4 8h12v4a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z" />
+    <!-- anse -->
+    <path d="M16 9h1.5a2.5 2.5 0 0 1 0 5H16" />
+    <!-- soucoupe -->
+    <path d="M5 20h10" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{ size?: number }>(), { size: 18 });
+</script>