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.
This commit is contained in:
49
packages/web/src/components/layout/AppShell.vue
Normal file
49
packages/web/src/components/layout/AppShell.vue
Normal 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>
|
||||
Reference in New Issue
Block a user