feat: add commi & branch diff comparison tab and quick diff support (close #25)

Author: zelon

wimygit-tauri/src/App.tsx

@@ -4,7 +4,7 @@ import { exists } from "@tauri-apps/plugin-fs";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { APP_NAME } from "./constants";
 import { Header, TabBar, RepoTabBar, GitLogPanel, LeftSidebar, RepoStateBanner } from "./components/layout";
-import type { PendingFilePreview } from "./components/layout/SidebarQuickDiff";
+import type { PendingFilePreview, BranchFileDiffInfo } from "./components/layout/SidebarQuickDiff";
 import { PendingTab } from "./components/tabs";
 import { MergeEditor } from "./components/shared/MergeEditor";
 import type { FileStatus } from "./lib";
@@ -18,6 +18,7 @@ const TagTab = lazy(() => import("./components/tabs/TagTab").then(m => ({ defaul
 const WorktreeTab = lazy(() => import("./components/tabs/WorktreeTab").then(m => ({ default: m.WorktreeTab })));
 const PluginTab = lazy(() => import("./components/tabs/PluginTab").then(m => ({ default: m.PluginTab })));
 const TimeLapsePanel = lazy(() => import("./components/layout/TimeLapsePanel").then(m => ({ default: m.TimeLapsePanel })));
+const BranchDiffTab = lazy(() => import("./components/tabs/BranchDiffTab").then(m => ({ default: m.BranchDiffTab })));
 import {
   isGitRepository,
   getRepositoryRoot,
@@ -108,6 +109,10 @@ function App() {
   } | null>(null);
   const [activeMergeFile, setActiveMergeFile] = useState<FileStatus | null>(null);
   const [conflictCount, setConflictCount] = useState(0);
+  const [branchDiffOpen, setBranchDiffOpen] = useState(false);
+  const [branchFileDiff, setBranchFileDiff] = useState<BranchFileDiffInfo | null>(null);
+  const [branchDiffInitialBase, setBranchDiffInitialBase] = useState<string | undefined>();
+  const [branchDiffInitialCompare, setBranchDiffInitialCompare] = useState<string | undefined>();
 
   // Set window title (visible in taskbar)
   useEffect(() => {
@@ -343,6 +348,10 @@ function App() {
     setLfsLockCount(0);
     setActiveMergeFile(null);
     setConflictCount(0);
+    setBranchDiffOpen(false);
+    setBranchFileDiff(null);
+    setBranchDiffInitialBase(undefined);
+    setBranchDiffInitialCompare(undefined);
   }, [activeRepoId]);
 
   // LFS 설치 여부 확인 (레포 변경 시)
@@ -471,6 +480,7 @@ function App() {
           refreshKey={activeRepo.refreshKey}
           selectedDiff={selectedDiff}
           pendingFilePreview={pendingFilePreview}
+          branchFileDiff={branchFileDiff}
           onFileSelect={setSelectedFilePath}
           onRefresh={handleRefresh}
           highlightPath={workspaceHighlight}
@@ -494,15 +504,29 @@ function App() {
           ) : (
             <>
           <TabBar
-            tabs={BASE_INNER_TABS.map((tab) => {
-              if (tab.id === "pending" && lfsLockCount > 0)
-                return { ...tab, label: `Pending Changes [${lfsLockCount} Locked]` };
-              if (tab.id === "worktrees" && worktreeCount >= 2)
-                return { ...tab, label: `Worktrees [+${worktreeCount}]` };
-              return tab;
-            })}
+            tabs={[
+              ...BASE_INNER_TABS.map((tab) => {
+                if (tab.id === "pending" && lfsLockCount > 0)
+                  return { ...tab, label: `Pending Changes [${lfsLockCount} Locked]` };
+                if (tab.id === "worktrees" && worktreeCount >= 2)
+                  return { ...tab, label: `Worktrees [+${worktreeCount}]` };
+                return tab;
+              }),
+              ...(branchDiffOpen
+                ? [{ id: "branch-diff", label: "⇄ Compare", closeable: true }]
+                : []),
+            ]}
             activeTab={activeRepo.activeTab}
             onTabChange={handleTabChange}
+            onTabClose={(tabId) => {
+              if (tabId === "branch-diff") {
+                setBranchDiffOpen(false);
+                setBranchFileDiff(null);
+                if (activeRepo.activeTab === "branch-diff") {
+                  handleTabChange("branches");
+                }
+              }
+            }}
           />
           <div className={activeRepo.activeTab === "pending" ? "contents" : "hidden"}>
             <PendingTab
@@ -551,6 +575,12 @@ function App() {
                   })();
                 }}
                 onShowInHistoryFile={(absolutePath) => setSelectedFilePath(absolutePath)}
+                onOpenCompare={(base, compare) => {
+                  setBranchDiffInitialBase(base || undefined);
+                  setBranchDiffInitialCompare(compare || undefined);
+                  setBranchDiffOpen(true);
+                  handleTabChange("branch-diff");
+                }}
               />
             )}
             {activeRepo.activeTab === "branches" && (
@@ -559,6 +589,25 @@ function App() {
                 refreshKey={activeRepo.refreshKey}
                 silentRefreshKey={activeRepo.silentRefreshKey}
                 onRefresh={handleRefresh}
+                onOpenCompare={(base, compare) => {
+                  setBranchDiffInitialBase(base || undefined);
+                  setBranchDiffInitialCompare(compare || undefined);
+                  setBranchDiffOpen(true);
+                  handleTabChange("branch-diff");
+                }}
+              />
+            )}
+            {activeRepo.activeTab === "branch-diff" && branchDiffOpen && (
+              <BranchDiffTab
+                repoPath={activeRepo.repoPath}
+                refreshKey={activeRepo.refreshKey}
+                initialBase={branchDiffInitialBase}
+                initialCompare={branchDiffInitialCompare}
+                onFileSelect={(diff, filename) => {
+                  setSelectedDiff(null);
+                  setPendingFilePreview(null);
+                  setBranchFileDiff({ diff, filename });
+                }}
               />
             )}
             {activeRepo.activeTab === "remotes" && (

wimygit-tauri/src/components/layout/LeftSidebar.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import { type SelectedDiffInfo } from "../../lib";
 import { WorkspaceTree } from "./WorkspaceTree";
-import { SidebarQuickDiff, type PendingFilePreview } from "./SidebarQuickDiff";
+import { SidebarQuickDiff, type PendingFilePreview, type BranchFileDiffInfo } from "./SidebarQuickDiff";
 
 // ─── constants ────────────────────────────────────────────────────────────────
 
@@ -17,12 +17,13 @@ interface LeftSidebarProps {
   refreshKey: number;
   selectedDiff?: SelectedDiffInfo | null;
   pendingFilePreview?: PendingFilePreview | null;
+  branchFileDiff?: BranchFileDiffInfo | null;
   onFileSelect?: (path: string | null) => void;
   onRefresh?: () => void;
   highlightPath?: { path: string; triggerCount: number } | null;
 }
 
-export function LeftSidebar({ repoPath, refreshKey, selectedDiff, pendingFilePreview, onFileSelect, onRefresh, highlightPath }: LeftSidebarProps) {
+export function LeftSidebar({ repoPath, refreshKey, selectedDiff, pendingFilePreview, branchFileDiff, onFileSelect, onRefresh, highlightPath }: LeftSidebarProps) {
   const [width, setWidth] = useState(() => {
     const quarter = Math.round(window.innerWidth / 4);
     return Math.max(MIN_SIDEBAR_WIDTH, quarter);
@@ -50,6 +51,15 @@ export function LeftSidebar({ repoPath, refreshKey, selectedDiff, pendingFilePre
     prevPendingFilePreview.current = pendingFilePreview;
   }, [pendingFilePreview]);
 
+  const prevBranchFileDiff = useRef<BranchFileDiffInfo | null | undefined>(undefined);
+  useEffect(() => {
+    if (branchFileDiff && branchFileDiff !== prevBranchFileDiff.current) {
+      setActiveTab("quickdiff");
+      localStorage.setItem("sidebar_tab", "quickdiff");
+    }
+    prevBranchFileDiff.current = branchFileDiff;
+  }, [branchFileDiff]);
+
   // Auto-switch to Workspace tab when highlightPath is set
   useEffect(() => {
     if (highlightPath) {
@@ -155,6 +165,7 @@ export function LeftSidebar({ repoPath, refreshKey, selectedDiff, pendingFilePre
               repoPath={repoPath}
               selectedDiff={selectedDiff}
               pendingFilePreview={pendingFilePreview}
+              branchFileDiff={branchFileDiff}
               onRefresh={onRefresh}
             />
           )}

wimygit-tauri/src/components/layout/SidebarQuickDiff.tsx

@@ -130,14 +130,21 @@ function SingleImagePreview({ src, label, filename }: { src: string; label: stri
   );
 }
 
+export interface BranchFileDiffInfo {
+  diff: string;
+  filename: string;
+  loading?: boolean;
+}
+
 export interface SidebarQuickDiffProps {
   repoPath: string;
   selectedDiff?: SelectedDiffInfo | null;
   pendingFilePreview?: PendingFilePreview | null;
+  branchFileDiff?: BranchFileDiffInfo | null;
   onRefresh?: () => void;
 }
 
-export function SidebarQuickDiff({ repoPath, selectedDiff, pendingFilePreview, onRefresh }: SidebarQuickDiffProps) {
+export function SidebarQuickDiff({ repoPath, selectedDiff, pendingFilePreview, branchFileDiff, onRefresh }: SidebarQuickDiffProps) {
   const [modes, setModes] = useState<DiffMode[]>([{ kind: "combined", label: "Diff" }]);
   const [activeMode, setActiveMode] = useState<DiffModeKind>("combined");
   const [conflictViewMode, setConflictViewMode] = useState<ConflictViewMode>("unified");
@@ -156,6 +163,7 @@ export function SidebarQuickDiff({ repoPath, selectedDiff, pendingFilePreview, o
 
   const isCommitMode = !!selectedDiff;
   const showingPendingPreview = !isCommitMode && !!pendingFilePreview;
+  const showingBranchFileDiff = !isCommitMode && !pendingFilePreview && !!branchFileDiff;
   const currentMode = modes.find((m) => m.kind === activeMode) ?? modes[0];
 
   // ── Rebuild commit modes when selection changes ──
@@ -362,8 +370,8 @@ export function SidebarQuickDiff({ repoPath, selectedDiff, pendingFilePreview, o
 
   const changeContext = (delta: number) => setContextLines((prev) => Math.max(0, prev + delta));
 
-  const displayDiff = showingPendingPreview ? pendingDiff : diff;
-  const displayLoading = showingPendingPreview ? pendingLoading : loadingDiff;
+  const displayDiff = showingBranchFileDiff ? (branchFileDiff?.diff ?? "") : showingPendingPreview ? pendingDiff : diff;
+  const displayLoading = showingBranchFileDiff ? (branchFileDiff?.loading ?? false) : showingPendingPreview ? pendingLoading : loadingDiff;
   const isImageDiff = !displayLoading && (!!imageDiffSrcs || !!imagePreviewSrc);
 
   useEffect(() => {
@@ -504,6 +512,12 @@ export function SidebarQuickDiff({ repoPath, selectedDiff, pendingFilePreview, o
           <span title={pendingFilePreview.filename}>{pendingFilePreview.filename}</span>
         </div>
       )}
+      {showingBranchFileDiff && branchFileDiff && (
+        <div className="shrink-0 px-2 py-1 text-xs border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-850 text-gray-700 dark:text-gray-300 truncate flex items-center gap-1">
+          <span className="shrink-0 text-blue-500">branch diff</span>
+          <span title={branchFileDiff.filename}>{branchFileDiff.filename}</span>
+        </div>
+      )}
 
       {/* ── Diff viewer / Image preview ── */}
       <div className="flex-1 overflow-hidden">
@@ -537,15 +551,15 @@ export function SidebarQuickDiff({ repoPath, selectedDiff, pendingFilePreview, o
         ) : (
           <DiffViewer
             diff={displayDiff}
-            placeholder={isCommitMode ? "No diff available" : showingPendingPreview ? "No changes" : "Select a file from History or Pending Changes"}
+            placeholder={isCommitMode ? "No diff available" : showingBranchFileDiff ? "No diff" : showingPendingPreview ? "No changes" : "Select a file from History, Pending Changes, or Branch Diff"}
           />
         )}
       </div>
 
       {/* ── Footer — hidden in image diff mode ── */}
       {!isImageDiff && (
         <div className="shrink-0 px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex justify-between">
-          <span>{isCommitMode ? "Commit diff" : showingPendingPreview ? "Pending preview" : "—"}</span>
+          <span>{isCommitMode ? "Commit diff" : showingBranchFileDiff ? "Branch diff" : showingPendingPreview ? "Pending preview" : "—"}</span>
           <span>Context: {contextLines} lines</span>
         </div>
       )}

wimygit-tauri/src/components/layout/TabBar.tsx

@@ -2,23 +2,25 @@ interface Tab {
   id: string;
   label: string;
   icon?: string;
+  closeable?: boolean;
 }
 
 interface TabBarProps {
   tabs: Tab[];
   activeTab: string;
   onTabChange: (tabId: string) => void;
+  onTabClose?: (tabId: string) => void;
 }
 
-export function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {
+export function TabBar({ tabs, activeTab, onTabChange, onTabClose }: TabBarProps) {
   return (
     <div className="flex items-end border-b border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 px-1 pt-1">
       {tabs.map((tab) => (
         <button
           key={tab.id}
           onClick={() => onTabChange(tab.id)}
           className={`
-            px-4 text-sm transition-colors rounded-t-lg -mb-px
+            flex items-center gap-1.5 px-4 text-sm transition-colors rounded-t-lg -mb-px
             ${
               activeTab === tab.id
                 ? "py-2.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 border-b-white dark:border-b-gray-800 text-gray-900 dark:text-white"
@@ -28,6 +30,15 @@ export function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {
         >
           {tab.icon && <span className="mr-1">{tab.icon}</span>}
           {tab.label}
+          {tab.closeable && (
+            <span
+              role="button"
+              onClick={(e) => { e.stopPropagation(); onTabClose?.(tab.id); }}
+              className="ml-1 w-4 h-4 flex items-center justify-center rounded text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 text-xs leading-none"
+            >
+              ✕
+            </span>
+          )}
         </button>
       ))}
     </div>