2b8513f902
* feat: add multi-select and drag-to-move for file tree and changes panel
Add Shift-click range and Ctrl/Cmd-click toggle selection to the file
tree and staged/unstaged changes sections. Includes bulk actions
(delete, stage, unstage, discard), drag-and-drop file moving into
directories, keyboard shortcuts (Escape, Ctrl+A), and E2E tests.
* fix: move bulk action components to file-row to fix max-lines lint
* style: apply prettier formatting to all changed files
* fix: bulk delete all selected items and update anchor on stale shift-click
* fix: address CodeRabbit review comments
- Keep original file-row-* data-testid for backwards compat
- Remove eager onClearSelection from bulk actions (auto-pruned by hook)
- Variant-scope bulk-discard/bulk-unstage test ids
- Remove index.lock deletion from E2E GitHelper retry loop
* fix: fix E2E tests — create files after session open, remove DnD test
- Create files AFTER opening session so WS detects git status changes
- Add proper git env vars (GIT_AUTHOR_NAME, etc.) matching existing tests
- Use element.press("Escape") instead of page keyboard for proper focus
- Remove drag-to-directory test (Playwright dragTo doesn't support HTML5
dataTransfer events needed by our DnD implementation)
* fix: rename E2E task titles to avoid ambiguous 'Changes' tab selector
* fix: make file list focusable for Escape key handler in E2E tests
* fix: improve selection styling and ignore right-clicks in selection handler
- Use text-accent-foreground on selected rows for dark mode readability
- Override child span colors with [&_span]:text-accent-foreground
- Use hover:bg-accent/80 instead of hover:bg-muted on selected items
- Skip selection handling on right-click (button === 2) so context menu
works without clearing multi-selection
* fix: plain click should not select — only Ctrl/Cmd+click and Shift+click
Plain click now clears any selection and performs the original action
(open file / toggle folder / open diff). Selection only happens with
modifier keys. handleClick returns boolean to indicate whether the
click was consumed by selection logic.
* fix: fix multi-select bugs and expand E2E test coverage
Bug fixes:
- Change isSelected from boolean to function prop so children compute
their own selection state (fixes nested file selection)
- Inline TreeNodeRow JSX into TreeNodeItem so ContextMenuTrigger asChild
can attach refs directly (fixes right-click context menu)
- Set lastClickedRef on plain click so shift-click has a valid anchor
- Add click-outside handler to clear selection
E2E tests expanded to 14 file-tree tests + 3 changes-panel tests:
- Ctrl-click select, toggle, multi-select
- Plain click clears selection
- Shift-click range after plain click and ctrl-click anchors
- Directory selection and nested file selection
- Right-click context menu (single + bulk delete)
- Click outside clears selection
- Escape clears selection
* fix: move AlertDialog outside ContextMenu to fix delete action
The AlertDialog wrapping the ContextMenu caused Radix focus management
to intercept context menu item selection, making Delete trigger Rename.
Moving AlertDialog to a sibling of ContextMenu fixes the conflict.
* fix: reorder context menu — Delete first, Rename second
Radix ContextMenu auto-focuses the first item on open, which caused
accidental Rename triggers. Putting Delete first (the more common
action for selection) avoids this.
* fix: don't clear selection when clicking context menu or dialog
The click-outside handler was clearing selection when clicking on
context menu items or confirmation dialog buttons (rendered in portals
outside the tree container). Now skips clearing for elements with
role=menu, role=alertdialog, or role=dialog.
Also extended the bulk delete E2E test to verify both files are
actually removed after confirming the dialog.
* fix: hide file count in delete dialog when folder children not loaded
When a folder hasn't been expanded, its children aren't loaded yet so
countFilesInTree returns 0. Instead of showing "0 files", hide the
count entirely and just show "delete <folder name>".
* fix: show confirmation dialog for bulk discard in changes panel
Bulk discard was calling git.discard() directly, bypassing the
confirmation dialog. Now routes through handleBulkDiscardClick which
opens the DiscardDialog with a bulk message ("discard changes to N
files") before executing.
* fix: address remaining CodeRabbit review comments
- Deduplicate filenames on move: when moving files with identical names
to the same directory, append "(1)", "(2)" etc. to avoid collisions.
Both tree update and rename API calls use the same deduplication.
- Replace void operator with .catch(() => {}) for bulk stage/unstage
to prevent unhandled promise rejections.
- Add document-level dragend listener as safety net to clear stuck drag
state if the element's onDragEnd doesn't fire (Escape, out-of-window).
* test: add unit tests for file tree move deduplication and visible paths
* fix: address all remaining PR review comments
- Move onSelectionChange out of React state updater (side effect fix)
- Stabilize keyboard listener deps (pass callbacks not object)
- Remove unnecessary useMemo in BulkActionBar
- Fix ghost-restore on partial bulk delete (remove all at once)
- Fix blank filename on single-file bulk discard
- Add aria-selected and role=treeitem for accessibility
- Extract computeNextSelection params into object (max-params lint)
* fix: add missing bulk action props to WorkingTreeProps type
WorkingTreeSections referenced onBulkStage, onBulkUnstage, and
onBulkDiscard but WorkingTreeProps Pick didn't include them, causing
a TypeScript build failure.
* fix: address final review comments
- Add unit tests for computeNextSelection (8 tests covering ctrl-click,
shift-click range, stale anchor, reverse range, shift+ctrl extend)
- Extract shared E2E helpers (GitHelper, makeGitEnv, openTaskSession,
createStandardProfile) to e2e/helpers/git-helper.ts
- Fix misleading comment in bulk delete (says "re-insert only failed"
but implementation restores full snapshot)
* fix: use Promise.all for bulk delete to prevent partial rollback
Individual .catch() handlers could restore already-deleted files
if a later delete failed. Now uses Promise.all so rollback only
happens if any delete rejects.
* test: add renderHook tests for useMultiSelect hook behaviors
- Stale-path pruning: items shrink → selected paths auto-pruned
- Plain click: returns false, clears existing selection
- selectAll/clearSelection: work correctly, fire onSelectionChange
- Install @testing-library/react for renderHook support
* fix: handle false returns from onDeleteFile in bulk delete Promise.all
* chore: remove unused @testing-library/react-hooks dependency
206 lines
6.7 KiB
TypeScript
206 lines
6.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useCallback } from "react";
|
|
import type { GitOperationResult, PRCreateResult } from "@/hooks/use-git-operations";
|
|
import type { useToast } from "@/components/toast-provider";
|
|
|
|
// Accepts both useGitOperations and SessionGit
|
|
interface GitOps {
|
|
pull: (rebase?: boolean) => Promise<GitOperationResult>;
|
|
push: (options?: { force?: boolean; setUpstream?: boolean }) => Promise<GitOperationResult>;
|
|
rebase: (baseBranch: string) => Promise<GitOperationResult>;
|
|
commit: (message: string, stageAll?: boolean, amend?: boolean) => Promise<GitOperationResult>;
|
|
stage: (paths?: string[]) => Promise<GitOperationResult>;
|
|
unstage: (paths?: string[]) => Promise<GitOperationResult>;
|
|
discard: (paths?: string[]) => Promise<GitOperationResult>;
|
|
revertCommit: (commitSHA: string) => Promise<GitOperationResult>;
|
|
reset: (commitSHA: string, mode: "soft" | "hard") => Promise<GitOperationResult>;
|
|
createPR: (
|
|
title: string,
|
|
body: string,
|
|
baseBranch?: string,
|
|
draft?: boolean,
|
|
) => Promise<PRCreateResult>;
|
|
isLoading: boolean;
|
|
}
|
|
type Toast = ReturnType<typeof useToast>["toast"];
|
|
type GitOperationFn = (
|
|
op: () => Promise<{ success: boolean; output: string; error?: string }>,
|
|
name: string,
|
|
) => Promise<void>;
|
|
|
|
export function useChangesGitHandlers(
|
|
gitOps: GitOps,
|
|
toast: Toast,
|
|
baseBranch: string | undefined,
|
|
) {
|
|
const handleGitOperation = useCallback(
|
|
async (
|
|
operation: () => Promise<{ success: boolean; output: string; error?: string }>,
|
|
operationName: string,
|
|
) => {
|
|
try {
|
|
const result = await operation();
|
|
const variant = result.success ? "success" : "error";
|
|
const title = result.success ? `${operationName} successful` : `${operationName} failed`;
|
|
const description = result.success
|
|
? result.output.slice(0, 200) || `${operationName} completed`
|
|
: result.error || "An error occurred";
|
|
toast({ title, description, variant });
|
|
} catch (e) {
|
|
toast({
|
|
title: `${operationName} failed`,
|
|
description: e instanceof Error ? e.message : "An unexpected error occurred",
|
|
variant: "error",
|
|
});
|
|
}
|
|
},
|
|
[toast],
|
|
);
|
|
|
|
const handlePull = useCallback(() => {
|
|
handleGitOperation(() => gitOps.pull(), "Pull");
|
|
}, [handleGitOperation, gitOps]);
|
|
const handleRebase = useCallback(() => {
|
|
const targetBranch = baseBranch?.replace(/^origin\//, "") || "main";
|
|
handleGitOperation(() => gitOps.rebase(targetBranch), "Rebase");
|
|
}, [handleGitOperation, gitOps, baseBranch]);
|
|
const handlePush = useCallback(() => {
|
|
handleGitOperation(() => gitOps.push(), "Push");
|
|
}, [handleGitOperation, gitOps]);
|
|
const handleForcePush = useCallback(() => {
|
|
handleGitOperation(() => gitOps.push({ force: true }), "Force push");
|
|
}, [handleGitOperation, gitOps]);
|
|
const handleRevertCommit = useCallback(
|
|
(sha: string) => {
|
|
handleGitOperation(() => gitOps.revertCommit(sha), "Revert commit");
|
|
},
|
|
[handleGitOperation, gitOps],
|
|
);
|
|
|
|
return {
|
|
handleGitOperation,
|
|
handlePull,
|
|
handleRebase,
|
|
handlePush,
|
|
handleForcePush,
|
|
handleRevertCommit,
|
|
};
|
|
}
|
|
|
|
function useChangesDiscardAmendHandlers(
|
|
gitOps: GitOps,
|
|
toast: Toast,
|
|
handleGitOperation: GitOperationFn,
|
|
) {
|
|
const [showDiscardDialog, setShowDiscardDialog] = useState(false);
|
|
const [fileToDiscard, setFileToDiscard] = useState<string | null>(null);
|
|
const [filesToDiscard, setFilesToDiscard] = useState<string[] | null>(null);
|
|
|
|
const handleDiscardClick = useCallback((filePath: string) => {
|
|
setFileToDiscard(filePath);
|
|
setFilesToDiscard(null);
|
|
setShowDiscardDialog(true);
|
|
}, []);
|
|
const handleBulkDiscardClick = useCallback((paths: string[]) => {
|
|
setFilesToDiscard(paths);
|
|
setFileToDiscard(null);
|
|
setShowDiscardDialog(true);
|
|
}, []);
|
|
const handleDiscardConfirm = useCallback(async () => {
|
|
const paths = filesToDiscard ?? (fileToDiscard ? [fileToDiscard] : null);
|
|
if (!paths) return;
|
|
try {
|
|
const result = await gitOps.discard(paths);
|
|
if (!result.success)
|
|
toast({
|
|
title: "Failed to discard changes",
|
|
description: result.error || "An unknown error occurred",
|
|
variant: "error",
|
|
});
|
|
} catch (error) {
|
|
toast({
|
|
title: "Failed to discard changes",
|
|
description: error instanceof Error ? error.message : "An unknown error occurred",
|
|
variant: "error",
|
|
});
|
|
} finally {
|
|
setShowDiscardDialog(false);
|
|
setFileToDiscard(null);
|
|
setFilesToDiscard(null);
|
|
}
|
|
}, [fileToDiscard, filesToDiscard, gitOps, toast]);
|
|
|
|
// Amend dialog state (for editing last commit message directly)
|
|
const [amendDialogOpen, setAmendDialogOpen] = useState(false);
|
|
const [amendMessage, setAmendMessage] = useState("");
|
|
|
|
const handleOpenAmendDialog = useCallback((currentMessage: string) => {
|
|
setAmendMessage(currentMessage);
|
|
setAmendDialogOpen(true);
|
|
}, []);
|
|
|
|
const handleAmend = useCallback(async () => {
|
|
if (!amendMessage.trim()) return;
|
|
setAmendDialogOpen(false);
|
|
await handleGitOperation(() => gitOps.commit(amendMessage.trim(), false, true), "Amend commit");
|
|
setAmendMessage("");
|
|
}, [amendMessage, handleGitOperation, gitOps]);
|
|
|
|
return {
|
|
showDiscardDialog,
|
|
setShowDiscardDialog,
|
|
fileToDiscard,
|
|
filesToDiscard,
|
|
handleDiscardClick,
|
|
handleBulkDiscardClick,
|
|
handleDiscardConfirm,
|
|
// Amend dialog
|
|
amendDialogOpen,
|
|
setAmendDialogOpen,
|
|
amendMessage,
|
|
setAmendMessage,
|
|
handleOpenAmendDialog,
|
|
handleAmend,
|
|
};
|
|
}
|
|
|
|
function useChangesResetHandlers(gitOps: GitOps, handleGitOperation: GitOperationFn) {
|
|
const [resetDialogOpen, setResetDialogOpen] = useState(false);
|
|
const [resetCommitSha, setResetCommitSha] = useState<string | null>(null);
|
|
|
|
const handleOpenResetDialog = useCallback((sha: string) => {
|
|
setResetCommitSha(sha);
|
|
setResetDialogOpen(true);
|
|
}, []);
|
|
|
|
const handleReset = useCallback(
|
|
async (mode: "soft" | "hard") => {
|
|
if (!resetCommitSha) return;
|
|
setResetDialogOpen(false);
|
|
const operationName = mode === "hard" ? "Hard reset" : "Soft reset";
|
|
await handleGitOperation(() => gitOps.reset(resetCommitSha, mode), operationName);
|
|
setResetCommitSha(null);
|
|
},
|
|
[resetCommitSha, handleGitOperation, gitOps],
|
|
);
|
|
|
|
return {
|
|
resetDialogOpen,
|
|
setResetDialogOpen,
|
|
resetCommitSha,
|
|
handleOpenResetDialog,
|
|
handleReset,
|
|
};
|
|
}
|
|
|
|
export function useChangesDialogHandlers(
|
|
gitOps: GitOps,
|
|
toast: Toast,
|
|
handleGitOperation: GitOperationFn,
|
|
) {
|
|
const discardAmend = useChangesDiscardAmendHandlers(gitOps, toast, handleGitOperation);
|
|
const reset = useChangesResetHandlers(gitOps, handleGitOperation);
|
|
return { ...discardAmend, ...reset };
|
|
}
|