feat: refonte UX du dashboard (coquille, tri/filtre/pagination, ⌘K, toasts)

Refonte front (packages/web) : coquille applicative partagée (sidebar desktop +
barre d'onglets mobile + PageHeader, langue/push/logout centralisés) pilotée par
route.meta.layout ; design system (BaseButton/BaseBadge/SegmentedControl/EmptyState/
SkeletonRow, anneau de focus, icônes @lucide/vue) ; tri/filtre/recherche/pagination
côté client via useListControls (+ synchro URL) sur sessions/worktrees/groupes ;
section « À traiter », palette de commandes ⌘K, toasts. Aucune modif serveur/protocole/DB.

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

@@ -0,0 +1,35 @@
+<template>
+  <span class="badge" :class="toneClass">
+    <span v-if="dot" class="inline-block h-1.5 w-1.5 rounded-full" :class="dotClass" />
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+// Pastille d'état : centralise les paires bg/text répétées (zinc/emerald/amber/sky/red).
+import { computed } from 'vue';
+
+type Tone = 'zinc' | 'emerald' | 'amber' | 'sky' | 'red';
+
+const props = withDefaults(defineProps<{ tone?: Tone; dot?: boolean; pulse?: boolean }>(), {
+  tone: 'zinc',
+});
+
+const TONES: Record<Tone, string> = {
+  zinc: 'bg-zinc-800 text-zinc-400',
+  emerald: 'bg-emerald-950 text-emerald-400',
+  amber: 'bg-amber-950 text-amber-300',
+  sky: 'bg-sky-950 text-sky-300',
+  red: 'bg-red-950 text-red-400',
+};
+const DOTS: Record<Tone, string> = {
+  zinc: 'bg-zinc-500',
+  emerald: 'bg-emerald-400',
+  amber: 'bg-amber-300',
+  sky: 'bg-sky-300',
+  red: 'bg-red-400',
+};
+
+const toneClass = computed(() => TONES[props.tone]);
+const dotClass = computed(() => [DOTS[props.tone], props.pulse ? 'animate-pulse' : '']);
+</script>