fix: make mouse back/forward navigation configurable

apps/desktop/src/lib/trpc/routers/settings/index.ts

@@ -21,6 +21,7 @@ import {
 	DEFAULT_AUTO_APPLY_DEFAULT_PRESET,
 	DEFAULT_CONFIRM_ON_QUIT,
 	DEFAULT_FILE_OPEN_MODE,
+	DEFAULT_MOUSE_NAVIGATION_ENABLED,
 	DEFAULT_OPEN_LINKS_IN_APP,
 	DEFAULT_SHOW_PRESETS_BAR,
 	DEFAULT_SHOW_RESOURCE_MONITOR,
@@ -634,6 +635,26 @@ export const createSettingsRouter = () => {
 				return { success: true };
 			}),
 
+		getMouseNavigationEnabled: publicProcedure.query(() => {
+			const row = getSettings();
+			return row.mouseNavigationEnabled ?? DEFAULT_MOUSE_NAVIGATION_ENABLED;
+		}),
+
+		setMouseNavigationEnabled: publicProcedure
+			.input(z.object({ enabled: z.boolean() }))
+			.mutation(({ input }) => {
+				localDb
+					.insert(settings)
+					.values({ id: 1, mouseNavigationEnabled: input.enabled })
+					.onConflictDoUpdate({
+						target: settings.id,
+						set: { mouseNavigationEnabled: input.enabled },
+					})
+					.run();
+
+				return { success: true };
+			}),
+
 		getOpenLinksInApp: publicProcedure.query(() => {
 			const row = getSettings();
 			return row.openLinksInApp ?? DEFAULT_OPEN_LINKS_IN_APP;

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/NavigationControls/NavigationControls.tsx

@@ -3,6 +3,7 @@ import { useLocation, useRouter } from "@tanstack/react-router";
 import { useEffect } from "react";
 import { LuArrowLeft, LuArrowRight } from "react-icons/lu";
 import { HotkeyTooltipContent } from "renderer/components/HotkeyTooltipContent";
+import { electronTrpc } from "renderer/lib/electron-trpc";
 import { useAppHotkey } from "renderer/stores/hotkeys";
 import { HistoryDropdown } from "./components/HistoryDropdown";
 
@@ -16,7 +17,15 @@ export function NavigationControls() {
 	useAppHotkey("NAVIGATE_BACK", () => router.history.back());
 	useAppHotkey("NAVIGATE_FORWARD", () => router.history.forward());
 
+	const { data: mouseNavigationEnabled } =
+		electronTrpc.settings.getMouseNavigationEnabled.useQuery();
+	const isMouseNavigationEnabled = mouseNavigationEnabled ?? false;
+
 	useEffect(() => {
+		if (!isMouseNavigationEnabled) {
+			return;
+		}
+
 		const handleMouseUp = (event: MouseEvent) => {
 			if (event.button === 3) {
 				event.preventDefault();
@@ -29,7 +38,7 @@ export function NavigationControls() {
 
 		window.addEventListener("mouseup", handleMouseUp);
 		return () => window.removeEventListener("mouseup", handleMouseUp);
-	}, [router]);
+	}, [isMouseNavigationEnabled, router]);
 
 	return (
 		<div className="flex items-center">

apps/desktop/src/renderer/routes/_authenticated/settings/behavior/components/BehaviorSettings/BehaviorSettings.tsx

@@ -56,6 +56,10 @@ export function BehaviorSettings({ visibleItems }: BehaviorSettingsProps) {
 		SETTING_ITEM_ID.BEHAVIOR_WORKTREE_LOCATION,
 		visibleItems,
 	);
+	const showMouseNavigation = isItemVisible(
+		SETTING_ITEM_ID.BEHAVIOR_MOUSE_NAVIGATION,
+		visibleItems,
+	);
 	const showOpenLinksInApp = isItemVisible(
 		SETTING_ITEM_ID.BEHAVIOR_OPEN_LINKS_IN_APP,
 		visibleItems,
@@ -246,6 +250,29 @@ export function BehaviorSettings({ visibleItems }: BehaviorSettingsProps) {
 		});
 	const defaultWorktreePath = useDefaultWorktreePath();
 
+	const { data: mouseNavigationEnabled, isLoading: isMouseNavigationLoading } =
+		electronTrpc.settings.getMouseNavigationEnabled.useQuery();
+	const setMouseNavigationEnabled =
+		electronTrpc.settings.setMouseNavigationEnabled.useMutation({
+			onMutate: async ({ enabled }) => {
+				await utils.settings.getMouseNavigationEnabled.cancel();
+				const previous = utils.settings.getMouseNavigationEnabled.getData();
+				utils.settings.getMouseNavigationEnabled.setData(undefined, enabled);
+				return { previous };
+			},
+			onError: (_err, _vars, context) => {
+				if (context?.previous !== undefined) {
+					utils.settings.getMouseNavigationEnabled.setData(
+						undefined,
+						context.previous,
+					);
+				}
+			},
+			onSettled: () => {
+				utils.settings.getMouseNavigationEnabled.invalidate();
+			},
+		});
+
 	const { data: openLinksInApp, isLoading: isOpenLinksInAppLoading } =
 		electronTrpc.settings.getOpenLinksInApp.useQuery();
 	const setOpenLinksInApp = electronTrpc.settings.setOpenLinksInApp.useMutation(
@@ -432,6 +459,29 @@ export function BehaviorSettings({ visibleItems }: BehaviorSettingsProps) {
 					</div>
 				)}
 
+				{showMouseNavigation && (
+					<div className="flex items-center justify-between">
+						<div className="space-y-0.5">
+							<Label htmlFor="mouse-navigation" className="text-sm font-medium">
+								Mouse back/forward navigation
+							</Label>
+							<p className="text-xs text-muted-foreground">
+								Use mouse buttons 3/4 to move between workspace tabs
+							</p>
+						</div>
+						<Switch
+							id="mouse-navigation"
+							checked={mouseNavigationEnabled ?? false}
+							onCheckedChange={(enabled) =>
+								setMouseNavigationEnabled.mutate({ enabled })
+							}
+							disabled={
+								isMouseNavigationLoading || setMouseNavigationEnabled.isPending
+							}
+						/>
+					</div>
+				)}
+
 				{showOpenLinksInApp && (
 					<div className="flex items-center justify-between">
 						<div className="space-y-0.5">

apps/desktop/src/renderer/routes/_authenticated/settings/utils/settings-search/settings-search.ts

@@ -29,6 +29,7 @@ export const SETTING_ITEM_ID = {
 	BEHAVIOR_FILE_OPEN_MODE: "behavior-file-open-mode",
 	BEHAVIOR_RESOURCE_MONITOR: "behavior-resource-monitor",
 	BEHAVIOR_WORKTREE_LOCATION: "behavior-worktree-location",
+	BEHAVIOR_MOUSE_NAVIGATION: "behavior-mouse-navigation",
 	BEHAVIOR_OPEN_LINKS_IN_APP: "behavior-open-links-in-app",
 
 	TERMINAL_PRESETS: "terminal-presets",
@@ -464,6 +465,22 @@ export const SETTINGS_ITEMS: SettingsItem[] = [
 			"default",
 		],
 	},
+	{
+		id: SETTING_ITEM_ID.BEHAVIOR_MOUSE_NAVIGATION,
+		section: "behavior",
+		title: "Mouse back/forward navigation",
+		description: "Use mouse buttons 3/4 to move between workspace tabs",
+		keywords: [
+			"mouse",
+			"back",
+			"forward",
+			"buttons",
+			"navigation",
+			"workspace",
+			"tabs",
+			"accessibility",
+		],
+	},
 	{
 		id: SETTING_ITEM_ID.BEHAVIOR_OPEN_LINKS_IN_APP,
 		section: "behavior",

apps/desktop/src/shared/constants.ts

@@ -44,6 +44,7 @@ export const DEFAULT_SHOW_PRESETS_BAR = true;
 export const DEFAULT_TELEMETRY_ENABLED = true;
 export const DEFAULT_SHOW_RESOURCE_MONITOR = false;
 export const DEFAULT_OPEN_LINKS_IN_APP = false;
+export const DEFAULT_MOUSE_NAVIGATION_ENABLED = false;
 
 // External links (documentation, help resources, etc.)
 export const EXTERNAL_LINKS = {

packages/local-db/drizzle/0032_normal_cardiac.sql

@@ -0,0 +1 @@
+ALTER TABLE `settings` ADD `mouse_navigation_enabled` integer;

packages/local-db/drizzle/meta/0032_snapshot.json

@@ -139,6 +139,15 @@
         "organization_members_organization_id_organizations_id_fk": {
           "name": "organization_members_organization_id_organizations_id_fk",
           "tableFrom": "organization_members",
+          "tableTo": "organizations",
+          "columnsFrom": [
+            "organization_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
           "columnsFrom": [
             "organization_id"
           ],
@@ -152,6 +161,15 @@
         "organization_members_user_id_users_id_fk": {
           "name": "organization_members_user_id_users_id_fk",
           "tableFrom": "organization_members",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
           "columnsFrom": [
             "user_id"
           ],
@@ -578,6 +596,13 @@
           "primaryKey": false,
           "notNull": false,
           "autoincrement": false
+        },
+        "mouse_navigation_enabled": {
+          "name": "mouse_navigation_enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
         }
       },
       "indexes": {},
@@ -841,15 +866,15 @@
         "tasks_organization_id_organizations_id_fk": {
           "name": "tasks_organization_id_organizations_id_fk",
           "tableFrom": "tasks",
+          "tableTo": "organizations",
           "columnsFrom": [
             "organization_id"
           ],
-          "tableTo": "organizations",
           "columnsTo": [
             "id"
           ],
-          "onUpdate": "no action",
-          "onDelete": "cascade"
+          "onDelete": "cascade",
+          "onUpdate": "no action"
         },
         "tasks_assignee_id_users_id_fk": {
           "name": "tasks_assignee_id_users_id_fk",

packages/local-db/drizzle/meta/_journal.json

@@ -229,6 +229,8 @@
     {
       "idx": 32,
       "version": "6",
+      "when": 1771855095227,
+      "tag": "0032_normal_cardiac",
       "when": 1771876417139,
       "tag": "0032_migrate_workspace_ids_to_uuid_v4",
       "breakpoints": true

packages/local-db/src/schema/schema.ts

@@ -174,6 +174,9 @@ export const settings = sqliteTable("settings", {
 	showResourceMonitor: integer("show_resource_monitor", { mode: "boolean" }),
 	worktreeBaseDir: text("worktree_base_dir"),
 	openLinksInApp: integer("open_links_in_app", { mode: "boolean" }),
+	mouseNavigationEnabled: integer("mouse_navigation_enabled", {
+		mode: "boolean",
+	}),
 	defaultEditor: text("default_editor").$type<ExternalApp>(),
 });