feat(ui): add tooltips, keyboard shortcuts, and UI improvements

- Add Radix UI tooltips to header, sidebar, and chat input buttons
- Style tooltips with theme colors (bg-foreground text-background)
- Set instant tooltip delay (0ms) for better UX
- Add Cmd+. shortcut for left sidebar toggle
- Add Cmd+, shortcut for settings dialog
- Move settings dialog state to global UI store
- Add keyboard shortcut indicators (Kbd) to sidebar Settings button
- Update Kbd component to use semantic bg-muted color
- Add scrollbar-hide CSS utility class
- Create editor breadcrumbs component with markdown outline
- Add shortcuts section to settings dialog
- Normalize header bar icon sizes to 16px
- Fix "Activity" tooltip to "Editor"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: fazxes

src/App.tsx

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import type { FC } from 'react';
 
 import { RootLayout } from '@/components/layout';
+import { TooltipProvider } from '@/components/ui/tooltip';
 import { useBrowser } from '@/hooks/use-browser';
 
 /**
@@ -41,9 +42,11 @@ const App: FC = () => {
   useBrowser(); // Handle browser messages from Tauri backend
 
   return (
-    <div className="h-full">
-      <RootLayout />
-    </div>
+    <TooltipProvider delayDuration={0}>
+      <div className="h-full">
+        <RootLayout />
+      </div>
+    </TooltipProvider>
   );
 };
 

src/components/activity/activity-panel.tsx

@@ -312,7 +312,7 @@ export const ActivityPanel: FC<ActivityPanelProps> = ({ width }) => {
             ) : null}
 
             {/* Inline file tabs */}
