@toolr/ui-design 0.1.8 → 0.1.9

package/components/ui/project-explorer.tsx

@@ -0,0 +1,666 @@
+import React, { type ReactNode, memo, useState, useCallback } from 'react'
+import { IconButton } from './icon-button.tsx'
+import { Input } from './input.tsx'
+import { Tooltip } from './tooltip.tsx'
+import { iconMap } from './icon-button.tsx'
+import { useAccentColor } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
+import { FolderOpen as FolderOpenIcon } from 'lucide-react'
+
+const SearchIcon = iconMap['search']
+const XIcon = iconMap['x']
+const FolderIcon = iconMap['folder']
+const ChevronRightIcon = iconMap['chevron-right']
+const ChevronDownIcon = iconMap['chevron-down']
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ExplorerNode {
+  name: string
+  path: string
+  children: ExplorerNode[]
+  project?: { id: string; name: string; path: string; [key: string]: unknown }
+}
+
+export interface ExplorerTopItem {
+  id: string
+  icon: ReactNode
+  label: string
+  selected: boolean
+  selectedClass: string
+  onClick: () => void
+  actions?: ReactNode
+}
+
+export interface ExplorerContextMenuInfo {
+  x: number
+  y: number
+  project: ExplorerNode['project'] | null
+  nodeName: string
+  nodePath: string
+}
+
+export interface ProjectExplorerProps {
+  tree: ExplorerNode[]
+  selectedProjectId: string | null
+  onSelectProject: (id: string) => void
+
+  topItems?: ExplorerTopItem[]
+
+  searchQuery: string
+  onSearchChange: (query: string) => void
+
+  collapsedPaths: string[]
+  onTogglePath: (path: string) => void
+  expandablePaths: string[]
+  onExpandAll: () => void
+  onCollapseAll: () => void
+
+  width: number
+  onWidthChange: (width: number) => void
+  collapsed: boolean
+  onToggleCollapsed: () => void
+
+  onAddProject: () => void
+  isAddingProject?: boolean
+  onScanProjects?: () => void
+
+  onMiddleClick?: (project: ExplorerNode['project']) => void
+  renderProjectActions?: (project: ExplorerNode['project']) => ReactNode
+  renderContextMenu?: (info: ExplorerContextMenuInfo, onClose: () => void) => ReactNode
+  isProjectHighlighted?: (project: ExplorerNode['project']) => boolean
+
+  accentColor?: FormColor
+  emptyMessage?: string
+  noMatchMessage?: string
+}
+
+// ---------------------------------------------------------------------------
+// Accent color class maps
+// ---------------------------------------------------------------------------
+
+const COLLAPSED_BUTTON: Record<string, string> = {
+  blue: 'text-blue-500', green: 'text-green-500', red: 'text-red-500', orange: 'text-orange-500',
+  cyan: 'text-cyan-500', yellow: 'text-yellow-500', purple: 'text-purple-500', indigo: 'text-indigo-500',
+  emerald: 'text-emerald-500', amber: 'text-amber-500', violet: 'text-violet-500', neutral: 'text-neutral-500',
+  sky: 'text-sky-500', pink: 'text-pink-500', teal: 'text-teal-500',
+}
+
+const RESIZE_HOVER: Record<string, string> = {
+  blue: 'hover:bg-blue-500', green: 'hover:bg-green-500', red: 'hover:bg-red-500', orange: 'hover:bg-orange-500',
+  cyan: 'hover:bg-cyan-500', yellow: 'hover:bg-yellow-500', purple: 'hover:bg-purple-500', indigo: 'hover:bg-indigo-500',
+  emerald: 'hover:bg-emerald-500', amber: 'hover:bg-amber-500', violet: 'hover:bg-violet-500', neutral: 'hover:bg-neutral-500',
+  sky: 'hover:bg-sky-500', pink: 'hover:bg-pink-500', teal: 'hover:bg-teal-500',
+}
+
+const RESIZE_ACTIVE: Record<string, string> = {
+  blue: 'bg-blue-500', green: 'bg-green-500', red: 'bg-red-500', orange: 'bg-orange-500',
+  cyan: 'bg-cyan-500', yellow: 'bg-yellow-500', purple: 'bg-purple-500', indigo: 'bg-indigo-500',
+  emerald: 'bg-emerald-500', amber: 'bg-amber-500', violet: 'bg-violet-500', neutral: 'bg-neutral-500',
+  sky: 'bg-sky-500', pink: 'bg-pink-500', teal: 'bg-teal-500',
+}
+
+const RESIZE_IDLE_HOVER: Record<string, string> = {
+  blue: 'hover:bg-blue-500/50', green: 'hover:bg-green-500/50', red: 'hover:bg-red-500/50', orange: 'hover:bg-orange-500/50',
+  cyan: 'hover:bg-cyan-500/50', yellow: 'hover:bg-yellow-500/50', purple: 'hover:bg-purple-500/50', indigo: 'hover:bg-indigo-500/50',
+  emerald: 'hover:bg-emerald-500/50', amber: 'hover:bg-amber-500/50', violet: 'hover:bg-violet-500/50', neutral: 'hover:bg-neutral-500/50',
+  sky: 'hover:bg-sky-500/50', pink: 'hover:bg-pink-500/50', teal: 'hover:bg-teal-500/50',
+}
+
+const SELECTION: Record<string, string> = {
+  blue: 'bg-blue-500/20 text-white ring-1 ring-blue-500/30', green: 'bg-green-500/20 text-white ring-1 ring-green-500/30',
+  red: 'bg-red-500/20 text-white ring-1 ring-red-500/30', orange: 'bg-orange-500/20 text-white ring-1 ring-orange-500/30',
+  cyan: 'bg-cyan-500/20 text-white ring-1 ring-cyan-500/30', yellow: 'bg-yellow-500/20 text-white ring-1 ring-yellow-500/30',
+  purple: 'bg-purple-500/20 text-white ring-1 ring-purple-500/30', indigo: 'bg-indigo-500/20 text-white ring-1 ring-indigo-500/30',
+  emerald: 'bg-emerald-500/20 text-white ring-1 ring-emerald-500/30', amber: 'bg-amber-500/20 text-white ring-1 ring-amber-500/30',
+  violet: 'bg-violet-500/20 text-white ring-1 ring-violet-500/30', neutral: 'bg-neutral-500/20 text-white ring-1 ring-neutral-500/30',
+  sky: 'bg-sky-500/20 text-white ring-1 ring-sky-500/30', pink: 'bg-pink-500/20 text-white ring-1 ring-pink-500/30',
+  teal: 'bg-teal-500/20 text-white ring-1 ring-teal-500/30',
+}
+
+const FOLDER_ACCENT: Record<string, string> = {
+  blue: 'text-blue-500', green: 'text-green-500', red: 'text-red-500', orange: 'text-orange-500',
+  cyan: 'text-cyan-500', yellow: 'text-yellow-500', purple: 'text-purple-500', indigo: 'text-indigo-500',
+  emerald: 'text-emerald-500', amber: 'text-amber-500', violet: 'text-violet-500', neutral: 'text-neutral-500',
+  sky: 'text-sky-500', pink: 'text-pink-500', teal: 'text-teal-500',
+}
+
+const PANEL_BG = ''
+
+// ---------------------------------------------------------------------------
+// Tree utilities
+// ---------------------------------------------------------------------------
+
+function findCommonPrefixLength(paths: string[][]): number {
+  if (paths.length === 0) return 0
+  const first = paths[0]
+  let len = 0
+  outer: for (let i = 0; i < first.length; i++) {
+    for (const p of paths) {
+      if (p[i] !== first[i]) break outer
+    }
+    len = i + 1
+  }
+  return len
+}
+
+function sortTreeNodes(nodes: ExplorerNode[]): ExplorerNode[] {
+  return nodes
+    .map((n) => ({ ...n, children: sortTreeNodes(n.children) }))
+    .sort((a, b) => {
+      const aFolder = a.children.length > 0 && !a.project
+      const bFolder = b.children.length > 0 && !b.project
+      if (aFolder && !bFolder) return -1
+      if (!aFolder && bFolder) return 1
+      return a.name.localeCompare(b.name)
+    })
+}
+
+function insertIntoTree<P extends { id: string; path: string }>(
+  root: ExplorerNode[],
+  project: P,
+  commonPrefixLength: number,
+): void {
+  const parts = project.path.split('/').filter(Boolean)
+  const relevant = parts.slice(commonPrefixLength)
+  const prefixPath = parts.slice(0, commonPrefixLength).join('/')
+  let currentPath = prefixPath ? '/' + prefixPath : ''
+  let level = root
+
+  for (let i = 0; i < relevant.length; i++) {
+    const part = relevant[i]
+    currentPath = currentPath + '/' + part
+    const isLast = i === relevant.length - 1
+
+    let existing = level.find((n) => n.name === part)
+    if (!existing) {
+      existing = {
+        name: part,
+        path: currentPath,
+        children: [],
+        project: isLast ? (project as unknown as ExplorerNode['project']) : undefined,
+      }
+      level.push(existing)
+    }
+    if (isLast) {
+      existing.project = project as unknown as ExplorerNode['project']
+    }
+    level = existing.children
+  }
+}
+
+export function buildExplorerTree<P extends { id: string; path: string }>(
+  projects: P[],
+  isSpecial?: (p: P) => boolean,
+): ExplorerNode[] {
+  const regular = isSpecial ? projects.filter((p) => !isSpecial(p)) : projects
+  const paths = regular.map((p) => p.path.split('/').filter(Boolean))
+  if (paths.length === 0) return []
+
+  const commonLen = findCommonPrefixLength(paths)
+  const root: ExplorerNode[] = []
+  for (const project of regular) {
+    insertIntoTree(root, project, commonLen)
+  }
+  return sortTreeNodes(root)
+}
+
+export function filterExplorerTree(nodes: ExplorerNode[], query: string): ExplorerNode[] {
+  const lq = query.toLowerCase()
+  return nodes.reduce<ExplorerNode[]>((acc, node) => {
+    if (node.name.toLowerCase().includes(lq) || node.path.toLowerCase().includes(lq)) {
+      acc.push(node)
+    } else {
+      const filtered = filterExplorerTree(node.children, query)
+      if (filtered.length > 0) acc.push({ ...node, children: filtered })
+    }
+    return acc
+  }, [])
+}
+
+export function collectExplorerExpandablePaths(nodes: ExplorerNode[]): string[] {
+  const paths: string[] = []
+  for (const node of nodes) {
+    if (node.children.length > 0) {
+      paths.push(node.path)
+      paths.push(...collectExplorerExpandablePaths(node.children))
+    }
+  }
+  return paths
+}
+
+export function findPathToNode(nodes: ExplorerNode[], projectId: string): string[] | null {
+  for (const node of nodes) {
+    if (node.project?.id === projectId) return []
+    if (node.children.length === 0) continue
+    const child = findPathToNode(node.children, projectId)
+    if (child !== null) return [node.path, ...child]
+  }
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Internal: highlight match
+// ---------------------------------------------------------------------------
+
+function highlightMatch(text: string, query: string): ReactNode {
+  if (!query) return text
+  const idx = text.toLowerCase().indexOf(query.toLowerCase())
+  if (idx === -1) return text
+  return (
+    <>
+      {text.slice(0, idx)}
+      <span className="bg-yellow-500/30 text-yellow-200">{text.slice(idx, idx + query.length)}</span>
+      {text.slice(idx + query.length)}
+    </>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Internal: ExplorerTreeNodeRow
+// ---------------------------------------------------------------------------
+
+interface TreeNodeProps {
+  node: ExplorerNode
+  depth: number
+  selectedProjectId: string | null
+  collapsedPaths: string[]
+  onSelectProject: (id: string) => void
+  onToggle: (path: string) => void
+  onMiddleClick?: (project: ExplorerNode['project']) => void
+  onContextMenu?: (info: ExplorerContextMenuInfo) => void
+  renderProjectActions?: (project: ExplorerNode['project']) => ReactNode
+  isProjectHighlighted?: (project: ExplorerNode['project']) => boolean
+  searchQuery?: string
+  accentColor: string
+}
+
+const ExplorerTreeNodeRow = memo(function ExplorerTreeNodeRow({
+  node, depth, selectedProjectId, collapsedPaths,
+  onSelectProject, onToggle, onMiddleClick, onContextMenu,
+  renderProjectActions, isProjectHighlighted, searchQuery, accentColor,
+}: TreeNodeProps) {
+  const hasChildren = node.children.length > 0
+  const isProject = !!node.project
+  const isCollapsed = collapsedPaths.includes(node.path)
+  const isSelected = isProject && node.project?.id === selectedProjectId
+
+  const handleClick = useCallback(() => {
+    if (isProject && node.project) onSelectProject(node.project.id)
+    else if (hasChildren) onToggle(node.path)
+  }, [isProject, hasChildren, node, onSelectProject, onToggle])
+
+  const handleChevronClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    onToggle(node.path)
+  }, [node.path, onToggle])
+
+  const handleAuxClick = useCallback((e: React.MouseEvent) => {
+    if (e.button !== 1 || !node.project || !onMiddleClick) return
+    e.preventDefault()
+    onMiddleClick(node.project)
+  }, [node.project, onMiddleClick])
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    if (!onContextMenu) return
+    e.preventDefault()
+    onContextMenu({
+      x: e.clientX, y: e.clientY,
+      project: node.project ?? null,
+      nodeName: node.name, nodePath: node.path,
+    })
+  }, [node, onContextMenu])
+
+  const displayName = searchQuery ? highlightMatch(node.name, searchQuery) : node.name
+  const selectionClass = SELECTION[accentColor] ?? SELECTION.blue
+  const CurrentFolderIcon = isCollapsed ? FolderIcon : FolderOpenIcon
+  const highlighted = isProject && (!isProjectHighlighted || isProjectHighlighted(node.project))
+  const folderColor = highlighted ? (FOLDER_ACCENT[accentColor] ?? FOLDER_ACCENT.blue) : 'text-neutral-500'
+
+  return (
+    <>
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={handleClick}
+        onAuxClick={handleAuxClick}
+        onKeyDown={(e) => e.key === 'Enter' && handleClick()}
+        onContextMenu={handleContextMenu}
+        className={`w-full relative flex items-center gap-1 py-1 rounded-lg text-left text-sm transition-colors cursor-pointer select-none ${
+          isSelected ? selectionClass : 'text-neutral-400 hover:text-white hover:bg-neutral-960/50'
+        }`}
+        style={{ paddingLeft: `${depth * 12 + 8}px`, paddingRight: '8px' }}
+        data-testid={isProject && node.project ? `explorer-item-${node.project.id}` : undefined}
+      >
+        {hasChildren ? (
+          <button
+            type="button"
+            className="w-[18px] h-[18px] flex items-center justify-center flex-shrink-0 rounded text-neutral-500 hover:text-neutral-300 transition-colors cursor-pointer"
+            onClick={handleChevronClick}
+          >
+            {isCollapsed ? <ChevronRightIcon className="w-4 h-4" /> : <ChevronDownIcon className="w-4 h-4" />}
+          </button>
+        ) : (
+          <span className="w-[18px] flex-shrink-0" />
+        )}
+        <CurrentFolderIcon className={`w-4 h-4 flex-shrink-0 ${folderColor}`} />
+        <span className="truncate flex-1">{displayName}</span>
+        {isProject && Array.isArray((node.project as Record<string, unknown>)?.worktrees) &&
+          ((node.project as Record<string, unknown>).worktrees as unknown[]).length > 0 ? (
+          <span className="text-xs text-violet-400/80 bg-violet-400/10 px-1 rounded ml-1 flex-shrink-0">
+            worktree
+          </span>
+        ) : null}
+        {isProject && node.project && renderProjectActions?.(node.project)}
+      </div>
+      {hasChildren && !isCollapsed && (
+        <div>
+          {node.children.map((child) => (
+            <ExplorerTreeNodeRow
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              selectedProjectId={selectedProjectId}
+              collapsedPaths={collapsedPaths}
+              onSelectProject={onSelectProject}
+              onToggle={onToggle}
+              onMiddleClick={onMiddleClick}
+              onContextMenu={onContextMenu}
+              renderProjectActions={renderProjectActions}
+              isProjectHighlighted={isProjectHighlighted}
+              searchQuery={searchQuery}
+              accentColor={accentColor}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  )
+})
+
+// ---------------------------------------------------------------------------
+// Internal: TopItemsSection
+// ---------------------------------------------------------------------------
+
+function TopItemRow({ item }: { item: ExplorerTopItem }) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={item.onClick}
+      onKeyDown={(e) => e.key === 'Enter' && item.onClick()}
+      className={`flex items-center gap-1 py-1 rounded-lg text-sm cursor-pointer select-none transition-colors ${
+        item.selected ? item.selectedClass : 'text-neutral-300 hover:text-white hover:bg-neutral-960/50'
+      }`}
+      style={{ paddingLeft: '8px', paddingRight: '8px' }}
+    >
+      {item.icon}
+      <span className="truncate flex-1 ml-1">{item.label}</span>
+      {item.actions}
+    </div>
+  )
+}
+
+function TopItemSpacer() {
+  return <div className="py-1" style={{ paddingLeft: '8px', paddingRight: '8px' }}>&nbsp;</div>
+}
+
+function TopItemsSection({ items }: { items: ExplorerTopItem[] }) {
+  const row1 = items[0]
+  const row2 = items[1]
+  return (
+    <div className="flex-shrink-0 px-1">
+      {row1 ? <TopItemRow item={row1} /> : <TopItemSpacer />}
+      {row2 ? <TopItemRow item={row2} /> : <TopItemSpacer />}
+      <div className="mx-2 my-1 border-t border-neutral-800" />
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Internal: CollapsedExplorer
+// ---------------------------------------------------------------------------
+
+function CollapsedExplorer({ onToggle, accentColor }: { onToggle: () => void; accentColor: string }) {
+  return (
+    <aside
+      aria-label="Project explorer"
+      className={`flex flex-col items-center py-3 px-1.5 ${PANEL_BG} border-r border-neutral-960 h-full w-[40px] flex-shrink-0`}
+    >
+      <Tooltip
+        content={{ title: 'Projects', description: 'Expand sidebar' }}
+        position="right"
+        align="center"
+      >
+        <button
+          onClick={onToggle}
+          className={`w-full py-2 flex flex-col items-center justify-center gap-0.5 transition-colors cursor-pointer ${COLLAPSED_BUTTON[accentColor] ?? COLLAPSED_BUTTON.blue}`}
+        >
+          <FolderIcon className="w-4 h-4" />
+        </button>
+      </Tooltip>
+      <div className="flex-1 flex items-center justify-center">
+        <span
+          className="text-sm font-semibold text-neutral-500 uppercase tracking-widest"
+          style={{ writingMode: 'vertical-rl', textOrientation: 'mixed', transform: 'rotate(180deg)' }}
+        >
+          Explorer
+        </span>
+      </div>
+    </aside>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Internal: ResizeHandle
+// ---------------------------------------------------------------------------
+
+function ResizeHandle({ width, onWidthChange, accentColor }: {
+  width: number; onWidthChange: (w: number) => void; accentColor: string
+}) {
+  const [isResizing, setIsResizing] = useState(false)
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsResizing(true)
+    const startX = e.clientX
+    const startWidth = width
+
+    const onMove = (ev: MouseEvent) => onWidthChange(startWidth + (ev.clientX - startX))
+    const onUp = () => {
+      setIsResizing(false)
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+    }
+    document.addEventListener('mousemove', onMove, { passive: true })
+    document.addEventListener('mouseup', onUp, { passive: true })
+  }, [width, onWidthChange])
+
+  const hover = RESIZE_HOVER[accentColor] ?? RESIZE_HOVER.blue
+  const active = RESIZE_ACTIVE[accentColor] ?? RESIZE_ACTIVE.blue
+  const idleHover = RESIZE_IDLE_HOVER[accentColor] ?? RESIZE_IDLE_HOVER.blue
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      className={`absolute right-0 top-0 bottom-0 w-1 cursor-col-resize ${hover} transition-colors z-10 ${
+        isResizing ? active : `bg-transparent ${idleHover}`
+      }`}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Internal: SearchInput
+// ---------------------------------------------------------------------------
+
+function SearchInput({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  return (
+    <div className="flex-shrink-0 px-3 py-2">
+      <div className="relative">
+        <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
+        <Input
+          placeholder="Search projects..."
+          value={value}
+          onChange={onChange}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          data-form-type="other"
+          size="sm"
+          className="pl-8 pr-8"
+          style={{ height: '26px' }}
+        />
+        {value && (
+          <button
+            type="button"
+            onClick={() => onChange('')}
+            className="absolute right-2 top-1/2 -translate-y-1/2 w-[18px] h-[18px] flex items-center justify-center rounded-md text-neutral-400 hover:text-neutral-300 hover:bg-neutral-500/20 transition-colors"
+          >
+            <XIcon className="w-3 h-3" />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// ProjectExplorer
+// ---------------------------------------------------------------------------
+
+export function ProjectExplorer({
+  tree, selectedProjectId, onSelectProject,
+  topItems,
+  searchQuery, onSearchChange,
+  collapsedPaths, onTogglePath, expandablePaths, onExpandAll, onCollapseAll,
+  width, onWidthChange, collapsed, onToggleCollapsed,
+  onAddProject, isAddingProject, onScanProjects,
+  onMiddleClick, renderProjectActions, renderContextMenu, isProjectHighlighted,
+  accentColor: accentColorProp,
+  emptyMessage = 'No projects yet',
+  noMatchMessage = 'No matching projects',
+}: ProjectExplorerProps) {
+  const ctxAccent = useAccentColor()
+  const accentColor = accentColorProp ?? ctxAccent ?? 'blue'
+
+  const [contextMenu, setContextMenu] = useState<ExplorerContextMenuInfo | null>(null)
+
+  const handleContextMenu = useCallback((info: ExplorerContextMenuInfo) => {
+    setContextMenu(info)
+  }, [])
+
+  const handleContextMenuClose = useCallback(() => {
+    setContextMenu(null)
+  }, [])
+
+  // Close context menu on any click
+  React.useEffect(() => {
+    if (!contextMenu) return
+    const close = () => setContextMenu(null)
+    document.addEventListener('click', close)
+    return () => document.removeEventListener('click', close)
+  }, [contextMenu])
+
+  const filteredTree = React.useMemo(() => {
+    if (!searchQuery.trim()) return tree
+    return filterExplorerTree(tree, searchQuery)
+  }, [tree, searchQuery])
+
+  const expandableSet = React.useMemo(() => new Set(expandablePaths), [expandablePaths])
+  const collapsedCount = collapsedPaths.filter((p) => expandableSet.has(p)).length
+  const allCollapsed = collapsedCount === expandablePaths.length && expandablePaths.length > 0
+
+  if (collapsed) {
+    return <CollapsedExplorer onToggle={onToggleCollapsed} accentColor={accentColor} />
+  }
+
+  return (
+    <aside
+      aria-label="Project explorer"
+      className={`${PANEL_BG} flex flex-col relative overflow-hidden flex-shrink-0`}
+      style={{ width }}
+    >
+      <ResizeHandle width={width} onWidthChange={onWidthChange} accentColor={accentColor} />
+
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 h-[47px] border-b border-neutral-960">
+        <span className="text-sm font-semibold text-neutral-500 uppercase tracking-wider">Explorer</span>
+        <div className="flex items-center gap-1">
+          <IconButton
+            icon={isAddingProject ? 'loader-2' : 'plus'}
+            onClick={onAddProject}
+            size="sm"
+            accentColor="cyan"
+            disabled={isAddingProject}
+            tooltip={{ title: 'Add project', description: 'Open a folder to add as a project' }}
+          />
+          {onScanProjects && (
+            <IconButton
+              icon="folder-search"
+              onClick={onScanProjects}
+              size="sm"
+              accentColor="neutral"
+              tooltip={{ title: 'Scan for projects', description: 'Discover AI-configured projects on your machine' }}
+            />
+          )}
+          {expandablePaths.length > 0 && (
+            <IconButton
+              icon={allCollapsed ? 'chevrons-up-down' : 'chevrons-down-up'}
+              onClick={allCollapsed ? onExpandAll : onCollapseAll}
+              size="sm"
+              accentColor="neutral"
+              tooltip={{
+                title: allCollapsed ? 'Expand all' : 'Collapse all',
+                description: allCollapsed ? 'Expand all folders' : 'Collapse all folders',
+              }}
+            />
+          )}
+          <IconButton
+            icon="panel-left-close"
+            onClick={onToggleCollapsed}
+            size="sm"
+            accentColor="neutral"
+            tooltip={{ title: 'Collapse sidebar', description: 'Minimize to icon strip' }}
+          />
+        </div>
+      </div>
+
+      {topItems && topItems.length > 0 && <TopItemsSection items={topItems} />}
+
+      <SearchInput value={searchQuery} onChange={onSearchChange} />
+
+      {/* Tree */}
+      <nav className="flex-1 overflow-y-auto min-h-0 p-1">
+        {filteredTree.length === 0 && (
+          <div className="px-3 py-4 text-sm text-neutral-500 text-center">
+            {searchQuery ? noMatchMessage : emptyMessage}
+          </div>
+        )}
+        {filteredTree.map((node) => (
+          <ExplorerTreeNodeRow
+            key={node.path}
+            node={node}
+            depth={0}
+            selectedProjectId={selectedProjectId}
+            collapsedPaths={collapsedPaths}
+            onSelectProject={onSelectProject}
+            onToggle={onTogglePath}
+            onMiddleClick={onMiddleClick}
+            onContextMenu={renderContextMenu ? handleContextMenu : undefined}
+            renderProjectActions={renderProjectActions}
+            isProjectHighlighted={isProjectHighlighted}
+            searchQuery={searchQuery || undefined}
+            accentColor={accentColor}
+          />
+        ))}
+      </nav>
+
+      {/* Context menu */}
+      {contextMenu && renderContextMenu?.(contextMenu, handleContextMenuClose)}
+    </aside>
+  )
+}