this types of shortcut only makes sense when tabs are visible, so better to co-locate with ui component

Author: yujonglee

apps/desktop/src/components/main/body/index.tsx

@@ -1,11 +1,12 @@
-import { Button } from "@hypr/ui/components/ui/button";
-import { cn } from "@hypr/utils";
-
 import { useRouteContext } from "@tanstack/react-router";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { ArrowLeftIcon, ArrowRightIcon, PanelLeftOpenIcon, PlusIcon } from "lucide-react";
 import { Reorder } from "motion/react";
 import { useCallback, useEffect, useRef } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 
+import { Button } from "@hypr/ui/components/ui/button";
+import { cn } from "@hypr/utils";
 import { useShell } from "../../../contexts/shell";
 import { type Tab, uniqueIdfromTab, useTabs } from "../../../store/zustand/tabs";
 import { id } from "../../../utils";
@@ -36,25 +37,13 @@ export function Body() {
 }
 
 function Header({ tabs }: { tabs: Tab[] }) {
-  const { persistedStore, internalStore } = useRouteContext({ from: "__root__" });
-
   const { leftsidebar } = useShell();
-  const { select, close, reorder, openNew, goBack, goNext, canGoBack, canGoNext, closeOthers, closeAll } = useTabs();
+  const { select, close, reorder, goBack, goNext, canGoBack, canGoNext, closeOthers, closeAll } = useTabs();
   const tabsScrollContainerRef = useRef<HTMLDivElement>(null);
-  const setTabRef = useScrollActiveTabIntoView(tabs);
-
-  const handleNewNote = useCallback(() => {
-    const sessionId = id();
-    const user_id = internalStore?.getValue("user_id");
+  const handleNewNote = useNewTab();
 
-    persistedStore?.setRow("sessions", sessionId, { user_id, created_at: new Date().toISOString(), title: "" });
-    openNew({
-      type: "sessions",
-      id: sessionId,
-      active: true,
-      state: { editor: "raw" },
-    });
-  }, [persistedStore, internalStore, openNew]);
+  const setTabRef = useScrollActiveTabIntoView(tabs);
+  useTabsShortcuts();
 
   return (
     <div
@@ -65,9 +54,7 @@ function Header({ tabs }: { tabs: Tab[] }) {
     >
       {!leftsidebar.expanded && (
         <Button size="icon" variant="ghost" onClick={() => leftsidebar.setExpanded(true)}>
-          <PanelLeftOpenIcon
-            size={16}
-          />
+          <PanelLeftOpenIcon size={16} />
         </Button>
       )}
 
@@ -310,3 +297,82 @@ function useScrollActiveTabIntoView(tabs: Tab[]) {
 
   return setTabRef;
 }
+
+function useTabsShortcuts() {
+  const { tabs, currentTab, close, select } = useTabs();
+  const newTab = useNewTab();
+
+  useHotkeys(
+    "mod+n",
+    () => {
+      if (currentTab) {
+        close(currentTab);
+      }
+      newTab();
+    },
+    { preventDefault: true },
+    [currentTab, close, newTab],
+  );
+
+  useHotkeys(
+    "mod+t",
+    () => newTab(),
+    { preventDefault: true },
+    [newTab],
+  );
+
+  useHotkeys(
+    "mod+w",
+    async () => {
+      if (currentTab && tabs.length > 1) {
+        close(currentTab);
+      } else {
+        const appWindow = getCurrentWebviewWindow();
+        await appWindow.close();
+      }
+    },
+    { preventDefault: true },
+    [tabs, currentTab, close],
+  );
+
+  useHotkeys(
+    "mod+1, mod+2, mod+3, mod+4, mod+5, mod+6, mod+7, mod+8, mod+9",
+    (event) => {
+      const key = event.key;
+      const targetIndex = key === "9" ? tabs.length - 1 : Number.parseInt(key, 10) - 1;
+      const target = tabs[targetIndex];
+      if (target) {
+        select(target);
+      }
+    },
+    { preventDefault: true },
+    [tabs, select],
+  );
+
+  return {};
+}
+
+function useNewTab() {
+  const { persistedStore, internalStore } = useRouteContext({ from: "__root__" });
+  const { openNew } = useTabs();
+
+  const handler = useCallback(() => {
+    const user_id = internalStore?.getValue("user_id");
+    const sessionId = id();
+
+    persistedStore?.setRow("sessions", sessionId, {
+      user_id,
+      created_at: new Date().toISOString(),
+      title: "",
+    });
+
+    openNew({
+      type: "sessions",
+      id: sessionId,
+      active: true,
+      state: { editor: "raw" },
+    });
+  }, [persistedStore, internalStore, openNew]);
+
+  return handler;
+}

apps/desktop/src/contexts/shell/index.tsx

@@ -3,30 +3,22 @@ import { createContext, useContext } from "react";
 import { useChatMode } from "./chat";
 import { useLeftSidebar } from "./leftsidebar";
 import { useSettings } from "./settings";
-import { useTabsShortcuts } from "./tabs";
 
 interface ShellContextType {
   chat: ReturnType<typeof useChatMode>;
   leftsidebar: ReturnType<typeof useLeftSidebar>;
   settings: ReturnType<typeof useSettings>;
-  tabs: ReturnType<typeof useTabsShortcuts>;
 }
 
 const ShellContext = createContext<ShellContextType | null>(null);
 
-interface ShellProviderProps {
-  children: React.ReactNode;
-  onNewTab: (closeCurrentFirst: boolean) => void;
-}
-
-export function ShellProvider({ children, onNewTab }: ShellProviderProps) {
+export function ShellProvider({ children }: { children: React.ReactNode }) {
   const chat = useChatMode();
   const leftsidebar = useLeftSidebar();
   const settings = useSettings();
-  const tabs = useTabsShortcuts(onNewTab);
 
   return (
-    <ShellContext.Provider value={{ chat, leftsidebar, settings, tabs }}>
+    <ShellContext.Provider value={{ chat, leftsidebar, settings }}>
       {children}
     </ShellContext.Provider>
   );

apps/desktop/src/contexts/shell/tabs.ts

@@ -1,5 +1,5 @@
 import { createFileRoute, Outlet, useRouteContext } from "@tanstack/react-router";
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
 
 import { toolFactories } from "../../../chat/tools";
 import { useSearchEngine } from "../../../contexts/search/engine";
@@ -17,7 +17,7 @@ export const Route = createFileRoute("/app/main/_layout")({
 
 function Component() {
   const { persistedStore, internalStore } = useRouteContext({ from: "__root__" });
-  const { registerOnClose, registerOnEmpty, currentTab, openNew, close } = useTabs();
+  const { registerOnClose, registerOnEmpty, currentTab, openNew } = useTabs();
 
   useEffect(() => {
     return registerOnClose((tab) => {
@@ -49,47 +49,20 @@ function Component() {
     return registerOnEmpty(createDefaultSession);
   }, [currentTab, persistedStore, internalStore, registerOnEmpty, openNew]);
 
-  const handleNewTab = useCallback((closeCurrentFirst: boolean) => {
-    const user_id = internalStore?.getValue("user_id");
-    const sessionId = id();
-    persistedStore?.setRow("sessions", sessionId, {
-      user_id,
-      created_at: new Date().toISOString(),
-      title: "",
-    });
-
-    if (closeCurrentFirst && currentTab) {
-      close(currentTab);
-    }
-
-    openNew({
-      type: "sessions",
-      id: sessionId,
-      active: true,
-      state: { editor: "raw" },
-    });
-  }, [persistedStore, internalStore, currentTab, close, openNew]);
-
   return (
     <SearchEngineProvider store={persistedStore}>
       <SearchUIProvider>
-        <SearchShortcutBridge onNewTab={handleNewTab} />
+        <ShellProvider>
+          <ToolRegistryProvider>
+            <ToolRegistration />
+            <Outlet />
+          </ToolRegistryProvider>
+        </ShellProvider>
       </SearchUIProvider>
     </SearchEngineProvider>
   );
 }
 
-function SearchShortcutBridge({ onNewTab }: { onNewTab: (closeCurrentFirst: boolean) => void }) {
-  return (
-    <ShellProvider onNewTab={onNewTab}>
-      <ToolRegistryProvider>
-        <ToolRegistration />
-        <Outlet />
-      </ToolRegistryProvider>
-    </ShellProvider>
-  );
-}
-
 function ToolRegistration() {
   const registry = useToolRegistry();
   const { search } = useSearchEngine();