feat(web): add workspace panes and transitions

apps/desktop/src/electron/ElectronMenu.ts

@@ -84,6 +84,9 @@ function normalizeContextMenuItems(source: readonly ContextMenuItem[]): ContextM
       disabled: sourceItem.disabled === true,
       ...(sourceItem.separatorBefore === true ? { separatorBefore: true } : {}),
       ...(typeof sourceItem.checked === "boolean" ? { checked: sourceItem.checked } : {}),
+      ...(typeof sourceItem.accelerator === "string"
+        ? { accelerator: sourceItem.accelerator }
+        : {}),
     };
 
     if (sourceItem.children) {
@@ -171,6 +174,8 @@ export const make = Effect.gen(function* () {
         label: item.label,
         enabled: !item.disabled,
         ...(typeof item.checked === "boolean" ? { type: "checkbox", checked: item.checked } : {}),
+        // Shown beside the label for learning; the app's own handler runs the key.
+        ...(item.accelerator ? { accelerator: item.accelerator, registerAccelerator: false } : {}),
       };
       if (item.children && item.children.length > 0) {
         itemOption.submenu = buildTemplate(item.children, complete);

apps/desktop/src/ipc/channels.ts

@@ -126,6 +126,8 @@ export const PREVIEW_RECORDING_STOP_CHANNEL = "desktop:preview-recording-stop";
 export const PREVIEW_RECORDING_SAVE_CHANNEL = "desktop:preview-recording-save";
 export const PREVIEW_STATE_CHANGE_CHANNEL = "desktop:preview-state-change";
 export const PREVIEW_POINTER_EVENT_CHANNEL = "desktop:preview-pointer-event";
+export const PREVIEW_SET_FORWARDED_KEY_CHORDS_CHANNEL = "desktop:preview-set-forwarded-key-chords";
+export const PREVIEW_FORWARDED_KEY_CHORD_CHANNEL = "desktop:preview-forwarded-key-chord";
 export const PREVIEW_OPEN_LINK_CHANNEL = "desktop:preview-open-link";
 export const PREVIEW_FIND_RESULT_CHANNEL = "desktop:preview-find-result";
 

apps/desktop/src/ipc/methods/preview.ts

@@ -1,6 +1,7 @@
 import {
   DesktopPreviewAnnotationSendEnabledInputSchema,
   DesktopPreviewAnnotationThemeInputSchema,
+  DesktopPreviewForwardedShortcutsInputSchema,
   DesktopPreviewAnnotationVoiceStateSchema,
   DesktopPreviewPickElementInputSchema,
   DesktopPreviewArtifactInputSchema,
@@ -402,6 +403,16 @@ const setAnnotationTheme = DesktopIpc.makeIpcMethod({
   }),
 });
 
+const setForwardedKeyChords = DesktopIpc.makeIpcMethod({
+  channel: IpcChannels.PREVIEW_SET_FORWARDED_KEY_CHORDS_CHANNEL,
+  payload: DesktopPreviewForwardedShortcutsInputSchema,
+  result: Schema.Void,
+  handler: Effect.fn("desktop.ipc.preview.setForwardedKeyChords")(function* ({ shortcuts }) {
+    const manager = yield* PreviewManager.PreviewManager;
+    yield* manager.setForwardedKeyChords(shortcuts);
+  }),
+});
+
 const pickElement = DesktopIpc.makeIpcMethod({
   channel: IpcChannels.PREVIEW_PICK_ELEMENT_CHANNEL,
   payload: DesktopPreviewPickElementInputSchema,
@@ -504,6 +515,7 @@ export const methods = [
   clearCache,
   getPreviewConfig,
   setAnnotationTheme,
+  setForwardedKeyChords,
   setAnnotationSendEnabled,
   pickElement,
   cancelPickElement,

apps/desktop/src/preload.ts

@@ -438,6 +438,20 @@ contextBridge.exposeInMainWorld("desktopBridge", {
       ipcRenderer.invoke(IpcChannels.PREVIEW_CLEAR_CACHE_CHANNEL, { environmentId, profileId }),
     getPreviewConfig: (environmentId, profileId) =>
       ipcRenderer.invoke(IpcChannels.PREVIEW_GET_CONFIG_CHANNEL, { environmentId, profileId }),
+    setForwardedKeyChords: (shortcuts) =>
+      ipcRenderer.invoke(IpcChannels.PREVIEW_SET_FORWARDED_KEY_CHORDS_CHANNEL, { shortcuts }),
+    onForwardedKeyChord: (listener) => {
+      const wrappedListener = (_event: Electron.IpcRendererEvent, input: unknown) => {
+        if (typeof input !== "object" || input === null) return;
+        listener(input as Parameters<typeof listener>[0]);
+      };
+      ipcRenderer.on(IpcChannels.PREVIEW_FORWARDED_KEY_CHORD_CHANNEL, wrappedListener);
+      return () =>
+        ipcRenderer.removeListener(
+          IpcChannels.PREVIEW_FORWARDED_KEY_CHORD_CHANNEL,
+          wrappedListener,
+        );
+    },
     setAnnotationTheme: (theme) =>
       ipcRenderer.invoke(IpcChannels.PREVIEW_SET_ANNOTATION_THEME_CHANNEL, { theme }),
     setAnnotationSendEnabled: (tabId, enabled) =>

apps/desktop/src/preview/Manager.test.ts

@@ -992,6 +992,22 @@ describe("PreviewManager", () => {
         );
         expect(focus).toHaveBeenCalledOnce();
         expect(send).toHaveBeenCalledTimes(2);
+        yield* manager.setForwardedKeyChords([
+          { key: "z", metaKey: true, ctrlKey: false, altKey: true, shiftKey: false },
+        ]);
+        const layoutPreventDefault = vi.fn();
+        beforeInput(
+          { preventDefault: layoutPreventDefault } as never,
+          { ...key, key: "z", code: "KeyY", alt: true, shift: false } as never,
+        );
+        expect(layoutPreventDefault).toHaveBeenCalledOnce();
+        layoutPreventDefault.mockClear();
+        beforeInput(
+          { preventDefault: layoutPreventDefault } as never,
+          { ...key, key: "y", code: "KeyZ", alt: true, shift: false } as never,
+        );
+        expect(layoutPreventDefault).not.toHaveBeenCalled();
+        yield* manager.setForwardedKeyChords([]);
         send.mockClear();
         yield* manager.setForwardedShortcuts([{ command: "view.reopenClosed", shortcut }]);
 

apps/desktop/src/preview/Manager.ts

@@ -7,6 +7,7 @@ import {
   DESKTOP_PREVIEW_RECORDING_CAPTURE_TRIGGER,
 } from "@t3tools/contracts";
 import type {
+  DesktopForwardedShortcut,
   DesktopPreviewAnnotationTheme,
   DesktopPreviewAnnotationVoiceConfig,
   DesktopPreviewAnnotationVoiceState,
@@ -67,6 +68,7 @@ import * as DesktopRendererHistory from "../telemetry/DesktopRendererHistory.ts"
 import {
   MENU_ACTION_CHANNEL,
   PREVIEW_ANNOTATION_VOICE_EVENT_CHANNEL,
+  PREVIEW_FORWARDED_KEY_CHORD_CHANNEL,
   PREVIEW_PICTURE_IN_PICTURE_FRAME_CHANNEL,
 } from "../ipc/channels.ts";
 import * as DesktopBrowserHost from "./DesktopBrowserHost.ts";
@@ -506,6 +508,28 @@ export const previewWindowOpenAction = (details: {
     : "navigate";
 };
 
+const isForwardedShortcut = (
+  input: Electron.Input,
+  shortcuts: ReadonlyArray<DesktopForwardedShortcut>,
+  platform: NodeJS.Platform,
+): boolean => {
+  if (input.type !== "keyDown" || shortcuts.length === 0) return false;
+  return shortcuts.some((shortcut) =>
+    matchesKeybindingShortcut(
+      {
+        key: input.key,
+        code: input.code,
+        metaKey: input.meta,
+        ctrlKey: input.control,
+        altKey: input.alt,
+        shiftKey: input.shift,
+      },
+      { ...shortcut, modKey: false },
+      platform === "darwin" ? "MacIntel" : platform,
+    ),
+  );
+};
+
 const isPreviewRefreshShortcut = (input: Electron.Input, platform: NodeJS.Platform): boolean =>
   input.type === "keyDown" &&
   input.key.toLowerCase() === "r" &&
@@ -589,6 +613,9 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     new Set(),
   );
   const pickSessionsRef = yield* Ref.make<ReadonlyMap<string, PickSession>>(new Map());
+  // Read synchronously in before-input-event, which must decide on the spot
+  // whether the page sees a key, so a plain variable rather than a Ref.
+  let forwardedKeyChords: ReadonlyArray<DesktopForwardedShortcut> = [];
   const controlSessionsRef = yield* SynchronizedRef.make<
     ReadonlyMap<number, BrowserControlSession>
   >(new Map());
@@ -1613,6 +1640,27 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
         }
         return;
       }
+      // App chords (the layout map) go to the app window, not the page.
+      if (isForwardedShortcut(input, forwardedKeyChords, hostPlatform)) {
+        event.preventDefault();
+        const forwardedKey = {
+          key: input.key,
+          code: input.code,
+          metaKey: input.meta,
+          ctrlKey: input.control,
+          altKey: input.alt,
+          shiftKey: input.shift,
+        };
+        runFork(
+          Ref.get(mainWindowRef).pipe(
+            Effect.map((window) => {
+              if (Option.isNone(window) || window.value.isDestroyed()) return;
+              window.value.webContents.send(PREVIEW_FORWARDED_KEY_CHORD_CHANNEL, forwardedKey);
+            }),
+          ),
+        );
+        return;
+      }
       if (isPreviewRefreshShortcut(input, hostPlatform)) {
         event.preventDefault();
         runFork(
@@ -3730,6 +3778,10 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     setShown,
     setCaptureDrawn,
     setColorScheme,
+    setForwardedKeyChords: (shortcuts: ReadonlyArray<DesktopForwardedShortcut>) =>
+      Effect.sync(() => {
+        forwardedKeyChords = shortcuts;
+      }),
     setMainWindow,
     setForwardedShortcuts: (shortcuts: ReadonlyArray<PreviewForwardedShortcut>) =>
       Effect.sync(() => {
@@ -3965,6 +4017,10 @@ export class PreviewManager extends Context.Service<
       tabId: string,
       enabled: boolean,
     ) => Effect.Effect<void, PreviewManagerError>;
+    /** Chords a focused preview webview hands back to the app window. */
+    readonly setForwardedKeyChords: (
+      shortcuts: ReadonlyArray<DesktopForwardedShortcut>,
+    ) => Effect.Effect<void>;
     readonly pickElement: (
       tabId: string,
       voice?: DesktopPreviewAnnotationVoiceConfig,
@@ -4138,6 +4194,7 @@ export const make = Effect.gen(function* PreviewManagerMake() {
       },
     ),
     setAnnotationTheme: operations.setAnnotationTheme,
+    setForwardedKeyChords: operations.setForwardedKeyChords,
     setAnnotationSendEnabled: operations.setAnnotationSendEnabled,
     pickElement: operations.pickElement,
     updateAnnotationVoice: operations.updateAnnotationVoice,

apps/desktop/src/window/DesktopApplicationMenu.ts

@@ -210,7 +210,8 @@ export const make = Effect.gen(function* () {
           { role: "services" },
           { type: "separator" },
           { role: "hide", label: `Hide ${environment.displayName}` },
-          { role: "hideOthers" },
+          // alt+cmd+H focuses the pane on the left; Hide Others keeps its item.
+          { role: "hideOthers", accelerator: "" },
           { role: "unhide" },
           { type: "separator" },
           { role: "quit", label: `Quit ${environment.displayName}` },
@@ -287,9 +288,10 @@ export const make = Effect.gen(function* () {
             accelerator: "Shift+CmdOrCtrl+R",
             click: mainContentsClick("forceReload"),
           },
+          // alt+cmd+I and J belong to the layout keys on macOS.
           {
             label: "Toggle Developer Tools",
-            accelerator: environment.platform === "darwin" ? "Alt+Command+I" : "Ctrl+Shift+I",
+            accelerator: environment.platform === "darwin" ? "Alt+Shift+Command+I" : "Ctrl+Shift+I",
             click: mainContentsClick("toggleDevTools"),
           },
           { type: "separator" },

apps/desktop/src/window/DesktopWindow.test.ts

@@ -1,7 +1,7 @@
 import * as NodeServices from "@effect/platform-node/NodeServices";
 import { assert, describe, it } from "@effect/vitest";
 import * as Deferred from "effect/Deferred";
-import { DesktopSnapShotId } from "@t3tools/contracts";
+import { DEFAULT_CLIENT_SETTINGS, DesktopSnapShotId } from "@t3tools/contracts";
 import * as Effect from "effect/Effect";
 import * as Exit from "effect/Exit";
 import * as Fiber from "effect/Fiber";
@@ -46,7 +46,7 @@ import * as ElectronMenu from "../electron/ElectronMenu.ts";
 import * as ElectronShell from "../electron/ElectronShell.ts";
 import * as ElectronTheme from "../electron/ElectronTheme.ts";
 import * as ElectronWindow from "../electron/ElectronWindow.ts";
-import { SNAP_SHOT_EVENT_CHANNEL } from "../ipc/channels.ts";
+import { MENU_ACTION_CHANNEL, SNAP_SHOT_EVENT_CHANNEL } from "../ipc/channels.ts";
 import * as DesktopServerExposure from "../backend/DesktopServerExposure.ts";
 import * as DesktopWindow from "./DesktopWindow.ts";
 import {
@@ -163,9 +163,7 @@ function makeFakeBrowserWindow() {
   };
 }
 
-const layerDesktopClientSettings = Layer.mock(DesktopClientSettings.DesktopClientSettings)({
-  get: Effect.succeedNone,
-});
+const layerDesktopClientSettings = DesktopClientSettings.layerTest();
 
 const layerElectronApp = Layer.mock(ElectronApp.ElectronApp)({
   quit: Effect.void,
@@ -380,6 +378,7 @@ function layerTest(input: {
       ),
     ),
     Layer.merge(DesktopState.layer),
+    Layer.merge(layerDesktopClientSettings),
   );
 }
 
@@ -1340,20 +1339,48 @@ describe("DesktopWindow", () => {
         if (!swipe) return;
         const history = fakeWindow.navigationHistory;
 
-        swipe({}, "left");
+        yield* Effect.promise(() => Promise.resolve(swipe({}, "left")));
         assert.equal(history.goBack.mock.calls.length, 1);
         assert.equal(history.goForward.mock.calls.length, 0);
-        swipe({}, "right");
+        yield* Effect.promise(() => Promise.resolve(swipe({}, "right")));
         assert.equal(history.goForward.mock.calls.length, 1);
 
-        swipe({}, "up");
-        swipe({}, "down");
+        yield* Effect.promise(() => Promise.resolve(swipe({}, "up")));
+        yield* Effect.promise(() => Promise.resolve(swipe({}, "down")));
         history.canGoBack.mockReturnValue(false);
         history.canGoForward.mockReturnValue(false);
-        swipe({}, "left");
-        swipe({}, "right");
+        yield* Effect.promise(() => Promise.resolve(swipe({}, "left")));
+        yield* Effect.promise(() => Promise.resolve(swipe({}, "right")));
         assert.equal(history.goBack.mock.calls.length, 1);
         assert.equal(history.goForward.mock.calls.length, 1);
+        assert.equal(
+          fakeWindow.send.mock.calls.filter(([channel]) => channel === MENU_ACTION_CHANNEL).length,
+          0,
+        );
+        const settings = yield* DesktopClientSettings.DesktopClientSettings;
+        yield* settings.set({
+          ...DEFAULT_CLIENT_SETTINGS,
+          layoutThreeFingerSwipe: true,
+          scrollingWorkspacesEnabled: true,
+        });
+        history.canGoBack.mockReturnValue(true);
+        history.canGoForward.mockReturnValue(true);
+        for (const direction of ["left", "right", "up", "down"]) {
+          yield* Effect.promise(() => Promise.resolve(swipe({}, direction)));
+          assert.deepEqual(fakeWindow.send.mock.lastCall, [
+            MENU_ACTION_CHANNEL,
+            `layout-swipe-${direction}`,
+          ]);
+        }
+        assert.equal(history.goBack.mock.calls.length, 1);
+        assert.equal(history.goForward.mock.calls.length, 1);
+        yield* settings.set({ ...DEFAULT_CLIENT_SETTINGS, layoutThreeFingerSwipe: true });
+        fakeWindow.send.mockClear();
+        yield* Effect.promise(() => Promise.resolve(swipe({}, "left")));
+        yield* Effect.promise(() => Promise.resolve(swipe({}, "right")));
+        assert.equal(history.goBack.mock.calls.length, 2);
+        assert.equal(history.goForward.mock.calls.length, 2);
+        assert.equal(fakeWindow.send.mock.calls.length, 0);
       }).pipe(Effect.provide(layer));
     }),
   );

apps/desktop/src/window/DesktopWindow.ts

@@ -834,11 +834,26 @@ export const make = Effect.gen(function* () {
 
     if (environment.platform === "darwin") {
       // Mouse drivers can deliver Back/Forward as macOS swipe gestures instead of buttons.
-      window.on("swipe", (_event, direction) => {
-        const history = window.webContents.navigationHistory;
-        if (direction === "left" && history.canGoBack()) history.goBack();
-        else if (direction === "right" && history.canGoForward()) history.goForward();
-      });
+      window.on("swipe", (_event, direction) =>
+        runPromise(
+          Effect.gen(function* () {
+            const settings = yield* clientSettings.get.pipe(
+              Effect.orElseSucceed(() => Option.none()),
+            );
+            if (
+              Option.isSome(settings) &&
+              settings.value.layoutThreeFingerSwipe &&
+              settings.value.scrollingWorkspacesEnabled
+            ) {
+              window.webContents.send(MENU_ACTION_CHANNEL, `layout-swipe-${direction}`);
+              return;
+            }
+            const history = window.webContents.navigationHistory;
+            if (direction === "left" && history.canGoBack()) history.goBack();
+            else if (direction === "right" && history.canGoForward()) history.goForward();
+          }),
+        ),
+      );
       window.on("enter-full-screen", () => {
         window.webContents.send(WINDOW_FULLSCREEN_STATE_CHANNEL, true);
       });