@fragments-sdk/cli 0.2.2

package/src/viewer/components/LeftSidebar.tsx

@@ -0,0 +1,391 @@
+import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import type { SegmentDefinition } from '../../core/index.js';
+import { BRAND } from '../../core/index.js';
+import { useTheme } from './ThemeProvider.js';
+import clsx from 'clsx';
+import { SearchIcon, SunIcon, MoonIcon, DashboardIcon } from './Icons.js';
+
+// Fuzzy matching utility
+interface FuzzyMatch {
+  score: number;
+  indices: number[];
+}
+
+function fuzzyMatch(text: string, pattern: string): FuzzyMatch | null {
+  if (!pattern) return { score: 0, indices: [] };
+
+  const textLower = text.toLowerCase();
+  const patternLower = pattern.toLowerCase();
+
+  const indices: number[] = [];
+  let patternIdx = 0;
+  let score = 0;
+  let consecutiveBonus = 0;
+
+  for (let i = 0; i < textLower.length && patternIdx < patternLower.length; i++) {
+    if (textLower[i] === patternLower[patternIdx]) {
+      indices.push(i);
+      if (indices.length > 1 && indices[indices.length - 2] === i - 1) {
+        consecutiveBonus += 5;
+      }
+      if (i === 0 || text[i - 1] === ' ' || text[i - 1] === '-' || text[i - 1] === '_') {
+        score += 10;
+      }
+      patternIdx++;
+    }
+  }
+
+  if (patternIdx !== patternLower.length) {
+    return null;
+  }
+
+  score += consecutiveBonus;
+  score += (patternLower.length / textLower.length) * 20;
+
+  return { score, indices };
+}
+
+interface SearchResult {
+  item: { path: string; segment: SegmentDefinition };
+  score: number;
+  nameIndices: number[];
+}
+
+function searchSegment(
+  item: { path: string; segment: SegmentDefinition },
+  query: string
+): SearchResult | null {
+  const { segment } = item;
+  // Skip invalid segments
+  if (!segment?.meta) return null;
+  const { name, category, tags } = segment.meta;
+
+  const nameMatch = fuzzyMatch(name, query);
+  if (nameMatch) {
+    return { item, score: nameMatch.score + 100, nameIndices: nameMatch.indices };
+  }
+
+  const categoryMatch = fuzzyMatch(category, query);
+  if (categoryMatch) {
+    return { item, score: categoryMatch.score + 50, nameIndices: [] };
+  }
+
+  if (tags) {
+    for (const tag of tags) {
+      const tagMatch = fuzzyMatch(tag, query);
+      if (tagMatch) {
+        return { item, score: tagMatch.score + 25, nameIndices: [] };
+      }
+    }
+  }
+
+  return null;
+}
+
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+function HighlightedText({ text, indices }: { text: string; indices: number[] }) {
+  if (indices.length === 0) return <>{text}</>;
+
+  const result: React.ReactNode[] = [];
+  let lastIndex = 0;
+
+  for (let i = 0; i < indices.length; i++) {
+    const matchIndex = indices[i];
+    if (matchIndex > lastIndex) {
+      result.push(text.slice(lastIndex, matchIndex));
+    }
+    result.push(
+      <span key={matchIndex} className="text-primary font-medium">
+        {text[matchIndex]}
+      </span>
+    );
+    lastIndex = matchIndex + 1;
+  }
+
+  if (lastIndex < text.length) {
+    result.push(text.slice(lastIndex));
+  }
+
+  return <>{result}</>;
+}
+
+interface LeftSidebarProps {
+  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  activeSegment: string | null;
+  onSelect: (path: string) => void;
+  showHealth?: boolean;
+  onHealthClick?: () => void;
+}
+
+export function LeftSidebar({ segments, activeSegment, onSelect, showHealth, onHealthClick }: LeftSidebarProps) {
+  const [search, setSearch] = useState('');
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const itemRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
+
+  const debouncedSearch = useDebounce(search, 150);
+
+  const searchResults = useMemo(() => {
+    if (!debouncedSearch) return null;
+
+    const results: SearchResult[] = [];
+    for (const item of segments) {
+      const result = searchSegment(item, debouncedSearch);
+      if (result) results.push(result);
+    }
+
+    results.sort((a, b) => b.score - a.score);
+    return results;
+  }, [segments, debouncedSearch]);
+
+  const highlightMap = useMemo(() => {
+    const map = new Map<string, number[]>();
+    if (searchResults) {
+      for (const result of searchResults) {
+        map.set(result.item.path, result.nameIndices);
+      }
+    }
+    return map;
+  }, [searchResults]);
+
+  const grouped = useMemo(() => {
+    const source = searchResults
+      ? searchResults.map(r => r.item)
+      : segments;
+
+    const groups: Record<string, typeof segments> = {};
+    for (const item of source) {
+      // Skip invalid segments
+      if (!item.segment?.meta) continue;
+      const category = item.segment.meta.category || 'uncategorized';
+      if (!groups[category]) groups[category] = [];
+      groups[category].push(item);
+    }
+    return groups;
+  }, [segments, searchResults]);
+
+  const toggleTheme = () => {
+    // Simple toggle between light and dark
+    setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+  };
+
+  const flatItems = useMemo(() => {
+    const items: Array<{ path: string; segment: SegmentDefinition }> = [];
+    const sortedEntries = Object.entries(grouped).sort(([a], [b]) =>
+      a.toLowerCase().localeCompare(b.toLowerCase())
+    );
+    for (const [, categoryItems] of sortedEntries) {
+      const sorted = [...categoryItems]
+        .filter(item => item.segment?.meta?.name)
+        .sort((a, b) =>
+          a.segment.meta.name.toLowerCase().localeCompare(b.segment.meta.name.toLowerCase())
+        );
+      items.push(...sorted);
+    }
+    return items;
+  }, [grouped]);
+
+  useEffect(() => {
+    if (focusedIndex >= 0 && focusedIndex < flatItems.length) {
+      itemRefs.current.get(focusedIndex)?.focus();
+    }
+  }, [focusedIndex, flatItems.length]);
+
+  useEffect(() => {
+    setFocusedIndex(-1);
+  }, [search]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    const target = e.target as HTMLElement;
+    if ((target.tagName === 'INPUT' && target !== searchInputRef.current) ||
+        target.tagName === 'TEXTAREA' || target.isContentEditable) {
+      return;
+    }
+
+    if ((e.key === '/' && !e.metaKey && !e.ctrlKey) ||
+        (e.key === 'k' && (e.metaKey || e.ctrlKey))) {
+      e.preventDefault();
+      searchInputRef.current?.focus();
+      searchInputRef.current?.select();
+      return;
+    }
+
+    if (e.key === 'Escape') {
+      if (document.activeElement === searchInputRef.current) {
+        setSearch('');
+        searchInputRef.current?.blur();
+        if (flatItems.length > 0) setFocusedIndex(0);
+      } else {
+        setSearch('');
+        setFocusedIndex(-1);
+      }
+      return;
+    }
+
+    if (document.activeElement === searchInputRef.current) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setFocusedIndex(prev => (prev + 1) >= flatItems.length ? 0 : prev + 1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setFocusedIndex(prev => (prev - 1) < 0 ? flatItems.length - 1 : prev - 1);
+    } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < flatItems.length) {
+      e.preventDefault();
+      onSelect(flatItems[focusedIndex].path);
+    }
+  }, [flatItems, focusedIndex, onSelect]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  const setItemRef = useCallback((index: number, el: HTMLButtonElement | null) => {
+    if (el) itemRefs.current.set(index, el);
+    else itemRefs.current.delete(index);
+  }, []);
+
+  let globalIndex = 0;
+  const sortedEntries = Object.entries(grouped).sort(([a], [b]) =>
+    a.toLowerCase().localeCompare(b.toLowerCase())
+  );
+
+  return (
+    <div className="flex flex-col h-full bg-[--bg-secondary]">
+      {/* Header - matches toolbar height (py-2 + border) */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-[--border]">
+        <span className="text-sm font-medium text-primary">{BRAND.name}</span>
+        <button
+          onClick={toggleTheme}
+          className={clsx(
+            'p-1.5 rounded-md',
+            'text-tertiary hover:text-secondary hover:bg-[--bg-hover]',
+            'focus:outline-none'
+          )}
+          title={`Theme: ${resolvedTheme}`}
+        >
+          {resolvedTheme === 'dark' ? (
+            <MoonIcon className="w-4 h-4" />
+          ) : (
+            <SunIcon className="w-4 h-4" />
+          )}
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="px-3 py-3">
+        <div className="relative">
+          <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-tertiary pointer-events-none" />
+          <input
+            ref={searchInputRef}
+            type="text"
+            placeholder="Search"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className={clsx(
+              'w-full pl-8 pr-3 py-1.5 text-sm rounded-md',
+              'bg-[--bg-primary] text-primary placeholder:text-tertiary',
+              'border border-[--border-subtle]',
+              'focus:outline-none focus:border-[--border-strong]'
+            )}
+          />
+        </div>
+      </div>
+
+      {/* Dashboard Link */}
+      {onHealthClick && (
+        <div className="px-2 pb-3">
+          <button
+            onClick={onHealthClick}
+            className={clsx(
+              'w-full flex items-center gap-2 px-2 py-2 rounded-md text-sm',
+              'focus:outline-none',
+              showHealth
+                ? 'bg-[--bg-hover] text-primary'
+                : 'text-secondary hover:bg-[--bg-hover] hover:text-primary'
+            )}
+          >
+            <DashboardIcon className="w-4 h-4" />
+            <span>Dashboard</span>
+          </button>
+        </div>
+      )}
+
+      {/* Component list */}
+      <nav className="flex-1 overflow-y-auto px-2 pb-4">
+        {sortedEntries.map(([category, items]) => {
+          const sortedItems = [...items].sort((a, b) =>
+            a.segment.meta.name.toLowerCase().localeCompare(b.segment.meta.name.toLowerCase())
+          );
+
+          return (
+            <div key={category} className="mb-1">
+              {/* Category divider */}
+              <div className="px-2 py-1.5 text-xs font-medium text-tertiary mt-2 first:mt-0">
+                {category}
+              </div>
+
+              {/* Items */}
+              <div className="space-y-0.5">
+                {sortedItems.map((item) => {
+                  const isActive = activeSegment === item.path;
+                  const currentIndex = globalIndex++;
+                  const isFocused = focusedIndex === currentIndex;
+                  const nameIndices = highlightMap.get(item.path) || [];
+
+                  return (
+                    <button
+                      key={item.path}
+                      ref={(el) => setItemRef(currentIndex, el)}
+                      onClick={() => onSelect(item.path)}
+                      onFocus={() => setFocusedIndex(currentIndex)}
+                      className={clsx(
+                        'w-full text-left px-2 py-1.5 rounded-md text-sm',
+                        'focus:outline-none',
+                        isActive
+                          ? 'bg-[--bg-hover] text-primary'
+                          : isFocused
+                            ? 'bg-[--bg-hover] text-primary'
+                            : 'text-secondary hover:bg-[--bg-hover] hover:text-primary'
+                      )}
+                    >
+                      <HighlightedText
+                        text={item.segment.meta.name}
+                        indices={nameIndices}
+                      />
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+
+        {Object.keys(grouped).length === 0 && (
+          <div className="px-2 py-8 text-center text-tertiary text-sm">
+            No results
+          </div>
+        )}
+      </nav>
+
+      {/* Footer */}
+      <div className="px-4 py-3 border-t border-[--border-subtle]">
+        <div className="text-xs text-tertiary">
+          {segments.length} components
+        </div>
+      </div>
+    </div>
+  );
+}