feat: redesigned Git tab layout with improved organization

2025-12-19 02:48:58 +02:00
parent 71574acf19
commit bbceccfb64
17 changed files with 1726 additions and 1058 deletions
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { ChangeRow } from './ChangeRow';
+import type { GitStatus } from '@/lib/api/types';
+
+interface ChangesSectionProps {
+  changeEntries: GitStatus['files'];
+  selectedPaths: Set<string>;
+  diffStats: Record<string, { insertions: number; deletions: number }> | undefined;
+  revertingPaths: Set<string>;
+  onToggleFile: (path: string) => void;
+  onSelectAll: () => void;
+  onClearSelection: () => void;
+  onViewDiff: (path: string) => void;
+  onRevertFile: (path: string) => void;
+}
+
+export const ChangesSection: React.FC<ChangesSectionProps> = ({
+  changeEntries,
+  selectedPaths,
+  diffStats,
+  revertingPaths,
+  onToggleFile,
+  onSelectAll,
+  onClearSelection,
+  onViewDiff,
+  onRevertFile,
+}) => {
+  const selectedCount = selectedPaths.size;
+  const totalCount = changeEntries.length;
+
+  return (
+    <section className="flex flex-col rounded-xl border border-border/60 bg-background/70">
+      <header className="flex items-center justify-between gap-2 px-3 py-2 border-b border-border/40">
+        <h3 className="typography-ui-header font-semibold text-foreground">Changes</h3>
+        <div className="flex items-center gap-2">
+          <span className="typography-meta text-muted-foreground">
+            {selectedCount}/{totalCount}
+          </span>
+          {totalCount > 0 && (
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-2 text-xs"
+                onClick={onSelectAll}
+              >
+                All
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-2 text-xs"
+                onClick={onClearSelection}
+                disabled={selectedCount === 0}
+              >
+                None
+              </Button>
+            </>
+          )}
+        </div>
+      </header>
+      <ScrollableOverlay outerClassName="flex-1 min-h-0 max-h-[30vh]" className="w-full">
+        <ul className="divide-y divide-border/60">
+          {changeEntries.map((file) => (
+            <ChangeRow
+              key={file.path}
+              file={file}
+              checked={selectedPaths.has(file.path)}
+              stats={diffStats?.[file.path]}
+              onToggle={() => onToggleFile(file.path)}
+              onViewDiff={() => onViewDiff(file.path)}
+              onRevert={() => onRevertFile(file.path)}
+              isReverting={revertingPaths.has(file.path)}
+            />
+          ))}
+        </ul>
+      </ScrollableOverlay>
+    </section>
+  );
+};