Improve pane focus behavior: require item click, left-side note indicator

Focus now only changes when clicking an actual item in a pane, not
the pane background. Note card active state uses a left-side bar
instead of a full ring. Search input focus suppresses note highlight.

Author: ChristianChiarulli

src/App.tsx

@@ -24,7 +24,6 @@ import {
 import { SidebarPane } from "@/features/shell/sidebar-pane";
 import { useRevealMainWindow } from "@/features/shell/use-reveal-main-window";
 import { useShellController } from "@/features/shell/use-shell-controller";
-import { useShellStore } from "@/stores/use-shell-store";
 
 function App() {
   useTheme();
@@ -42,7 +41,6 @@ function App() {
     retryBootstrap,
     sidebarPaneProps,
   } = useShellController();
-  const setFocusedPane = useShellStore((s) => s.setFocusedPane);
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
   useRevealMainWindow(!hasCompletedStartupReveal && !readyToRevealWindow);
 
@@ -112,7 +110,6 @@ function App() {
             disableResponsive
             minSize={180}
             className="select-none"
-            onClickCapture={() => setFocusedPane("sidebar")}
           >
             <SidebarPane {...sidebarPaneProps} />
           </Section>
@@ -128,7 +125,6 @@ function App() {
             maxSize={340}
             minSize={220}
             className="select-none"
-            onMouseDown={() => setFocusedPane("notes")}
           >
             <NotesPane {...notesPaneProps} />
           </Section>
@@ -139,7 +135,7 @@ function App() {
             size={1}
           />
 
-          <Section minSize={300} onMouseDown={() => setFocusedPane("editor")}>
+          <Section minSize={300}>
             <EditorPane {...editorPaneProps} />
           </Section>
         </Container>

src/features/shell/editor-pane.tsx

@@ -523,6 +523,7 @@ export function EditorPane({
                 onChange={onChange}
                 onEditorFocusChange={(focused) => {
                   if (focused) {
+                    setFocusedPane("editor");
                     setHidePanelSearchInEditor(true);
                   }
                 }}

src/features/shell/notes-pane.tsx

@@ -244,6 +244,7 @@ export function NotesPane({
 
   const shouldSkipAnimation = Date.now() < skipAnimationUntilRef.current;
   const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
   const { ref: loadMoreRef, inView } = useInView({
     rootMargin: "160px 0px",
@@ -427,9 +428,11 @@ export function NotesPane({
               <Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
               <input
                 className="border-input/60 placeholder:text-muted-foreground focus:border-primary h-8 w-full rounded-md border bg-transparent py-1 pr-8 pl-9 text-sm outline-none"
+                onBlur={() => setIsSearchFocused(false)}
                 onChange={(event) =>
                   setDraftSearchQuery(event.currentTarget.value)
                 }
+                onFocus={() => setIsSearchFocused(true)}
                 onKeyDown={(event) => {
                   if (event.key === "Escape") {
                     if (draftSearchQuery) {
@@ -623,8 +626,10 @@ export function NotesPane({
                         className={[
                           "relative flex h-[6.75rem] w-full cursor-default flex-col items-start gap-2 overflow-hidden rounded-md px-3 py-2.5 text-left text-sm",
                           isActive ? "bg-accent/50" : "",
-                          isActive && focusedPane === "notes"
-                            ? "ring-primary/50 ring-2 ring-inset"
+                          isActive &&
+                          focusedPane === "notes" &&
+                          !isSearchFocused
+                            ? "before:bg-primary/60 before:absolute before:inset-y-0 before:left-0 before:w-[5px]"
                             : "",
                         ].join(" ")}
                         onClick={() => onSelectNote(note.id)}

src/features/shell/use-shell-controller.ts

@@ -122,6 +122,7 @@ export function useShellController() {
   const setNotebookFilter = useShellStore((state) => state.setNotebookFilter);
   const setSearchQuery = useShellStore((state) => state.setSearchQuery);
   const setSelectedNoteId = useShellStore((state) => state.setSelectedNoteId);
+  const setFocusedPane = useShellStore((state) => state.setFocusedPane);
 
   const sortViewKey =
     noteFilter === "notebook" ? (activeNotebookId ?? "all") : noteFilter;
@@ -1204,8 +1205,10 @@ export function useShellController() {
         latestRef.current.handleRestoreNote(noteId),
       onTrashNote: (noteId: string) =>
         latestRef.current.handleTrashNote(noteId),
-      onSelectNote: (noteId: string) =>
-        latestRef.current.handleSelectNote(noteId),
+      onSelectNote: (noteId: string) => {
+        setFocusedPane("notes");
+        latestRef.current.handleSelectNote(noteId);
+      },
       onSetNotePinned: (noteId: string, pinned: boolean) =>
         latestRef.current.handleSetNotePinned(noteId, pinned),
       searchQuery,
@@ -1227,6 +1230,7 @@ export function useShellController() {
       notesQuery.hasNextPage,
       notesQuery.isFetchingNextPage,
       searchQuery,
+      setFocusedPane,
       setNoteSortPrefs,
       setSearchQuery,
       sortViewKey,
@@ -1254,14 +1258,31 @@ export function useShellController() {
         latestRef.current.handleDeleteNotebook(notebookId),
       onHideCreateNotebook: hideCreateNotebook,
       onHideRenameNotebook: hideRenameNotebook,
-      onSelectAll: () => latestRef.current.handleSelectAll(),
-      onSelectToday: () => latestRef.current.handleSelectToday(),
-      onSelectTodo: () => latestRef.current.handleSelectTodo(),
-      onSelectArchive: () => latestRef.current.handleSelectArchive(),
-      onSelectTrash: () => latestRef.current.handleSelectTrash(),
+      onSelectAll: () => {
+        setFocusedPane("sidebar");
+        latestRef.current.handleSelectAll();
+      },
+      onSelectToday: () => {
+        setFocusedPane("sidebar");
+        latestRef.current.handleSelectToday();
+      },
+      onSelectTodo: () => {
+        setFocusedPane("sidebar");
+        latestRef.current.handleSelectTodo();
+      },
+      onSelectArchive: () => {
+        setFocusedPane("sidebar");
+        latestRef.current.handleSelectArchive();
+      },
+      onSelectTrash: () => {
+        setFocusedPane("sidebar");
+        latestRef.current.handleSelectTrash();
+      },
       onEmptyTrash: () => latestRef.current.handleEmptyTrash(),
-      onSelectNotebook: (notebookId: string) =>
-        latestRef.current.handleSelectNotebook(notebookId),
+      onSelectNotebook: (notebookId: string) => {
+        setFocusedPane("sidebar");
+        latestRef.current.handleSelectNotebook(notebookId);
+      },
       onShowCreateNotebook: showCreateNotebook,
       onShowRenameNotebook: (notebookId: string) =>
         showRenameNotebook(notebookId, notebooks),
@@ -1287,6 +1308,7 @@ export function useShellController() {
       notebooks,
       renameNotebookMutation.isPending,
       renamingNotebookName,
+      setFocusedPane,
       setNewNotebookName,
       setRenamingNotebookName,
       showCreateNotebook,