Function CommitFileList

packages/web/src/components/workspace/HistoryView.tsx:84–119

({ workingDir, hash, selectedPath, onSelectFile })

/** Inline file list under a commit (clickable to select file for diff) */
const CommitFileList: React.FC<{
  workingDir: string; hash: string; selectedPath: string | null; onSelectFile: (path: string) => void
}> = ({ workingDir, hash, selectedPath, onSelectFile }) => {
  const { t } = useI18n()
  const { data, isLoading } = useGitCommitFiles(workingDir, hash)
  if (isLoading) return (
    <div className="pl-7 py-1 text-xs text-muted-foreground/70 flex items-center gap-1">
      <Loader2 size={12} className="animate-spin" /><span>{t('Loading...')}</span>
    </div>
  )
  const files = data?.files || []
  if (files.length === 0) return <div className="pl-7 py-1 text-xs text-muted-foreground/70">{t('No files changed')}</div>
  return (
    <div className="pl-7 pb-1 space-y-0.5">
      {files.map((f: GitChangeEntry) => {
        const colorClass = STATUS_COLOR_MAP[f.status] || STATUS_COLOR_MAP.M
        const dir = dirname(f.path)
        return (
          <button
            key={f.path}
            type="button"
            onClick={(e) => { e.stopPropagation(); onSelectFile(f.path) }}
            className={cn(
              'flex items-center gap-2 px-1.5 py-1 rounded-sm cursor-pointer w-full text-left',
              selectedPath === f.path ? 'bg-muted' : 'hover:bg-muted/60'
            )}
          >
            <span className={cn('w-4 h-4 flex items-center justify-center text-[11px] font-semibold border rounded-sm shrink-0', colorClass)}>
              {f.status}
            </span>
            <span className="text-xs text-foreground truncate">{basename(f.path)}</span>
            {dir && <span className="text-[11px] text-muted-foreground/70 truncate ml-auto shrink-0">{dir}</span>}
          </button>
        )
      })}
    </div>
  )
}