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.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Johan LEROY
2026-06-18 11:47:36 +02:00
parent 8a8018a6fc
commit b0e8a93caa
41 changed files with 2416 additions and 448 deletions

View File

@@ -0,0 +1,49 @@
<template>
<div class="flex min-h-0 w-full flex-1 overflow-hidden">
<AppSidebar />
<div class="flex min-h-0 min-w-0 flex-1 flex-col">
<main v-if="fullbleed" class="flex min-h-0 flex-1 flex-col pb-14 md:pb-0">
<slot />
</main>
<main v-else class="flex-1 overflow-y-auto pb-14 md:pb-0">
<div class="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-4 md:py-6">
<slot />
</div>
</main>
<MobileTabBar />
</div>
</div>
</template>
<script setup lang="ts">
// Coquille des vues authentifiées. Propriétaire unique du chargement initial et des abonnements
// temps réel (sessions/worktrees/groups) pour toute la durée de la session : fiabilise le badge
// de navigation, la palette ⌘K et la section « À traiter » quelle que soit la vue active.
import { onMounted, onUnmounted } from 'vue';
import { useSessionsStore } from '../../stores/sessions';
import { useWorktreesStore } from '../../stores/worktrees';
import { useGroupsStore } from '../../stores/groups';
import AppSidebar from './AppSidebar.vue';
import MobileTabBar from './MobileTabBar.vue';
defineProps<{ fullbleed?: boolean }>();
const sessions = useSessionsStore();
const worktrees = useWorktreesStore();
const groups = useGroupsStore();
onMounted(() => {
void worktrees.fetchAll();
void sessions.fetchSessions();
void groups.fetchGroups();
worktrees.startRealtime();
sessions.startRealtime();
groups.startRealtime();
});
onUnmounted(() => {
worktrees.stopRealtime();
sessions.stopRealtime();
groups.stopRealtime();
});
</script>