feat: add top-bar file search with Cmd+P quick open (#7)

Author: paul-seo73

README.md

@@ -10,6 +10,7 @@ Stave is an Electron-based AI coding workspace built with Bun, React, Vite, and
 - `$skill-name` composer selector that resolves installed Claude and Codex skills across global, user, and workspace scopes
 - file and image attachments in the composer, including screenshot capture and clipboard image paste with inline preview
 - Monaco editor with workspace-backed TypeScript IntelliSense, optional Python LSP support, docked terminal, and source-control actions
+- always-visible top-bar quick open for searching workspace files, with `Cmd/Ctrl+P` focusing it
 - redesigned project, workspace, and task shell with a collapsible project sidebar, workspace task tabs, and a right-side activity rail
 - recent-project switching that preserves each project's own workspace list and last active workspace
 - automatic import of existing branch-backed git worktrees when a project opens

docs/ui/project-workspace-task-shell.md

@@ -13,6 +13,7 @@ Replace the current `WorkspaceBar + TaskList` shell with a three-part layout:
 - The left project list is full-height and reaches the top edge of the app shell.
 - The top bar now applies only to the main work area, not the left project list.
 - The top bar shows the selected workspace path for the current workspace.
+- The top bar exposes an always-visible quick-open file search input, and `Cmd/Ctrl+P` focuses it from anywhere outside text inputs.
 - The center column contains the top bar, the selected workspace's task tab strip, and the main chat/editor surface.
 - The right edge contains a vertical rail for editor, explorer, changes, and terminal toggles.
 

src/components/layout/AppShell.tsx

@@ -1,4 +1,4 @@
-import { Suspense, lazy, useEffect, useRef, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { TopBar } from "@/components/layout/TopBar";
 import { ProjectWorkspaceSidebar } from "@/components/layout/ProjectWorkspaceSidebar";
@@ -18,7 +18,6 @@ const EditorPanel = lazy(() =>
     default: module.EditorPanel,
   }))
 );
-
 type ResizableLayoutKey =
   | "taskListWidth"
   | "editorPanelWidth"
