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:
@@ -1,145 +1,139 @@
|
||||
<template>
|
||||
<div class="overflow-y-auto">
|
||||
<div class="mx-auto flex max-w-3xl flex-col gap-4 px-4 py-6">
|
||||
<header class="flex items-center gap-3">
|
||||
<h1 class="text-lg font-semibold text-zinc-100">{{ t('sessions.title') }}</h1>
|
||||
<span v-if="auth.serverVersion" class="text-xs text-zinc-600">v{{ auth.serverVersion }}</span>
|
||||
<PageHeader :title="t('nav.sessions')">
|
||||
<BaseButton variant="ghost" size="sm" :icon="RefreshCw" :loading="store.loading" @click="store.fetchSessions()">
|
||||
{{ t('common.refresh') }}
|
||||
</BaseButton>
|
||||
</PageHeader>
|
||||
|
||||
<form class="card flex flex-col gap-2 sm:flex-row sm:items-end" @submit.prevent="onCreate">
|
||||
<label class="flex flex-1 flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('sessions.cwdLabel') }}
|
||||
<input v-model="newCwd" type="text" class="input font-mono" :placeholder="t('sessions.cwdPlaceholder')" required />
|
||||
</label>
|
||||
<label class="flex flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('sessions.commandLabel') }}
|
||||
<select v-model="newCommand" class="input">
|
||||
<option value="claude">claude</option>
|
||||
<option value="bash">bash</option>
|
||||
</select>
|
||||
</label>
|
||||
<BaseButton type="button" :icon="FolderOpen" class="whitespace-nowrap" @click="showPicker = !showPicker">
|
||||
{{ t('fs.browse') }}
|
||||
</BaseButton>
|
||||
<BaseButton type="submit" variant="primary" :icon="Plus" class="whitespace-nowrap" :loading="creating" :disabled="newCwd.trim() === ''">
|
||||
{{ t('sessions.newSession') }}
|
||||
</BaseButton>
|
||||
</form>
|
||||
<DirectoryPicker
|
||||
v-if="showPicker"
|
||||
mode="dir"
|
||||
:initial-path="newCwd"
|
||||
@select="onPickCwd"
|
||||
@close="showPicker = false"
|
||||
/>
|
||||
|
||||
<SkeletonRow v-if="store.loading && store.sessions.length === 0" />
|
||||
<EmptyState v-else-if="store.sessions.length === 0" :icon="TerminalSquare" :title="t('sessions.empty')" />
|
||||
|
||||
<template v-else>
|
||||
<ListToolbar :controls="controls" />
|
||||
<EmptyState v-if="controls.total.value === 0" :icon="Search" :title="t('controls.results', 0)" />
|
||||
<ul v-else class="flex flex-col gap-2">
|
||||
<li v-for="s in controls.processed.value" :key="s.id" class="card flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="badge bg-zinc-800 font-mono text-zinc-300">{{ s.command }}</span>
|
||||
<BaseBadge v-if="s.source === 'discovered'" tone="sky">{{ t('sessions.sourceDiscovered') }}</BaseBadge>
|
||||
<SessionStateBadge :session="s" />
|
||||
<span class="ml-auto text-xs text-zinc-500">{{ formatDate(s.createdAt) }}</span>
|
||||
</div>
|
||||
<p v-if="s.title" class="truncate text-sm text-zinc-200" :title="s.title">{{ s.title }}</p>
|
||||
<p class="truncate font-mono text-xs text-zinc-400" :title="s.cwd">{{ s.cwd }}</p>
|
||||
<DialogPrompt v-if="s.live && s.activity === 'waiting'" :session="s" />
|
||||
<div class="flex flex-wrap items-center gap-2 text-xs text-zinc-500">
|
||||
<span v-if="s.live">{{ t('sessions.clients', s.clients) }}</span>
|
||||
<span v-if="s.exitCode !== null">· {{ t('sessions.exitCode', { code: s.exitCode }) }}</span>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<RouterLink :to="{ name: 'dashboard' }" class="btn">{{ t('dashboard.title') }}</RouterLink>
|
||||
<button class="btn" :disabled="store.loading" @click="store.fetchSessions()">
|
||||
{{ t('sessions.refresh') }}
|
||||
</button>
|
||||
<LanguageSwitcher />
|
||||
<button class="btn" @click="onLogout">{{ t('common.logout') }}</button>
|
||||
<!-- session managée vivante : terminal complet -->
|
||||
<template v-if="s.attachable">
|
||||
<BaseButton size="sm" :icon="SquareTerminal" :to="{ name: 'session', params: { id: s.id } }">{{ t('sessions.open') }}</BaseButton>
|
||||
<BaseButton size="sm" :icon="Eye" :to="{ name: 'session', params: { id: s.id }, query: { mode: 'observer' } }">{{ t('sessions.observe') }}</BaseButton>
|
||||
<template v-if="killArmedId === s.id">
|
||||
<BaseButton variant="danger" size="sm" :icon="Trash2" :loading="killing" @click="onConfirmKill(s.id)">{{ t('sessions.confirmKill') }}</BaseButton>
|
||||
<BaseButton variant="ghost" size="sm" @click="killArmedId = null">{{ t('common.cancel') }}</BaseButton>
|
||||
</template>
|
||||
<BaseButton v-else variant="danger" size="sm" :icon="Trash2" @click="killArmedId = s.id">{{ t('sessions.kill') }}</BaseButton>
|
||||
</template>
|
||||
<!-- session externe vivante : pas d'attache (PTY non détenu) → vue read-only ou fork -->
|
||||
<template v-else-if="s.live">
|
||||
<BaseButton size="sm" :icon="Eye" :to="{ name: 'session', params: { id: s.id } }">{{ t('sessions.view') }}</BaseButton>
|
||||
<BaseButton size="sm" :icon="GitFork" :loading="actingId === s.id" @click="onFork(s.id)">{{ t('sessions.fork') }}</BaseButton>
|
||||
</template>
|
||||
<!-- session morte reprenable : resume direct ou fork -->
|
||||
<template v-else-if="s.resumable">
|
||||
<BaseButton variant="primary" size="sm" :icon="Play" :loading="actingId === s.id" @click="onResume(s.id)">{{ t('sessions.resume') }}</BaseButton>
|
||||
<BaseButton size="sm" :icon="GitFork" :loading="actingId === s.id" @click="onFork(s.id)">{{ t('sessions.fork') }}</BaseButton>
|
||||
</template>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<form
|
||||
class="flex flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3 sm:flex-row sm:items-end"
|
||||
@submit.prevent="onCreate"
|
||||
>
|
||||
<label class="flex flex-1 flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('sessions.cwdLabel') }}
|
||||
<input
|
||||
v-model="newCwd"
|
||||
type="text"
|
||||
class="input font-mono"
|
||||
:placeholder="t('sessions.cwdPlaceholder')"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('sessions.commandLabel') }}
|
||||
<select v-model="newCommand" class="input">
|
||||
<option value="claude">claude</option>
|
||||
<option value="bash">bash</option>
|
||||
</select>
|
||||
</label>
|
||||
<button type="button" class="btn whitespace-nowrap" @click="showPicker = !showPicker">{{ t('fs.browse') }}</button>
|
||||
<button type="submit" class="btn-primary whitespace-nowrap" :disabled="creating || newCwd.trim() === ''">
|
||||
{{ creating ? t('sessions.creating') : t('sessions.newSession') }}
|
||||
</button>
|
||||
</form>
|
||||
<DirectoryPicker
|
||||
v-if="showPicker"
|
||||
mode="dir"
|
||||
:initial-path="newCwd"
|
||||
@select="onPickCwd"
|
||||
@close="showPicker = false"
|
||||
/>
|
||||
<p v-if="createError" class="text-sm text-red-400">{{ createError }}</p>
|
||||
<p v-if="actionError" class="text-sm text-red-400">{{ actionError }}</p>
|
||||
|
||||
<p v-if="store.loadError" class="text-sm text-red-400">{{ store.loadError }}</p>
|
||||
<p v-else-if="store.loading && store.sessions.length === 0" class="text-sm text-zinc-500">
|
||||
{{ t('common.loading') }}
|
||||
</p>
|
||||
<p v-else-if="store.sessions.length === 0" class="text-sm text-zinc-500">{{ t('sessions.empty') }}</p>
|
||||
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li
|
||||
v-for="s in store.sessions"
|
||||
:key="s.id"
|
||||
class="flex flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="badge bg-zinc-800 font-mono text-zinc-300">{{ s.command }}</span>
|
||||
<span v-if="s.source === 'discovered'" class="badge bg-sky-950 text-sky-400">
|
||||
{{ t('sessions.sourceDiscovered') }}
|
||||
</span>
|
||||
<SessionStateBadge :session="s" />
|
||||
<span class="ml-auto text-xs text-zinc-500">{{ formatDate(s.createdAt) }}</span>
|
||||
</div>
|
||||
<p v-if="s.title" class="truncate text-sm text-zinc-200" :title="s.title">{{ s.title }}</p>
|
||||
<p class="truncate font-mono text-xs text-zinc-400" :title="s.cwd">{{ s.cwd }}</p>
|
||||
<DialogPrompt v-if="s.live && s.activity === 'waiting'" :session="s" />
|
||||
<div class="flex flex-wrap items-center gap-2 text-xs text-zinc-500">
|
||||
<span v-if="s.live">{{ t('sessions.clients', s.clients) }}</span>
|
||||
<span v-if="s.exitCode !== null">· {{ t('sessions.exitCode', { code: s.exitCode }) }}</span>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<!-- session managée vivante : terminal complet -->
|
||||
<template v-if="s.attachable">
|
||||
<RouterLink :to="{ name: 'session', params: { id: s.id } }" class="btn">{{ t('sessions.open') }}</RouterLink>
|
||||
<RouterLink :to="{ name: 'session', params: { id: s.id }, query: { mode: 'observer' } }" class="btn">
|
||||
{{ t('sessions.observe') }}
|
||||
</RouterLink>
|
||||
<template v-if="killArmedId === s.id">
|
||||
<button class="btn-danger" :disabled="killing" @click="onConfirmKill(s.id)">
|
||||
{{ t('sessions.confirmKill') }}
|
||||
</button>
|
||||
<button class="btn" @click="killArmedId = null">{{ t('common.cancel') }}</button>
|
||||
</template>
|
||||
<button v-else class="btn-danger" @click="killArmedId = s.id">{{ t('sessions.kill') }}</button>
|
||||
</template>
|
||||
<!-- session externe vivante : pas d'attache (PTY non détenu) → vue read-only ou fork -->
|
||||
<template v-else-if="s.live">
|
||||
<RouterLink :to="{ name: 'session', params: { id: s.id } }" class="btn">{{ t('sessions.view') }}</RouterLink>
|
||||
<button class="btn" :disabled="actingId === s.id" @click="onFork(s.id)">{{ t('sessions.fork') }}</button>
|
||||
</template>
|
||||
<!-- session morte reprenable : resume direct ou fork -->
|
||||
<template v-else-if="s.resumable">
|
||||
<button class="btn-primary" :disabled="actingId === s.id" @click="onResume(s.id)">
|
||||
{{ t('sessions.resume') }}
|
||||
</button>
|
||||
<button class="btn" :disabled="actingId === s.id" @click="onFork(s.id)">{{ t('sessions.fork') }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<Pagination
|
||||
:page="controls.page.value"
|
||||
:page-count="controls.pageCount.value"
|
||||
:page-size="controls.pageSize.value"
|
||||
@update:page="controls.setPage"
|
||||
@update:page-size="controls.setPageSize"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import type { SessionSummary } from '@arboretum/shared';
|
||||
import { RefreshCw, FolderOpen, Plus, TerminalSquare, SquareTerminal, Eye, Trash2, GitFork, Play, Search } from '@lucide/vue';
|
||||
import { useSessionsStore } from '../stores/sessions';
|
||||
import LanguageSwitcher from '../components/LanguageSwitcher.vue';
|
||||
import { useWorktreesStore } from '../stores/worktrees';
|
||||
import { useToastsStore } from '../stores/toasts';
|
||||
import { useListControls } from '../composables/useListControls';
|
||||
import { sessionSorts, sessionFilters } from '../composables/listDefs';
|
||||
import PageHeader from '../components/layout/PageHeader.vue';
|
||||
import BaseButton from '../components/ui/BaseButton.vue';
|
||||
import BaseBadge from '../components/ui/BaseBadge.vue';
|
||||
import EmptyState from '../components/ui/EmptyState.vue';
|
||||
import SkeletonRow from '../components/ui/SkeletonRow.vue';
|
||||
import ListToolbar from '../components/ListToolbar.vue';
|
||||
import Pagination from '../components/Pagination.vue';
|
||||
import SessionStateBadge from '../components/SessionStateBadge.vue';
|
||||
import DialogPrompt from '../components/DialogPrompt.vue';
|
||||
import DirectoryPicker from '../components/DirectoryPicker.vue';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
const store = useSessionsStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const toasts = useToastsStore();
|
||||
|
||||
const controls = useListControls<SessionSummary>({
|
||||
source: () => store.sessions,
|
||||
sorts: sessionSorts(),
|
||||
filters: () => sessionFilters(worktrees.repos),
|
||||
searchAccessor: (s) => `${s.cwd} ${s.title ?? ''}`,
|
||||
urlKey: 'sessions',
|
||||
});
|
||||
|
||||
const newCwd = ref('');
|
||||
const newCommand = ref<'claude' | 'bash'>('claude');
|
||||
const showPicker = ref(false);
|
||||
const creating = ref(false);
|
||||
const createError = ref<string | null>(null);
|
||||
const killArmedId = ref<string | null>(null);
|
||||
const killing = ref(false);
|
||||
const actingId = ref<string | null>(null);
|
||||
const actionError = ref<string | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
void store.fetchSessions();
|
||||
store.startRealtime();
|
||||
// navigation directe : garantit la liste même si l'AppShell n'a pas encore chargé.
|
||||
if (store.sessions.length === 0) void store.fetchSessions();
|
||||
});
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
@@ -153,13 +147,13 @@ function onPickCwd(path: string): void {
|
||||
|
||||
async function onCreate(): Promise<void> {
|
||||
creating.value = true;
|
||||
createError.value = null;
|
||||
try {
|
||||
const session = await store.createSession(newCwd.value.trim(), newCommand.value);
|
||||
newCwd.value = '';
|
||||
toasts.success(t('toast.sessionCreated'));
|
||||
await router.push({ name: 'session', params: { id: session.id } });
|
||||
} catch (err) {
|
||||
createError.value = err instanceof Error ? err.message : String(err);
|
||||
toasts.error(err);
|
||||
} finally {
|
||||
creating.value = false;
|
||||
}
|
||||
@@ -167,12 +161,12 @@ async function onCreate(): Promise<void> {
|
||||
|
||||
async function onResume(id: string): Promise<void> {
|
||||
actingId.value = id;
|
||||
actionError.value = null;
|
||||
try {
|
||||
const session = await store.resumeSession(id);
|
||||
toasts.success(t('toast.sessionResumed'));
|
||||
await router.push({ name: 'session', params: { id: session.id } });
|
||||
} catch (err) {
|
||||
actionError.value = err instanceof Error ? err.message : String(err);
|
||||
toasts.error(err);
|
||||
} finally {
|
||||
actingId.value = null;
|
||||
}
|
||||
@@ -180,12 +174,12 @@ async function onResume(id: string): Promise<void> {
|
||||
|
||||
async function onFork(id: string): Promise<void> {
|
||||
actingId.value = id;
|
||||
actionError.value = null;
|
||||
try {
|
||||
const session = await store.forkSession(id);
|
||||
toasts.success(t('toast.sessionForked'));
|
||||
await router.push({ name: 'session', params: { id: session.id } });
|
||||
} catch (err) {
|
||||
actionError.value = err instanceof Error ? err.message : String(err);
|
||||
toasts.error(err);
|
||||
} finally {
|
||||
actingId.value = null;
|
||||
}
|
||||
@@ -195,6 +189,7 @@ async function onConfirmKill(id: string): Promise<void> {
|
||||
killing.value = true;
|
||||
try {
|
||||
await store.killSession(id);
|
||||
toasts.success(t('toast.sessionKilled'));
|
||||
} catch {
|
||||
// l'état réel arrive par session_exit ; un échec (déjà morte) est sans gravité
|
||||
} finally {
|
||||
@@ -202,10 +197,4 @@ async function onConfirmKill(id: string): Promise<void> {
|
||||
killArmedId.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function onLogout(): Promise<void> {
|
||||
store.stopRealtime();
|
||||
await auth.logout();
|
||||
await router.replace({ name: 'login' });
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user