feat(web): coquille IDE + arbre de projets unifié (route /ide)
Some checks failed
CI / Build & test (Node 24) (push) Has been cancelled
CI / Pack & boot smoke (Node 22) (push) Has been cancelled
CI / No em/en dashes (push) Has been cancelled
CI / Build & test (Node 22) (push) Has been cancelled

components/ide/ : IdeShell (grille barre d'activité + panneau gauche + zone centrale + dock + barre de statut, splitters persistés, réconciliation des ressources ouvertes contre les données live), ActivityBar (Explorer/Git/Sessions/Groupes + Réglages/Aide), PrimarySidebar, ProjectTree + ProjectTreeNode (arbre unique repos -> worktrees -> sessions, fichiers embarqués via FileTree en mode sans chrome, dépliage paresseux), StatusBar.

Route /ide (layout 'ide'), entrée de nav « IDE », namespace i18n ide (EN/FR). Clics de l'arbre pilotent le store (contexte worktree, ouverture de fichier/terminal). Centre et dock en placeholders (remplis en B4/B5). FileTree gagne un mode embedded. 427 tests.
This commit is contained in:
2026-07-17 17:08:35 +02:00
parent 6acd4a16fd
commit c96d929c7a
13 changed files with 446 additions and 11 deletions

View File

@@ -0,0 +1,35 @@
<template>
<aside
class="flex min-h-0 shrink-0 flex-col border-r border-border bg-surface-1"
:style="{ width: `${ide.leftWidth}px` }"
>
<ProjectTree v-if="ide.activeActivity === 'explorer'" />
<!-- Git / Sessions / Groupes : panneaux dédiés livrés en B6 ; placeholder pour l'instant. -->
<div v-else class="flex h-full items-center justify-center p-4">
<EmptyState :icon="placeholder.icon" :title="placeholder.title" :hint="t('ide.comingSoon')" />
</div>
</aside>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Boxes, GitCompare, SquareTerminal } from '@lucide/vue';
import { useIdeStore } from '../../stores/ide';
import ProjectTree from './ProjectTree.vue';
import EmptyState from '../ui/EmptyState.vue';
const { t } = useI18n();
const ide = useIdeStore();
const placeholder = computed(() => {
switch (ide.activeActivity) {
case 'git':
return { icon: GitCompare, title: t('ide.activity.git') };
case 'sessions':
return { icon: SquareTerminal, title: t('ide.activity.sessions') };
default:
return { icon: Boxes, title: t('ide.activity.groups') };
}
});
</script>