Open notes in standalone windows

Adds a note-specific native window route and wires sidebar double-click to open the existing note view in that window. Includes regression coverage for the sidebar double-click path.

Author: ComputelessComputer

apps/desktop/src/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as AppIndexRouteImport } from './routes/app/index'
 import { Route as AppOnboardingRouteImport } from './routes/app/onboarding'
 import { Route as AppInstructionRouteImport } from './routes/app/instruction'
 import { Route as AppComposerRouteImport } from './routes/app/composer'
+import { Route as AppNoteSessionIdRouteImport } from './routes/app/note.$sessionId'
 import { Route as AppMainLayoutRouteImport } from './routes/app/main/_layout'
 import { Route as AppMainLayoutIndexRouteImport } from './routes/app/main/_layout.index'
 
@@ -42,6 +43,11 @@ const AppComposerRoute = AppComposerRouteImport.update({
   path: '/composer',
   getParentRoute: () => AppRouteRoute,
 } as any)
+const AppNoteSessionIdRoute = AppNoteSessionIdRouteImport.update({
+  id: '/note/$sessionId',
+  path: '/note/$sessionId',
+  getParentRoute: () => AppRouteRoute,
+} as any)
 const AppMainLayoutRoute = AppMainLayoutRouteImport.update({
   id: '/main/_layout',
   path: '/main',
@@ -60,13 +66,15 @@ export interface FileRoutesByFullPath {
   '/app/onboarding': typeof AppOnboardingRoute
   '/app/': typeof AppIndexRoute
   '/app/main': typeof AppMainLayoutRouteWithChildren
+  '/app/note/$sessionId': typeof AppNoteSessionIdRoute
   '/app/main/': typeof AppMainLayoutIndexRoute
 }
 export interface FileRoutesByTo {
   '/app/composer': typeof AppComposerRoute
   '/app/instruction': typeof AppInstructionRoute
   '/app/onboarding': typeof AppOnboardingRoute
   '/app': typeof AppIndexRoute
+  '/app/note/$sessionId': typeof AppNoteSessionIdRoute
   '/app/main': typeof AppMainLayoutIndexRoute
 }
 export interface FileRoutesById {
@@ -77,6 +85,7 @@ export interface FileRoutesById {
   '/app/onboarding': typeof AppOnboardingRoute
   '/app/': typeof AppIndexRoute
   '/app/main/_layout': typeof AppMainLayoutRouteWithChildren
+  '/app/note/$sessionId': typeof AppNoteSessionIdRoute
   '/app/main/_layout/': typeof AppMainLayoutIndexRoute
 }
 export interface FileRouteTypes {
@@ -88,13 +97,15 @@ export interface FileRouteTypes {
     | '/app/onboarding'
     | '/app/'
     | '/app/main'
+    | '/app/note/$sessionId'
     | '/app/main/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/app/composer'
     | '/app/instruction'
     | '/app/onboarding'
     | '/app'
+    | '/app/note/$sessionId'
     | '/app/main'
   id:
     | '__root__'
@@ -104,6 +115,7 @@ export interface FileRouteTypes {
     | '/app/onboarding'
     | '/app/'
     | '/app/main/_layout'
+    | '/app/note/$sessionId'
     | '/app/main/_layout/'
   fileRoutesById: FileRoutesById
 }
@@ -148,6 +160,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppComposerRouteImport
       parentRoute: typeof AppRouteRoute
     }
+    '/app/note/$sessionId': {
+      id: '/app/note/$sessionId'
+      path: '/note/$sessionId'
+      fullPath: '/app/note/$sessionId'
+      preLoaderRoute: typeof AppNoteSessionIdRouteImport
+      parentRoute: typeof AppRouteRoute
+    }
     '/app/main/_layout': {
       id: '/app/main/_layout'
       path: '/main'
@@ -183,6 +202,7 @@ interface AppRouteRouteChildren {
   AppOnboardingRoute: typeof AppOnboardingRoute
   AppIndexRoute: typeof AppIndexRoute
   AppMainLayoutRoute: typeof AppMainLayoutRouteWithChildren
+  AppNoteSessionIdRoute: typeof AppNoteSessionIdRoute
 }
 
 const AppRouteRouteChildren: AppRouteRouteChildren = {
@@ -191,6 +211,7 @@ const AppRouteRouteChildren: AppRouteRouteChildren = {
   AppOnboardingRoute: AppOnboardingRoute,
   AppIndexRoute: AppIndexRoute,
   AppMainLayoutRoute: AppMainLayoutRouteWithChildren,
+  AppNoteSessionIdRoute: AppNoteSessionIdRoute,
 }
 
 const AppRouteRouteWithChildren = AppRouteRoute._addFileChildren(

apps/desktop/src/routes/app/note.$sessionId.tsx

@@ -0,0 +1,37 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useMemo } from "react";
+
+import { ClassicMainLayout } from "~/main/layout";
+import { TabContentNote } from "~/session";
+import { StandaloneWindowShell } from "~/shared/window-shell";
+import type { Tab } from "~/store/zustand/tabs";
+
+export const Route = createFileRoute("/app/note/$sessionId")({
+  component: Component,
+});
+
+function Component() {
+  const { sessionId } = Route.useParams();
+  const tab = useMemo(
+    () =>
+      ({
+        active: true,
+        id: sessionId,
+        pinned: false,
+        slotId: `note-window-${sessionId}`,
+        state: { view: null, autoStart: null },
+        type: "sessions",
+      }) satisfies Extract<Tab, { type: "sessions" }>,
+    [sessionId],
+  );
+
+  return (
+    <ClassicMainLayout includeServices={false}>
+      <StandaloneWindowShell>
+        <div className="bg-background h-screen w-screen">
+          <TabContentNote tab={tab} standaloneWindow />
+        </div>
+      </StandaloneWindowShell>
+    </ClassicMainLayout>
+  );
+}

apps/desktop/src/session/components/outer-header/index.tsx

@@ -20,10 +20,12 @@ import { useListener } from "~/stt/contexts";
 export function OuterHeader({
   sessionId,
   currentView,
+  standaloneWindow = false,
   title,
 }: {
   sessionId: string;
   currentView: EditorView;
+  standaloneWindow?: boolean;
   title?: React.ReactNode;
 }) {
   const { leftsidebar } = useShell();
@@ -48,11 +50,13 @@ export function OuterHeader({
           className={cn([
             "pointer-events-none absolute inset-y-0 flex items-center",
             reserveCollapsedLiveControls ? "right-[153px]" : "right-[70px]",
-            showSidebarTimelineHeaderGutter
-              ? "left-[104px]"
-              : showExpandedSidebarTimelineHeader
-                ? "left-0"
-                : "left-[114px]",
+            standaloneWindow
+              ? "left-[68px]"
+              : showSidebarTimelineHeaderGutter
+                ? "left-[104px]"
+                : showExpandedSidebarTimelineHeader
+                  ? "left-0"
+                  : "left-[114px]",
           ])}
         >
           <div

apps/desktop/src/session/index.tsx

@@ -26,8 +26,10 @@ import { useSTTConnection } from "~/stt/useSTTConnection";
 import { useUploadFile } from "~/stt/useUploadFile";
 
 export function TabContentNote({
+  standaloneWindow = false,
   tab,
 }: {
+  standaloneWindow?: boolean;
   tab: Extract<Tab, { type: "sessions" }>;
 }) {
   const sessionMode = useListener((state) => state.getSessionMode(tab.id));
@@ -89,6 +91,7 @@ export function TabContentNote({
         <AudioPlayer.Provider sessionId={tab.id} url={audioUrl ?? ""}>
           <TabContentNoteInner
             tab={tab}
+            standaloneWindow={standaloneWindow}
             audioUrlReady={Boolean(audioUrl)}
             isAudioUrlLoading={audioUrlQuery.isPending}
           />
@@ -100,10 +103,12 @@ export function TabContentNote({
 
 function TabContentNoteInner({
   tab,
+  standaloneWindow,
   audioUrlReady,
   isAudioUrlLoading,
 }: {
   tab: Extract<Tab, { type: "sessions" }>;
+  standaloneWindow: boolean;
   audioUrlReady: boolean;
   isAudioUrlLoading: boolean;
 }) {
@@ -228,6 +233,7 @@ function TabContentNoteInner({
         <OuterHeader
           sessionId={tab.id}
           currentView={currentView}
+          standaloneWindow={standaloneWindow}
           title={
             <TitleInput
               ref={titleInputRef}

apps/desktop/src/shared/ui/interactive-button.tsx

@@ -13,6 +13,7 @@ import {
 interface InteractiveButtonProps {
   children: ReactNode;
   onClick?: () => void;
+  onDoubleClick?: () => void;
   onCmdClick?: () => void;
   onShiftClick?: () => void;
   onMouseDown?: (e: MouseEvent<HTMLElement>) => void;
@@ -27,6 +28,7 @@ interface InteractiveButtonProps {
 export function InteractiveButton({
   children,
   onClick,
+  onDoubleClick,
   onCmdClick,
   onShiftClick,
   onMouseDown,
@@ -58,11 +60,24 @@ export function InteractiveButton({
     [onClick, onCmdClick, onShiftClick, disabled],
   );
 
+  const handleDoubleClick = useCallback(
+    (e: MouseEvent<HTMLElement>) => {
+      if (disabled) {
+        return;
+      }
+
+      e.preventDefault();
+      onDoubleClick?.();
+    },
+    [onDoubleClick, disabled],
+  );
+
   const Element = asChild ? "div" : "button";
 
   return (
     <Element
       onClick={handleClick}
+      onDoubleClick={onDoubleClick ? handleDoubleClick : undefined}
       onDragStart={onDragStart}
       onMouseDown={onMouseDown}
       onContextMenu={contextMenu ? showMenu : undefined}

apps/desktop/src/sidebar/timeline/item.test.tsx

@@ -13,12 +13,21 @@ const mocks = vi.hoisted(() => ({
   sessionMode: "inactive",
   stop: vi.fn(),
   storeTitle: "Live Note",
+  nativeContextMenus: [] as Array<
+    Array<{
+      id?: string;
+      text?: string;
+      action?: () => void;
+      separator?: boolean;
+    }>
+  >,
   timelineSelection: {
     selectedIds: [] as string[],
     setAnchor: vi.fn(),
     selectRange: vi.fn(),
     toggleSelect: vi.fn(),
   },
+  windowShow: vi.fn(() => Promise.resolve({ status: "ok", data: null })),
 }));
 
 vi.mock("@hypr/plugin-fs-sync", () => ({
@@ -33,6 +42,12 @@ vi.mock("@hypr/plugin-opener2", () => ({
   },
 }));
 
+vi.mock("@hypr/plugin-windows", () => ({
+  commands: {
+    windowShow: mocks.windowShow,
+  },
+}));
+
 vi.mock("@hypr/ui/components/ui/dancing-sticks", () => ({
   DancingSticks: ({ amplitude }: { amplitude: number }) => (
     <span data-amplitude={amplitude} data-testid="dancing-sticks" />
@@ -60,7 +75,17 @@ vi.mock("~/session/hooks/useEnhancedNotes", () => ({
 }));
 
 vi.mock("~/shared/hooks/useNativeContextMenu", () => ({
-  useNativeContextMenu: () => vi.fn(),
+  useNativeContextMenu: (
+    menu: Array<{
+      id?: string;
+      text?: string;
+      action?: () => void;
+      separator?: boolean;
+    }>,
+  ) => {
+    mocks.nativeContextMenus.push(menu);
+    return vi.fn();
+  },
 }));
 
 vi.mock("~/store/tinybase/hooks", () => ({
@@ -151,6 +176,8 @@ describe("TimelineItemComponent", () => {
     mocks.stop.mockClear();
     mocks.openCurrent.mockClear();
     mocks.openNew.mockClear();
+    mocks.windowShow.mockClear();
+    mocks.nativeContextMenus = [];
     mocks.timelineSelection.selectedIds = [];
     mocks.timelineSelection.setAnchor.mockClear();
     mocks.timelineSelection.selectRange.mockClear();
@@ -322,4 +349,71 @@ describe("TimelineItemComponent", () => {
     expect(spinnerSlot?.className).toContain("absolute");
     expect(spinnerSlot?.className).toContain("right-3");
   });
+
+  it("opens a standalone note window when a session row is double-clicked", () => {
+    render(
+      <TimelineItemComponent
+        item={{
+          type: "session",
+          id: "session-note-window",
+          data: {
+            title: "Window Note",
+            created_at: "2024-01-15T10:30:00.000Z",
+          },
+        }}
+        precision="time"
+        selected={false}
+        timezone="UTC"
+        multiSelected={false}
+        flatItemKeys={["session-session-note-window"]}
+      />,
+    );
+
+    const rowButton = screen.getByText("Live Note").closest("button");
+    fireEvent.doubleClick(rowButton!);
+
+    expect(mocks.windowShow).toHaveBeenCalledWith({
+      type: "note",
+      value: "session-note-window",
+    });
+  });
+
+  it("offers a standalone window action instead of a new tab action for session rows", () => {
+    render(
+      <TimelineItemComponent
+        item={{
+          type: "session",
+          id: "session-note-window",
+          data: {
+            title: "Window Note",
+            created_at: "2024-01-15T10:30:00.000Z",
+          },
+        }}
+        precision="time"
+        selected={false}
+        timezone="UTC"
+        multiSelected={false}
+        flatItemKeys={["session-session-note-window"]}
+      />,
+    );
+
+    const menu = mocks.nativeContextMenus.find((items) =>
+      items.some((item) => item.id === "open-new-window"),
+    );
+
+    expect(menu?.some((item) => item.text === "Open in New Tab")).toBe(false);
+    const openWindowItem = menu?.find((item) => item.id === "open-new-window");
+
+    expect(openWindowItem).toMatchObject({
+      id: "open-new-window",
+      text: "Open in New Window",
+    });
+
+    openWindowItem?.action?.();
+
+    expect(mocks.windowShow).toHaveBeenCalledWith({
+      type: "note",
+      value: "session-note-window",
+    });
+  });
 });