documentation-hub 5.7.2

package/src/components/layout/TitleBar.tsx

@@ -0,0 +1,190 @@
+import { useState, useEffect, useRef } from 'react';
+import { Minus, Square, X, Pin, PinOff } from 'lucide-react';
+import { cn } from '@/utils/cn';
+import { motion, AnimatePresence } from 'framer-motion';
+import { SimpleTooltip, TooltipProvider } from '@/components/common/Tooltip';
+
+export function TitleBar() {
+  const [isMaximized, setIsMaximized] = useState(false);
+  const [isAlwaysOnTop, setIsAlwaysOnTop] = useState(false);
+  const [platform, setPlatform] = useState<NodeJS.Platform>('win32');
+  const [clickCount, setClickCount] = useState(0);
+  const [showDebugToast, setShowDebugToast] = useState(false);
+  const resetTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  useEffect(() => {
+    // Safely check if electronAPI is available (may not be in browser-only mode)
+    if (typeof window.electronAPI === 'undefined') {
+      console.warn('TitleBar: electronAPI not available (running in browser mode?)');
+      return;
+    }
+
+    window.electronAPI.getPlatform().then((p: string) => setPlatform(p as NodeJS.Platform));
+    window.electronAPI.isMaximized().then(setIsMaximized);
+    window.electronAPI.isAlwaysOnTop().then(setIsAlwaysOnTop);
+
+    const unsubMaximized = window.electronAPI.onWindowMaximized(() => setIsMaximized(true));
+    const unsubUnmaximized = window.electronAPI.onWindowUnmaximized(() => setIsMaximized(false));
+    const unsubAlwaysOnTop = window.electronAPI.onAlwaysOnTopChanged((isOnTop: boolean) => setIsAlwaysOnTop(isOnTop));
+
+    return () => {
+      unsubMaximized();
+      unsubUnmaximized();
+      unsubAlwaysOnTop();
+    };
+  }, []);
+
+  const handleMinimize = () => window.electronAPI?.minimizeWindow();
+  const handleMaximize = () => window.electronAPI?.maximizeWindow();
+  const handleClose = () => window.electronAPI?.closeWindow();
+  const handleToggleAlwaysOnTop = () => {
+    window.electronAPI?.setAlwaysOnTop(!isAlwaysOnTop);
+  };
+
+  const handleLogoClick = () => {
+    // Clear existing timeout
+    if (resetTimeoutRef.current) {
+      clearTimeout(resetTimeoutRef.current);
+    }
+
+    // Increment click count
+    const newCount = clickCount + 1;
+    setClickCount(newCount);
+
+    // Check if we've reached 5 clicks
+    if (newCount === 5) {
+      // Open dev tools
+      window.electronAPI?.openDevTools();
+
+      // Show toast notification
+      setShowDebugToast(true);
+      setTimeout(() => setShowDebugToast(false), 3000);
+
+      // Reset click count
+      setClickCount(0);
+    } else {
+      // Reset count after 2 seconds of inactivity
+      resetTimeoutRef.current = setTimeout(() => {
+        setClickCount(0);
+      }, 2000);
+    }
+  };
+
+  // Clean up timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (resetTimeoutRef.current) {
+        clearTimeout(resetTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const isWindows = platform === 'win32';
+  const isMac = platform === 'darwin';
+
+  return (
+    <>
+      <div className="h-8 bg-background/80 backdrop-blur-xl border-b border-border flex items-center justify-between drag-region relative">
+        <button
+          onClick={handleLogoClick}
+          className="flex items-center gap-2 px-3 no-drag hover:bg-muted/50 transition-colors"
+        >
+          <div className="w-4 h-4 rounded bg-primary/20" />
+          <span className="text-xs font-medium text-muted-foreground select-none">
+            Documentation Hub
+          </span>
+        </button>
+
+        {isWindows && (
+          <TooltipProvider>
+            <div className="flex no-drag">
+              <SimpleTooltip content={isAlwaysOnTop ? 'Unpin from top' : 'Pin on top'}>
+                <button
+                  onClick={handleToggleAlwaysOnTop}
+                  className={cn(
+                    'px-3 h-8 hover:bg-muted transition-colors',
+                    'focus:outline-none focus-visible:bg-muted',
+                    isAlwaysOnTop && 'text-primary bg-primary/10'
+                  )}
+                  aria-label={isAlwaysOnTop ? 'Unpin from top' : 'Pin on top'}
+                >
+                  {isAlwaysOnTop ? (
+                    <PinOff className="w-3 h-3" />
+                  ) : (
+                    <Pin className="w-3 h-3" />
+                  )}
+                </button>
+              </SimpleTooltip>
+              <button
+                onClick={handleMinimize}
+                className={cn(
+                  'px-4 h-8 hover:bg-muted transition-colors',
+                  'focus:outline-none focus-visible:bg-muted'
+                )}
+                aria-label="Minimize"
+              >
+                <Minus className="w-3 h-3" />
+              </button>
+              <button
+                onClick={handleMaximize}
+                className={cn(
+                  'px-4 h-8 hover:bg-muted transition-colors',
+                  'focus:outline-none focus-visible:bg-muted'
+                )}
+                aria-label={isMaximized ? 'Restore' : 'Maximize'}
+              >
+                <Square className="w-2.5 h-2.5" />
+              </button>
+              <button
+                onClick={handleClose}
+                className={cn(
+                  'px-4 h-8 hover:bg-destructive hover:text-destructive-foreground transition-colors',
+                  'focus:outline-none focus-visible:bg-destructive focus-visible:text-destructive-foreground'
+                )}
+                aria-label="Close"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </TooltipProvider>
+        )}
+
+        {isMac && (
+          <div className="flex gap-2 px-3 no-drag">
+            <button
+              onClick={handleClose}
+              className="w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-colors"
+              aria-label="Close"
+            />
+            <button
+              onClick={handleMinimize}
+              className="w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-colors"
+              aria-label="Minimize"
+            />
+            <button
+              onClick={handleMaximize}
+              className="w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-colors"
+              aria-label="Maximize"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Debug Mode Toast */}
+      <AnimatePresence>
+        {showDebugToast && (
+          <motion.div
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -50 }}
+            className="fixed top-12 left-1/2 transform -translate-x-1/2 z-[9999]"
+          >
+            <div className="bg-primary text-primary-foreground px-4 py-2 rounded-lg shadow-lg flex items-center gap-2">
+              <span className="text-sm font-medium">🔧 Debug Mode Activated</span>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

package/src/components/navigation/CommandPalette.tsx

@@ -0,0 +1,233 @@
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import { Command } from 'cmdk';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Search,
+  Home,
+  FolderOpen,
+  Settings,
+  User,
+  FileText,
+  Plug,
+  Moon,
+  Sun,
+  X,
+  ArrowRight,
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@/contexts/ThemeContext';
+import { cn } from '@/utils/cn';
+
+interface CommandItem {
+  id: string;
+  label: string;
+  category: string;
+  icon: React.ElementType;
+  action: () => void;
+  keywords?: string[];
+}
+
+export function CommandPalette({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const [search, setSearch] = useState('');
+  const navigate = useNavigate();
+  const { setTheme } = useTheme();
+
+  const handleNavigate = useCallback(
+    (path: string) => {
+      navigate(path);
+      onOpenChange(false);
+    },
+    [navigate, onOpenChange]
+  );
+
+  const items: CommandItem[] = useMemo(
+    () => [
+      {
+        id: 'home',
+        label: 'Go to Dashboard',
+        category: 'Navigation',
+        icon: Home,
+        action: () => handleNavigate('/'),
+        keywords: ['dashboard', 'home', 'main'],
+      },
+      {
+        id: 'projects',
+        label: 'Open Projects',
+        category: 'Navigation',
+        icon: FolderOpen,
+        action: () => handleNavigate('/projects'),
+        keywords: ['project', 'folder', 'workspace'],
+      },
+      {
+        id: 'documents',
+        label: 'Browse Documents',
+        category: 'Navigation',
+        icon: FileText,
+        action: () => handleNavigate('/documents'),
+        keywords: ['docs', 'files', 'text'],
+      },
+      {
+        id: 'plugins',
+        label: 'View Plugins',
+        category: 'Navigation',
+        icon: Plug,
+        action: () => handleNavigate('/plugins'),
+        keywords: ['plugins', 'extensions', 'addons', 'modules'],
+      },
+      {
+        id: 'profile',
+        label: 'View Profile',
+        category: 'Account',
+        icon: User,
+        action: () => handleNavigate('/profile'),
+        keywords: ['user', 'account', 'me'],
+      },
+      {
+        id: 'settings',
+        label: 'Open Settings',
+        category: 'Account',
+        icon: Settings,
+        action: () => handleNavigate('/settings'),
+        keywords: ['preferences', 'config', 'options'],
+      },
+      {
+        id: 'theme-light',
+        label: 'Switch to Light Theme',
+        category: 'Theme',
+        icon: Sun,
+        action: () => {
+          setTheme('light');
+          onOpenChange(false);
+        },
+        keywords: ['light', 'bright', 'day'],
+      },
+      {
+        id: 'theme-dark',
+        label: 'Switch to Dark Theme',
+        category: 'Theme',
+        icon: Moon,
+        action: () => {
+          setTheme('dark');
+          onOpenChange(false);
+        },
+        keywords: ['dark', 'night', 'dim'],
+      },
+    ],
+    [handleNavigate, setTheme, onOpenChange]
+  );
+
+  const groupedItems = items.reduce(
+    (acc, item) => {
+      if (!acc[item.category]) {
+        acc[item.category] = [];
+      }
+      acc[item.category].push(item);
+      return acc;
+    },
+    {} as Record<string, CommandItem[]>
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        onOpenChange(!open);
+      }
+      if (e.key === 'Escape') {
+        onOpenChange(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [open, onOpenChange]);
+
+  const handleSelect = useCallback(
+    (itemId: string) => {
+      const item = items.find((i) => i.id === itemId);
+      if (item) {
+        item.action();
+      }
+    },
+    [items]
+  );
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-background/80 backdrop-blur-xs z-50"
+            onClick={() => onOpenChange(false)}
+          />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
+            className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl z-50"
+          >
+            <Command className="rounded-xl border border-border bg-popover shadow-2xl">
+              <div className="flex items-center border-b border-border px-3">
+                <Search className="w-4 h-4 text-muted-foreground mr-2 shrink-0" />
+                <Command.Input
+                  value={search}
+                  onValueChange={setSearch}
+                  placeholder="Type a command or search..."
+                  className="flex-1 py-3 text-sm bg-transparent outline-none placeholder:text-muted-foreground"
+                />
+                <button
+                  onClick={() => onOpenChange(false)}
+                  className="p-1 rounded hover:bg-accent"
+                  aria-label="Close"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+              <Command.List className="max-h-96 overflow-y-auto p-2">
+                <Command.Empty className="py-6 text-center text-sm text-muted-foreground">
+                  No results found.
+                </Command.Empty>
+                {Object.entries(groupedItems).map(([category, categoryItems]) => (
+                  <Command.Group key={category} heading={category} className="px-2 pb-2">
+                    <div className="text-xs text-muted-foreground font-medium mb-1 px-2">
+                      {category}
+                    </div>
+                    {categoryItems.map((item) => {
+                      const Icon = item.icon;
+                      return (
+                        <Command.Item
+                          key={item.id}
+                          value={`${item.label} ${item.keywords?.join(' ') || ''}`}
+                          onSelect={() => handleSelect(item.id)}
+                          className={cn(
+                            'flex items-center gap-3 px-2 py-2 rounded-md cursor-pointer',
+                            'hover:bg-accent hover:text-accent-foreground',
+                            'aria-selected:bg-accent aria-selected:text-accent-foreground'
+                          )}
+                        >
+                          <Icon className="w-4 h-4 text-muted-foreground" />
+                          <span className="flex-1">{item.label}</span>
+                          <ArrowRight className="w-3 h-3 text-muted-foreground" />
+                        </Command.Item>
+                      );
+                    })}
+                  </Command.Group>
+                ))}
+              </Command.List>
+            </Command>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/components/navigation/KeyboardShortcutsModal.tsx

@@ -0,0 +1,173 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Keyboard } from 'lucide-react';
+import { cn } from '@/utils/cn';
+
+interface ShortcutItem {
+  keys: string[];
+  description: string;
+}
+
+interface ShortcutGroup {
+  title: string;
+  shortcuts: ShortcutItem[];
+}
+
+const shortcutGroups: ShortcutGroup[] = [
+  {
+    title: 'General',
+    shortcuts: [
+      { keys: ['Ctrl', 'K'], description: 'Open command palette' },
+      { keys: ['Ctrl', 'Q'], description: 'Toggle sidebar' },
+      { keys: ['?'], description: 'Show keyboard shortcuts' },
+      { keys: ['Esc'], description: 'Close dialogs / Cancel' },
+    ],
+  },
+  {
+    title: 'Navigation',
+    shortcuts: [
+      { keys: ['Ctrl', '1'], description: 'Go to Dashboard' },
+      { keys: ['Ctrl', '2'], description: 'Go to Sessions' },
+      { keys: ['Ctrl', '3'], description: 'Go to Analytics' },
+      { keys: ['Ctrl', '4'], description: 'Go to Documents' },
+      { keys: ['Ctrl', ','], description: 'Open Settings' },
+    ],
+  },
+  {
+    title: 'Session Actions',
+    shortcuts: [
+      { keys: ['Ctrl', 'N'], description: 'New session' },
+      { keys: ['Ctrl', 'O'], description: 'Add documents' },
+      { keys: ['Ctrl', 'Enter'], description: 'Process all documents' },
+      { keys: ['Ctrl', 'S'], description: 'Save session' },
+    ],
+  },
+  {
+    title: 'Document Actions',
+    shortcuts: [
+      { keys: ['Delete'], description: 'Remove selected document' },
+      { keys: ['Ctrl', 'Click'], description: 'Multi-select documents' },
+      { keys: ['Shift', 'Click'], description: 'Range select documents' },
+    ],
+  },
+];
+
+// For Mac, replace Ctrl with Cmd
+const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+function formatKey(key: string): string {
+  if (isMac && key === 'Ctrl') return '\u2318';
+  if (key === 'Shift') return '\u21E7';
+  if (key === 'Alt') return isMac ? '\u2325' : 'Alt';
+  if (key === 'Enter') return '\u23CE';
+  if (key === 'Esc') return 'Esc';
+  if (key === 'Delete') return isMac ? '\u232B' : 'Del';
+  return key;
+}
+
+interface KeyboardShortcutsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function KeyboardShortcutsModal({ open, onOpenChange }: KeyboardShortcutsModalProps) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <AnimatePresence>
+        {open && (
+          <Dialog.Portal forceMount>
+            <Dialog.Overlay asChild>
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+              />
+            </Dialog.Overlay>
+            <Dialog.Content asChild>
+              <motion.div
+                initial={{ opacity: 0, scale: 0.95, y: 20 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.95, y: 20 }}
+                transition={{ type: 'spring', duration: 0.3 }}
+                className={cn(
+                  'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50',
+                  'w-full max-w-2xl max-h-[85vh] overflow-hidden',
+                  'bg-background rounded-xl border border-border shadow-2xl',
+                  'flex flex-col'
+                )}
+              >
+                {/* Header */}
+                <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 rounded-lg bg-primary/10">
+                      <Keyboard className="w-5 h-5 text-primary" />
+                    </div>
+                    <div>
+                      <Dialog.Title className="text-lg font-semibold">
+                        Keyboard Shortcuts
+                      </Dialog.Title>
+                      <Dialog.Description className="text-sm text-muted-foreground">
+                        Quick reference for all available shortcuts
+                      </Dialog.Description>
+                    </div>
+                  </div>
+                  <Dialog.Close asChild>
+                    <button
+                      className="p-2 rounded-lg hover:bg-muted transition-colors"
+                      aria-label="Close"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                  </Dialog.Close>
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 overflow-y-auto p-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {shortcutGroups.map((group) => (
+                      <div key={group.title}>
+                        <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wider">
+                          {group.title}
+                        </h3>
+                        <div className="space-y-2">
+                          {group.shortcuts.map((shortcut, index) => (
+                            <div
+                              key={index}
+                              className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-muted/50 transition-colors"
+                            >
+                              <span className="text-sm">{shortcut.description}</span>
+                              <div className="flex items-center gap-1">
+                                {shortcut.keys.map((key, keyIndex) => (
+                                  <span key={keyIndex} className="flex items-center gap-1">
+                                    <kbd className="min-w-[24px] h-6 px-1.5 flex items-center justify-center text-xs font-mono bg-muted rounded border border-border shadow-sm">
+                                      {formatKey(key)}
+                                    </kbd>
+                                    {keyIndex < shortcut.keys.length - 1 && (
+                                      <span className="text-muted-foreground text-xs">+</span>
+                                    )}
+                                  </span>
+                                ))}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Footer */}
+                <div className="px-6 py-3 border-t border-border bg-muted/30">
+                  <p className="text-xs text-muted-foreground text-center">
+                    Press <kbd className="px-1 py-0.5 text-[10px] font-mono bg-muted rounded border border-border">?</kbd> anytime to show this dialog
+                  </p>
+                </div>
+              </motion.div>
+            </Dialog.Content>
+          </Dialog.Portal>
+        )}
+      </AnimatePresence>
+    </Dialog.Root>
+  );
+}