-            <div className="flex items-center overflow-x-auto scrollbar-thin flex-1 min-w-0">
+            <div className="flex items-center overflow-x-auto scrollbar-hide flex-1 min-w-0">
               {openTabs.map((tab) => (
                 <InlineFileTab
                   key={tab.path}

src/components/activity/file-viewer-content.tsx

@@ -1,12 +1,14 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import type { OutlineItem } from '@/components/editor/editor-breadcrumbs';
 import type { GotoPosition, ViewedFile } from '@/stores/file-viewer-store';
 import type { FC } from 'react';
 
 import { FileDiffViewer } from '@/components/activity/file-diff-viewer';
 import { CodeMirrorEditor } from '@/components/editor/CodeMirrorEditor';
+import { EditorBreadcrumbs, extractMarkdownOutline } from '@/components/editor/editor-breadcrumbs';
 import { writeFile, lspDidChange, lspDidSave } from '@/lib/backend';
-import { useFileViewerStore } from '@/stores/file-viewer-store';
+import { useCursorPosition, useFileViewerStore } from '@/stores/file-viewer-store';
 
 // Hook to detect theme from DOM
 function useDetectTheme(): 'dark' | 'light' {
@@ -39,6 +41,7 @@ interface FileViewerContentProps {
 
 export const FileViewerContent: FC<FileViewerContentProps> = ({ file }) => {
   const theme = useDetectTheme();
+  const cursorPosition = useCursorPosition();
   const searchOpen = useFileViewerStore((state) => state.searchOpen);
   const searchQuery = useFileViewerStore((state) => state.searchQuery);
   const setSearchQuery = useFileViewerStore((state) => state.setSearchQuery);
@@ -47,12 +50,50 @@ export const FileViewerContent: FC<FileViewerContentProps> = ({ file }) => {
   const markSaved = useFileViewerStore((state) => state.markSaved);
   const pendingGoto = useFileViewerStore((state) => state.pendingGoto);
   const clearPendingGoto = useFileViewerStore((state) => state.clearPendingGoto);
+  const gotoPosition = useFileViewerStore((state) => state.gotoPosition);
   const inputRef = useRef<HTMLInputElement>(null);
   const documentVersionRef = useRef(1); // Track document version for LSP
 
   // Only apply goto if it's for the current file
   const gotoForThisFile: GotoPosition | null = pendingGoto;
 
+  // Extract outline for markdown files
+  const outline = useMemo((): OutlineItem[] => {
+    if (file.language === 'markdown') {
+      return extractMarkdownOutline(file.content);
+    }
+    return [];
+  }, [file.content, file.language]);
+
+  // Find active outline index based on cursor position
+  const activeOutlineIndex = useMemo((): number => {
+    if (outline.length === 0) return -1;
+
+    // Find the last heading that is at or before the current cursor line
+    // cursorPosition.line is 1-indexed, outline.line is 0-indexed
+    const cursorLine = cursorPosition.line - 1;
+    let activeIndex = -1;
+
+    for (let i = 0; i < outline.length; i++) {
+      const item = outline[i];
+      if (item && item.line <= cursorLine) {
+        activeIndex = i;
+      } else if (item) {
+        break;
+      }
+    }
+
+    return activeIndex;
+  }, [outline, cursorPosition.line]);
+
+  // Handle outline item click - navigate to that line
+  const handleOutlineClick = useCallback(
+    (item: OutlineItem): void => {
+      gotoPosition(file.path, item.line + 1, 1); // Convert 0-indexed to 1-indexed
+    },
+    [gotoPosition, file.path]
+  );
+
   // Focus search input when opened
   useEffect(() => {
     if (searchOpen && inputRef.current) {
@@ -95,39 +136,50 @@ export const FileViewerContent: FC<FileViewerContentProps> = ({ file }) => {
   }
 
   return (
-    <div className="h-full w-full relative">
-      <CodeMirrorEditor
-        value={file.content}
-        language={file.language}
+    <div className="h-full w-full flex flex-col">
+      {/* Breadcrumbs */}
+      <EditorBreadcrumbs
         filePath={file.path}
-        onChange={handleChange}
-        onSave={handleSave}
-        theme={theme}
-        gotoPosition={gotoForThisFile}
-        onGotoComplete={clearPendingGoto}
+        outline={outline}
+        activeOutlineIndex={activeOutlineIndex}
+        onOutlineClick={handleOutlineClick}
       />
 
-      {/* Search overlay */}
-      {searchOpen ? (
-        <div className="absolute top-2 right-4 flex items-center gap-2 bg-card border border-border rounded-md px-2 py-1 shadow-lg z-10">
-          <input
-            ref={inputRef}
-            type="text"
-            value={searchQuery}
-            onChange={(e): void => {
-              setSearchQuery(e.target.value);
-            }}
-            onKeyDown={(e): void => {
-              if (e.key === 'Escape') closeSearch();
-            }}
-            placeholder="Search..."
-            className="w-48 text-sm bg-transparent border-none outline-none"
-          />
-          <span className="text-xs text-muted-foreground">
-            {searchQuery.length > 0 ? 'Esc to close' : ''}
-          </span>
-        </div>
-      ) : null}
+      {/* Editor */}
+      <div className="flex-1 relative min-h-0">
+        <CodeMirrorEditor
+          value={file.content}
+          language={file.language}
+          filePath={file.path}
+          onChange={handleChange}
+          onSave={handleSave}
+          theme={theme}
+          gotoPosition={gotoForThisFile}
+          onGotoComplete={clearPendingGoto}
+        />
+
+        {/* Search overlay */}
+        {searchOpen ? (
+          <div className="absolute top-2 right-4 flex items-center gap-2 bg-card border border-border rounded-md px-2 py-1 shadow-lg z-10">
+            <input
+              ref={inputRef}
+              type="text"
+              value={searchQuery}
+              onChange={(e): void => {
+                setSearchQuery(e.target.value);
+              }}
+              onKeyDown={(e): void => {
+                if (e.key === 'Escape') closeSearch();
+              }}
+              placeholder="Search..."
+              className="w-48 text-sm bg-transparent border-none outline-none"
+            />
+            <span className="text-xs text-muted-foreground">
+              {searchQuery.length > 0 ? 'Esc to close' : ''}
+            </span>
+          </div>
+        ) : null}
+      </div>
     </div>
   );
 };