@@ -69,6 +68,11 @@ export function AppShell() {
   const [zoomHudPercent, setZoomHudPercent] = useState<number | null>(null);
   const [showCloseConfirm, setShowCloseConfirm] = useState(false);
   const zoomHudTimerRef = useRef<number | null>(null);
+  const handleFocusFileSearch = useCallback(() => {
+    const input = document.querySelector<HTMLInputElement>("[data-file-search-input]");
+    input?.focus();
+    input?.select();
+  }, []);
 
   function flushPendingLayoutPatch() {
     if (!pendingLayoutPatchRef.current) {
@@ -158,6 +162,14 @@ export function AppShell() {
     const onKeyDown = (event: KeyboardEvent) => {
       const store = useAppStore.getState();
       const hasMod = event.ctrlKey || event.metaKey;
+
+      if (hasMod && !event.shiftKey && event.key.toLowerCase() === "p") {
+        event.preventDefault();
+        event.stopPropagation();
+        handleFocusFileSearch();
+        return;
+      }
+
       if (isEditableShortcutTarget(event.target)) {
         return;
       }
@@ -236,7 +248,7 @@ export function AppShell() {
 
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, []);
+  }, [handleFocusFileSearch]);
 
   useEffect(() => () => {
     if (resizeFrameRef.current !== null) {

src/components/layout/KeyboardShortcutsDrawer.tsx

@@ -111,6 +111,11 @@ export function KeyboardShortcutsDrawer({ open, onOpenChange }: KeyboardShortcut
         title: "Actions",
         description: "Common task and editor commands.",
         shortcuts: [
+          {
+            label: "Quick open file",
+            description: "Search the active workspace files and open a file in the editor.",
+            sequences: [[modifierLabel, "P"]],
+          },
           {
             label: "Save file",
             description: "Save the active editor tab.",
@@ -188,7 +193,7 @@ export function KeyboardShortcutsDrawer({ open, onOpenChange }: KeyboardShortcut
           </div>
           <DrawerFooter className="border-t border-border/70 px-5 py-4 md:flex-row md:items-center md:justify-between md:px-6">
             <p className="text-sm text-muted-foreground">
-              Task quick jump works on the active task list, and the guide shortcut is ignored while typing in inputs.
+              Task quick jump works on the active task list, and the quick open / guide shortcuts are ignored while typing in inputs.
             </p>
             <DrawerClose asChild>
               <Button variant="outline">Close</Button>

src/components/layout/TopBar.tsx

@@ -4,6 +4,7 @@ import { useShallow } from "zustand/react/shallow";
 import { Card, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui";
 import { useAppStore } from "@/store/app.store";
 import { TopBarBranchDropdown } from "@/components/layout/TopBarBranchDropdown";
+import { TopBarFileSearch } from "@/components/layout/TopBarFileSearch";
 import { TopBarOpenPR } from "@/components/layout/TopBarOpenPR";
 import { TopBarUtilityActions } from "@/components/layout/TopBarUtilityActions";
 import { TopBarWindowControls } from "@/components/layout/TopBarWindowControls";
@@ -128,10 +129,10 @@ export function TopBar() {
     <>
       <header
         data-testid="top-bar"
-        className="relative z-30 flex h-12 items-center justify-between border-b border-border/70 bg-card px-3.5"
+        className="relative z-30 flex h-12 items-center justify-between gap-3 border-b border-border/70 bg-card px-3.5"
         style={TOP_BAR_DRAG_STYLE}
       >
-        <div className="flex min-w-0 flex-1 items-center gap-2 pr-[18rem]">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
           <TooltipProvider>
             <TopBarBranchDropdown noDragStyle={TOP_BAR_NO_DRAG_STYLE} />
             {activeWorkspacePath ? (
@@ -152,24 +153,23 @@ export function TopBar() {
           </TooltipProvider>
         </div>
         <div
-          className="absolute right-0 top-0 z-20 flex h-12 shrink-0 items-center"
-          style={{
-            right: "8px",
-          }}
+          className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2"
+          style={TOP_BAR_NO_DRAG_STYLE}
         >
-          <div className="flex shrink-0 items-center gap-1.5">
-            <TopBarUtilityActions
-              isDarkMode={isDarkMode}
-              noDragStyle={TOP_BAR_NO_DRAG_STYLE}
-              onRefresh={handleRefreshProjectFiles}
-              onToggleTheme={handleToggleTheme}
-              onOpenShortcuts={handleOpenShortcuts}
-              onOpenSettings={handleOpenSettings}
-              onPreloadShortcuts={handlePreloadShortcuts}
-              onPreloadSettings={handlePreloadSettings}
-            />
-            <TopBarWindowControls noDragStyle={TOP_BAR_NO_DRAG_STYLE} />
-          </div>
+          <TopBarFileSearch noDragStyle={TOP_BAR_NO_DRAG_STYLE} />
+        </div>
+        <div className="flex shrink-0 items-center gap-1.5" style={TOP_BAR_NO_DRAG_STYLE}>
+          <TopBarUtilityActions
+            isDarkMode={isDarkMode}
+            noDragStyle={TOP_BAR_NO_DRAG_STYLE}
+            onRefresh={handleRefreshProjectFiles}
+            onToggleTheme={handleToggleTheme}
+            onOpenShortcuts={handleOpenShortcuts}
+            onOpenSettings={handleOpenSettings}
+            onPreloadShortcuts={handlePreloadShortcuts}
+            onPreloadSettings={handlePreloadSettings}
+          />
+          <TopBarWindowControls noDragStyle={TOP_BAR_NO_DRAG_STYLE} />
         </div>
       </header>
       {shortcutsOpen ? (