feat: groupes de travail (P5)
Ajoute la notion de groupe — collection nommée de repos (membership légère persistée, many-to-many) — pour piloter plusieurs repos en simultané : - DB : migration #5 (tables groups + group_repos, FK ON DELETE CASCADE). - GroupManager (synchrone, EventEmitter) + routes REST /api/v1/groups ; ne persiste que la membership, worktrees/sessions filtrés par repoId côté client. - Protocole : GroupSummary, DTOs, topic WS « groups », events group_update/removed (additifs, PROTOCOL_VERSION inchangé). - Web : store groups, GroupsListView, GroupView (réutilise RepoSection), grille multi-terminaux (TerminalGrid/TerminalCell), action « feature cross-repo » (orchestration client, tolérante aux échecs partiels), routes + i18n EN/FR. - Tests : group-manager.test.ts + extension protocol.test.ts ; acceptance-p5.mjs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
149
packages/web/src/views/GroupView.vue
Normal file
149
packages/web/src/views/GroupView.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<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 flex-wrap items-center gap-3">
|
||||
<RouterLink :to="{ name: 'groups' }" class="text-sm text-zinc-400 hover:text-zinc-200">← {{ t('groups.title') }}</RouterLink>
|
||||
<h1 v-if="group" class="flex items-center gap-2 text-lg font-semibold text-zinc-100">
|
||||
<span class="h-3 w-3 rounded-full" :style="{ backgroundColor: group.color ?? '#52525b' }" />
|
||||
{{ group.label }}
|
||||
</h1>
|
||||
<div class="ml-auto flex flex-wrap items-center gap-2">
|
||||
<button v-if="group" class="btn text-xs" :class="editingRepos ? 'border-sky-700 text-sky-300' : ''" @click="editingRepos = !editingRepos">
|
||||
{{ editingRepos ? t('groups.editDone') : t('groups.edit') }}
|
||||
</button>
|
||||
<button class="btn text-xs" :disabled="groupRepos.length === 0" @click="showFeatureModal = true">{{ t('groups.newFeature') }}</button>
|
||||
<div class="flex overflow-hidden rounded border border-zinc-800">
|
||||
<button class="px-2 py-1 text-xs" :class="view === 'list' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400'" @click="view = 'list'">
|
||||
{{ t('groups.viewList') }}
|
||||
</button>
|
||||
<button class="px-2 py-1 text-xs" :class="view === 'grid' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400'" @click="view = 'grid'">
|
||||
{{ t('groups.viewGrid') }}
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn text-xs" :disabled="worktrees.loading" @click="refresh">{{ t('sessions.refresh') }}</button>
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p v-if="!group" class="text-sm text-zinc-500">{{ t('common.loading') }}</p>
|
||||
|
||||
<template v-else>
|
||||
<!-- édition de la composition : ajouter/retirer des repos déjà enregistrés -->
|
||||
<div v-if="editingRepos" class="flex flex-col gap-1 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3 text-xs text-zinc-400">
|
||||
{{ t('groups.reposLabel') }}
|
||||
<p v-if="worktrees.repos.length === 0" class="text-zinc-600">{{ t('groups.noReposRegistered') }}</p>
|
||||
<div v-else class="flex flex-wrap gap-2">
|
||||
<label
|
||||
v-for="repo in worktrees.repos"
|
||||
:key="repo.id"
|
||||
class="flex items-center gap-1.5 rounded border border-zinc-800 bg-zinc-950/40 px-2 py-1"
|
||||
>
|
||||
<input type="checkbox" :checked="group.repoIds.includes(repo.id)" @change="toggleRepo(repo.id)" />
|
||||
<span class="text-zinc-300">{{ repo.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mode liste : réutilise RepoSection (worktrees + sessions + dialogues inline) -->
|
||||
<template v-if="view === 'list'">
|
||||
<p v-if="groupRepos.length === 0 && missingRepoIds.length === 0" class="text-sm text-zinc-500">{{ t('groups.noReposInGroup') }}</p>
|
||||
<RepoSection v-for="repo in groupRepos" :key="repo.id" :repo="repo" />
|
||||
<div
|
||||
v-for="id in missingRepoIds"
|
||||
:key="id"
|
||||
class="flex items-center gap-2 rounded-lg border border-amber-900/50 bg-amber-950/20 p-3 text-sm text-amber-300"
|
||||
>
|
||||
<span class="flex-1">{{ t('groups.missingRepo') }} <span class="font-mono text-xs text-amber-500/70">{{ id }}</span></span>
|
||||
<button class="btn text-xs" @click="removeRepo(id)">{{ t('groups.removeFromGroup') }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- mode grille : terminaux côte à côte -->
|
||||
<TerminalGrid v-else :sessions="activeGroupSessions" />
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<CrossRepoFeatureModal
|
||||
v-if="showFeatureModal && group"
|
||||
:repos="groupRepos"
|
||||
@close="showFeatureModal = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import type { SessionSummary } from '@arboretum/shared';
|
||||
import { useGroupsStore } from '../stores/groups';
|
||||
import { useWorktreesStore } from '../stores/worktrees';
|
||||
import { useSessionsStore } from '../stores/sessions';
|
||||
import LanguageSwitcher from '../components/LanguageSwitcher.vue';
|
||||
import RepoSection from '../components/RepoSection.vue';
|
||||
import TerminalGrid from '../components/TerminalGrid.vue';
|
||||
import CrossRepoFeatureModal from '../components/CrossRepoFeatureModal.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const groups = useGroupsStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const sessions = useSessionsStore();
|
||||
|
||||
const groupId = computed(() => String(route.params.id));
|
||||
const group = computed(() => groups.byId(groupId.value));
|
||||
const view = ref<'list' | 'grid'>('list');
|
||||
const editingRepos = ref(false);
|
||||
const showFeatureModal = ref(false);
|
||||
|
||||
const groupRepos = computed(() => groups.reposInGroup(groupId.value));
|
||||
|
||||
// repoIds du groupe absents du store worktrees (repo supprimé mais membership pas encore purgée côté UI).
|
||||
const missingRepoIds = computed(() => {
|
||||
const g = group.value;
|
||||
if (!g) return [];
|
||||
const known = new Set(worktrees.repos.map((r) => r.id));
|
||||
return g.repoIds.filter((id) => !known.has(id));
|
||||
});
|
||||
|
||||
// sessions vivantes et attachables des repos du groupe, en version live (store sessions).
|
||||
const activeGroupSessions = computed<SessionSummary[]>(() => {
|
||||
const byId = new Map<string, SessionSummary>();
|
||||
for (const snap of groups.sessionsInGroup(groupId.value)) {
|
||||
const live = sessions.sessions.find((x) => x.id === snap.id) ?? snap;
|
||||
if (live.live && live.attachable) byId.set(live.id, live);
|
||||
}
|
||||
return [...byId.values()];
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
void groups.fetchGroups();
|
||||
void worktrees.fetchAll();
|
||||
void sessions.fetchSessions();
|
||||
groups.startRealtime();
|
||||
worktrees.startRealtime();
|
||||
sessions.startRealtime();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
groups.stopRealtime();
|
||||
worktrees.stopRealtime();
|
||||
sessions.stopRealtime();
|
||||
});
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
await Promise.all([groups.fetchGroups(), worktrees.fetchAll(), sessions.fetchSessions()]);
|
||||
}
|
||||
|
||||
async function toggleRepo(repoId: string): Promise<void> {
|
||||
const g = group.value;
|
||||
if (!g) return;
|
||||
if (g.repoIds.includes(repoId)) await groups.removeRepoFromGroup(g.id, repoId);
|
||||
else await groups.addRepoToGroup(g.id, repoId);
|
||||
}
|
||||
|
||||
async function removeRepo(repoId: string): Promise<void> {
|
||||
const g = group.value;
|
||||
if (g) await groups.removeRepoFromGroup(g.id, repoId);
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user