feat: Refactor Brush Tool Settings to Sub-ToolRail panel (#537)

ui/components/canvas/SubToolRail.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { AnimatePresence, motion } from 'motion/react'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ColorPicker } from '@/components/ui/color-picker'
+import { Input } from '@/components/ui/input'
+import { Slider } from '@/components/ui/slider'
+import { useEditorUiStore } from '@/lib/stores/editorUiStore'
+import { usePreferencesStore } from '@/lib/stores/preferencesStore'
+
+export function SubToolRail() {
+  const mode = useEditorUiStore((state) => state.mode)
+  const isBrushTool = mode === 'brush' || mode === 'eraser' || mode === 'repairBrush'
+
+  const brushConfig = usePreferencesStore((state) => state.brushConfig)
+  const setBrushConfig = usePreferencesStore((state) => state.setBrushConfig)
+  const { t } = useTranslation()
+
+  // Local state for live updates
+  const [localSize, setLocalSize] = React.useState(brushConfig.size)
+
+  // Sync when store changes
+  React.useEffect(() => {
+    setLocalSize(brushConfig.size)
+  }, [brushConfig.size])
+
+  return (
+    <AnimatePresence>
+      {isBrushTool && (
+        <motion.div
+        initial={{ x: -20, opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        exit={{ x: -20, opacity: 0 }}
+        transition={{ duration: 0.2, ease: 'easeOut' }}
+        className='absolute top-14 left-11 z-50 ml-1 flex w-[260px] flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl'
+        data-testid='sub-tool-rail'
+      >
+        <div className='space-y-4 p-4'>
+          {/* Brush Size */}
+          <div className='space-y-2'>
+            <p id='brush-size-label' className='text-[11px] font-medium text-muted-foreground'>
+              {t('toolbar.brushSize')}
+            </p>
+            <div className='flex items-center gap-2'>
+              <Slider
+                min={8}
+                max={128}
+                step={4}
+                value={[localSize]}
+                onValueChange={(vals) => setLocalSize(vals[0] ?? localSize)}
+                onValueCommit={(vals) => setBrushConfig({ size: vals[0] ?? localSize })}
+                className='flex-1'
+                aria-labelledby='brush-size-label'
+              />
+              <div className='flex shrink-0 items-center gap-1.5'>
+                <Input
+                  value={localSize}
+                  readOnly
+                  aria-label='Brush size value'
+                  className='h-8 w-11 border-border/50 bg-muted/20 px-1 text-center text-[11px]'
+                />
+                <span
+                  className='w-4 text-[10px] font-medium text-muted-foreground'
+                  aria-hidden='true'
+                >
+                  px
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Color Picker Section */}
+          <AnimatePresence initial={false}>
+            {mode === 'brush' && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2, ease: 'easeInOut' }}
+                className='overflow-hidden border-t border-border/30 pt-2'
+              >
+                <div className='flex items-center justify-between'>
+                  <p
+                    id='brush-color-label'
+                    className='text-[11px] font-medium text-muted-foreground'
+                  >
+                    {t('toolbar.brushColor')}
+                  </p>
+                  <div className='flex items-center gap-2'>
+                    <span
+                      className='font-mono text-[10px] text-muted-foreground uppercase'
+                      aria-hidden='true'
+                    >
+                      {brushConfig.color}
+                    </span>
+                    <ColorPicker
+                      value={brushConfig.color}
+                      onChange={(color) => setBrushConfig({ color })}
+                      className='size-5 rounded-md'
+                      aria-labelledby='brush-color-label'
+                    />
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

ui/components/canvas/ToolRail.tsx

@@ -5,9 +5,6 @@ import type { ComponentType } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Button } from '@/components/ui/button'
-import { ColorPicker } from '@/components/ui/color-picker'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Slider } from '@/components/ui/slider'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useEditorUiStore } from '@/lib/stores/editorUiStore'
 import { usePreferencesStore } from '@/lib/stores/preferencesStore'
@@ -65,19 +62,6 @@ export function ToolRail() {
         {MODES.map((item) => {
           const label = t(item.labelKey)
 
-          // Brush tool gets a popover
-          if (item.value === 'brush') {
-            return (
-              <BrushToolWithPopover
-                key={item.value}
-                item={item}
-                label={label}
-                isActive={item.value === mode}
-                onSelect={() => setMode(item.value)}
-              />
-            )
-          }
-
           return (
             <Tooltip key={item.value}>
               <TooltipTrigger asChild>
@@ -105,98 +89,3 @@ export function ToolRail() {
     </div>
   )
 }
-
-function BrushToolWithPopover({
-  item,
-  label,
-  isActive,
-  onSelect,
-}: {
-  item: ModeDefinition
-  label: string
-  isActive: boolean
-  onSelect: () => void
-}) {
-  const {
-    brushConfig: { size: brushSize, color: brushColor },
-    shortcuts,
-    setBrushConfig,
-  } = usePreferencesStore()
-  const { t } = useTranslation()
-
-  return (
-    <Popover>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <Button
-              variant='ghost'
-              size='icon-sm'
-              data-testid={item.testId}
-              data-active={isActive}
-              onClick={onSelect}
-              className='border border-transparent text-muted-foreground data-[active=true]:border-primary data-[active=true]:bg-accent data-[active=true]:text-primary'
-              aria-label={label}
-            >
-              <item.icon className='h-4 w-4' />
-            </Button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent side='right' sideOffset={8}>
-          {shortcuts[item.value as keyof typeof shortcuts]
-            ? `${label} (${shortcuts[item.value as keyof typeof shortcuts].toUpperCase()})`
-            : label}
-        </TooltipContent>
-      </Tooltip>
-      <PopoverContent side='right' align='start' className='w-56'>
-        <div className='space-y-4 text-sm'>
-          <div className='space-y-2'>
-            <p className='text-xs font-medium text-muted-foreground uppercase'>
-              {t('toolbar.brushSize')}
-            </p>
-            <div className='flex items-center gap-2'>
-              <Slider
-                data-testid='brush-size-slider'
-                className='flex-1 [&_[data-slot=slider-range]]:bg-primary [&_[data-slot=slider-thumb]]:size-3 [&_[data-slot=slider-thumb]]:border-primary [&_[data-slot=slider-thumb]]:bg-primary [&_[data-slot=slider-track]]:bg-primary/20'
-                min={8}
-                max={128}
-                step={4}
-                value={[brushSize]}
-                onValueChange={(vals) => setBrushConfig({ size: vals[0] ?? brushSize })}
-              />
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className='w-10 cursor-help text-right text-muted-foreground tabular-nums'>
-                    {brushSize}px
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent side='bottom'>
-                  {t('toolbar.brushSize')} ({shortcuts.decreaseBrushSize}{' '}
-                  {shortcuts.increaseBrushSize})
-                </TooltipContent>
-              </Tooltip>
-            </div>
-          </div>
-          <div className='space-y-2'>
-            <p className='text-xs font-medium text-muted-foreground uppercase'>
-              {t('toolbar.brushColor')}
-            </p>
-            <div className='flex items-center gap-2'>
-              <ColorPicker
-                value={brushColor}
-                onChange={(color) => setBrushConfig({ color })}
-                className='h-8 w-8'
-                triggerTestId='brush-color-trigger'
-                pickerTestId='brush-color-picker'
-                swatchTestId='brush-color-swatch'
-                inputTestId='brush-color-input'
-                pickButtonTestId='brush-color-pick'
-              />
-              <span className='text-xs text-muted-foreground'>{brushColor}</span>
-            </div>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}

ui/components/canvas/Workspace.tsx

@@ -12,6 +12,7 @@ import {
   setCanvasDocumentSize,
   setCanvasViewport,
 } from '@/components/canvas/canvasViewport'
+import { SubToolRail } from '@/components/canvas/SubToolRail'
 import { TextBlockLayer } from '@/components/canvas/TextBlockLayer'
 import { ToolRail } from '@/components/canvas/ToolRail'
 import {
@@ -286,8 +287,9 @@ export function Workspace() {
   )
 
   return (
-    <div className='flex min-h-0 min-w-0 flex-1 bg-muted'>
+    <div className='relative flex min-h-0 min-w-0 flex-1 bg-muted'>
       <ToolRail />
+      <SubToolRail />
       <div className='relative flex min-h-0 min-w-0 flex-1 flex-col'>
         <CanvasToolbar />
         <ScrollAreaPrimitive.Root className='flex min-h-0 min-w-0 flex-1'>

ui/components/ui/color-picker.tsx

@@ -17,6 +17,8 @@ type ColorPickerProps = {
   swatchTestId?: string
   inputTestId?: string
   pickButtonTestId?: string
+  'aria-label'?: string
+  'aria-labelledby'?: string
 }
 
 type EyeDropperWindow = Window & {
@@ -40,6 +42,8 @@ export function ColorPicker({
   swatchTestId,
   inputTestId,
   pickButtonTestId,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
 }: ColorPickerProps) {
   const [localColor, setLocalColor] = useState(value)
   const dragging = useRef(false)
@@ -82,6 +86,8 @@ export function ColorPicker({
         <button
           data-testid={triggerTestId}
           disabled={disabled}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
           className={cn(
             'flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-input transition hover:border-border disabled:cursor-not-allowed disabled:opacity-50',
             className,

ui/tests/components/SubToolRail.test.tsx

@@ -0,0 +1,81 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { SubToolRail } from '@/components/canvas/SubToolRail'
+import { useEditorUiStore } from '@/lib/stores/editorUiStore'
+import { usePreferencesStore } from '@/lib/stores/preferencesStore'
+
+import { renderWithQuery } from '../helpers'
+
+// Mock framer-motion to avoid animation issues in tests
+vi.mock('motion/react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('motion/react')>()
+  return {
+    ...actual,
+    motion: {
+      ...actual.motion,
+      div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+    },
+    AnimatePresence: ({ children }: any) => <>{children}</>,
+  }
+})
+
+describe('SubToolRail', () => {
+  beforeEach(() => {
+    useEditorUiStore.setState({ mode: 'select' })
+    usePreferencesStore.setState({
+      brushConfig: {
+        size: 36,
+        color: '#ffffff',
+      },
+    })
+  })
+
+  it('renders nothing when select tool is active', () => {
+    const { container } = renderWithQuery(<SubToolRail />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders when brush tool is active', () => {
+    useEditorUiStore.setState({ mode: 'brush' })
+    renderWithQuery(<SubToolRail />)
+    expect(screen.getByTestId('sub-tool-rail')).toBeInTheDocument()
+    expect(screen.getByText('toolbar.brushSize')).toBeInTheDocument()
+  })
+
+  it('renders when eraser tool is active', () => {
+    useEditorUiStore.setState({ mode: 'eraser' })
+    renderWithQuery(<SubToolRail />)
+    expect(screen.getByTestId('sub-tool-rail')).toBeInTheDocument()
+  })
+
+  it('renders when repairBrush tool is active', () => {
+    useEditorUiStore.setState({ mode: 'repairBrush' })
+    renderWithQuery(<SubToolRail />)
+    expect(screen.getByTestId('sub-tool-rail')).toBeInTheDocument()
+  })
+
+  it('shows color picker only for brush tool', () => {
+    // Check Brush tool
+    useEditorUiStore.setState({ mode: 'brush' })
+    const { rerender } = renderWithQuery(<SubToolRail />)
+    expect(screen.getByText('toolbar.brushColor')).toBeInTheDocument()
+
+    // Switch to Eraser
+    useEditorUiStore.setState({ mode: 'eraser' })
+    rerender(<SubToolRail />)
+    expect(screen.queryByText('toolbar.brushColor')).not.toBeInTheDocument()
+
+    // Switch to Repair Brush
+    useEditorUiStore.setState({ mode: 'repairBrush' })
+    rerender(<SubToolRail />)
+    expect(screen.queryByText('toolbar.brushColor')).not.toBeInTheDocument()
+  })
+
+  it('displays the correct brush size', () => {
+    useEditorUiStore.setState({ mode: 'brush' })
+    usePreferencesStore.setState({ brushConfig: { size: 64, color: '#ff0000' } })
+    renderWithQuery(<SubToolRail />)
+    expect(screen.getByDisplayValue('64')).toBeInTheDocument()
+  })
+})