Add tab and file context actions

CHANGELOG.md

@@ -9,6 +9,8 @@ Format loosely follows [Keep a Changelog](https://keepachangelog.com).
 
 ### Added
 
+- Tabs now have right-click actions to close other tabs or tabs to the left, and open files can be deleted from the file bar overflow menu. [#294](https://github.com/bholmesdev/hubble.md/pull/294)
+
 ### Changed
 
 ### Fixed

apps/desktop/src/components/DocumentTabs.tsx

@@ -5,7 +5,9 @@ import { isChangelogPath } from "../lib/changelogNote";
 import { fileStem, relativeWorkspacePath } from "../lib/filePath";
 import {
 	activateTab,
+	closeOtherTabs,
 	closeTab,
+	closeTabsToLeft,
 	renameCurrentMarkdownFile,
 	reorderTab,
 } from "../store/actions";
@@ -54,6 +56,8 @@ export function DocumentTabs({
 			activeTabId={tabs.activeTabId}
 			onActivate={(id) => void activateTab(id)}
 			onClose={(id) => void closeTab(id)}
+			onCloseOthers={(id) => void closeOtherTabs(id)}
+			onCloseLeft={(id) => void closeTabsToLeft(id)}
 			onReorder={reorderTab}
 			onNewTab={onNewTab}
 			newTabTitle={newTabTitle}

apps/desktop/src/components/FileInfoBar.tsx

@@ -16,6 +16,7 @@ import MingcuteArrowLeftLine from "~icons/mingcute/arrow-left-line";
 import MingcuteArrowRightLine from "~icons/mingcute/arrow-right-line";
 import MingcuteCodeLine from "~icons/mingcute/code-line";
 import MingcuteCopy2Line from "~icons/mingcute/copy-2-line";
+import MingcuteDeleteLine from "~icons/mingcute/delete-line";
 import MingcuteExternalLinkLine from "~icons/mingcute/external-link-line";
 import MingcuteFolderOpenLine from "~icons/mingcute/folder-open-line";
 import MingcuteMore2Line from "~icons/mingcute/more-2-line";
@@ -25,6 +26,7 @@ import type { AgentClient } from "../desktopApi/types";
 import { isChangelogPath } from "../lib/changelogNote";
 import { copyText } from "../lib/clipboard";
 import {
+	basename,
 	dirname,
 	hasHtmlExtension,
 	hasMarkdownExtension,
@@ -37,6 +39,7 @@ import {
 import { useCompactWindow } from "../lib/layout";
 import { revealFileLabel } from "../lib/revealFile";
 import {
+	deleteSidebarItems,
 	goBack,
 	goForward,
 	openPathInDefaultApp,
@@ -48,6 +51,7 @@ import {
 import { useHistoryNav } from "../store/hooks";
 import {
 	currentPathStore,
+	isInWorkspace,
 	reviewThreadsStore,
 	titleGenerationPreviewStore,
 	viewerStore,
@@ -153,6 +157,9 @@ export function FileInfoBar({
 					{(compact || actionPath) && (
 						<ActionsMenu
 							path={actionPath}
+							canDelete={Boolean(
+								actionPath && isInWorkspace(actionPath, workspacePath ?? null),
+							)}
 							showTerminal={compact}
 							workspacePath={
 								workspacePath && actionPath && isEditableFile(actionPath)
@@ -199,10 +206,12 @@ function NavigationControls() {
 
 function ActionsMenu({
 	path,
+	canDelete,
 	workspacePath,
 	showTerminal,
 }: {
 	path: string | null;
+	canDelete: boolean;
 	workspacePath: string | null;
 	showTerminal: boolean;
 }) {
@@ -249,6 +258,12 @@ function ActionsMenu({
 		}
 	}
 
+	function deleteFile() {
+		if (!path || !canDelete || !window.confirm(`Delete ${basename(path)}?`))
+			return;
+		void deleteSidebarItems([{ kind: "file", path }]);
+	}
+
 	return (
 		<Menu.Root>
 			<Menu.Trigger
@@ -345,6 +360,18 @@ function ActionsMenu({
 									<span className="min-w-0 flex-1">Copy file path</span>
 									<ShortcutHint commandId="app.copy-path" />
 								</Menu.Item>
+								{canDelete ? (
+									<>
+										<Menu.Separator className="my-1 h-px bg-border" />
+										<Menu.Item
+											className={`${menuItemClass} text-destructive`}
+											onClick={deleteFile}
+										>
+											<MingcuteDeleteLine className="size-3 shrink-0" />
+											<span className="min-w-0 flex-1">Delete</span>
+										</Menu.Item>
+									</>
+								) : null}
 							</>
 						)}
 					</Menu.Popup>

apps/desktop/src/store/actions.ts

@@ -753,6 +753,7 @@ export const {
 	closeTab,
 	reopenClosedTab,
 	closeOtherTabs,
+	closeTabsToLeft,
 	closeAllTabs,
 	closeActiveTab,
 	activateAdjacentTab,

apps/desktop/src/store/tabActions.test.ts

@@ -575,6 +575,50 @@ describe("desktop tabs", () => {
 		expect(viewerStore.get().currentPath).toBe("/workspace/c.md");
 	});
 
+	it("closes other tabs around a chosen tab", async () => {
+		const api = createDesktopApi();
+		api.pathExists.mockResolvedValue(true);
+		api.readFileText.mockImplementation(
+			async (path: string) => `content:${path}`,
+		);
+		const { appStore, closeOtherTabs, loadPath, openTabForPath, viewerStore } =
+			await loadStoreActions(api);
+
+		await loadPath("/workspace/a.md");
+		await openTabForPath("/workspace/b.md");
+		const kept = appStore.get().tabs.activeTabId;
+		await openTabForPath("/workspace/c.md");
+		if (!kept) throw new Error("expected a tab");
+		await closeOtherTabs(kept);
+
+		expect(appStore.get().tabs.order).toEqual([kept]);
+		expect(viewerStore.get().currentPath).toBe("/workspace/b.md");
+	});
+
+	it("closes only tabs to the left of a chosen tab", async () => {
+		const api = createDesktopApi();
+		api.pathExists.mockResolvedValue(true);
+		api.readFileText.mockImplementation(
+			async (path: string) => `content:${path}`,
+		);
+		const { appStore, closeTabsToLeft, loadPath, openTabForPath, viewerStore } =
+			await loadStoreActions(api);
+
+		await loadPath("/workspace/a.md");
+		await openTabForPath("/workspace/b.md");
+		const target = appStore.get().tabs.activeTabId;
+		await openTabForPath("/workspace/c.md");
+		if (!target) throw new Error("expected a tab");
+		await closeTabsToLeft(target);
+
+		const tabs = appStore.get().tabs;
+		expect(tabs.order.map((id) => tabs.byId[id].path)).toEqual([
+			"/workspace/b.md",
+			"/workspace/c.md",
+		]);
+		expect(viewerStore.get().currentPath).toBe("/workspace/c.md");
+	});
+
 	it("closes every tab and empties the editor", async () => {
 		const api = createDesktopApi();
 		api.pathExists.mockResolvedValue(true);

apps/desktop/src/store/tabActions.ts

@@ -200,12 +200,30 @@ export function createTabActions({
 		return reopenClosedTabInOrder(getWorkspaceRequest());
 	}
 
-	async function closeOtherTabs() {
-		const { order, activeTabId } = tabsStore.get();
-		if (!activeTabId) return;
-		for (const id of order) {
-			if (id !== activeTabId) await closeTab(id);
+	async function closeOtherTabs(keepId?: TabId) {
+		let tabs = tabsStore.get();
+		const keep = keepId ?? tabs.activeTabId;
+		if (!keep || !tabs.order.includes(keep)) return;
+		if (tabs.activeTabId !== keep) {
+			await activateTab(keep);
+			if (tabsStore.get().activeTabId !== keep) return;
+			tabs = tabsStore.get();
+		}
+		for (const id of tabs.order) {
+			if (id !== keep) await closeTab(id);
+		}
+	}
+
+	async function closeTabsToLeft(id: TabId) {
+		const tabs = tabsStore.get();
+		const index = tabs.order.indexOf(id);
+		if (index <= 0) return;
+		const closing = tabs.order.slice(0, index);
+		if (tabs.activeTabId && closing.includes(tabs.activeTabId)) {
+			await activateTab(id);
+			if (tabsStore.get().activeTabId !== id) return;
 		}
+		for (const closingId of closing) await closeTab(closingId);
 	}
 
 	/** Close every tab and clear the editor. */
@@ -247,6 +265,7 @@ export function createTabActions({
 		closeTab,
 		reopenClosedTab,
 		closeOtherTabs,
+		closeTabsToLeft,
 		closeAllTabs,
 		closeActiveTab,
 		activateAdjacentTab,