@toolr/ui-design 0.1.6 → 0.1.7

package/components/hooks/use-click-outside.ts

@@ -1,11 +1,13 @@
 import { useEffect, type RefObject } from 'react'
 
 /**
- * Close a menu/dropdown when clicking outside its ref element.
+ * Close a menu/dropdown when clicking outside its ref element(s).
+ * Accepts a single ref, an array of refs, or null.
+ * When given an array, closes only if the click is outside ALL refs.
  * If ref is null, closes on any mousedown event.
  */
 export function useClickOutside(
-  ref: RefObject<HTMLElement | null> | null,
+  ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[] | null,
   isOpen: boolean,
   onClose: () => void
 ): void {
@@ -17,7 +19,12 @@ export function useClickOutside(
         onClose()
         return
       }
-      if (ref.current && !ref.current.contains(event.target as Node)) {
+
+      const refs = Array.isArray(ref) ? ref : [ref]
+      const isOutsideAll = refs.every(
+        (r) => !r.current || !r.current.contains(event.target as Node)
+      )
+      if (isOutsideAll) {
         onClose()
       }
     }

package/components/hooks/use-modal-behavior.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+
+/**
+ * Shared modal behavior: Escape key to close + body overflow lock.
+ */
+export function useModalBehavior(isOpen: boolean, onClose: () => void): void {
+  // Escape key handler
+  useEffect(() => {
+    if (!isOpen) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [isOpen, onClose])
+
+  // Body overflow lock
+  useEffect(() => {
+    if (!isOpen) return
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => { document.body.style.overflow = prev }
+  }, [isOpen])
+}

package/components/hooks/use-navigation-history.ts

@@ -1,6 +1,6 @@
 /** Hook for managing back/forward navigation history with a breadcrumb segment stack. */
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useMemo } from 'react'
 import type { BreadcrumbSegment } from '../ui/breadcrumb.tsx'
 
 interface NavigationState {
@@ -81,6 +81,11 @@ export function useNavigationHistory(
     })
   }, [])
 
+  const history = useMemo(
+    () => [...state.backStack, ...(state.current ? [state.current] : [])],
+    [state.backStack, state.current],
+  )
+
   return {
     current: state.current,
     canGoBack: state.backStack.length > 0,
@@ -89,6 +94,6 @@ export function useNavigationHistory(
     goBack,
     goForward,
     goTo,
-    history: [...state.backStack, ...(state.current ? [state.current] : [])],
+    history,
   }
 }

package/components/hooks/use-resizable-sidebar.ts

@@ -0,0 +1,38 @@
+import { useState, useCallback, useRef } from 'react'
+
+export interface UseResizableSidebarOptions {
+  min: number
+  max: number
+  defaultWidth: number
+  /** 'left' = drag right shrinks (sidebar on right), 'right' = drag right grows (sidebar on left) */
+  direction?: 'left' | 'right'
+}
+
+export function useResizableSidebar({ min, max, defaultWidth, direction = 'right' }: UseResizableSidebarOptions) {
+  const [width, setWidth] = useState(defaultWidth)
+  const widthRef = useRef(defaultWidth)
+
+  const onPointerDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault()
+    const el = e.currentTarget as HTMLElement
+    el.setPointerCapture(e.pointerId)
+    const startX = e.clientX
+    const startW = widthRef.current
+
+    const onMove = (ev: PointerEvent) => {
+      const delta = direction === 'left' ? startX - ev.clientX : ev.clientX - startX
+      const next = Math.max(min, Math.min(max, startW + delta))
+      widthRef.current = next
+      setWidth(next)
+    }
+    const onUp = () => {
+      el.removeEventListener('pointermove', onMove)
+      el.removeEventListener('pointerup', onUp)
+      el.releasePointerCapture(e.pointerId)
+    }
+    el.addEventListener('pointermove', onMove)
+    el.addEventListener('pointerup', onUp)
+  }, [min, max, direction])
+
+  return { width, onPointerDown }
+}

package/components/lib/form-colors.ts

@@ -16,6 +16,46 @@ interface FormColorConfig {
   accent: string
 }
 
