Files
arboretum/packages/web/src/components/workspace/GitStatusBadge.vue
Johan LEROY 75efecf93f feat(p8): vue IDE /workspace (arbre + Monaco + diff + terminal)
- backend: garde-fou conflit d'édition par mtime (GET renvoie mtime, PUT refuse en 409 STALE_FILE si baseMtime périmé)
- lib: wt-key (base64url du chemin worktree), diff-parse (parseur pur du diff unifié → hunks)
- composables: useMonaco (import dynamique → chunk isolé), useWorkspaceLayout (largeurs/panneau persistés)
- components/workspace: GitStatusBadge, FileTree+FileTreeNode (lazy fs/list includeFiles), ChangedFilesPanel, DiffViewer (coloration +/-), MonacoEditor (Ctrl+S + bannière conflit reload/overwrite)
- views/WorkspaceView: 3 colonnes desktop redimensionnables + SegmentedControl mobile, header live (GitStatusBadge), watchWorktree → refresh diff/changements, terminal de la session corrélée
- router meta 'ide' + route /workspace/:repoId/:wt ; App.vue plein écran sans AppShell ; WorktreeCard bouton « Ouvrir l'IDE »
- deps: monaco-editor (lazy, vendor-monaco isolé, 0 impact bundle initial) ; vite manualChunks
- i18n EN+FR (workspace/editor/diff/git) ; tests diff-parse + wt-key ; acceptance-p8.mjs (mtime/409 + diff)
2026-06-27 13:47:10 +02:00

28 lines
1.3 KiB
Vue

<template>
<span class="flex items-center gap-2 text-xs">
<span class="flex items-center gap-1 font-mono text-zinc-300">
<GitBranch :size="13" />{{ branch ?? t('worktrees.detached') }}
</span>
<span v-if="git.ahead" class="text-emerald-400" :title="t('git.ahead')">{{ git.ahead }}</span>
<span v-if="git.behind" class="text-amber-400" :title="t('git.behind')">{{ git.behind }}</span>
<span v-if="git.stagedCount" class="text-emerald-400" :title="t('git.staged')">{{ git.stagedCount }}</span>
<span v-if="git.unstagedCount" class="text-amber-400" :title="t('git.unstaged')">{{ git.unstagedCount }}</span>
<span v-if="git.conflictCount" class="text-rose-400" :title="t('git.conflicts')">{{ git.conflictCount }}</span>
<span v-if="isClean" class="text-zinc-600">{{ t('worktrees.clean') }}</span>
</span>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { GitBranch } from '@lucide/vue';
import type { WorktreeGitStatus } from '@arboretum/shared';
const props = defineProps<{ git: WorktreeGitStatus; branch: string | null }>();
const { t } = useI18n();
const isClean = computed(
() => !props.git.dirtyCount && !props.git.ahead && !props.git.behind && !props.git.stagedCount && !props.git.unstagedCount,
);
</script>