Refactor Settings, FileTree, GitPanel, Shell, and CodeEditor components (#402)

src/components/git-panel/view/history/CommitHistoryItem.tsx

@@ -0,0 +1,71 @@
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import DiffViewer from '../../../DiffViewer.jsx';
+import type { GitCommitSummary } from '../../types/types';
+
+type DiffViewerProps = {
+  diff: string;
+  fileName: string;
+  isMobile: boolean;
+  wrapText: boolean;
+};
+
+const DiffViewerComponent = DiffViewer as unknown as (props: DiffViewerProps) => JSX.Element;
+
+type CommitHistoryItemProps = {
+  commit: GitCommitSummary;
+  isExpanded: boolean;
+  diff?: string;
+  isMobile: boolean;
+  wrapText: boolean;
+  onToggle: () => void;
+};
+
+export default function CommitHistoryItem({
+  commit,
+  isExpanded,
+  diff,
+  isMobile,
+  wrapText,
+  onToggle,
+}: CommitHistoryItemProps) {
+  return (
+    <div className="border-b border-border last:border-0">
+      <button
+        type="button"
+        aria-expanded={isExpanded}
+        className="w-full flex items-start p-3 hover:bg-accent/50 cursor-pointer transition-colors text-left bg-transparent border-0"
+        onClick={onToggle}
+      >
+        <span className="mr-2 mt-1 p-0.5 hover:bg-accent rounded">
+          {isExpanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+        </span>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-foreground truncate">{commit.message}</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                {commit.author}
+                {' \u2022 '}
+                {commit.date}
+              </p>
+            </div>
+            <span className="text-sm font-mono text-muted-foreground/60 flex-shrink-0">
+              {commit.hash.substring(0, 7)}
+            </span>
+          </div>
+        </div>
+      </button>
+
+      {isExpanded && diff && (
+        <div className="bg-muted/50">
+          <div className="max-h-96 overflow-y-auto p-2">
+            <div className="text-sm font-mono text-muted-foreground mb-2">
+              {commit.stats}
+            </div>
+            <DiffViewerComponent diff={diff} fileName="commit" isMobile={isMobile} wrapText={wrapText} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}