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

@@ -3,8 +3,10 @@ import {
   type MouseEvent,
   type ReactNode,
   useCallback,
+  useRef,
 } from "react";
 
+import { useMountEffect } from "~/shared/hooks/useMountEffect";
 import {
   type MenuItemDef,
   useNativeContextMenu,
@@ -13,6 +15,7 @@ import {
 interface InteractiveButtonProps {
   children: ReactNode;
   onClick?: () => void;
+  onDoubleClick?: () => void;
   onCmdClick?: () => void;
   onShiftClick?: () => void;
   onMouseDown?: (e: MouseEvent<HTMLElement>) => void;
@@ -27,6 +30,7 @@ interface InteractiveButtonProps {
 export function InteractiveButton({
   children,
   onClick,
+  onDoubleClick,
   onCmdClick,
   onShiftClick,
   onMouseDown,
@@ -38,6 +42,16 @@ export function InteractiveButton({
   asChild = false,
 }: InteractiveButtonProps) {
   const showMenu = useNativeContextMenu(contextMenu ?? []);
+  const clickTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearPendingClick = useCallback(() => {
+    if (clickTimeoutRef.current) {
+      clearTimeout(clickTimeoutRef.current);
+      clickTimeoutRef.current = null;
+    }
+  }, []);
+
+  useMountEffect(() => clearPendingClick);
 
   const handleClick = useCallback(
     (e: MouseEvent<HTMLElement>) => {
@@ -46,23 +60,52 @@ export function InteractiveButton({
       }
 
       if (e.shiftKey) {
+        clearPendingClick();
         e.preventDefault();
         onShiftClick?.();
       } else if (e.metaKey || e.ctrlKey) {
+        clearPendingClick();
         e.preventDefault();
         onCmdClick?.();
+      } else if (onDoubleClick) {
+        clearPendingClick();
+        clickTimeoutRef.current = setTimeout(() => {
+          clickTimeoutRef.current = null;
+          onClick?.();
+        }, 200);
       } else {
         onClick?.();
       }
     },
-    [onClick, onCmdClick, onShiftClick, disabled],
+    [
+      onClick,
+      onDoubleClick,
+      onCmdClick,
+      onShiftClick,
+      disabled,
+      clearPendingClick,
+    ],
+  );
+
+  const handleDoubleClick = useCallback(
+    (e: MouseEvent<HTMLElement>) => {
+      if (disabled) {
+        return;
+      }
+
+      clearPendingClick();
+      e.preventDefault();
+      onDoubleClick?.();
+    },
+    [onDoubleClick, disabled, clearPendingClick],
   );
 
   const Element = asChild ? "div" : "button";
 
   return (
     <Element
       onClick={handleClick}
+      onDoubleClick={onDoubleClick ? handleDoubleClick : undefined}
       onDragStart={onDragStart}
       onMouseDown={onMouseDown}
       onContextMenu={contextMenu ? showMenu : undefined}