feat: search as virtual tab instead of modal, inline rendering support

Author: Swofty-Developments

crates/tauri-app/frontend/src/App.tsx

@@ -155,7 +155,7 @@ export function App() {
     }
     if (mod && e.shiftKey && key === "f") {
       e.preventDefault();
-      setStore("searchOpen", !store.searchOpen);
+      appStore.openVirtualTab("__search__");
     }
     if (mod && key === "\\") {
       e.preventDefault();

crates/tauri-app/frontend/src/components/chat/ChatArea.tsx

@@ -7,6 +7,7 @@ import { ThinkingBlock } from "./ThinkingBlock";
 import { ThreadSetup } from "./ThreadSetup";
 import { McpPanel } from "../sidebar/McpPanel";
 import { ThemeSelector } from "../settings/ThemeSelector";
+import { SearchOverlay } from "../shared/SearchOverlay";
 import type { ContentBlock } from "../../types";
 
 export function ChatArea() {
@@ -163,6 +164,11 @@ export function ChatArea() {
           <ThemeSelector inline />
         </div>
       </Show>
+      <Show when={store.activeTab === "__search__"}>
+        <div class="virtual-tab-content">
+          <SearchOverlay inline />
+        </div>
+      </Show>
 
       {/* Regular chat content */}
       <Show when={!isVirtualTab()}>

crates/tauri-app/frontend/src/components/shared/SearchOverlay.tsx

@@ -10,7 +10,7 @@ interface GroupedResults {
   messages: SearchResult[];
 }
 
-export function SearchOverlay() {
+export function SearchOverlay(props?: { inline?: boolean }) {
   const { store, setStore } = appStore;
   const [query, setQuery] = createSignal("");
   const [results, setResults] = createSignal<SearchResult[]>([]);
@@ -102,10 +102,8 @@ export function SearchOverlay() {
     );
   }
 
-  return (
-    <Show when={store.searchOpen}>
-      <div class="search-backdrop" onClick={(e) => { if (e.target === e.currentTarget) close(); }}>
-        <div class="search-panel">
+  const searchContent = (
+        <div class={props?.inline ? "search-panel-inline" : "search-panel"}>
           <div class="search-input-row">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
               <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
@@ -161,6 +159,14 @@ export function SearchOverlay() {
             </Show>
           </div>
         </div>
+  );
+
+  if (props?.inline) return searchContent;
+
+  return (
+    <Show when={store.searchOpen}>
+      <div class="search-backdrop" onClick={(e) => { if (e.target === e.currentTarget) close(); }}>
+        {searchContent}
       </div>
     </Show>
   );
@@ -170,6 +176,12 @@ if (!document.getElementById("search-overlay-styles")) {
   const style = document.createElement("style");
   style.id = "search-overlay-styles";
   style.textContent = `
+    .search-panel-inline {
+      max-width: 680px;
+      margin: 0 auto;
+      padding: 24px;
+      width: 100%;
+    }
     .search-backdrop {
       position: fixed;
       inset: 0;

crates/tauri-app/frontend/src/components/sidebar/Sidebar.tsx

@@ -128,7 +128,7 @@ export function Sidebar() {
               </svg>
               Themes
             </button>
-            <button class="sidebar-action" onClick={() => setStore("searchOpen", true)} title="Search (Cmd+Shift+F)">
+            <button class="sidebar-action" onClick={() => appStore.openVirtualTab("__search__")} title="Search (Cmd+Shift+F)">
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
               </svg>

crates/tauri-app/frontend/src/components/tabs/TabBar.tsx

@@ -73,6 +73,7 @@ function SortableTab(props: { tabId: string; index: number }) {
       <span class="tab-label">{
         props.tabId === "__mcp__" ? "MCP Servers" :
         props.tabId === "__themes__" ? "Themes" :
+        props.tabId === "__search__" ? "Search" :
         props.tabId === "__settings__" ? "Settings" :
         thread()?.title || "..."
       }</span>