From 608f20c8cebdeb03403c8f9bf239510514bcf8a0 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Tue, 21 Oct 2025 14:56:35 +0900
Subject: [PATCH 01/10] polished settings layout

---
 .../src/routes/app/settings/_layout.tsx       | 72 +++++--------------
 1 file changed, 18 insertions(+), 54 deletions(-)

diff --git a/apps/desktop/src/routes/app/settings/_layout.tsx b/apps/desktop/src/routes/app/settings/_layout.tsx
index 33fad00870..c6a7fbcf7a 100644
--- a/apps/desktop/src/routes/app/settings/_layout.tsx
+++ b/apps/desktop/src/routes/app/settings/_layout.tsx
@@ -11,6 +11,7 @@ import {
 } from "lucide-react";
 import { z } from "zod";
 
+import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
 
 const TABS = [
@@ -42,56 +43,24 @@ function Component() {
   const group3Tabs = TABS.filter((tab) => info(tab).group === 3);
 
   return (
-    <div className={cn(["flex h-full mr-2"])}>
-      <div className={cn(["w-60 flex flex-col bg-white"])}>
-        <div
-          className={cn([
-            "flex-1 flex flex-col justify-between",
-            "overflow-y-auto",
-            "px-1 mt-1",
-          ])}
-        >
-          <Group tabs={group1Tabs} activeTab={search.tab} expandHeight={true} includeTrafficLight={true} />
+    <div className={cn(["flex h-full p-1 gap-1"])}>
+      <aside className="w-52 flex flex-col justify-between overflow-hidden gap-1">
+        <Group tabs={group1Tabs} activeTab={search.tab} expandHeight={true} includeTrafficLight={true} />
+        <Group tabs={group2Tabs} activeTab={search.tab} />
+        <Group tabs={group3Tabs} activeTab={search.tab} />
+      </aside>
 
-          <div className="mb-2">
-            <Group tabs={group2Tabs} activeTab={search.tab} />
-            <Group tabs={group3Tabs} activeTab={search.tab} />
-          </div>
-        </div>
-      </div>
-
-      <div
-        className={cn([
-          "flex-1 flex flex-col",
-          "h-full w-full",
-          "overflow-hidden",
-          "bg-white",
-        ])}
-      >
+      <div className="flex-1 flex flex-col gap-1 h-full w-full overflow-hidden bg-white">
         <header
           data-tauri-drag-region
-          className={cn([
-            "h-12 w-full",
-            "flex items-center justify-between",
-            "my-1 p-2",
-            "bg-neutral-50 rounded-md",
-          ])}
+          className="h-9 w-full bg-neutral-50 rounded-lg flex items-center justify-center"
         >
-          <div className="w-40"></div>
-          <h1 data-tauri-drag-region className={cn(["text-md font-semibold capitalize"])}>
+          <h1 data-tauri-drag-region className="font-semibold capitalize select-none cursor-default">
             {info(search.tab).label}
           </h1>
-          <div className="w-40"></div>
         </header>
 
-        <div
-          className={cn([
-            "flex-1 w-full",
-            "overflow-y-auto",
-            "p-4 mb-2",
-            "border border-neutral-200 rounded-md",
-          ])}
-        >
+        <div className="flex-1 w-full overflow-y-auto p-6 border border-neutral-200 rounded-lg">
           <Outlet />
         </div>
       </div>
@@ -117,7 +86,6 @@ function Group(
     <div
       className={cn([
         "rounded-md bg-neutral-50",
-        "p-2 mt-1",
         expandHeight && "flex-1",
       ])}
     >
@@ -127,22 +95,18 @@ function Group(
         const Icon = tabInfo.icon;
 
         return (
-          <button
+          <Button
             key={tab}
+            variant="ghost"
             className={cn([
-              "flex w-full items-center gap-3",
-              "rounded-md px-3 py-2.5",
-              "text-sm text-neutral-700",
-              "bg-neutral-50 transition-colors",
-              activeTab === tab
-                ? "font-medium text-neutral-900 bg-neutral-200"
-                : "hover:bg-neutral-100",
+              "shadow-none w-full justify-start hover:bg-neutral-200",
+              activeTab === tab && "bg-neutral-200",
             ])}
             onClick={() => navigate({ search: { tab } })}
           >
-            <Icon className="h-5 w-5" />
-            <span>{tabInfo.label}</span>
-          </button>
+            <Icon size={16} className="shrink-0" />
+            {tabInfo.label}
+          </Button>
         );
       })}
     </div>

From ff897c4e2649d0ea842ae063fd6f3213a1ba4fb1 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Tue, 21 Oct 2025 16:36:57 +0900
Subject: [PATCH 02/10] general

---
 .../src/components/settings/general.tsx       | 388 +++++++++++++-----
 1 file changed, 293 insertions(+), 95 deletions(-)

diff --git a/apps/desktop/src/components/settings/general.tsx b/apps/desktop/src/components/settings/general.tsx
index 5c33da68b2..677c2356f7 100644
--- a/apps/desktop/src/components/settings/general.tsx
+++ b/apps/desktop/src/components/settings/general.tsx
@@ -1,14 +1,14 @@
 import { LANGUAGES_ISO_639_1 } from "@huggingface/languages";
-import { AlertTriangle, Check, Link2, Plus, X } from "lucide-react";
-import { useState } from "react";
+import { AlertTriangle, Check, Search, X } from "lucide-react";
+import { useMemo, useState } from "react";
 
 import { Badge } from "@hypr/ui/components/ui/badge";
 import { Button } from "@hypr/ui/components/ui/button";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@hypr/ui/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@hypr/ui/components/ui/popover";
+
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hypr/ui/components/ui/select";
 import { Switch } from "@hypr/ui/components/ui/switch";
-import { Textarea } from "@hypr/ui/components/ui/textarea";
+import { cn } from "@hypr/utils";
+
 import { useUpdateGeneral } from "./shared";
 
 type ISO_639_1_CODE = keyof typeof LANGUAGES_ISO_639_1;
@@ -60,13 +60,117 @@ const SUPPORTED_LANGUAGES: ISO_639_1_CODE[] = [
 
 export function SettingsGeneral() {
   const { value, handle } = useUpdateGeneral();
-  const [languagePopoverOpen, setLanguagePopoverOpen] = useState(false);
+  const [languageSearchQuery, setLanguageSearchQuery] = useState("");
+  const [languageInputFocused, setLanguageInputFocused] = useState(false);
+  const [languageSelectedIndex, setLanguageSelectedIndex] = useState(-1);
+  const [vocabSearchQuery, setVocabSearchQuery] = useState("");
+  const [vocabInputFocused, setVocabInputFocused] = useState(false);
+  // Mock permission states - set to true/false to test different states
+  const [hasMicrophoneAccess, setHasMicrophoneAccess] = useState(true);
+  const [hasSystemAudioAccess, setHasSystemAudioAccess] = useState(false);
+
+  const handleGrantMicrophoneAccess = () => {
+    // Mock: Toggle the permission state
+    setHasMicrophoneAccess(!hasMicrophoneAccess);
+  };
+
+  const handleGrantSystemAudioAccess = () => {
+    // Mock: Toggle the permission state
+    setHasSystemAudioAccess(!hasSystemAudioAccess);
+  };
+
+  const filteredLanguages = useMemo(() => {
+    if (!languageSearchQuery.trim()) {
+      return [];
+    }
+    const query = languageSearchQuery.toLowerCase();
+    return SUPPORTED_LANGUAGES
+      .filter((langCode) => {
+        const langName = LANGUAGES_ISO_639_1[langCode].name;
+        return !((value.spoken_languages ?? []).includes(langName))
+          && langName.toLowerCase().includes(query);
+      })
+      .map((langCode) => LANGUAGES_ISO_639_1[langCode].name);
+  }, [languageSearchQuery, value.spoken_languages]);
+
+  const handleLanguageKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Backspace" && !languageSearchQuery && (value.spoken_languages ?? []).length > 0) {
+      e.preventDefault();
+      const languages = value.spoken_languages ?? [];
+      handle.setField("spoken_languages", languages.slice(0, -1));
+      return;
+    }
+
+    if (!languageSearchQuery.trim() || filteredLanguages.length === 0) {
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setLanguageSelectedIndex((prev) => (prev < filteredLanguages.length - 1 ? prev + 1 : prev));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setLanguageSelectedIndex((prev) => (prev > 0 ? prev - 1 : 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (languageSelectedIndex >= 0 && languageSelectedIndex < filteredLanguages.length) {
+        handle.setField("spoken_languages", [
+          ...(value.spoken_languages ?? []),
+          filteredLanguages[languageSelectedIndex],
+        ]);
+        setLanguageSearchQuery("");
+        setLanguageSelectedIndex(-1);
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setLanguageInputFocused(false);
+      setLanguageSearchQuery("");
+    }
+  };
+
+  const handleVocabChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    setVocabSearchQuery(inputValue);
+
+    if (inputValue.includes(",")) {
+      const terms = inputValue.split(",").map(s => s.trim()).filter(Boolean);
+      if (terms.length > 0) {
+        const existingJargons = new Set(value.jargons ?? []);
+        const newTerms = terms.filter(term => !existingJargons.has(term));
+        if (newTerms.length > 0) {
+          handle.setField("jargons", [...(value.jargons ?? []), ...newTerms]);
+        }
+        setVocabSearchQuery("");
+      }
+    }
+  };
+
+  const handleVocabKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Backspace" && !vocabSearchQuery && (value.jargons ?? []).length > 0) {
+      e.preventDefault();
+      const jargons = value.jargons ?? [];
+      handle.setField("jargons", jargons.slice(0, -1));
+      return;
+    }
+
+    if (e.key === "Enter" && vocabSearchQuery.trim()) {
+      e.preventDefault();
+      const newVocab = vocabSearchQuery.trim();
+      if (!((value.jargons ?? []).includes(newVocab))) {
+        handle.setField("jargons", [...(value.jargons ?? []), newVocab]);
+      }
+      setVocabSearchQuery("");
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setVocabInputFocused(false);
+      setVocabSearchQuery("");
+    }
+  };
 
   return (
-    <div className="flex flex-col gap-8 p-6">
-      {/* App Section */}
+    <div className="flex flex-col gap-8">
       <div>
-        <h2 className="text-xl font-semibold mb-4">App</h2>
+        <h2 className="font-semibold mb-4">App</h2>
         <div className="space-y-6">
           <SettingRow
             title="Start Hyprnote automatically at login"
@@ -95,21 +199,19 @@ export function SettingsGeneral() {
         </div>
       </div>
 
-      {/* Language & Vocabulary Section */}
       <div>
-        <h2 className="text-xl font-semibold mb-4">Language & Vocabulary</h2>
+        <h2 className="font-semibold mb-4">Language & Vocabulary</h2>
         <div className="space-y-6">
-          {/* Main Language */}
           <div className="flex flex-row items-center justify-between">
             <div>
-              <h3 className="text-base font-medium mb-1">Main language</h3>
-              <p className="text-sm text-neutral-600">Language for summaries, chats, and AI-generated responses</p>
+              <h3 className="text-sm font-medium mb-1">Main language</h3>
+              <p className="text-xs text-neutral-600">Language for summaries, chats, and AI-generated responses</p>
             </div>
             <Select
               value={value.ai_language ?? "English"}
               onValueChange={(val) => handle.setField("ai_language", val)}
             >
-              <SelectTrigger className="w-[200px]">
+              <SelectTrigger className="w-40 shadow-none focus:ring-0 focus:ring-offset-0">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent className="max-h-[250px] overflow-auto">
@@ -122,12 +224,19 @@ export function SettingsGeneral() {
             </Select>
           </div>
 
-          {/* Spoken Languages */}
           <div>
-            <h3 className="text-base font-medium mb-1">Spoken languages</h3>
-            <p className="text-sm text-neutral-600 mb-3">Add other languages you use other than the main language</p>
-            <div className="flex items-center gap-2">
-              <div className="flex-1 flex flex-wrap gap-2 min-h-[38px] p-2 border rounded-lg">
+            <h3 className="text-sm font-medium mb-1">Spoken languages</h3>
+            <p className="text-xs text-neutral-600 mb-3">Add other languages you use other than the main language</p>
+            <div className="relative">
+              <div
+                className={cn(
+                  [
+                    "flex flex-wrap items-center w-full px-2 py-1.5 gap-1.5 rounded-lg bg-white border border-neutral-200 focus-within:border-neutral-300 min-h-[38px]",
+                    languageInputFocused && "border-neutral-300",
+                  ],
+                )}
+                onClick={() => document.getElementById("language-search-input")?.focus()}
+              >
                 {(value.spoken_languages ?? []).map((lang) => (
                   <Badge
                     key={lang}
@@ -140,7 +249,8 @@ export function SettingsGeneral() {
                       variant="ghost"
                       size="sm"
                       className="h-3 w-3 p-0 hover:bg-transparent ml-0.5"
-                      onClick={() => {
+                      onClick={(e) => {
+                        e.stopPropagation();
                         const updated = (value.spoken_languages ?? []).filter(l => l !== lang);
                         handle.setField("spoken_languages", updated);
                       }}
@@ -149,100 +259,188 @@ export function SettingsGeneral() {
                     </Button>
                   </Badge>
                 ))}
+                {(value.spoken_languages ?? []).length === 0 && (
+                  <Search className="size-4 text-neutral-700 flex-shrink-0" />
+                )}
+                <input
+                  id="language-search-input"
+                  type="text"
+                  value={languageSearchQuery}
+                  onChange={(e) => {
+                    setLanguageSearchQuery(e.target.value);
+                    setLanguageSelectedIndex(-1);
+                  }}
+                  onKeyDown={handleLanguageKeyDown}
+                  onFocus={() => setLanguageInputFocused(true)}
+                  onBlur={() => setLanguageInputFocused(false)}
+                  role="combobox"
+                  aria-haspopup="listbox"
+                  aria-expanded={languageInputFocused && !!languageSearchQuery.trim()}
+                  aria-controls="language-options"
+                  aria-activedescendant={languageSelectedIndex >= 0
+                    ? `language-option-${languageSelectedIndex}`
+                    : undefined}
+                  aria-label="Add spoken language"
+                  placeholder={(value.spoken_languages ?? []).length === 0 ? "Add language" : ""}
+                  className="flex-1 min-w-[120px] bg-transparent text-sm focus:outline-none placeholder:text-neutral-500"
+                />
               </div>
-              <Popover open={languagePopoverOpen} onOpenChange={setLanguagePopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon"
-                    className="h-[38px] w-[38px]"
-                  >
-                    <Plus className="h-4 w-4" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-[220px] p-0" align="end">
-                  <Command>
-                    <CommandInput placeholder="Search languages..." className="h-9" />
-                    <CommandEmpty>No language found.</CommandEmpty>
-                    <CommandGroup className="max-h-[200px] overflow-auto">
-                      {SUPPORTED_LANGUAGES.filter(
-                        (langCode) => !(value.spoken_languages ?? []).includes(LANGUAGES_ISO_639_1[langCode].name),
-                      ).map((langCode) => (
-                        <CommandItem
-                          key={langCode}
-                          onSelect={() => {
-                            const langName = LANGUAGES_ISO_639_1[langCode].name;
+
+              {languageInputFocused && languageSearchQuery.trim() && (
+                <div
+                  id="language-options"
+                  role="listbox"
+                  className="absolute top-full left-0 right-0 mt-1 flex flex-col w-full rounded border border-neutral-200 overflow-hidden bg-white shadow-md z-10 max-h-60 overflow-y-auto"
+                >
+                  {filteredLanguages.length > 0
+                    ? (
+                      filteredLanguages.map((langName, index) => (
+                        <button
+                          key={langName}
+                          id={`language-option-${index}`}
+                          type="button"
+                          role="option"
+                          aria-selected={languageSelectedIndex === index}
+                          onClick={() => {
                             handle.setField("spoken_languages", [...(value.spoken_languages ?? []), langName]);
-                            setLanguagePopoverOpen(false);
+                            setLanguageSearchQuery("");
+                            setLanguageSelectedIndex(-1);
                           }}
+                          onMouseDown={(e) => e.preventDefault()}
+                          onMouseEnter={() => setLanguageSelectedIndex(index)}
+                          className={cn([
+                            "flex items-center justify-between px-3 py-2 text-sm text-left transition-colors w-full",
+                            languageSelectedIndex === index ? "bg-neutral-200" : "hover:bg-neutral-100",
+                          ])}
                         >
-                          {LANGUAGES_ISO_639_1[langCode].name}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </Command>
-                </PopoverContent>
-              </Popover>
+                          <span className="font-medium truncate">{langName}</span>
+                        </button>
+                      ))
+                    )
+                    : (
+                      <div className="px-3 py-2 text-sm text-neutral-500 text-center">
+                        No matching languages found
+                      </div>
+                    )}
+                </div>
+              )}
             </div>
           </div>
 
-          {/* Custom Vocabulary */}
           <div>
-            <h3 className="text-base font-medium mb-1">Custom vocabulary</h3>
-            <p className="text-sm text-neutral-600 mb-3">
+            <h3 className="text-sm font-medium mb-1">Custom vocabulary</h3>
+            <p className="text-xs text-neutral-600 mb-3">
               Add jargons or industry/company-specific terms to improve transcription accuracy
             </p>
-            <Textarea
-              value={(value.jargons ?? []).join(", ")}
-              onChange={(e) => handle.setField("jargons", e.target.value.split(",").map(s => s.trim()).filter(Boolean))}
-              onBlur={() => {
-                // Auto-save on blur
-              }}
-              placeholder="smart notepad, offline, X, Discord"
-              className="w-full resize-none"
-              rows={3}
-            />
+            <div className="relative">
+              <div
+                className={cn([
+                  "flex flex-wrap items-center w-full px-2 py-1.5 gap-1.5 rounded-lg bg-white border border-neutral-200 focus-within:border-neutral-300 min-h-[38px]",
+                  vocabInputFocused && "border-neutral-300",
+                ])}
+                onClick={() => document.getElementById("vocab-search-input")?.focus()}
+              >
+                {(value.jargons ?? []).map((vocab) => (
+                  <Badge
+                    key={vocab}
+                    variant="secondary"
+                    className="flex items-center gap-1 px-2 py-0.5 text-xs bg-muted"
+                  >
+                    {vocab}
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-3 w-3 p-0 hover:bg-transparent ml-0.5"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        const updated = (value.jargons ?? []).filter(j => j !== vocab);
+                        handle.setField("jargons", updated);
+                      }}
+                    >
+                      <X className="h-2.5 w-2.5" />
+                    </Button>
+                  </Badge>
+                ))}
+                {(value.jargons ?? []).length === 0 && <Search className="size-4 text-neutral-700 flex-shrink-0" />}
+                <input
+                  id="vocab-search-input"
+                  type="text"
+                  value={vocabSearchQuery}
+                  onChange={handleVocabChange}
+                  onKeyDown={handleVocabKeyDown}
+                  onFocus={() => setVocabInputFocused(true)}
+                  onBlur={() => setVocabInputFocused(false)}
+                  role="textbox"
+                  aria-label="Add custom vocabulary"
+                  placeholder={(value.jargons ?? []).length === 0 ? "Add terms separated by comma" : ""}
+                  className="flex-1 min-w-[120px] bg-transparent text-sm focus:outline-none placeholder:text-neutral-500"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
 
-      {/* Permissions Section */}
       <div>
-        <h2 className="text-xl font-semibold mb-4">Permissions</h2>
+        <h2 className="font-semibold mb-4">Permissions</h2>
         <div className="space-y-4">
-          {/* Microphone Access - Granted */}
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex-1">
-              <h3 className="text-base font-medium mb-1">Microphone access</h3>
-              <p className="text-sm text-neutral-600">Thanks for granting permission for system audio</p>
-            </div>
-            <div className="px-4 py-2 border rounded-lg bg-neutral-50 flex items-center gap-2">
-              <Check className="w-4 h-4 text-neutral-600" />
-              <span className="text-sm text-neutral-600">Access Granted</span>
-            </div>
-          </div>
-
-          {/* System Audio Access - Not Granted */}
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex-1">
-              <div className="flex items-center gap-2 mb-1">
-                <AlertTriangle className="w-4 h-4 text-red-500" />
-                <h3 className="text-base font-medium text-red-500">System audio access</h3>
-              </div>
-              <p className="text-sm text-red-500">Oops! You need to grant access to use Hyprnote</p>
-            </div>
-            <Button className="bg-black hover:bg-neutral-800 text-white flex items-center gap-2">
-              <Link2 className="w-4 h-4" />
-              Grant Permission
-            </Button>
-          </div>
+          <PermissionRow
+            title="Microphone access"
+            hasAccess={hasMicrophoneAccess}
+            grantedMessage="Thanks for granting permission for microphone"
+            deniedMessage="Oops! You need to grant access to use Hyprnote"
+            onGrant={handleGrantMicrophoneAccess}
+          />
+          <PermissionRow
+            title="System audio access"
+            hasAccess={hasSystemAudioAccess}
+            grantedMessage="Thanks for granting permission for system audio"
+            deniedMessage="Oops! You need to grant access to use Hyprnote"
+            onGrant={handleGrantSystemAudioAccess}
+          />
         </div>
       </div>
     </div>
   );
 }
 
+function PermissionRow({
+  title,
+  hasAccess,
+  grantedMessage,
+  deniedMessage,
+  onGrant,
+}: {
+  title: string;
+  hasAccess: boolean;
+  grantedMessage: string;
+  deniedMessage: string;
+  onGrant: () => void;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4">
+      <div className="flex-1">
+        <h3 className={cn("text-sm font-medium mb-1", !hasAccess && "text-red-500")}>
+          {title}
+        </h3>
+        <p className={cn(["text-xs", hasAccess ? "text-neutral-600" : "text-red-500"])}>
+          {hasAccess ? grantedMessage : deniedMessage}
+        </p>
+      </div>
+      <Button
+        variant={hasAccess ? "outline" : "default"}
+        className="w-40 text-xs shadow-none"
+        disabled={hasAccess}
+        onClick={onGrant}
+      >
+        {hasAccess ? <Check size={16} /> : <AlertTriangle size={16} />}
+        {hasAccess ? "Access Granted" : "Grant Permission"}
+      </Button>
+    </div>
+  );
+}
+
 function SettingRow({
   title,
   description,
@@ -257,8 +455,8 @@ function SettingRow({
   return (
     <div className="flex items-start justify-between gap-4">
       <div className="flex-1">
-        <h3 className="text-base font-medium mb-1">{title}</h3>
-        <p className="text-sm text-neutral-600">{description}</p>
+        <h3 className="text-sm font-medium mb-1">{title}</h3>
+        <p className="text-xs text-neutral-600">{description}</p>
       </div>
       <Switch checked={checked} onCheckedChange={onChange} />
     </div>

From 758e32d9ebe727770250cd5c947a216620abd29b Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Tue, 21 Oct 2025 15:55:19 +0900
Subject: [PATCH 03/10] hotkey refactor

---
 .../src/components/main/body/index.tsx        | 81 -------------------
 .../src/components/main/body/search.tsx       | 47 ++---------
 .../components/main/sidebar/profile/index.tsx | 13 ++-
 apps/desktop/src/contexts/search/ui.tsx       | 17 +++-
 apps/desktop/src/contexts/shell/index.tsx     | 19 ++++-
 apps/desktop/src/contexts/shell/search.ts     | 21 +++++
 apps/desktop/src/contexts/shell/settings.ts   | 23 ++++++
 apps/desktop/src/contexts/shell/tabs.ts       | 48 +++++++++++
 apps/desktop/src/routes/app/main/_layout.tsx  | 53 +++++++++---
 packages/tiptap/src/editor/index.tsx          | 49 +++++------
 10 files changed, 202 insertions(+), 169 deletions(-)
 create mode 100644 apps/desktop/src/contexts/shell/search.ts
 create mode 100644 apps/desktop/src/contexts/shell/settings.ts
 create mode 100644 apps/desktop/src/contexts/shell/tabs.ts

diff --git a/apps/desktop/src/components/main/body/index.tsx b/apps/desktop/src/components/main/body/index.tsx
index e94f283de4..11de86ddae 100644
--- a/apps/desktop/src/components/main/body/index.tsx
+++ b/apps/desktop/src/components/main/body/index.tsx
@@ -2,11 +2,9 @@ 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 { useShell } from "../../../contexts/shell";
 import { type Tab, uniqueIdfromTab, useTabs } from "../../../store/zustand/tabs";
@@ -23,10 +21,6 @@ import { TabContentNote, TabItemNote } from "./sessions";
 export function Body() {
   const { tabs, currentTab } = useTabs();
 
-  useTabCloseHotkey();
-  useTabSelectHotkeys();
-  useNewTabHotkeys();
-
   if (!currentTab) {
     return null;
   }
@@ -288,81 +282,6 @@ export function StandardTabWrapper(
   );
 }
 
-const useTabCloseHotkey = () => {
-  const { tabs, currentTab, close } = useTabs();
-
-  useHotkeys(
-    "mod+w",
-    async (e) => {
-      e.preventDefault();
-
-      if (currentTab && tabs.length > 1) {
-        close(currentTab);
-      } else {
-        const appWindow = getCurrentWebviewWindow();
-        await appWindow.close();
-      }
-    },
-    { enableOnFormTags: true, enableOnContentEditable: true },
-    [tabs, currentTab, close],
-  );
-};
-
-const useTabSelectHotkeys = () => {
-  const { tabs, select } = useTabs();
-
-  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) {
-        return;
-      }
-
-      event.preventDefault();
-      select(target);
-    },
-    { enableOnFormTags: true, enableOnContentEditable: true },
-    [tabs, select],
-  );
-};
-
-const useNewTabHotkeys = () => {
-  const { persistedStore, internalStore } = useRouteContext({ from: "__root__" });
-  const { currentTab, close, openNew } = useTabs();
-
-  useHotkeys(
-    ["mod+n", "mod+t"],
-    (e) => {
-      e.preventDefault();
-
-      const sessionId = id();
-      const user_id = internalStore?.getValue("user_id");
-
-      persistedStore?.setRow("sessions", sessionId, { user_id, created_at: new Date().toISOString() });
-
-      if (e.key === "n" && currentTab) {
-        close(currentTab);
-      }
-
-      openNew({
-        type: "sessions",
-        id: sessionId,
-        active: true,
-        state: { editor: "raw" },
-      });
-    },
-    { enableOnFormTags: true, enableOnContentEditable: true },
-    [persistedStore, internalStore, currentTab, close, openNew],
-  );
-};
-
 function useScrollActiveTabIntoView(tabs: Tab[]) {
   const tabRefsMap = useRef<Map<string, HTMLDivElement>>(new Map());
 
diff --git a/apps/desktop/src/components/main/body/search.tsx b/apps/desktop/src/components/main/body/search.tsx
index 7d4e0438b0..3b9c97a468 100644
--- a/apps/desktop/src/components/main/body/search.tsx
+++ b/apps/desktop/src/components/main/body/search.tsx
@@ -1,54 +1,21 @@
 import { Loader2Icon, SearchIcon, XIcon } from "lucide-react";
-import { useRef, useState } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
+import { useEffect, useRef, useState } from "react";
 
 import { cn } from "@hypr/utils";
 import { useSearch } from "../../../contexts/search/ui";
 
 export function Search() {
-  const { query, setQuery, isSearching, isIndexing, onFocus, onBlur } = useSearch();
+  const { query, setQuery, isSearching, isIndexing, onFocus, onBlur, registerFocusCallback } = useSearch();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [isFocused, setIsFocused] = useState(false);
 
   const showLoading = isSearching || isIndexing;
 
-  useHotkeys("mod+k", (e) => {
-    e.preventDefault();
-    inputRef.current?.focus();
-  });
-
-  useHotkeys(
-    "down",
-    (event) => {
-      if (document.activeElement === inputRef.current) {
-        event.preventDefault();
-        console.log("down");
-      }
-    },
-    { enableOnFormTags: true },
-  );
-
-  useHotkeys(
-    "up",
-    (event) => {
-      if (document.activeElement === inputRef.current) {
-        event.preventDefault();
-        console.log("up");
-      }
-    },
-    { enableOnFormTags: true },
-  );
-
-  useHotkeys(
-    "enter",
-    (event) => {
-      if (document.activeElement === inputRef.current) {
-        event.preventDefault();
-        console.log("enter");
-      }
-    },
-    { enableOnFormTags: true },
-  );
+  useEffect(() => {
+    registerFocusCallback(() => {
+      inputRef.current?.focus();
+    });
+  }, [registerFocusCallback]);
 
   const handleFocus = () => {
     setIsFocused(true);
diff --git a/apps/desktop/src/components/main/sidebar/profile/index.tsx b/apps/desktop/src/components/main/sidebar/profile/index.tsx
index 26e2996c8a..1b1118bb74 100644
--- a/apps/desktop/src/components/main/sidebar/profile/index.tsx
+++ b/apps/desktop/src/components/main/sidebar/profile/index.tsx
@@ -1,4 +1,5 @@
 import { commands as windowsCommands } from "@hypr/plugin-windows";
+import { Kbd, KbdGroup } from "@hypr/ui/components/ui/kbd";
 
 import { clsx } from "clsx";
 import { Calendar, ChevronUpIcon, FolderOpen, Settings, Users } from "lucide-react";
@@ -116,7 +117,17 @@ export function ProfileSection() {
     { icon: FolderOpen, label: "Folders", onClick: handleClickFolders },
     { icon: Users, label: "Contacts", onClick: handleClickContacts },
     { icon: Calendar, label: "Calendar", onClick: handleClickCalendar },
-    { icon: Settings, label: "Settings", onClick: handleClickSettings },
+    {
+      icon: Settings,
+      label: "Settings",
+      onClick: handleClickSettings,
+      badge: (
+        <KbdGroup>
+          <Kbd className="bg-neutral-200">⌘</Kbd>
+          <Kbd className="bg-neutral-200">,</Kbd>
+        </KbdGroup>
+      ),
+    },
   ];
 
   return (
diff --git a/apps/desktop/src/contexts/search/ui.tsx b/apps/desktop/src/contexts/search/ui.tsx
index 372c6ce185..b08a7325a3 100644
--- a/apps/desktop/src/contexts/search/ui.tsx
+++ b/apps/desktop/src/contexts/search/ui.tsx
@@ -1,5 +1,5 @@
 import { Highlight } from "@orama/highlight";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import type { SearchDocument, SearchEntityType, SearchFilters, SearchHit } from "./engine";
 import { useSearchEngine } from "./engine";
@@ -38,6 +38,8 @@ interface SearchUIContextValue {
   isIndexing: boolean;
   onFocus: () => void;
   onBlur: () => void;
+  registerFocusCallback: (callback: () => void) => void;
+  focusInput: () => void;
 }
 
 const SCORE_PERCENTILE_THRESHOLD = 0.1;
@@ -148,6 +150,7 @@ export function SearchUIProvider({ children }: { children: React.ReactNode }) {
   const [isFocused, setIsFocused] = useState(false);
   const [searchHits, setSearchHits] = useState<SearchHit[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
+  const focusCallbackRef = useRef<(() => void) | null>(null);
 
   const resetSearchState = useCallback(() => {
     setSearchHits([]);
@@ -195,6 +198,14 @@ export function SearchUIProvider({ children }: { children: React.ReactNode }) {
     setIsFocused(false);
   }, []);
 
+  const registerFocusCallback = useCallback((callback: () => void) => {
+    focusCallbackRef.current = callback;
+  }, []);
+
+  const focusInput = useCallback(() => {
+    focusCallbackRef.current?.();
+  }, []);
+
   const results = useMemo(() => {
     if (searchHits.length === 0 || !searchQuery) {
       return null;
@@ -214,8 +225,10 @@ export function SearchUIProvider({ children }: { children: React.ReactNode }) {
       isIndexing,
       onFocus,
       onBlur,
+      registerFocusCallback,
+      focusInput,
     }),
-    [query, filters, results, isSearching, isFocused, isIndexing, onFocus, onBlur],
+    [query, filters, results, isSearching, isFocused, isIndexing, onFocus, onBlur, registerFocusCallback, focusInput],
   );
 
   return <SearchUIContext.Provider value={value}>{children}</SearchUIContext.Provider>;
diff --git a/apps/desktop/src/contexts/shell/index.tsx b/apps/desktop/src/contexts/shell/index.tsx
index beb6d6b60c..1f5aa22dfd 100644
--- a/apps/desktop/src/contexts/shell/index.tsx
+++ b/apps/desktop/src/contexts/shell/index.tsx
@@ -2,20 +2,35 @@ import { createContext, useContext } from "react";
 
 import { useChatMode } from "./chat";
 import { useLeftSidebar } from "./leftsidebar";
+import { useSearchShortcut } from "./search";
+import { useSettings } from "./settings";
+import { useTabsShortcuts } from "./tabs";
 
 interface ShellContextType {
   chat: ReturnType<typeof useChatMode>;
   leftsidebar: ReturnType<typeof useLeftSidebar>;
+  search: ReturnType<typeof useSearchShortcut>;
+  settings: ReturnType<typeof useSettings>;
+  tabs: ReturnType<typeof useTabsShortcuts>;
 }
 
 const ShellContext = createContext<ShellContextType | null>(null);
 
-export function ShellProvider({ children }: { children: React.ReactNode }) {
+interface ShellProviderProps {
+  children: React.ReactNode;
+  onNewTab: (closeCurrentFirst: boolean) => void;
+  onFocusSearch: () => void;
+}
+
+export function ShellProvider({ children, onNewTab, onFocusSearch }: ShellProviderProps) {
   const chat = useChatMode();
   const leftsidebar = useLeftSidebar();
+  const search = useSearchShortcut({ onFocusSearch });
+  const settings = useSettings();
+  const tabs = useTabsShortcuts(onNewTab);
 
   return (
-    <ShellContext.Provider value={{ chat, leftsidebar }}>
+    <ShellContext.Provider value={{ chat, leftsidebar, search, settings, tabs }}>
       {children}
     </ShellContext.Provider>
   );
diff --git a/apps/desktop/src/contexts/shell/search.ts b/apps/desktop/src/contexts/shell/search.ts
new file mode 100644
index 0000000000..4a537e5d1c
--- /dev/null
+++ b/apps/desktop/src/contexts/shell/search.ts
@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+
+interface UseSearchShortcutProps {
+  onFocusSearch: () => void;
+}
+
+export function useSearchShortcut({ onFocusSearch }: UseSearchShortcutProps) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+        event.preventDefault();
+        onFocusSearch();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onFocusSearch]);
+
+  return { focusSearch: onFocusSearch };
+}
diff --git a/apps/desktop/src/contexts/shell/settings.ts b/apps/desktop/src/contexts/shell/settings.ts
new file mode 100644
index 0000000000..67cd917be2
--- /dev/null
+++ b/apps/desktop/src/contexts/shell/settings.ts
@@ -0,0 +1,23 @@
+import { commands as windowsCommands } from "@hypr/plugin-windows";
+
+import { useCallback, useEffect } from "react";
+
+export function useSettings() {
+  const openSettings = useCallback(() => {
+    windowsCommands.windowShow({ type: "settings" });
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === ",") {
+        event.preventDefault();
+        openSettings();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [openSettings]);
+
+  return { openSettings };
+}
diff --git a/apps/desktop/src/contexts/shell/tabs.ts b/apps/desktop/src/contexts/shell/tabs.ts
new file mode 100644
index 0000000000..36e0850211
--- /dev/null
+++ b/apps/desktop/src/contexts/shell/tabs.ts
@@ -0,0 +1,48 @@
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { useEffect } from "react";
+
+import { useTabs as useTabsStore } from "../../store/zustand/tabs";
+
+export function useTabsShortcuts(onNewTab: (closeCurrentFirst: boolean) => void) {
+  const { tabs, currentTab, close, select } = useTabsStore();
+
+  useEffect(() => {
+    const handleKeyDown = async (event: KeyboardEvent) => {
+      const isMod = event.metaKey || event.ctrlKey;
+
+      if (isMod && event.key === "w") {
+        event.preventDefault();
+        if (currentTab && tabs.length > 1) {
+          close(currentTab);
+        } else {
+          const appWindow = getCurrentWebviewWindow();
+          await appWindow.close();
+        }
+        return;
+      }
+
+      if (isMod && (event.key === "n" || event.key === "t")) {
+        event.preventDefault();
+        onNewTab(event.key === "n");
+        return;
+      }
+
+      if (isMod && event.key >= "1" && event.key <= "9") {
+        const targetIndex = event.key === "9"
+          ? tabs.length - 1
+          : Number.parseInt(event.key, 10) - 1;
+
+        const target = tabs[targetIndex];
+        if (target) {
+          event.preventDefault();
+          select(target);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [tabs, currentTab, close, select, onNewTab]);
+
+  return {};
+}
diff --git a/apps/desktop/src/routes/app/main/_layout.tsx b/apps/desktop/src/routes/app/main/_layout.tsx
index 45be626870..4e534f6123 100644
--- a/apps/desktop/src/routes/app/main/_layout.tsx
+++ b/apps/desktop/src/routes/app/main/_layout.tsx
@@ -1,10 +1,10 @@
 import { createFileRoute, Outlet, useRouteContext } from "@tanstack/react-router";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 
 import { toolFactories } from "../../../chat/tools";
 import { useSearchEngine } from "../../../contexts/search/engine";
 import { SearchEngineProvider } from "../../../contexts/search/engine";
-import { SearchUIProvider } from "../../../contexts/search/ui";
+import { SearchUIProvider, useSearch } from "../../../contexts/search/ui";
 import { ShellProvider } from "../../../contexts/shell";
 import { useToolRegistry } from "../../../contexts/tool";
 import { ToolRegistryProvider } from "../../../contexts/tool";
@@ -17,7 +17,7 @@ export const Route = createFileRoute("/app/main/_layout")({
 
 function Component() {
   const { persistedStore, internalStore } = useRouteContext({ from: "__root__" });
-  const { registerOnClose, registerOnEmpty, currentTab, openNew } = useTabs();
+  const { registerOnClose, registerOnEmpty, currentTab, openNew, close } = useTabs();
 
   useEffect(() => {
     return registerOnClose((tab) => {
@@ -49,16 +49,45 @@ 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} />
+      </SearchUIProvider>
+    </SearchEngineProvider>
+  );
+}
+
+function SearchShortcutBridge({ onNewTab }: { onNewTab: (closeCurrentFirst: boolean) => void }) {
+  const { focusInput } = useSearch();
+
   return (
-    <ShellProvider>
-      <SearchEngineProvider store={persistedStore}>
-        <SearchUIProvider>
-          <ToolRegistryProvider>
-            <ToolRegistration />
-            <Outlet />
-          </ToolRegistryProvider>
-        </SearchUIProvider>
-      </SearchEngineProvider>
+    <ShellProvider onNewTab={onNewTab} onFocusSearch={focusInput}>
+      <ToolRegistryProvider>
+        <ToolRegistration />
+        <Outlet />
+      </ToolRegistryProvider>
     </ShellProvider>
   );
 }
diff --git a/packages/tiptap/src/editor/index.tsx b/packages/tiptap/src/editor/index.tsx
index f0ce4f1672..b0785b1dec 100644
--- a/packages/tiptap/src/editor/index.tsx
+++ b/packages/tiptap/src/editor/index.tsx
@@ -61,10 +61,26 @@ const Editor = forwardRef<{ editor: TiptapEditor | null }, EditorProps>(
         },
         scrollThreshold: 32,
         scrollMargin: 32,
-        handleKeyDown: (_, event) => {
-          if ((event.metaKey || event.ctrlKey) && (event.key === "w" || event.key === "n" || event.key === "t")) {
+        handleKeyDown: (view, event) => {
+          const allowedGlobalShortcuts = ["w", "n", "t", ",", "j", "l", "k"];
+          if ((event.metaKey || event.ctrlKey) && allowedGlobalShortcuts.includes(event.key)) {
             return false;
           }
+
+          if (event.key === "Backspace") {
+            const { state } = view;
+            const isAtStart = state.selection.$head.pos === 0;
+            if (isAtStart && state.selection.empty) {
+              event.preventDefault();
+              return true;
+            }
+          }
+
+          if (event.key === "Tab") {
+            event.preventDefault();
+            return true;
+          }
+
           return false;
         },
       },
@@ -99,35 +115,6 @@ const Editor = forwardRef<{ editor: TiptapEditor | null }, EditorProps>(
       }
     }, [editor, editable]);
 
-    useEffect(() => {
-      const handleKeyDown = (e: KeyboardEvent) => {
-        if ((e.metaKey || e.ctrlKey) && (e.key === "w" || e.key === "n" || e.key === "t")) {
-          return;
-        }
-
-        if (e.key === "Backspace" && editor?.state.selection.empty) {
-          const isAtStart = editor.state.selection.$head.pos === 0;
-          if (isAtStart) {
-            e.preventDefault();
-          }
-        }
-
-        if (e.key === "Tab") {
-          e.preventDefault();
-        }
-      };
-
-      if (editor) {
-        editor.view.dom.addEventListener("keydown", handleKeyDown);
-      }
-
-      return () => {
-        if (editor) {
-          editor.view.dom.removeEventListener("keydown", handleKeyDown);
-        }
-      };
-    }, [editor]);
-
     return (
       <div role="textbox">
         <EditorContent editor={editor} />

From 9825c5d7e7c2adb74b9c3ed363332c0a271ad7e6 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Tue, 21 Oct 2025 16:35:19 +0900
Subject: [PATCH 04/10] ota polish

---
 .../main/sidebar/profile/ota/index.tsx        | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/src/components/main/sidebar/profile/ota/index.tsx b/apps/desktop/src/components/main/sidebar/profile/ota/index.tsx
index 2ee622bf5a..e636fdc00c 100644
--- a/apps/desktop/src/components/main/sidebar/profile/ota/index.tsx
+++ b/apps/desktop/src/components/main/sidebar/profile/ota/index.tsx
@@ -79,11 +79,36 @@ export function UpdateChecker() {
   if (state === "downloading") {
     return (
       <MenuItemLikeContainer>
-        <div className="flex items-center gap-2.5">
-          <Spinner size={16} className="flex-shrink-0 text-neutral-500" />
-          <span>
-            Downloading...
-          </span>
+        <div className="flex w-full items-center justify-between gap-2.5">
+          <div className="flex items-center gap-2.5">
+            <svg className="h-4 w-4 flex-shrink-0" viewBox="0 0 16 16">
+              <circle
+                cx="8"
+                cy="8"
+                r="6"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                className="text-neutral-200"
+              />
+              <circle
+                cx="8"
+                cy="8"
+                r="6"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeDasharray={`${2 * Math.PI * 6}`}
+                strokeDashoffset={`${2 * Math.PI * 6 * (1 - downloadProgress.percentage / 100)}`}
+                strokeLinecap="round"
+                className="text-neutral-500 transition-all duration-300"
+                style={{ transform: "rotate(-90deg)", transformOrigin: "center" }}
+              />
+            </svg>
+            <span className="text-sm text-black">
+              Downloading... ({Math.round(downloadProgress.percentage)}%)
+            </span>
+          </div>
           <button
             onClick={handleCancelDownload}
             className={cn([
@@ -97,12 +122,6 @@ export function UpdateChecker() {
             <X className="h-4 w-4 text-neutral-500" />
           </button>
         </div>
-        <div className="h-1 w-full overflow-hidden rounded-full bg-neutral-200">
-          <div
-            className="h-full bg-neutral-900 transition-all duration-300"
-            style={{ width: `${downloadProgress.percentage}%` }}
-          />
-        </div>
       </MenuItemLikeContainer>
     );
   }

From a6f937fb3e93ea2de94d72a0846c7b4c1e39619f Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Tue, 21 Oct 2025 16:44:17 +0900
Subject: [PATCH 05/10] polish settings row

---
 .../src/components/settings/general.tsx       | 25 +---------------
 .../src/components/settings/notification.tsx  | 30 ++-----------------
 .../settings/{shared.ts => shared.tsx}        | 27 +++++++++++++++--
 3 files changed, 29 insertions(+), 53 deletions(-)
 rename apps/desktop/src/components/settings/{shared.ts => shared.tsx} (76%)

diff --git a/apps/desktop/src/components/settings/general.tsx b/apps/desktop/src/components/settings/general.tsx
index 677c2356f7..572ebf5b09 100644
--- a/apps/desktop/src/components/settings/general.tsx
+++ b/apps/desktop/src/components/settings/general.tsx
@@ -6,10 +6,9 @@ import { Badge } from "@hypr/ui/components/ui/badge";
 import { Button } from "@hypr/ui/components/ui/button";
 
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hypr/ui/components/ui/select";
-import { Switch } from "@hypr/ui/components/ui/switch";
 import { cn } from "@hypr/utils";
 
-import { useUpdateGeneral } from "./shared";
+import { SettingRow, useUpdateGeneral } from "./shared";
 
 type ISO_639_1_CODE = keyof typeof LANGUAGES_ISO_639_1;
 const SUPPORTED_LANGUAGES: ISO_639_1_CODE[] = [
@@ -440,25 +439,3 @@ function PermissionRow({
     </div>
   );
 }
-
-function SettingRow({
-  title,
-  description,
-  checked,
-  onChange,
-}: {
-  title: string;
-  description: string;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-}) {
-  return (
-    <div className="flex items-start justify-between gap-4">
-      <div className="flex-1">
-        <h3 className="text-sm font-medium mb-1">{title}</h3>
-        <p className="text-xs text-neutral-600">{description}</p>
-      </div>
-      <Switch checked={checked} onCheckedChange={onChange} />
-    </div>
-  );
-}
diff --git a/apps/desktop/src/components/settings/notification.tsx b/apps/desktop/src/components/settings/notification.tsx
index 019ea47c8e..c1f59d9051 100644
--- a/apps/desktop/src/components/settings/notification.tsx
+++ b/apps/desktop/src/components/settings/notification.tsx
@@ -1,14 +1,12 @@
-import { Switch } from "@hypr/ui/components/ui/switch";
-import { useUpdateGeneral } from "./shared";
+import { SettingRow, useUpdateGeneral } from "./shared";
 
 export function SettingsNotifications() {
   const { value, handle } = useUpdateGeneral();
 
   return (
-    <div className="flex flex-col gap-8 p-6">
-      {/* Notifications Section */}
+    <div className="flex flex-col gap-8">
       <div>
-        <h2 className="text-xl font-semibold mb-4">Notifications</h2>
+        <h2 className="font-semibold mb-4">Notifications</h2>
         <div className="space-y-6">
           <SettingRow
             title="Event notifications"
@@ -27,25 +25,3 @@ export function SettingsNotifications() {
     </div>
   );
 }
-
-function SettingRow({
-  title,
-  description,
-  checked,
-  onChange,
-}: {
-  title: string;
-  description: string;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-}) {
-  return (
-    <div className="flex items-start justify-between gap-4">
-      <div className="flex-1">
-        <h3 className="text-base font-medium mb-1">{title}</h3>
-        <p className="text-sm text-neutral-600">{description}</p>
-      </div>
-      <Switch checked={checked} onCheckedChange={onChange} />
-    </div>
-  );
-}
diff --git a/apps/desktop/src/components/settings/shared.ts b/apps/desktop/src/components/settings/shared.tsx
similarity index 76%
rename from apps/desktop/src/components/settings/shared.ts
rename to apps/desktop/src/components/settings/shared.tsx
index 8431228556..5ee439aa9d 100644
--- a/apps/desktop/src/components/settings/shared.ts
+++ b/apps/desktop/src/components/settings/shared.tsx
@@ -1,7 +1,8 @@
-import * as internal from "../../store/tinybase/internal";
-import * as persisted from "../../store/tinybase/persisted";
+import { Switch } from "@hypr/ui/components/ui/switch";
 
 import { useSafeObjectUpdate } from "../../hooks/useSafeObjectUpdate";
+import * as internal from "../../store/tinybase/internal";
+import * as persisted from "../../store/tinybase/persisted";
 
 export const useUpdateGeneral = () => {
   const _value = internal.UI.useValues(internal.STORE_ID);
@@ -56,3 +57,25 @@ export const useUpdateTemplate = (id: string) => {
   const handle = useSafeObjectUpdate(persisted.templateSchema, value, cb);
   return { value, handle };
 };
+
+export function SettingRow({
+  title,
+  description,
+  checked,
+  onChange,
+}: {
+  title: string;
+  description: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4">
+      <div className="flex-1">
+        <h3 className="text-sm font-medium mb-1">{title}</h3>
+        <p className="text-xs text-neutral-600">{description}</p>
+      </div>
+      <Switch checked={checked} onCheckedChange={onChange} />
+    </div>
+  );
+}

From 262f9a2447abf896e03dfdfc0f753b49d8755347 Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujonglee.dev@gmail.com>
Date: Tue, 21 Oct 2025 17:39:25 +0900
Subject: [PATCH 06/10] if search ui context own the input ref, we don't need
 indirection with callback

---
 .../src/components/main/body/search.tsx       | 11 ++------
 apps/desktop/src/contexts/search/ui.tsx       | 25 ++++++++-----------
 apps/desktop/src/contexts/shell/index.tsx     |  8 ++----
 apps/desktop/src/contexts/shell/search.ts     | 21 ----------------
 apps/desktop/src/routes/app/main/_layout.tsx  |  6 ++---
 5 files changed, 17 insertions(+), 54 deletions(-)
 delete mode 100644 apps/desktop/src/contexts/shell/search.ts

diff --git a/apps/desktop/src/components/main/body/search.tsx b/apps/desktop/src/components/main/body/search.tsx
index 3b9c97a468..ecf8ab0ab3 100644
--- a/apps/desktop/src/components/main/body/search.tsx
+++ b/apps/desktop/src/components/main/body/search.tsx
@@ -1,22 +1,15 @@
 import { Loader2Icon, SearchIcon, XIcon } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 import { cn } from "@hypr/utils";
 import { useSearch } from "../../../contexts/search/ui";
 
 export function Search() {
-  const { query, setQuery, isSearching, isIndexing, onFocus, onBlur, registerFocusCallback } = useSearch();
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  const { query, setQuery, isSearching, isIndexing, onFocus, onBlur, inputRef } = useSearch();
   const [isFocused, setIsFocused] = useState(false);
 
   const showLoading = isSearching || isIndexing;
 
-  useEffect(() => {
-    registerFocusCallback(() => {
-      inputRef.current?.focus();
-    });
-  }, [registerFocusCallback]);
-
   const handleFocus = () => {
     setIsFocused(true);
     onFocus();
diff --git a/apps/desktop/src/contexts/search/ui.tsx b/apps/desktop/src/contexts/search/ui.tsx
index b08a7325a3..b827375c8a 100644
--- a/apps/desktop/src/contexts/search/ui.tsx
+++ b/apps/desktop/src/contexts/search/ui.tsx
@@ -1,6 +1,7 @@
 import { Highlight } from "@orama/highlight";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
+import { useHotkeys } from "react-hotkeys-hook";
 import type { SearchDocument, SearchEntityType, SearchFilters, SearchHit } from "./engine";
 import { useSearchEngine } from "./engine";
 
@@ -38,8 +39,7 @@ interface SearchUIContextValue {
   isIndexing: boolean;
   onFocus: () => void;
   onBlur: () => void;
-  registerFocusCallback: (callback: () => void) => void;
-  focusInput: () => void;
+  inputRef: React.RefObject<HTMLInputElement | null>;
 }
 
 const SCORE_PERCENTILE_THRESHOLD = 0.1;
@@ -150,7 +150,13 @@ export function SearchUIProvider({ children }: { children: React.ReactNode }) {
   const [isFocused, setIsFocused] = useState(false);
   const [searchHits, setSearchHits] = useState<SearchHit[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
-  const focusCallbackRef = useRef<(() => void) | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useHotkeys(
+    "mod+k",
+    () => inputRef.current?.focus(),
+    { preventDefault: true },
+  );
 
   const resetSearchState = useCallback(() => {
     setSearchHits([]);
@@ -198,14 +204,6 @@ export function SearchUIProvider({ children }: { children: React.ReactNode }) {
     setIsFocused(false);
   }, []);
 
-  const registerFocusCallback = useCallback((callback: () => void) => {
-    focusCallbackRef.current = callback;
-  }, []);
-
-  const focusInput = useCallback(() => {
-    focusCallbackRef.current?.();
-  }, []);
-
   const results = useMemo(() => {
     if (searchHits.length === 0 || !searchQuery) {
       return null;
@@ -225,10 +223,9 @@ export function SearchUIProvider({ children }: { children: React.ReactNode }) {
       isIndexing,
       onFocus,
       onBlur,
-      registerFocusCallback,
-      focusInput,
+      inputRef,
     }),
-    [query, filters, results, isSearching, isFocused, isIndexing, onFocus, onBlur, registerFocusCallback, focusInput],
+    [query, filters, results, isSearching, isFocused, isIndexing, onFocus, onBlur],
   );
 
   return <SearchUIContext.Provider value={value}>{children}</SearchUIContext.Provider>;
diff --git a/apps/desktop/src/contexts/shell/index.tsx b/apps/desktop/src/contexts/shell/index.tsx
index 1f5aa22dfd..d7f4fd8d84 100644
--- a/apps/desktop/src/contexts/shell/index.tsx
+++ b/apps/desktop/src/contexts/shell/index.tsx
@@ -2,14 +2,12 @@ import { createContext, useContext } from "react";
 
 import { useChatMode } from "./chat";
 import { useLeftSidebar } from "./leftsidebar";
-import { useSearchShortcut } from "./search";
 import { useSettings } from "./settings";
 import { useTabsShortcuts } from "./tabs";
 
 interface ShellContextType {
   chat: ReturnType<typeof useChatMode>;
   leftsidebar: ReturnType<typeof useLeftSidebar>;
-  search: ReturnType<typeof useSearchShortcut>;
   settings: ReturnType<typeof useSettings>;
   tabs: ReturnType<typeof useTabsShortcuts>;
 }
@@ -19,18 +17,16 @@ const ShellContext = createContext<ShellContextType | null>(null);
 interface ShellProviderProps {
   children: React.ReactNode;
   onNewTab: (closeCurrentFirst: boolean) => void;
-  onFocusSearch: () => void;
 }
 
-export function ShellProvider({ children, onNewTab, onFocusSearch }: ShellProviderProps) {
+export function ShellProvider({ children, onNewTab }: ShellProviderProps) {
   const chat = useChatMode();
   const leftsidebar = useLeftSidebar();
-  const search = useSearchShortcut({ onFocusSearch });
   const settings = useSettings();
   const tabs = useTabsShortcuts(onNewTab);
 
   return (
-    <ShellContext.Provider value={{ chat, leftsidebar, search, settings, tabs }}>
+    <ShellContext.Provider value={{ chat, leftsidebar, settings, tabs }}>
       {children}
     </ShellContext.Provider>
   );
diff --git a/apps/desktop/src/contexts/shell/search.ts b/apps/desktop/src/contexts/shell/search.ts
deleted file mode 100644
index 4a537e5d1c..0000000000
--- a/apps/desktop/src/contexts/shell/search.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect } from "react";
-
-interface UseSearchShortcutProps {
-  onFocusSearch: () => void;
-}
-
-export function useSearchShortcut({ onFocusSearch }: UseSearchShortcutProps) {
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
-        event.preventDefault();
-        onFocusSearch();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onFocusSearch]);
-
-  return { focusSearch: onFocusSearch };
-}
diff --git a/apps/desktop/src/routes/app/main/_layout.tsx b/apps/desktop/src/routes/app/main/_layout.tsx
index 4e534f6123..79316ba80e 100644
--- a/apps/desktop/src/routes/app/main/_layout.tsx
+++ b/apps/desktop/src/routes/app/main/_layout.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect } from "react";
 import { toolFactories } from "../../../chat/tools";
 import { useSearchEngine } from "../../../contexts/search/engine";
 import { SearchEngineProvider } from "../../../contexts/search/engine";
-import { SearchUIProvider, useSearch } from "../../../contexts/search/ui";
+import { SearchUIProvider } from "../../../contexts/search/ui";
 import { ShellProvider } from "../../../contexts/shell";
 import { useToolRegistry } from "../../../contexts/tool";
 import { ToolRegistryProvider } from "../../../contexts/tool";
@@ -80,10 +80,8 @@ function Component() {
 }
 
 function SearchShortcutBridge({ onNewTab }: { onNewTab: (closeCurrentFirst: boolean) => void }) {
-  const { focusInput } = useSearch();
-
   return (
-    <ShellProvider onNewTab={onNewTab} onFocusSearch={focusInput}>
+    <ShellProvider onNewTab={onNewTab}>
       <ToolRegistryProvider>
         <ToolRegistration />
         <Outlet />

From dfb7dc20cdf44d675338acb9c16730fdaab70070 Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujonglee.dev@gmail.com>
Date: Tue, 21 Oct 2025 17:42:14 +0900
Subject: [PATCH 07/10] remove unnecessary fields from search ui context

---
 .../desktop/src/components/main/body/search.tsx | 16 +++-------------
 apps/desktop/src/contexts/search/ui.tsx         | 17 +----------------
 2 files changed, 4 insertions(+), 29 deletions(-)

diff --git a/apps/desktop/src/components/main/body/search.tsx b/apps/desktop/src/components/main/body/search.tsx
index ecf8ab0ab3..c811550c43 100644
--- a/apps/desktop/src/components/main/body/search.tsx
+++ b/apps/desktop/src/components/main/body/search.tsx
@@ -5,21 +5,11 @@ import { cn } from "@hypr/utils";
 import { useSearch } from "../../../contexts/search/ui";
 
 export function Search() {
-  const { query, setQuery, isSearching, isIndexing, onFocus, onBlur, inputRef } = useSearch();
+  const { query, setQuery, isSearching, isIndexing, inputRef } = useSearch();
   const [isFocused, setIsFocused] = useState(false);
 
   const showLoading = isSearching || isIndexing;
 
-  const handleFocus = () => {
-    setIsFocused(true);
-    onFocus();
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    onBlur();
-  };
-
   return (
     <div
       className={cn([
@@ -37,8 +27,8 @@ export function Search() {
           placeholder="Search anything..."
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
           className={cn([
             "text-sm",
             "w-full pl-9 h-full",
diff --git a/apps/desktop/src/contexts/search/ui.tsx b/apps/desktop/src/contexts/search/ui.tsx
index b827375c8a..badc733e80 100644
--- a/apps/desktop/src/contexts/search/ui.tsx
+++ b/apps/desktop/src/contexts/search/ui.tsx
@@ -35,10 +35,7 @@ interface SearchUIContextValue {
   setFilters: (filters: SearchFilters | null) => void;
   results: GroupedSearchResults | null;
   isSearching: boolean;
-  isFocused: boolean;
   isIndexing: boolean;
-  onFocus: () => void;
-  onBlur: () => void;
   inputRef: React.RefObject<HTMLInputElement | null>;
 }
 
@@ -147,7 +144,6 @@ export function SearchUIProvider({ children }: { children: React.ReactNode }) {
   const [query, setQuery] = useState("");
   const [filters, setFilters] = useState<SearchFilters | null>(null);
   const [isSearching, setIsSearching] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
   const [searchHits, setSearchHits] = useState<SearchHit[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
@@ -196,14 +192,6 @@ export function SearchUIProvider({ children }: { children: React.ReactNode }) {
     }
   }, [query, filters, performSearch, resetSearchState]);
 
-  const onFocus = useCallback(() => {
-    setIsFocused(true);
-  }, []);
-
-  const onBlur = useCallback(() => {
-    setIsFocused(false);
-  }, []);
-
   const results = useMemo(() => {
     if (searchHits.length === 0 || !searchQuery) {
       return null;
@@ -219,13 +207,10 @@ export function SearchUIProvider({ children }: { children: React.ReactNode }) {
       setFilters,
       results,
       isSearching,
-      isFocused,
       isIndexing,
-      onFocus,
-      onBlur,
       inputRef,
     }),
-    [query, filters, results, isSearching, isFocused, isIndexing, onFocus, onBlur],
+    [query, filters, results, isSearching, isIndexing],
   );
 
   return <SearchUIContext.Provider value={value}>{children}</SearchUIContext.Provider>;

From a5e54822f6a797ff57739e07a4d3850196576550 Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujonglee.dev@gmail.com>
Date: Tue, 21 Oct 2025 17:45:44 +0900
Subject: [PATCH 08/10] esc support in search input

---
 apps/desktop/src/components/main/body/search.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/desktop/src/components/main/body/search.tsx b/apps/desktop/src/components/main/body/search.tsx
index c811550c43..664ab2352c 100644
--- a/apps/desktop/src/components/main/body/search.tsx
+++ b/apps/desktop/src/components/main/body/search.tsx
@@ -27,6 +27,11 @@ export function Search() {
           placeholder="Search anything..."
           value={query}
           onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.currentTarget.blur();
+            }
+          }}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
           className={cn([

From 6e76a26eb6bfed91678f7556e25bb9c033bcf5ff Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujonglee.dev@gmail.com>
Date: Tue, 21 Oct 2025 17:50:23 +0900
Subject: [PATCH 09/10] useHotkeys is cleaner and well maintained

---
 apps/desktop/src/contexts/shell/settings.ts | 24 ++++----
 apps/desktop/src/contexts/shell/tabs.ts     | 65 +++++++++------------
 2 files changed, 40 insertions(+), 49 deletions(-)

diff --git a/apps/desktop/src/contexts/shell/settings.ts b/apps/desktop/src/contexts/shell/settings.ts
index 67cd917be2..c630321d14 100644
--- a/apps/desktop/src/contexts/shell/settings.ts
+++ b/apps/desktop/src/contexts/shell/settings.ts
@@ -1,23 +1,21 @@
 import { commands as windowsCommands } from "@hypr/plugin-windows";
-
-import { useCallback, useEffect } from "react";
+import { useCallback } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export function useSettings() {
   const openSettings = useCallback(() => {
     windowsCommands.windowShow({ type: "settings" });
   }, []);
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === ",") {
-        event.preventDefault();
-        openSettings();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [openSettings]);
+  useHotkeys(
+    "mod+,",
+    openSettings,
+    {
+      preventDefault: true,
+      splitKey: "|",
+    },
+    [openSettings],
+  );
 
   return { openSettings };
 }
diff --git a/apps/desktop/src/contexts/shell/tabs.ts b/apps/desktop/src/contexts/shell/tabs.ts
index 36e0850211..8711788731 100644
--- a/apps/desktop/src/contexts/shell/tabs.ts
+++ b/apps/desktop/src/contexts/shell/tabs.ts
@@ -1,48 +1,41 @@
 import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { useEffect } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 
 import { useTabs as useTabsStore } from "../../store/zustand/tabs";
 
 export function useTabsShortcuts(onNewTab: (closeCurrentFirst: boolean) => void) {
   const { tabs, currentTab, close, select } = useTabsStore();
 
-  useEffect(() => {
-    const handleKeyDown = async (event: KeyboardEvent) => {
-      const isMod = event.metaKey || event.ctrlKey;
-
-      if (isMod && event.key === "w") {
-        event.preventDefault();
-        if (currentTab && tabs.length > 1) {
-          close(currentTab);
-        } else {
-          const appWindow = getCurrentWebviewWindow();
-          await appWindow.close();
-        }
-        return;
-      }
-
-      if (isMod && (event.key === "n" || event.key === "t")) {
-        event.preventDefault();
-        onNewTab(event.key === "n");
-        return;
+  useHotkeys(
+    "mod+w",
+    async () => {
+      if (currentTab && tabs.length > 1) {
+        close(currentTab);
+      } else {
+        const appWindow = getCurrentWebviewWindow();
+        await appWindow.close();
       }
-
-      if (isMod && event.key >= "1" && event.key <= "9") {
-        const targetIndex = event.key === "9"
-          ? tabs.length - 1
-          : Number.parseInt(event.key, 10) - 1;
-
-        const target = tabs[targetIndex];
-        if (target) {
-          event.preventDefault();
-          select(target);
-        }
+    },
+    { preventDefault: true },
+    [tabs, currentTab, close],
+  );
+
+  useHotkeys("mod+n", () => onNewTab(true), { preventDefault: true }, [onNewTab]);
+  useHotkeys("mod+t", () => onNewTab(false), { preventDefault: true }, [onNewTab]);
+
+  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);
       }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [tabs, currentTab, close, select, onNewTab]);
+    },
+    { preventDefault: true },
+    [tabs, select],
+  );
 
   return {};
 }

From c9fe2cf597754910eb87595d04c413be0d479782 Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujonglee.dev@gmail.com>
Date: Tue, 21 Oct 2025 18:02:55 +0900
Subject: [PATCH 10/10] this types of shortcut only makes sense when tabs are
 visible, so better to co-locate with ui component

---
 .../src/components/main/body/index.tsx        | 110 ++++++++++++++----
 apps/desktop/src/contexts/shell/index.tsx     |  12 +-
 apps/desktop/src/contexts/shell/tabs.ts       |  41 -------
 apps/desktop/src/routes/app/main/_layout.tsx  |  43 ++-----
 4 files changed, 98 insertions(+), 108 deletions(-)
 delete mode 100644 apps/desktop/src/contexts/shell/tabs.ts

diff --git a/apps/desktop/src/components/main/body/index.tsx b/apps/desktop/src/components/main/body/index.tsx
index 11de86ddae..52cfd2b3c7 100644
--- a/apps/desktop/src/components/main/body/index.tsx
+++ b/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;
+}
diff --git a/apps/desktop/src/contexts/shell/index.tsx b/apps/desktop/src/contexts/shell/index.tsx
index d7f4fd8d84..8a230870b3 100644
--- a/apps/desktop/src/contexts/shell/index.tsx
+++ b/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>
   );
diff --git a/apps/desktop/src/contexts/shell/tabs.ts b/apps/desktop/src/contexts/shell/tabs.ts
deleted file mode 100644
index 8711788731..0000000000
--- a/apps/desktop/src/contexts/shell/tabs.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { useHotkeys } from "react-hotkeys-hook";
-
-import { useTabs as useTabsStore } from "../../store/zustand/tabs";
-
-export function useTabsShortcuts(onNewTab: (closeCurrentFirst: boolean) => void) {
-  const { tabs, currentTab, close, select } = useTabsStore();
-
-  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+n", () => onNewTab(true), { preventDefault: true }, [onNewTab]);
-  useHotkeys("mod+t", () => onNewTab(false), { preventDefault: true }, [onNewTab]);
-
-  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 {};
-}
diff --git a/apps/desktop/src/routes/app/main/_layout.tsx b/apps/desktop/src/routes/app/main/_layout.tsx
index 79316ba80e..7179252f66 100644
--- a/apps/desktop/src/routes/app/main/_layout.tsx
+++ b/apps/desktop/src/routes/app/main/_layout.tsx
@@ -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();