+export type AccentColor = FormColor
+
+export const ACCENT_TEXT: Record<AccentColor, string> = {
+  blue: 'text-blue-400',
+  green: 'text-green-400',
+  red: 'text-red-400',
+  orange: 'text-orange-400',
+  cyan: 'text-cyan-400',
+  yellow: 'text-yellow-400',
+  purple: 'text-purple-400',
+  indigo: 'text-indigo-400',
+  emerald: 'text-emerald-400',
+  amber: 'text-amber-400',
+  violet: 'text-violet-400',
+  neutral: 'text-neutral-400',
+  sky: 'text-sky-400',
+  pink: 'text-pink-400',
+  teal: 'text-teal-400',
+}
+
+export const ACCENT_ICON = ACCENT_TEXT
+
+export const ACCENT_NAV: Record<AccentColor, { bg: string; text: string }> = {
+  blue: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
+  green: { bg: 'bg-green-500/10', text: 'text-green-400' },
+  red: { bg: 'bg-red-500/10', text: 'text-red-400' },
+  orange: { bg: 'bg-orange-500/10', text: 'text-orange-400' },
+  cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
+  yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400' },
+  purple: { bg: 'bg-purple-500/10', text: 'text-purple-400' },
+  indigo: { bg: 'bg-indigo-500/10', text: 'text-indigo-400' },
+  emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
+  amber: { bg: 'bg-amber-500/10', text: 'text-amber-400' },
+  violet: { bg: 'bg-violet-500/10', text: 'text-violet-400' },
+  neutral: { bg: 'bg-neutral-500/10', text: 'text-neutral-400' },
+  sky: { bg: 'bg-sky-500/10', text: 'text-sky-400' },
+  pink: { bg: 'bg-pink-500/10', text: 'text-pink-400' },
+  teal: { bg: 'bg-teal-500/10', text: 'text-teal-400' },
+}
+
 export const FORM_COLORS: Record<FormColor, FormColorConfig> = {
   blue: { border: 'border-blue-500/30', hover: 'hover:bg-blue-500/20 hover:border-blue-500/40', focus: 'focus:border-blue-500', selectedBg: 'bg-blue-600/20', accent: 'text-blue-400' },
   green: { border: 'border-green-500/30', hover: 'hover:bg-green-500/20 hover:border-green-500/40', focus: 'focus:border-green-500', selectedBg: 'bg-green-600/20', accent: 'text-green-400' },

package/components/sections/captured-issues/captured-issues-panel.tsx

@@ -23,7 +23,7 @@
  * - Dark theme with Catppuccin-like colors matching configr
  */
 
-import { AlertTriangle, Check, X, Send, ChevronDown, Shield, Loader2 } from 'lucide-react'
+import { AlertTriangle, Check, X, Send, ChevronDown, Loader2 } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
 import { Input } from '../../ui/input.tsx'
 import { ResizableTextarea } from '../../ui/resizable-textarea.tsx'
@@ -119,7 +119,7 @@ export function CapturedIssuesPanel({
               onChange={(e) => setDescription(e.target.value)}
               placeholder="What were you doing when this happened?"
               rows={3}
-              className="w-full px-3 py-1.5 bg-neutral-750 border border-neutral-600 rounded-lg text-neutral-300 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none text-md"
+              className="w-full px-3 py-1.5 bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-300 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none text-md"
             />
             <Input
               type="text"
@@ -174,7 +174,7 @@ export function CapturedIssuesPanel({
       {submittedErrors.length > 0 && (
         <div className="bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden">
           <details className="group">
-            <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-neutral-850 transition-colors">
+            <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-neutral-800 transition-colors">
               <div className="flex items-center gap-2">
                 <Check className="w-4 h-4 text-green-400" />
                 <span className="text-md text-neutral-300">Previously Reported</span>

package/components/sections/captured-issues/use-captured-issues.ts

@@ -14,7 +14,7 @@
  * - Previously reported errors are loaded once on mount
  */
 
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback, useEffect, useMemo } from 'react'
 import type { CapturedError, CapturedIssuesApi, SubmittedError } from './types.ts'
 
 export interface UseCapturedIssuesOptions {
@@ -50,8 +50,14 @@ export function useCapturedIssues(options: UseCapturedIssuesOptions): UseCapture
   const [submitError, setSubmitError] = useState<string | null>(null)
   const [submittedErrors, setSubmittedErrors] = useState<SubmittedError[]>([])
 
-  const errorCount = errors.filter((e) => e.level === 'error').length
-  const warnCount = errors.filter((e) => e.level === 'warning').length
+  const { errorCount, warnCount } = useMemo(() => {
+    let err = 0, warn = 0
+    for (const e of errors) {
+      if (e.level === 'error') err++
+      else if (e.level === 'warning') warn++
+    }
+    return { errorCount: err, warnCount: warn }
+  }, [errors])
 
   useEffect(() => {
     api.getSubmittedErrors().then(setSubmittedErrors).catch(() => {})

package/components/sections/prompt-editor/file-type-tabbed-prompt-editor.tsx

@@ -19,19 +19,12 @@
  *   />
  */
 
-import { useState, useRef, useCallback } from 'react'
+import { useState, useCallback } from 'react'
+import { useResizableSidebar } from '../../hooks/use-resizable-sidebar.ts'
 import { FileCode, GripVertical, Crosshair } from 'lucide-react'
 import { TabbedPromptEditor } from './tabbed-prompt-editor.tsx'
 import type { ToolTab, PromptPlaceholder, FileTypeOption } from './types.ts'
 
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const MIN_SIDEBAR_WIDTH = 160
-const MAX_SIDEBAR_WIDTH = 320
-const DEFAULT_SIDEBAR_WIDTH = 200
-
 // ---------------------------------------------------------------------------
 // Props
 // ---------------------------------------------------------------------------
@@ -81,8 +74,7 @@ export function FileTypeTabbedPromptEditor({
   className = '',
 }: FileTypeTabbedPromptEditorProps) {
   const [selectedFileType, setSelectedFileType] = useState(fileTypes[0]?.id ?? '')
-  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH)
-  const isDraggingRef = useRef(false)
+  const { width: sidebarWidth, onPointerDown: handleSidebarPointerDown } = useResizableSidebar({ min: 160, max: 320, defaultWidth: 200, direction: 'right' })
 
   // Derive prompts for current file type
   const currentPrompts = prompts[selectedFileType] ?? Object.fromEntries(tools.map((t) => [t.id, '']))
@@ -105,40 +97,12 @@ export function FileTypeTabbedPromptEditor({
     ? (tool: string, content: string) => onSave(selectedFileType, tool, content)
     : undefined
 
-  // Sidebar resize via pointer events
-  const handleSidebarPointerDown = useCallback((e: React.PointerEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    isDraggingRef.current = true
-    const target = e.currentTarget as HTMLElement
-    target.setPointerCapture(e.pointerId)
-
-    const startX = e.clientX
-    const startWidth = sidebarWidth
-
-    const handlePointerMove = (moveEvent: PointerEvent) => {
-      if (!isDraggingRef.current) return
-      const deltaX = moveEvent.clientX - startX
-      const newWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, startWidth + deltaX))
-      setSidebarWidth(newWidth)
-    }
-
-    const handlePointerUp = () => {
-      isDraggingRef.current = false
-      target.removeEventListener('pointermove', handlePointerMove)
-      target.removeEventListener('pointerup', handlePointerUp)
-    }
-
-    target.addEventListener('pointermove', handlePointerMove)
-    target.addEventListener('pointerup', handlePointerUp)
-  }, [sidebarWidth])
-
   return (
     <div className={`flex w-full max-w-full bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${className}`}>
       {/* Left Sidebar — File Type Selector */}
       <div
         className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col"
-        style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
+        style={{ width: sidebarWidth, minWidth: 160, maxWidth: 320 }}
       >
         {/* Header */}
         <div className="h-[52px] px-3 flex items-center border-b border-neutral-700 shrink-0">

package/components/sections/prompt-editor/index.ts

@@ -97,13 +97,6 @@ export type {
   ScenarioOption,
 } from './types.ts'
 
-// Hook
-export {
-  usePromptEditor,
-  type UsePromptEditorOptions,
-  type UsePromptEditorReturn,
-} from './use-prompt-editor.ts'
-
 // Components
 export {
   TabbedPromptEditor,

package/components/sections/prompt-editor/simulator-prompt-editor.tsx

@@ -19,19 +19,12 @@
  *   />
  */
 
-import { useState, useRef, useCallback, useMemo } from 'react'
+import { useState, useCallback, useMemo } from 'react'
+import { useResizableSidebar } from '../../hooks/use-resizable-sidebar.ts'
 import { ChevronDown, ChevronRight, GripVertical, Crosshair } from 'lucide-react'
 import { TabbedPromptEditor } from './tabbed-prompt-editor.tsx'
 import type { ToolTab, PromptPlaceholder, ScenarioOption } from './types.ts'
 
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const MIN_SIDEBAR_WIDTH = 180
-const MAX_SIDEBAR_WIDTH = 360
-const DEFAULT_SIDEBAR_WIDTH = 220
-
 // ---------------------------------------------------------------------------
 // Props
 // ---------------------------------------------------------------------------
@@ -82,8 +75,7 @@ export function SimulatorPromptEditor({
   const [expandedScenarios, setExpandedScenarios] = useState<Set<string>>(
     new Set([defaultScenarioId]),
   )
-  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH)
-  const isDraggingRef = useRef(false)
+  const { width: sidebarWidth, onPointerDown: handleSidebarPointerDown } = useResizableSidebar({ min: 180, max: 360, defaultWidth: 220, direction: 'right' })
 
   // Ensure selected scenario is always expanded
   const effectiveExpanded = useMemo(() => {
@@ -138,40 +130,12 @@ export function SimulatorPromptEditor({
     }
   }
 
-  // Sidebar resize via pointer events
-  const handleSidebarPointerDown = useCallback((e: React.PointerEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    isDraggingRef.current = true
-    const target = e.currentTarget as HTMLElement
-    target.setPointerCapture(e.pointerId)
-
-    const startX = e.clientX
-    const startWidth = sidebarWidth
-
-    const handlePointerMove = (moveEvent: PointerEvent) => {
-      if (!isDraggingRef.current) return
-      const deltaX = moveEvent.clientX - startX
-      const newWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, startWidth + deltaX))
-      setSidebarWidth(newWidth)
-    }
-
-    const handlePointerUp = () => {
-      isDraggingRef.current = false
-      target.removeEventListener('pointermove', handlePointerMove)
-      target.removeEventListener('pointerup', handlePointerUp)
-    }
-
-    target.addEventListener('pointermove', handlePointerMove)
-    target.addEventListener('pointerup', handlePointerUp)
-  }, [sidebarWidth])
-
   return (
     <div className={`flex w-full max-w-full bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${className}`}>
       {/* Left Sidebar — Tree Selector */}
       <div
         className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col"
-        style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
+        style={{ width: sidebarWidth, minWidth: 180, maxWidth: 360 }}
       >
         {/* Header */}
         <div className="h-[52px] px-3 flex items-center border-b border-neutral-700 shrink-0">

package/components/sections/prompt-editor/tabbed-prompt-editor.tsx

@@ -20,6 +20,7 @@
  */
 
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react'
+import { useResizableSidebar } from '../../hooks/use-resizable-sidebar.ts'
 import Editor, { type Monaco } from '@monaco-editor/react'
 import type { editor, languages } from 'monaco-editor'
 import { Variable, Info, Search, X, AlertTriangle } from 'lucide-react'
@@ -37,9 +38,6 @@ import { AiToolIcon } from '../../lib/ai-tools.tsx'
 const THEME_NAME = 'prompt-editor-dark'
 let themeRegistered = false
 
-const MIN_SIDEBAR_WIDTH = 220
-const MAX_SIDEBAR_WIDTH = 400
-const DEFAULT_SIDEBAR_WIDTH = 280
 const DEFAULT_EDITOR_HEIGHT = 400
 
 // ---------------------------------------------------------------------------
@@ -85,12 +83,11 @@ export function TabbedPromptEditor({
   className = '',
 }: TabbedPromptEditorProps) {
   const [activeTab, setActiveTab] = useState(tools[0]?.id ?? '')
-  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH)
+  const { width: sidebarWidth, onPointerDown: handleSidebarPointerDown } = useResizableSidebar({ min: 220, max: 400, defaultWidth: 280, direction: 'left' })
   const [variableSearch, setVariableSearch] = useState('')
   const [localContent, setLocalContent] = useState<Record<string, string>>(prompts)
   const [isDirty, setIsDirty] = useState(false)
 
-  const isDraggingSidebarRef = useRef(false)
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)
   const monacoRef = useRef<Monaco | null>(null)
   const decorationsRef = useRef<string[]>([])
@@ -236,35 +233,6 @@ export function TabbedPromptEditor({
     }
   }, [variables, registerCompletionProvider])
 
-  // --- Sidebar resize ---
-
-  const handleSidebarMouseDown = useCallback((e: React.PointerEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    isDraggingSidebarRef.current = true
-    const target = e.currentTarget as HTMLElement
-    target.setPointerCapture(e.pointerId)
-
-    const startX = e.clientX
-    const startWidth = sidebarWidth
-
-    const handlePointerMove = (moveEvent: PointerEvent) => {
-      if (!isDraggingSidebarRef.current) return
-      const deltaX = startX - moveEvent.clientX
-      const newWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, startWidth + deltaX))
-      setSidebarWidth(newWidth)
-    }
-
-    const handlePointerUp = () => {
-      isDraggingSidebarRef.current = false
-      target.removeEventListener('pointermove', handlePointerMove)
-      target.removeEventListener('pointerup', handlePointerUp)
-    }
-
-    target.addEventListener('pointermove', handlePointerMove)
-    target.addEventListener('pointerup', handlePointerUp)
-  }, [sidebarWidth])
-
   // --- Content change ---
 
   const handleEditorChange = useCallback(
@@ -431,11 +399,11 @@ export function TabbedPromptEditor({
       {hasVariables && (
         <div
           className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col border-l border-neutral-700"
-          style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
+          style={{ width: sidebarWidth, minWidth: 220, maxWidth: 400 }}
         >
           {/* Resize handle on left edge */}
           <div
-            onPointerDown={handleSidebarMouseDown}
+            onPointerDown={handleSidebarPointerDown}
             className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-violet-400/30 transition-colors z-10"
           />
 

package/components/sections/snippets-editor/snippets-editor.tsx

@@ -22,8 +22,9 @@
  * - Dark theme styling matches configr's Catppuccin-inspired palette
  */
 
-import { useCallback, useRef, useState } from 'react'
+import { useResizableSidebar } from '../../hooks/use-resizable-sidebar.ts'
 import { Plus, X, Braces, Trash2, RotateCcw, Save } from 'lucide-react'
+import { ACCENT_TEXT, type AccentColor } from '../../lib/form-colors.ts'
 import { cn } from '../../lib/cn.ts'
 import { Input } from '../../ui/input.tsx'
 import { ResizableTextarea } from '../../ui/resizable-textarea.tsx'
@@ -55,18 +56,6 @@ const ACCENT_DIVIDER_HOVER: Record<string, string> = {
   violet: 'hover:bg-violet-500/30',
 }
 
-const ACCENT_TEXT: Record<string, string> = {
-  blue: 'text-blue-400',
-  purple: 'text-purple-400',
-  orange: 'text-orange-400',
-  green: 'text-green-400',
-  pink: 'text-pink-400',
-  amber: 'text-amber-400',
-  emerald: 'text-emerald-400',
-  teal: 'text-teal-400',
-  sky: 'text-sky-400',
-  violet: 'text-violet-400',
-}
 
 const ACCENT_BORDER: Record<string, string> = {
   blue: 'border-l-blue-400',
@@ -94,9 +83,6 @@ const ACCENT_BUTTON: Record<string, string> = {
   violet: 'bg-violet-600 hover:bg-violet-500',
 }
 
-const MIN_SIDEBAR = 200
-const MAX_SIDEBAR = 350
-const DEFAULT_SIDEBAR = 260
 
 export function SnippetsEditor({
   api,
@@ -125,26 +111,7 @@ export function SnippetsEditor({
     isSaving,
   } = useSnippetsEditor({ api, snippets })
 
-  // Resizable sidebar
-  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR)
-  const dragRef = useRef<{ startX: number; startW: number } | null>(null)
-
-  const onDividerMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    dragRef.current = { startX: e.clientX, startW: sidebarWidth }
-    const onMove = (ev: MouseEvent) => {
-      if (!dragRef.current) return
-      const newW = Math.min(MAX_SIDEBAR, Math.max(MIN_SIDEBAR, dragRef.current.startW + ev.clientX - dragRef.current.startX))
-      setSidebarWidth(newW)
-    }
-    const onUp = () => {
-      dragRef.current = null
-      document.removeEventListener('mousemove', onMove)
-      document.removeEventListener('mouseup', onUp)
-    }
-    document.addEventListener('mousemove', onMove)
-    document.addEventListener('mouseup', onUp)
-  }, [sidebarWidth])
+  const { width: sidebarWidth, onPointerDown: onDividerPointerDown } = useResizableSidebar({ min: 200, max: 350, defaultWidth: 260, direction: 'right' })
 
   const hasSelection = isEditing || isAdding
   const nameHasError = formError !== null && (
@@ -168,7 +135,7 @@ export function SnippetsEditor({
       {/* Body: two columns */}
       <div className="flex flex-1 min-h-[400px]">
         {/* Left: Snippet list */}
-        <div className="flex flex-col border-r border-neutral-700" style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR }}>
+        <div className="flex flex-col border-r border-neutral-700" style={{ width: sidebarWidth, minWidth: 200 }}>
           {/* Search + Add */}
           <div className="flex items-center gap-1.5 p-2 border-b border-neutral-700">
             <div className="flex-1">
@@ -219,7 +186,7 @@ export function SnippetsEditor({
         {/* Resizable divider */}
         <div
           className={`w-1 cursor-col-resize bg-transparent ${ACCENT_DIVIDER_HOVER[accentColor] ?? ACCENT_DIVIDER_HOVER.blue} transition-colors flex-shrink-0`}
-          onMouseDown={onDividerMouseDown}
+          onPointerDown={onDividerPointerDown}
         />
 
         {/* Right: Editor */}
@@ -245,7 +212,7 @@ export function SnippetsEditor({
                 <p className="text-md text-neutral-500 mb-2">Select a snippet to edit</p>
                 <p className="text-sm text-neutral-600 leading-relaxed">
                   Choose a snippet from the list, or click{' '}
-                  <span className={ACCENT_TEXT[accentColor] ?? ACCENT_TEXT.blue}>+</span> to create a new one.
+                  <span className={ACCENT_TEXT[accentColor as AccentColor] ?? ACCENT_TEXT.blue}>+</span> to create a new one.
                   Reference snippets in prompts with{' '}
                   <span className="font-mono text-purple-400">{'{{SNIPPET_NAME}}'}</span> syntax.
                 </p>

package/components/settings/SettingsHeader.tsx

@@ -10,7 +10,6 @@ export interface SettingsHeaderProps {
     title: string
     description: string
   }
-  confirmReset?: boolean
   action?: ReactNode
   variant?: 'default' | 'info' | 'warning' | 'danger'
 }

package/components/settings/SettingsTreeNav.tsx

@@ -162,19 +162,16 @@ export function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor
   useEffect(() => {
     if (selectedPath) {
       const parents = getParentPaths(selectedPath)
-      const newExpanded = new Set(expandedPaths)
-      let changed = false
-
-      for (const p of parents) {
-        if (!newExpanded.has(p)) {
-          newExpanded.add(p)
-          changed = true
+      setExpandedPaths((prev) => {
+        let changed = false
+        for (const p of parents) {
+          if (!prev.has(p)) { changed = true; break }
         }
-      }
-
-      if (changed) {
-        setExpandedPaths(newExpanded)
-      }
+        if (!changed) return prev
+        const next = new Set(prev)
+        for (const p of parents) next.add(p)
+        return next
+      })
     }
   }, [selectedPath])