feat: Implement the ability to discard changes (#199)

charlesvien · web-flow · commit c30b8be3eb24 · 2025-12-04T14:25:21.000-08:00
diff --git a/apps/array/src/main/preload.ts b/apps/array/src/main/preload.ts
@@ -278,6 +278,12 @@ contextBridge.exposeInMainWorld("electronAPI", {
   }> => ipcRenderer.invoke("get-diff-stats", repoPath),
   getCurrentBranch: (repoPath: string): Promise<string | undefined> =>
     ipcRenderer.invoke("get-current-branch", repoPath),
+  discardFileChanges: (
+    repoPath: string,
+    filePath: string,
+    fileStatus: string,
+  ): Promise<void> =>
+    ipcRenderer.invoke("discard-file-changes", repoPath, filePath, fileStatus),
   listDirectory: (
     dirPath: string,
   ): Promise<
diff --git a/apps/array/src/main/services/git.ts b/apps/array/src/main/services/git.ts
@@ -1,4 +1,4 @@
-import { type ChildProcess, exec } from "node:child_process";
+import { type ChildProcess, exec, execFile } from "node:child_process";
 import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
@@ -10,6 +10,7 @@ import { logger } from "../lib/logger";
 const log = logger.scope("git");
 
 const execAsync = promisify(exec);
+const execFileAsync = promisify(execFile);
 const fsPromises = fs.promises;
 
 const getAllFilesInDirectory = async (
@@ -289,6 +290,39 @@ export interface DiffStats {
   linesRemoved: number;
 }
 
+const discardFileChanges = async (
+  directoryPath: string,
+  filePath: string,
+  fileStatus: GitFileStatus,
+): Promise<void> => {
+  switch (fileStatus) {
+    case "modified":
+    case "deleted":
+      await execFileAsync("git", ["checkout", "HEAD", "--", filePath], {
+        cwd: directoryPath,
+      });
+      break;
+    case "added":
+      await execFileAsync("git", ["rm", "-f", filePath], {
+        cwd: directoryPath,
+      });
+      break;
+    case "untracked":
+      await execFileAsync("git", ["clean", "-f", "--", filePath], {
+        cwd: directoryPath,
+      });
+      break;
+    case "renamed":
+      // TODO: Restore the original file?
+      await execFileAsync("git", ["checkout", "HEAD", "--", filePath], {
+        cwd: directoryPath,
+      });
+      break;
+    default:
+      throw new Error(`Unknown file status: ${fileStatus}`);
+  }
+};
+
 const getDiffStats = async (directoryPath: string): Promise<DiffStats> => {
   try {
     // git diff --numstat HEAD shows: added\tremoved\tfilename
@@ -687,4 +721,16 @@ export function registerGitIpc(
       return getCurrentBranch(directoryPath);
     },
   );
+
+  ipcMain.handle(
+    "discard-file-changes",
+    async (
+      _event: IpcMainInvokeEvent,
+      directoryPath: string,
+      filePath: string,
+      fileStatus: GitFileStatus,
+    ): Promise<void> => {
+      return discardFileChanges(directoryPath, filePath, fileStatus);
+    },
+  );
 }
diff --git a/apps/array/src/renderer/features/panels/index.ts b/apps/array/src/renderer/features/panels/index.ts
@@ -7,6 +7,7 @@ export {
 export { useDragDropHandlers } from "./hooks/useDragDropHandlers";
 export { usePanelLayoutStore } from "./store/panelLayoutStore";
 export { usePanelStore } from "./store/panelStore";
+export { isDiffTabActiveInTree } from "./store/panelStoreHelpers";
 
 export type {
   GroupId,
diff --git a/apps/array/src/renderer/features/panels/store/panelLayoutStore.ts b/apps/array/src/renderer/features/panels/store/panelLayoutStore.ts
@@ -12,6 +12,7 @@ import {
   createDiffTabId,
   createFileTabId,
   generatePanelId,
+  getDiffTabIdsForFile,
   getLeafPanel,
   getSplitConfig,
   selectNextTabAfterClose,
@@ -55,6 +56,7 @@ export interface PanelLayoutStore {
   closeOtherTabs: (taskId: string, panelId: string, tabId: string) => void;
   closeTabsToRight: (taskId: string, panelId: string, tabId: string) => void;
   closeTabsForFile: (taskId: string, filePath: string) => void;
+  closeDiffTabsForFile: (taskId: string, filePath: string) => void;
   setActiveTab: (taskId: string, panelId: string, tabId: string) => void;
   setDraggingTab: (
     taskId: string,
@@ -428,12 +430,7 @@ export const usePanelLayoutStore = createWithEqualityFn<PanelLayoutStore>()(
 
         const tabIds = [
           createFileTabId(filePath),
-          createDiffTabId(filePath),
-          createDiffTabId(filePath, "modified"),
-          createDiffTabId(filePath, "deleted"),
-          createDiffTabId(filePath, "added"),
-          createDiffTabId(filePath, "untracked"),
-          createDiffTabId(filePath, "renamed"),
+          ...getDiffTabIdsForFile(filePath),
         ];
 
         for (const tabId of tabIds) {
@@ -444,6 +441,20 @@ export const usePanelLayoutStore = createWithEqualityFn<PanelLayoutStore>()(
         }
       },
 
+      closeDiffTabsForFile: (taskId, filePath) => {
+        const layout = get().taskLayouts[taskId];
+        if (!layout) return;
+
+        const tabIds = getDiffTabIdsForFile(filePath);
+
+        for (const tabId of tabIds) {
+          const tabLocation = findTabInTree(layout.panelTree, tabId);
+          if (tabLocation) {
+            get().closeTab(taskId, tabLocation.panelId, tabId);
+          }
+        }
+      },
+
       setActiveTab: (taskId, panelId, tabId) => {
         set((state) =>
           updateTaskLayout(state, taskId, (layout) => {
diff --git a/apps/array/src/renderer/features/panels/store/panelStoreHelpers.ts b/apps/array/src/renderer/features/panels/store/panelStoreHelpers.ts
@@ -29,6 +29,17 @@ export function createDiffTabId(filePath: string, status?: string): string {
   return `diff-${filePath}`;
 }
 
+export function getDiffTabIdsForFile(filePath: string): string[] {
+  return [
+    createDiffTabId(filePath),
+    createDiffTabId(filePath, "modified"),
+    createDiffTabId(filePath, "deleted"),
+    createDiffTabId(filePath, "added"),
+    createDiffTabId(filePath, "untracked"),
+    createDiffTabId(filePath, "renamed"),
+  ];
+}
+
 export function parseTabId(tabId: string): ParsedTabId & { status?: string } {
   if (tabId.startsWith("file-")) {
     return { type: "file", value: tabId.slice(5) };
@@ -289,3 +300,20 @@ export function applyCleanupWithFallback(
 ): PanelNode {
   return cleanedTree || originalTree;
 }
+
+// Tab active state utilities
+function isTabActiveInTree(tree: PanelNode, tabId: string): boolean {
+  if (tree.type === "leaf") {
+    return tree.content.activeTabId === tabId;
+  }
+  return tree.children.some((child) => isTabActiveInTree(child, tabId));
+}
+
+export function isDiffTabActiveInTree(
+  tree: PanelNode,
+  filePath: string,
+  status?: string,
+): boolean {
+  const tabId = createDiffTabId(filePath, status);
+  return isTabActiveInTree(tree, tabId);
+}
diff --git a/apps/array/src/renderer/features/task-detail/components/ChangesPanel.tsx b/apps/array/src/renderer/features/task-detail/components/ChangesPanel.tsx
@@ -1,10 +1,11 @@
 import { PanelMessage } from "@components/ui/PanelMessage";
-import { usePanelLayoutStore } from "@features/panels";
+import { isDiffTabActiveInTree, usePanelLayoutStore } from "@features/panels";
 import { useTaskData } from "@features/task-detail/hooks/useTaskData";
-import { FileIcon } from "@phosphor-icons/react";
-import { Badge, Box, Flex, Text } from "@radix-ui/themes";
+import { ArrowCounterClockwiseIcon, FileIcon } from "@phosphor-icons/react";
+import { Badge, Box, Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
 import type { ChangedFile, GitFileStatus, Task } from "@shared/types";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { showMessageBox } from "@utils/dialog";
 import { handleExternalAppAction } from "@utils/handleExternalAppAction";
 import {
   selectWorktreePath,
@@ -20,6 +21,7 @@ interface ChangedFileItemProps {
   file: ChangedFile;
   taskId: string;
   repoPath: string;
+  isActive: boolean;
 }
 
 function getStatusIndicator(status: GitFileStatus): {
@@ -41,8 +43,55 @@ function getStatusIndicator(status: GitFileStatus): {
   }
 }
 
-function ChangedFileItem({ file, taskId, repoPath }: ChangedFileItemProps) {
+function getDiscardInfo(
+  file: ChangedFile,
+  fileName: string,
+): { message: string; action: string } {
+  switch (file.status) {
+    case "modified":
+      return {
+        message: `Are you sure you want to discard changes in '${fileName}'?`,
+        action: "Discard File",
+      };
+    case "deleted":
+      return {
+        message: `Are you sure you want to restore '${fileName}'?`,
+        action: "Restore File",
+      };
+    case "added":
+      return {
+        message: `Are you sure you want to remove '${fileName}'?`,
+        action: "Remove File",
+      };
+    case "untracked":
+      return {
+        message: `Are you sure you want to delete '${fileName}'?`,
+        action: "Delete File",
+      };
+    case "renamed":
+      return {
+        message: `Are you sure you want to undo the rename of '${fileName}'?`,
+        action: "Undo Rename File",
+      };
+    default:
+      return {
+        message: `Are you sure you want to discard changes in '${fileName}'?`,
+        action: "Discard File",
+      };
+  }
+}
+
+function ChangedFileItem({
+  file,
+  taskId,
+  repoPath,
+  isActive,
+}: ChangedFileItemProps) {
   const openDiff = usePanelLayoutStore((state) => state.openDiff);
+  const closeDiffTabsForFile = usePanelLayoutStore(
+    (state) => state.closeDiffTabsForFile,
+  );
+  const queryClient = useQueryClient();
   const fileName = file.path.split("/").pop() || file.path;
   const indicator = getStatusIndicator(file.status);
 
@@ -60,14 +109,45 @@ function ChangedFileItem({ file, taskId, repoPath }: ChangedFileItemProps) {
     await handleExternalAppAction(result.action, fullPath, fileName);
   };
 
+  const handleDiscard = async (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    const { message, action } = getDiscardInfo(file, fileName);
+
+    const result = await showMessageBox({
+      type: "warning",
+      title: "Discard changes",
+      message,
+      buttons: ["Cancel", action],
+      defaultId: 0,
+      cancelId: 0,
+    });
+
+    if (result.response !== 1) return;
+
+    await window.electronAPI.discardFileChanges(
+      repoPath,
+      file.path,
+      file.status,
+    );
+
+    closeDiffTabsForFile(taskId, file.path);
+
+    queryClient.invalidateQueries({
+      queryKey: ["changed-files-head", repoPath],
+    });
+  };
+
   return (
     <Flex
       align="center"
       gap="2"
       py="1"
+      pl="1"
+      pr="2"
       onClick={handleClick}
       onContextMenu={handleContextMenu}
-      className="hover:bg-gray-2"
+      className={`group ${isActive ? "bg-gray-3" : "hover:bg-gray-2"}`}
       style={{ cursor: "pointer", whiteSpace: "nowrap", overflow: "hidden" }}
     >
       <Badge size="1" color={indicator.color} style={{ flexShrink: 0 }}>
@@ -84,10 +164,23 @@ function ChangedFileItem({ file, taskId, repoPath }: ChangedFileItemProps) {
           userSelect: "none",
           overflow: "hidden",
           textOverflow: "ellipsis",
+          flex: 1,
         }}
       >
         {file.originalPath ? `${file.originalPath} → ${file.path}` : file.path}
       </Text>
+      <Tooltip content="Discard changes">
+        <IconButton
+          size="1"
+          variant="ghost"
+          color="gray"
+          onClick={handleDiscard}
+          className={isActive ? "" : "opacity-0 group-hover:opacity-100"}
+          style={{ flexShrink: 0 }}
+        >
+          <ArrowCounterClockwiseIcon size={12} />
+        </IconButton>
+      </Tooltip>
     </Flex>
   );
 }
@@ -96,6 +189,7 @@ export function ChangesPanel({ taskId, task }: ChangesPanelProps) {
   const taskData = useTaskData({ taskId, initialTask: task });
   const worktreePath = useWorkspaceStore(selectWorktreePath(taskId));
   const repoPath = worktreePath ?? taskData.repoPath;
+  const layout = usePanelLayoutStore((state) => state.getLayout(taskId));
 
   const { data: changedFiles = [], isLoading } = useQuery({
     queryKey: ["changed-files-head", repoPath],
@@ -104,6 +198,11 @@ export function ChangesPanel({ taskId, task }: ChangesPanelProps) {
     refetchOnMount: "always",
   });
 
+  const isFileActive = (file: ChangedFile): boolean => {
+    if (!layout) return false;
+    return isDiffTabActiveInTree(layout.panelTree, file.path, file.status);
+  };
+
   if (!repoPath) {
     return <PanelMessage>No repository path available</PanelMessage>;
   }
@@ -125,6 +224,7 @@ export function ChangesPanel({ taskId, task }: ChangesPanelProps) {
             file={file}
             taskId={taskId}
             repoPath={repoPath}
+            isActive={isFileActive(file)}
           />
         ))}
       </Flex>
diff --git a/apps/array/src/renderer/stores/repositoryWorkspaceStore.ts b/apps/array/src/renderer/stores/repositoryWorkspaceStore.ts
@@ -2,6 +2,7 @@ import { useAuthStore } from "@features/auth/stores/authStore";
 import { logger } from "@renderer/lib/logger";
 import { randomSuffix } from "@shared/utils/id";
 import { cloneStore } from "@stores/cloneStore";
+import { showMessageBox } from "@utils/dialog";
 import { expandTildePath } from "@utils/path";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
@@ -54,7 +55,7 @@ const validateRepository = async (
 };
 
 const showError = async (title: string, message: string, detail?: string) => {
-  await window.electronAPI.showMessageBox({
+  await showMessageBox({
     type: "error",
     title,
     message,
@@ -137,7 +138,7 @@ export const repositoryWorkspaceStore = create<RepositoryWorkspaceState>()(
         detected: string,
       ): Promise<boolean> => {
         const [, repoName] = repository.split("/");
-        const result = await window.electronAPI.showMessageBox({
+        const result = await showMessageBox({
           type: "error",
           title: "Repository mismatch",
           message: `Folder '${repoName}' exists but contains a different repository`,
@@ -198,7 +199,7 @@ export const repositoryWorkspaceStore = create<RepositoryWorkspaceState>()(
 
           // Skip check if cloneId provided (clone state already created by caller)
           if (!existingCloneId && isCloning(repository)) {
-            await window.electronAPI.showMessageBox({
+            await showMessageBox({
               type: "warning",
               title: "Repository cloning",
               message: `${repository} is currently being cloned`,
diff --git a/apps/array/src/renderer/types/electron.d.ts b/apps/array/src/renderer/types/electron.d.ts
diff --git a/apps/array/src/renderer/utils/dialog.ts b/apps/array/src/renderer/utils/dialog.ts
