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.
61 lines
2.2 KiB
Vue
61 lines
2.2 KiB
Vue
<template>
|
|
<div :class="embedded ? '' : 'flex h-full flex-col'">
|
|
<div v-if="!embedded" class="flex items-center gap-1 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-zinc-500">
|
|
<FolderTree :size="13" /> {{ t('workspace.files') }}
|
|
<button type="button" class="ml-auto rounded p-0.5 hover:bg-zinc-800 hover:text-zinc-300" :title="t('common.refresh')" @click="load">
|
|
<RefreshCw :size="12" />
|
|
</button>
|
|
</div>
|
|
<div :class="embedded ? '' : 'min-h-0 flex-1 overflow-auto px-1 pb-2'">
|
|
<p v-if="loading" class="px-2 py-1 text-xs text-zinc-600">{{ t('fs.loading') }}</p>
|
|
<p v-else-if="error" class="px-2 py-1 text-xs text-rose-400">{{ error }}</p>
|
|
<p v-else-if="entries.length === 0" class="px-2 py-1 text-xs text-zinc-600">{{ t('fs.empty') }}</p>
|
|
<FileTreeNode
|
|
v-for="e in entries"
|
|
:key="e.path"
|
|
:entry="e"
|
|
:wt="wt"
|
|
:depth="depth"
|
|
:active="active"
|
|
@open="(p) => emit('open', p)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { FolderTree, RefreshCw } from '@lucide/vue';
|
|
import type { FsEntry, FsListResponse } from '@arboretum/shared';
|
|
import { api } from '../../lib/api';
|
|
import FileTreeNode from './FileTreeNode.vue';
|
|
|
|
const props = withDefaults(defineProps<{ wt: string; active: string | null; embedded?: boolean; depth?: number }>(), {
|
|
embedded: false,
|
|
depth: 0,
|
|
});
|
|
const emit = defineEmits<{ open: [relPath: string] }>();
|
|
const { t } = useI18n();
|
|
|
|
const entries = ref<FsEntry[]>([]);
|
|
const loading = ref(false);
|
|
const error = ref<string | null>(null);
|
|
|
|
async function load(): Promise<void> {
|
|
loading.value = true;
|
|
error.value = null;
|
|
try {
|
|
const res = await api.get<FsListResponse>(`/api/v1/fs/list?path=${encodeURIComponent(props.wt)}&includeFiles=1`);
|
|
entries.value = [...res.entries].sort((a, b) => Number(!!a.isFile) - Number(!!b.isFile) || a.name.localeCompare(b.name));
|
|
} catch (err) {
|
|
error.value = err instanceof Error ? err.message : String(err);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
onMounted(load);
|
|
watch(() => props.wt, load);
|
|
</script>
|