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:
2026-06-18 11:47:36 +02:00
parent c1390bfe06
commit d6c110fc3b
41 changed files with 2416 additions and 448 deletions

View File

@@ -0,0 +1,57 @@
<template>
<div class="flex flex-col gap-2">
<p v-if="pushErrorText" class="text-xs text-amber-400">{{ pushErrorText }}</p>
<div class="flex items-center gap-2">
<LanguageSwitcher />
<BaseButton
v-if="push.supported"
variant="ghost"
size="sm"
icon-only
:icon="push.enabled ? Bell : BellOff"
:class="push.enabled ? 'text-emerald-300' : ''"
:disabled="push.busy"
:title="pushErrorText || undefined"
:aria-label="push.enabled ? t('push.disable') : t('push.enable')"
@click="push.toggle()"
/>
<BaseButton
variant="ghost"
size="sm"
icon-only
:icon="LogOut"
class="ml-auto"
:aria-label="t('common.logout')"
@click="logout"
/>
</div>
<span v-if="auth.serverVersion" class="text-[11px] text-zinc-600">v{{ auth.serverVersion }}</span>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { Bell, BellOff, LogOut } from '@lucide/vue';
import { useAuthStore } from '../../stores/auth';
import { usePushStore } from '../../stores/push';
import { useSession } from '../../composables/useSession';
import BaseButton from '../ui/BaseButton.vue';
import LanguageSwitcher from '../LanguageSwitcher.vue';
const { t } = useI18n();
const auth = useAuthStore();
const push = usePushStore();
const { logout } = useSession();
// 'denied'/'unsupported' sont des clés i18n ; tout autre message d'erreur est affiché tel quel.
const pushErrorText = computed(() => {
const e = push.error;
if (!e) return '';
return e === 'denied' || e === 'unsupported' ? t(`push.${e}`) : e;
});
onMounted(() => {
void push.refresh();
});
</script>