documentation-hub 5.7.2

package/src/components/editor/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Editor Components - Document editing and tracked changes
+ *
+ * Exports:
+ * - DocumentEditorModal: Fullscreen modal for document editing
+ * - EditorToolbar: Toolbar with save, undo/redo, formatting buttons
+ * - EditorQuickActions: Sidebar with quick action buttons
+ * - DocumentEditor: Main content editable document editor
+ * - TableEditor: Full table editing component with cell selection
+ */
+
+export { DocumentEditorModal } from './DocumentEditorModal';
+export { EditorToolbar } from './EditorToolbar';
+export { EditorQuickActions } from './EditorQuickActions';
+export { DocumentEditor } from './DocumentEditor';
+export type { DocumentEditorRef, DocumentEditorProps } from './DocumentEditor';
+export { TableEditor } from './TableEditor';
+export type { TableEditorRef, TableEditorProps } from './TableEditor';

package/src/components/layout/Header.tsx

@@ -0,0 +1,190 @@
+import { ChevronRight, Zap, Moon, Sun, Clock, Monitor } from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { cn } from '@/utils/cn';
+import { useState, useEffect, memo, useCallback, useMemo, useRef } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { SimpleTooltip } from '@/components/common/Tooltip';
+
+const pathToTitle: Record<string, string> = {
+  '/': 'Dashboard',
+  '/projects': 'Projects',
+  '/analytics': 'Analytics',
+  '/team': 'Team',
+  '/documents': 'Documents',
+  '/plugins': 'Plugins',
+  '/notifications': 'Notifications',
+  '/search': 'Search',
+  '/profile': 'Profile',
+  '/settings': 'Settings',
+  '/sessions': 'Sessions',
+};
+
+const pathDescriptions: Record<string, string> = {
+  '/': 'Manage your document processing sessions',
+  '/projects': 'View and manage your projects',
+  '/analytics': 'Track performance and insights',
+  '/team': 'Collaborate with your team members',
+  '/documents': 'Browse and manage documents',
+  '/plugins': 'Extend functionality with plugins',
+  '/notifications': 'View your notifications',
+  '/search': 'Search across your workspace',
+  '/profile': 'Manage your profile',
+  '/settings': 'Manage your account and application preferences',
+  '/sessions': 'View and manage all sessions',
+};
+
+export const Header = memo(function Header({ onCommandPalette }: { onCommandPalette: () => void }) {
+  const { theme, setTheme } = useTheme();
+  const [showThemeMenu, setShowThemeMenu] = useState(false);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const formatTime = useCallback((date: Date) => {
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+    });
+  }, []);
+
+  const breadcrumbs = useMemo(() => {
+    const paths = location.pathname.split('/').filter(Boolean);
+    const result = [];
+    let currentPath = '';
+
+    for (const path of paths) {
+      currentPath += `/${path}`;
+      result.push({
+        label: pathToTitle[currentPath] || path,
+        path: currentPath,
+      });
+    }
+
+    if (result.length === 0) {
+      result.push({ label: 'Dashboard', path: '/' });
+    }
+
+    return result;
+  }, [location.pathname]);
+
+  const currentPath = location.pathname;
+  const description = pathDescriptions[currentPath] || '';
+
+  const toggleThemeMenu = useCallback(() => {
+    setShowThemeMenu((prev) => !prev);
+  }, []);
+
+  const handleThemeChange = useCallback(
+    (value: 'light' | 'dark' | 'system') => {
+      setTheme(value);
+      setShowThemeMenu(false);
+    },
+    [setTheme]
+  );
+
+  return (
+    <header className="header-bg border-b border-border bg-background/50 backdrop-blur-xl px-6 py-2">
+      <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-0.5">
+          <div className="flex items-center gap-2">
+            {breadcrumbs.map((crumb, index) => (
+              <div key={crumb.path} className="flex items-center gap-2">
+                {index > 0 && <ChevronRight className="w-4 h-4 text-muted-foreground" />}
+                <button
+                  onClick={() => index < breadcrumbs.length - 1 && navigate(crumb.path)}
+                  className={cn(
+                    'text-base font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm',
+                    index === breadcrumbs.length - 1
+                      ? 'text-foreground cursor-default pointer-events-none'
+                      : 'text-muted-foreground hover:text-foreground cursor-pointer'
+                  )}
+                  disabled={index === breadcrumbs.length - 1}
+                  aria-current={index === breadcrumbs.length - 1 ? 'page' : undefined}
+                >
+                  {crumb.label}
+                </button>
+              </div>
+            ))}
+          </div>
+          {description && <p className="text-sm text-muted-foreground">{description}</p>}
+        </div>
+
+        <div className="flex items-center gap-3">
+          <div className="clock-widget flex items-center gap-2 px-3 py-1.5 rounded-md bg-muted/50 text-sm">
+            <Clock className="w-4 h-4" />
+            <span className="font-mono">{formatTime(currentTime)}</span>
+          </div>
+
+          <div className="w-px h-6 bg-border" />
+
+          <SimpleTooltip content="Quick actions (Ctrl+K)">
+            <button
+              onClick={onCommandPalette}
+              className={cn(
+                'p-2 rounded-md',
+                'hover:bg-accent hover:text-accent-foreground transition-colors',
+                'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+              )}
+              aria-label="Quick actions (Ctrl+K)"
+            >
+              <Zap className="w-4 h-4" />
+            </button>
+          </SimpleTooltip>
+
+          <SimpleTooltip content={`Theme: ${theme === 'light' ? 'Light' : theme === 'dark' ? 'Dark' : 'System'}`}>
+            <div className="relative">
+              <button
+                onClick={toggleThemeMenu}
+                className={cn(
+                  'p-2 rounded-md',
+                  'hover:bg-accent hover:text-accent-foreground transition-colors',
+                  'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                )}
+                aria-label="Theme switcher"
+              >
+                {theme === 'light' && <Sun className="w-4 h-4" />}
+                {theme === 'dark' && <Moon className="w-4 h-4" />}
+                {theme === 'system' && <Monitor className="w-4 h-4" />}
+              </button>
+
+              {showThemeMenu && (
+                <>
+                  <div className="fixed inset-0 z-10" onClick={() => setShowThemeMenu(false)} />
+                  <div className="absolute right-0 top-full mt-2 w-36 rounded-md border border-border bg-popover p-1 shadow-md z-20">
+                    {[
+                      { value: 'light' as const, icon: Sun, label: 'Light' },
+                      { value: 'dark' as const, icon: Moon, label: 'Dark' },
+                      { value: 'system' as const, icon: Monitor, label: 'System' },
+                    ].map(({ value, icon: Icon, label }) => (
+                      <button
+                        key={value}
+                        onClick={() => handleThemeChange(value)}
+                        className={cn(
+                          'w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm',
+                          'hover:bg-accent hover:text-accent-foreground transition-colors',
+                          theme === value && 'bg-accent text-accent-foreground'
+                        )}
+                      >
+                        <Icon className="w-3 h-3" />
+                        <span>{label}</span>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          </SimpleTooltip>
+        </div>
+      </div>
+    </header>
+  );
+});

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,313 @@
+import { useState, useEffect, useRef, memo, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Home,
+  FolderOpen,
+  Settings,
+  ChevronRight,
+  BarChart3,
+  FileText,
+  X,
+  Circle,
+  Keyboard,
+  Mail,
+} from 'lucide-react';
+import { cn } from '@/utils/cn';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useSession } from '@/contexts/SessionContext';
+import { SimpleTooltip } from '@/components/common/Tooltip';
+import iconPng from '/icon.png';
+
+interface NavItem {
+  id: string;
+  label: string;
+  icon: React.ElementType;
+  path: string;
+  badge?: number;
+  indented?: boolean;
+  closeable?: boolean;
+  onClose?: () => void;
+  shortcut?: string;
+}
+
+interface NavSection {
+  title?: string;
+  items: NavItem[];
+}
+
+export const Sidebar = memo(function Sidebar() {
+  const [collapsed, setCollapsed] = useState(false);
+  const [logoClickCount, setLogoClickCount] = useState(0);
+  const clickTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { sessions, activeSessions, closeSession } = useSession();
+
+  // Reset click count after 2 seconds of inactivity
+  useEffect(() => {
+    if (logoClickCount > 0) {
+      if (clickTimerRef.current) {
+        clearTimeout(clickTimerRef.current);
+      }
+      clickTimerRef.current = setTimeout(() => {
+        setLogoClickCount(0);
+      }, 2000);
+    }
+    return () => {
+      if (clickTimerRef.current) {
+        clearTimeout(clickTimerRef.current);
+      }
+    };
+  }, [logoClickCount]);
+
+  // Ctrl+Q to toggle sidebar
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'q') {
+        e.preventDefault();
+        setCollapsed((prev) => !prev);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const handleLogoClick = useCallback(() => {
+    const newCount = logoClickCount + 1;
+    setLogoClickCount(newCount);
+
+    if (newCount === 5) {
+      // Easter egg: open dev tools!
+      window.electronAPI.openDevTools();
+      setLogoClickCount(0);
+    }
+  }, [logoClickCount]);
+
+  const handleNavClick = useCallback(
+    (path: string) => {
+      navigate(path);
+    },
+    [navigate]
+  );
+
+  // Build navigation sections with dynamic sessions
+  const navSections = useMemo(() => {
+    const sections: NavSection[] = [];
+
+    // Main navigation section
+    const mainItems: NavItem[] = [
+      { id: 'home', label: 'Dashboard', icon: Home, path: '/', shortcut: 'Ctrl+1' },
+    ];
+
+    // Add active sessions under Dashboard
+    activeSessions.forEach((session) => {
+      mainItems.push({
+        id: `session-${session.id}`,
+        label: session.name,
+        icon: Circle,
+        path: `/session/${session.id}`,
+        indented: true,
+        closeable: true,
+        onClose: () => closeSession(session.id),
+      });
+    });
+
+    sections.push({ items: mainItems });
+
+    // Workspace section
+    sections.push({
+      title: 'Workspace',
+      items: [
+        { id: 'sessions', label: 'Sessions', icon: FolderOpen, path: '/sessions', shortcut: 'Ctrl+2' },
+        { id: 'analytics', label: 'Analytics', icon: BarChart3, path: '/analytics', shortcut: 'Ctrl+3' },
+        { id: 'documents', label: 'Documents', icon: FileText, path: '/documents', shortcut: 'Ctrl+4' },
+        { id: 'reporting', label: 'Reporting', icon: Mail, path: '/reporting', shortcut: 'Ctrl+5' },
+      ],
+    });
+
+    return sections;
+  }, [activeSessions, closeSession]);
+
+  const bottomItems = useMemo<NavItem[]>(
+    () => [
+      { id: 'settings', label: 'Settings', icon: Settings, path: '/settings', shortcut: 'Ctrl+,' },
+    ],
+    []
+  );
+
+  const renderNavItem = (item: NavItem) => {
+    const Icon = item.icon;
+    const isActive = location.pathname === item.path;
+
+    const buttonElement = (
+      <div
+        className={cn(
+          'relative group',
+          item.indented && !collapsed && 'ml-4',
+          item.indented && collapsed && 'ml-0'
+        )}
+      >
+        <button
+          type="button"
+          onClick={() => handleNavClick(item.path)}
+          className={cn(
+            'w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200',
+            'hover:bg-accent hover:text-accent-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+            isActive && 'bg-primary text-primary-foreground hover:bg-primary/90',
+            collapsed && 'justify-center'
+          )}
+        >
+          <div className="flex items-center gap-3 flex-1 pointer-events-none">
+            {item.indented && !collapsed && (
+              <div className="w-4 h-4 flex items-center justify-center">
+                <Circle className="w-2 h-2" />
+              </div>
+            )}
+            {(!item.indented || collapsed) && (
+              <Icon className={cn('w-4 h-4 flex-shrink-0', collapsed && 'w-5 h-5')} />
+            )}
+            <AnimatePresence mode="wait">
+              {!collapsed && (
+                <motion.span
+                  initial={{ opacity: 0, width: 0 }}
+                  animate={{ opacity: 1, width: 'auto' }}
+                  exit={{ opacity: 0, width: 0 }}
+                  transition={{ duration: 0.2 }}
+                  className="text-sm font-medium whitespace-nowrap overflow-hidden flex-1 text-left"
+                >
+                  {item.label}
+                </motion.span>
+              )}
+            </AnimatePresence>
+          </div>
+          {item.closeable && !collapsed && (
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={(e) => {
+                e.stopPropagation();
+                item.onClose?.();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  item.onClose?.();
+                }
+              }}
+              className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-background/20 pointer-events-none group-hover:pointer-events-auto"
+            >
+              <X className="w-3 h-3" />
+            </div>
+          )}
+          {item.badge && !collapsed && (
+            <span className="ml-auto px-1.5 py-0.5 text-xs bg-destructive text-destructive-foreground rounded-full">
+              {item.badge}
+            </span>
+          )}
+          {item.badge && collapsed && (
+            <span className="absolute top-1 right-1 w-2 h-2 bg-destructive rounded-full" />
+          )}
+        </button>
+      </div>
+    );
+
+    // Wrap with tooltip when collapsed (for non-indented items)
+    if (collapsed && !item.indented) {
+      return (
+        <SimpleTooltip key={item.id} content={item.label} side="right">
+          {buttonElement}
+        </SimpleTooltip>
+      );
+    }
+
+    return <div key={item.id}>{buttonElement}</div>;
+  };
+
+  return (
+    <motion.aside
+      initial={{ width: 240 }}
+      animate={{ width: collapsed ? 64 : 240 }}
+      transition={{ duration: 0.3, ease: 'easeInOut' }}
+      className="sidebar-bg h-full bg-background/50 backdrop-blur-xl border-r border-border flex flex-col relative"
+    >
+      <div className="p-4 flex items-center justify-between">
+        <AnimatePresence mode="wait">
+          {!collapsed && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="flex items-center gap-2"
+            >
+              <motion.div
+                onClick={handleLogoClick}
+                whileTap={{ scale: 0.9 }}
+                className="w-8 h-8 rounded-lg cursor-pointer hover:opacity-90 transition-opacity overflow-hidden"
+              >
+                <img src={iconPng} alt="DocHub" className="w-full h-full" />
+              </motion.div>
+              <span className="font-semibold text-sm">DocHub</span>
+            </motion.div>
+          )}
+        </AnimatePresence>
+        {collapsed && (
+          <motion.div
+            onClick={handleLogoClick}
+            whileTap={{ scale: 0.9 }}
+            className="w-8 h-8 rounded-lg cursor-pointer hover:opacity-90 transition-opacity overflow-hidden"
+          >
+            <img src={iconPng} alt="DocHub" className="w-full h-full" />
+          </motion.div>
+        )}
+      </div>
+
+      <div className="mx-4 mb-3 h-px bg-border/50" />
+
+      <nav className="flex-1 px-3 pb-3 overflow-y-auto">
+        <div className="space-y-4">
+          {navSections.map((section, sectionIndex) => (
+            <div key={section.title || sectionIndex}>
+              {section.title && !collapsed && (
+                <div className="px-3 mb-2">
+                  <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+                    {section.title}
+                  </span>
+                </div>
+              )}
+              {section.title && collapsed && (
+                <div className="mx-auto my-2 w-6 h-px bg-border/50" />
+              )}
+              <div className="space-y-1">{section.items.map(renderNavItem)}</div>
+            </div>
+          ))}
+        </div>
+      </nav>
+
+      <div className="px-3 pb-3 space-y-1 border-t border-border pt-3">
+        {bottomItems.map(renderNavItem)}
+      </div>
+
+      <SimpleTooltip content={collapsed ? 'Expand sidebar (Ctrl+Q)' : 'Collapse sidebar (Ctrl+Q)'} side="right">
+        <motion.button
+          onClick={() => setCollapsed(!collapsed)}
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
+          className={cn(
+            'absolute -right-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full',
+            'bg-background border-2 border-border',
+            'hover:border-primary hover:shadow-lg transition-all',
+            'flex items-center justify-center',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'group'
+          )}
+        >
+          <motion.div animate={{ rotate: collapsed ? 0 : 180 }} transition={{ duration: 0.3 }}>
+            <ChevronRight className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
+          </motion.div>
+        </motion.button>
+      </SimpleTooltip>
+    </motion.aside>
+  );
+});