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:
37
packages/web/src/components/AttentionSection.vue
Normal file
37
packages/web/src/components/AttentionSection.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<section v-if="waiting.length" class="flex flex-col gap-2 rounded-xl border border-amber-900/50 bg-amber-950/20 p-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<AlertTriangle :size="16" class="text-amber-400" />
|
||||
<h2 class="text-sm font-semibold text-amber-200">{{ t('attention.title') }}</h2>
|
||||
<BaseBadge tone="amber">{{ t('attention.count', waiting.length) }}</BaseBadge>
|
||||
</div>
|
||||
<div v-for="s in waiting" :key="s.id" class="flex flex-col gap-1">
|
||||
<RouterLink
|
||||
:to="{ name: 'session', params: { id: s.id } }"
|
||||
class="truncate font-mono text-xs text-amber-300/80 transition-colors hover:text-amber-200"
|
||||
:title="s.cwd"
|
||||
>
|
||||
{{ s.cwd }}
|
||||
</RouterLink>
|
||||
<DialogPrompt :session="s" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Vue « À traiter » : regroupe en tête les sessions bloquées sur un dialogue (cœur de la
|
||||
// supervision mobile). Réutilise DialogPrompt pour répondre sans ouvrir le terminal.
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { AlertTriangle } from '@lucide/vue';
|
||||
import { useSessionsStore } from '../stores/sessions';
|
||||
import DialogPrompt from './DialogPrompt.vue';
|
||||
import BaseBadge from './ui/BaseBadge.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const sessions = useSessionsStore();
|
||||
|
||||
const waiting = computed(() =>
|
||||
sessions.sessions.filter((s) => s.live && s.activity === 'waiting' && s.dialog),
|
||||
);
|
||||
</script>
|
||||
Reference in New Issue
Block a user