arboretum/packages/web/src/components/ide/ChangesWorktreeBlock.vue

<template>
  <div class="border-b border-border">
    <!-- En-tête : ZÉRO requête, tout vient du WorktreeSummary diffusé par WS. -->
    <div class="flex items-center gap-2 px-2 py-1.5" :class="isActive ? 'bg-surface-2/60' : 'hover:bg-surface-2/30'">
      <button
        type="button"
        class="flex min-w-0 flex-1 items-center gap-1.5 text-left text-xs"
        :aria-expanded="expanded"
        @click="onToggle"
      >
        <component :is="expanded ? ChevronDown : ChevronRight" :size="13" class="shrink-0 text-fg-subtle" />
        <component :is="wt.isMain ? Home : GitBranch" :size="13" class="shrink-0 text-fg-subtle" />
        <span class="truncate font-mono" :title="wt.path">{{ wt.branch ?? t('worktrees.detached') }}</span>
        <GitStatusBadge :git="wt.git" :branch="wt.branch" dense class="shrink-0" />
        <!-- L'upstream est déjà nommé sur la ligne d'actions distantes juste en dessous : ici on ne
             garde que ce qui appelle une action, ou l'état « propre ». -->
        <span v-if="unpushed" class="shrink-0 text-[10px] text-warn">{{ t('changes.unpushed', { n: unpushed }) }}</span>
        <span v-else-if="clean" class="shrink-0 text-[10px] text-fg-subtle">{{ t('changes.clean') }}</span>
      </button>
      <!-- Boutons frères et non imbriqués : un bouton dans un bouton est invalide. -->
      <button
        v-if="selected"
        type="button"
        class="shrink-0 rounded p-0.5 text-fg-subtle hover:bg-surface-3 hover:text-fg"
        :title="t('changes.openInEditor')"
        @click="openInEditor"
      >
        <FileCode :size="13" />
      </button>
      <button
        type="button"
        class="shrink-0 rounded p-0.5 text-fg-subtle hover:bg-surface-3 hover:text-fg"
        :title="t('common.refresh')"
        @click="changes.invalidate(wt.repoId, wt.path)"
      >
        <RefreshCw :size="13" :class="entry?.loading ? 'animate-spin' : undefined" />
      </button>
    </div>

    <template v-if="expanded">
      <div v-if="entry?.error" class="flex items-center gap-2 px-3 py-1.5 text-xs text-danger">
        <span class="min-w-0 flex-1">{{ t('changes.loadFailed') }} {{ entry.error }}</span>
        <BaseButton size="sm" variant="ghost" @click="changes.invalidate(wt.repoId, wt.path)">{{ t('common.retry') }}</BaseButton>
      </div>
      <SkeletonRow v-if="entry?.loading && entry.changes.length === 0" :count="3" :height="18" class="px-2 py-1" />

      <CommitPanel
        :repo-id="wt.repoId"
        :wt="wt.path"
        :changes="entry?.changes ?? []"
        :git="wt.git"
        :truncated="entry?.truncated ?? false"
        :active="selected?.file ?? null"
        @select="onSelect"
        @changed="changes.invalidate(wt.repoId, wt.path)"
      />

      <DiffViewer
        v-if="selected"
        :key="`d:${selected.file}:${selected.staged}`"
        :repo-id="wt.repoId"
        :wt="wt.path"
        :file="selected.file"
        :staged="selected.staged"
        :version="version"
        class="max-h-96 border-y border-border bg-surface-1/40"
      />

      <CommitHistory :repo-id="wt.repoId" :wt="wt.path" :version="version" />
    </template>
  </div>
</template>

<script setup lang="ts">
// Un worktree dans la vue « Changements » : en-tête toujours peu coûteux (compteurs WS), et si
// déplié, le panneau de commit, le diff du fichier sélectionné INLINE, puis l'historique.
// Le diff est inline et non en onglet : en mode « changements », un onglet est masqué par
// construction, donc le clic n'aurait aucun effet visible. Le bouton FileCode garde la porte de
// sortie vers l'éditeur plein cadre.
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { ChevronDown, ChevronRight, FileCode, GitBranch, Home, RefreshCw } from '@lucide/vue';
import type { WorktreeSummary } from '@arboretum/shared';
import { useIdeStore, tabId, wtKey } from '../../stores/ide';
import { useWorktreesStore } from '../../stores/worktrees';
import { useChangesStore } from '../../stores/changes';
import CommitPanel from '../workspace/CommitPanel.vue';
import CommitHistory from '../workspace/CommitHistory.vue';
import DiffViewer from '../workspace/DiffViewer.vue';
import GitStatusBadge from '../workspace/GitStatusBadge.vue';
import BaseButton from '../ui/BaseButton.vue';
import SkeletonRow from '../ui/SkeletonRow.vue';

const props = defineProps<{ wt: WorktreeSummary }>();
const { t } = useI18n();
const ide = useIdeStore();
const worktrees = useWorktreesStore();
const changes = useChangesStore();

const selected = ref<{ file: string; staged: boolean } | null>(null);

const key = computed(() => wtKey(props.wt.repoId, props.wt.path));
const expanded = computed(() => ide.changesExpanded.includes(key.value));
const isActive = computed(
  () => ide.activeContext?.repoId === props.wt.repoId && ide.activeContext?.wtPath === props.wt.path,
);
const version = computed(() => worktrees.changeVersion(props.wt.repoId, props.wt.path));
const entry = computed(() => changes.entry(props.wt.repoId, props.wt.path));
const unpushed = computed(() => (props.wt.git.upstream ? props.wt.git.ahead : 0));
const clean = computed(() => props.wt.git.dirtyCount === 0 && props.wt.git.ahead === 0 && props.wt.git.behind === 0);

function onToggle(): void {
  ide.toggleChangesWt(key.value);
  ide.setActiveWorktree(props.wt.repoId, props.wt.path);
}

function onSelect(sel: { file: string; staged: boolean }): void {
  // Second clic sur la même ligne : on replie le diff (même geste que l'historique des commits).
  selected.value =
    selected.value?.file === sel.file && selected.value.staged === sel.staged ? null : { ...sel };
}

function openInEditor(): void {
  const sel = selected.value;
  if (!sel) return;
  ide.openFile(props.wt.repoId, props.wt.path, sel.file, 'diff');
  ide.setTabView(tabId(props.wt.repoId, props.wt.path, sel.file), 'diff', sel.staged);
}

// Charge à l'ouverture, recharge dès que le disque bouge, libère au repli (bornage mémoire sur un
// parc de dépôts important).
watch(
  () => [expanded.value, version.value] as const,
  ([open]) => {
    if (open) changes.request(props.wt.repoId, props.wt.path);
    else changes.forget(props.wt.repoId, props.wt.path);
  },
  { immediate: true },
);

// Le fichier sélectionné a disparu de la liste (commité, abandonné) : on replie le diff.
watch(
  () => entry.value?.changes,
  (list) => {
    if (selected.value && list && !list.some((c) => c.path === selected.value?.file)) selected.value = null;
  },
);
</script>