Files
arboretum/packages/web/src/views/SessionView.vue
Johan LEROY b0e8a93caa 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>
2026-06-18 11:47:36 +02:00

44 lines
2.1 KiB
Vue

<template>
<div class="flex min-h-0 flex-col">
<header class="flex items-center gap-3 border-b border-zinc-800 bg-zinc-900/60 px-3 py-1.5">
<RouterLink :to="{ name: 'sessions' }" class="text-sm text-zinc-400 transition-colors hover:text-zinc-200">
{{ t('terminal.back') }}
</RouterLink>
<span v-if="session" class="badge bg-zinc-800 font-mono text-zinc-300">{{ session.command }}</span>
<span class="truncate font-mono text-xs text-zinc-500" :title="session?.cwd ?? sessionId">
{{ session?.cwd ?? sessionId }}
</span>
</header>
<DialogPrompt v-if="session && session.activity === 'waiting'" :session="session" class="m-2" />
<TerminalView v-if="attachable" :key="`${sessionId}:${mode}`" :session-id="sessionId" :mode="mode" class="flex-1" />
<!-- session externe non détenue par Arboretum : pas de terminal interactif (cf. fork/resume). -->
<div v-else class="flex flex-1 items-center justify-center p-6 text-center">
<p class="max-w-md text-sm text-zinc-400">{{ t('terminal.notAttachable') }}</p>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useSessionsStore } from '../stores/sessions';
import TerminalView from '../components/TerminalView.vue';
import DialogPrompt from '../components/DialogPrompt.vue';
const { t } = useI18n();
const route = useRoute();
const store = useSessionsStore();
const sessionId = computed(() => String(route.params.id));
const mode = computed<'interactive' | 'observer'>(() => (route.query.mode === 'observer' ? 'observer' : 'interactive'));
const session = computed(() => store.sessions.find((s) => s.id === sessionId.value) ?? null);
// défaut true : une navigation directe (liste pas encore chargée) tente l'attache d'une session managée.
const attachable = computed(() => session.value?.attachable ?? true);
onMounted(() => {
// navigation directe : garantit l'en-tête (cwd/commande) même si l'AppShell n'a pas encore chargé.
if (store.sessions.length === 0) void store.fetchSessions();
});
</script>