kanban-lite 1.0.4

package/src/webview/components/KanbanBoard.tsx

@@ -0,0 +1,144 @@
+import { useState, useCallback } from 'react'
+import { KanbanColumn } from './KanbanColumn'
+import { useStore } from '../store'
+import type { Feature, FeatureStatus } from '../../shared/types'
+
+export interface DropTarget {
+  columnId: string
+  index: number
+}
+
+interface KanbanBoardProps {
+  onFeatureClick: (feature: Feature) => void
+  onAddFeature: (status: string) => void
+  onMoveFeature: (featureId: string, newStatus: string, newOrder: number) => void
+  onEditColumn: (columnId: string) => void
+  onRemoveColumn: (columnId: string) => void
+}
+
+export function KanbanBoard({ onFeatureClick, onAddFeature, onMoveFeature, onEditColumn, onRemoveColumn }: KanbanBoardProps) {
+  const columns = useStore((s) => s.columns)
+  const getFilteredFeaturesByStatus = useStore((s) => s.getFilteredFeaturesByStatus)
+  const getFeaturesByStatus = useStore((s) => s.getFeaturesByStatus)
+  const layout = useStore((s) => s.layout)
+  const [draggedFeature, setDraggedFeature] = useState<Feature | null>(null)
+  const [dropTarget, setDropTarget] = useState<DropTarget | null>(null)
+
+  const handleDragStart = useCallback((e: React.DragEvent, feature: Feature) => {
+    setDraggedFeature(feature)
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', feature.id)
+  }, [])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+  }, [])
+
+  const handleDragOverCard = useCallback(
+    (e: React.DragEvent, columnId: string, cardIndex: number) => {
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'move'
+
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+      const midY = rect.top + rect.height / 2
+      const insertIndex = e.clientY < midY ? cardIndex : cardIndex + 1
+
+      setDropTarget((prev) => {
+        if (prev && prev.columnId === columnId && prev.index === insertIndex) return prev
+        return { columnId, index: insertIndex }
+      })
+    },
+    []
+  )
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent, columnId: string) => {
+      e.preventDefault()
+      if (!draggedFeature) return
+
+      const filteredFeatures = getFilteredFeaturesByStatus(columnId as FeatureStatus)
+      let filteredInsertIndex: number
+
+      if (dropTarget && dropTarget.columnId === columnId) {
+        filteredInsertIndex = dropTarget.index
+      } else {
+        // Dropped on empty area of the column — append to end
+        filteredInsertIndex = filteredFeatures.length
+      }
+
+      // Adjust index if dragging within the same column and moving downward
+      if (draggedFeature.status === columnId) {
+        const currentIndex = filteredFeatures.findIndex((f) => f.id === draggedFeature.id)
+        if (currentIndex !== -1 && filteredInsertIndex > currentIndex) {
+          filteredInsertIndex--
+        }
+        // No-op if dropping in the same position
+        if (currentIndex === filteredInsertIndex) {
+          setDraggedFeature(null)
+          setDropTarget(null)
+          return
+        }
+      }
+
+      // Translate filtered index to unfiltered index
+      const allFeatures = getFeaturesByStatus(columnId as FeatureStatus)
+        .filter((f) => f.id !== draggedFeature.id)
+      const filteredWithoutDragged = filteredFeatures.filter((f) => f.id !== draggedFeature.id)
+
+      let unfilteredInsertIndex: number
+
+      if (filteredWithoutDragged.length === 0) {
+        // No visible features — append to end of unfiltered list
+        unfilteredInsertIndex = allFeatures.length
+      } else if (filteredInsertIndex >= filteredWithoutDragged.length) {
+        // Inserting past end of filtered list — place after last visible feature
+        const lastVisible = filteredWithoutDragged[filteredWithoutDragged.length - 1]
+        const lastVisibleUnfilteredIdx = allFeatures.findIndex((f) => f.id === lastVisible.id)
+        unfilteredInsertIndex = lastVisibleUnfilteredIdx + 1
+      } else {
+        // Find the anchor feature at the filtered insert position
+        const anchorFeature = filteredWithoutDragged[filteredInsertIndex]
+        unfilteredInsertIndex = allFeatures.findIndex((f) => f.id === anchorFeature.id)
+      }
+
+      onMoveFeature(draggedFeature.id, columnId, unfilteredInsertIndex)
+      setDraggedFeature(null)
+      setDropTarget(null)
+    },
+    [draggedFeature, dropTarget, getFilteredFeaturesByStatus, getFeaturesByStatus, onMoveFeature]
+  )
+
+  const handleDragEnd = useCallback(() => {
+    setDraggedFeature(null)
+    setDropTarget(null)
+  }, [])
+
+  const isVertical = layout === 'vertical'
+
+  return (
+    <div className={isVertical ? "h-full overflow-y-auto p-4" : "h-full overflow-x-auto p-4"}>
+      <div className={isVertical ? "flex flex-col gap-4" : "flex gap-4 h-full min-w-max"}>
+        {columns.map((column) => (
+          <KanbanColumn
+            key={column.id}
+            column={column}
+            features={getFilteredFeaturesByStatus(column.id as FeatureStatus)}
+            onFeatureClick={onFeatureClick}
+            onAddFeature={onAddFeature}
+            onEditColumn={onEditColumn}
+            onRemoveColumn={onRemoveColumn}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragOverCard={handleDragOverCard}
+            onDrop={handleDrop}
+            onDragEnd={handleDragEnd}
+            draggedFeature={draggedFeature}
+            dropTarget={dropTarget}
+            layout={layout}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/webview/components/KanbanColumn.tsx

@@ -0,0 +1,159 @@
+import { useState, useRef, useEffect } from 'react'
+import { Plus, MoreVertical, Pencil, Trash2 } from 'lucide-react'
+import { FeatureCard } from './FeatureCard'
+import type { Feature, KanbanColumn as KanbanColumnType } from '../../shared/types'
+import type { LayoutMode } from '../store'
+import type { DropTarget } from './KanbanBoard'
+
+interface KanbanColumnProps {
+  column: KanbanColumnType
+  features: Feature[]
+  onFeatureClick: (feature: Feature) => void
+  onAddFeature: (status: string) => void
+  onEditColumn: (columnId: string) => void
+  onRemoveColumn: (columnId: string) => void
+  onDragStart: (e: React.DragEvent, feature: Feature) => void
+  onDragOver: (e: React.DragEvent) => void
+  onDragOverCard: (e: React.DragEvent, columnId: string, cardIndex: number) => void
+  onDrop: (e: React.DragEvent, status: string) => void
+  onDragEnd: () => void
+  draggedFeature: Feature | null
+  dropTarget: DropTarget | null
+  layout: LayoutMode
+}
+
+export function KanbanColumn({
+  column,
+  features,
+  onFeatureClick,
+  onAddFeature,
+  onEditColumn,
+  onRemoveColumn,
+  onDragStart,
+  onDragOver,
+  onDragOverCard,
+  onDrop,
+  onDragEnd,
+  draggedFeature,
+  dropTarget,
+  layout
+}: KanbanColumnProps) {
+  const isVertical = layout === 'vertical'
+  const isDropTarget = dropTarget && dropTarget.columnId === column.id
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!menuOpen) return
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [menuOpen])
+
+  return (
+    <div
+      className={
+        isVertical
+          ? "flex flex-col bg-zinc-100 dark:bg-zinc-800/50 rounded-lg"
+          : "flex-shrink-0 w-72 h-full flex flex-col bg-zinc-100 dark:bg-zinc-800/50 rounded-lg"
+      }
+      onDragOver={onDragOver}
+      onDrop={(e) => onDrop(e, column.id)}
+    >
+      {/* Column Header */}
+      <div className="flex items-center justify-between w-full px-3 py-2 border-b border-zinc-200 dark:border-zinc-700">
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full" style={{ backgroundColor: column.color }} />
+          <h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{column.name}</h3>
+          <span className="text-xs text-zinc-500 dark:text-zinc-400 bg-zinc-200 dark:bg-zinc-700 px-1.5 py-0.5 rounded-full">
+            {features.length}
+          </span>
+        </div>
+        <div className="flex items-center gap-0.5">
+          <button
+            type="button"
+            onClick={() => onAddFeature(column.id)}
+            className="p-1 rounded hover:bg-zinc-200/60 dark:hover:bg-zinc-700/60 transition-colors"
+            title={`Add to ${column.name}`}
+          >
+            <Plus size={16} className="text-zinc-500" />
+          </button>
+          <div className="relative" ref={menuRef}>
+            <button
+              type="button"
+              onClick={() => setMenuOpen(!menuOpen)}
+              className="p-1 rounded hover:bg-zinc-200/60 dark:hover:bg-zinc-700/60 transition-colors"
+              title="Column options"
+            >
+              <MoreVertical size={16} className="text-zinc-500" />
+            </button>
+            {menuOpen && (
+              <div className="absolute right-0 top-full mt-1 z-50 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 rounded-md shadow-lg py-1 min-w-[140px]">
+                <button
+                  type="button"
+                  onClick={() => { setMenuOpen(false); onEditColumn(column.id) }}
+                  className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
+                >
+                  <Pencil size={14} />
+                  Edit List
+                </button>
+                <button
+                  type="button"
+                  onClick={() => { setMenuOpen(false); onRemoveColumn(column.id) }}
+                  className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-red-600 dark:text-red-400 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
+                >
+                  <Trash2 size={14} />
+                  Remove List
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Column Content */}
+      <div
+        className={
+          isVertical
+            ? "flex-1 p-2 flex flex-wrap gap-2"
+            : "flex-1 overflow-y-auto p-2 space-y-2 min-h-[200px]"
+        }
+      >
+        {features.map((feature, index) => (
+          <div key={feature.id}>
+            {/* Drop indicator before this card */}
+            {isDropTarget && dropTarget.index === index && (
+              <div className="h-0.5 bg-blue-500 rounded-full mx-1 mb-1" />
+            )}
+            <div
+              draggable
+              onDragStart={(e) => onDragStart(e, feature)}
+              onDragOver={(e) => onDragOverCard(e, column.id, index)}
+              onDragEnd={onDragEnd}
+              className={`${isVertical ? "w-64" : ""} ${
+                draggedFeature?.id === feature.id ? "opacity-40" : ""
+              }`}
+            >
+              <FeatureCard feature={feature} onClick={() => onFeatureClick(feature)} />
+            </div>
+          </div>
+        ))}
+
+        {/* Drop indicator at end of list */}
+        {isDropTarget && dropTarget.index === features.length && features.length > 0 && (
+          <div className="h-0.5 bg-blue-500 rounded-full mx-1" />
+        )}
+
+        {features.length === 0 && (
+          <div className={isVertical ? "text-sm text-zinc-400 dark:text-zinc-500 py-4" : "text-center py-8 text-sm text-zinc-400 dark:text-zinc-500"}>
+            No features
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/webview/components/MarkdownEditor.tsx

@@ -0,0 +1,291 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { marked } from 'marked'
+import { Heading, Bold, Italic, Quote, Code, Link, List, ListOrdered, ListChecks } from 'lucide-react'
+import { cn } from '../lib/utils'
+
+interface MarkdownEditorProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  className?: string
+  autoFocus?: boolean
+}
+
+type FormatAction = 'heading' | 'bold' | 'italic' | 'quote' | 'code' | 'link' | 'ul' | 'ol' | 'tasklist'
+
+function wrapSelection(
+  textarea: HTMLTextAreaElement,
+  value: string,
+  onChange: (v: string) => void,
+  action: FormatAction
+) {
+  const start = textarea.selectionStart
+  const end = textarea.selectionEnd
+  const selected = value.substring(start, end)
+  let before = value.substring(0, start)
+  const after = value.substring(end)
+  let replacement = selected
+  let cursorOffset = 0
+
+  switch (action) {
+    case 'heading': {
+      // Insert/cycle heading at line start
+      const lineStart = value.lastIndexOf('\n', start - 1) + 1
+      const linePrefix = value.substring(lineStart, start)
+      if (linePrefix.startsWith('### ')) {
+        // Remove heading
+        before = value.substring(0, lineStart) + linePrefix.slice(4)
+        replacement = selected
+        cursorOffset = -4
+      } else if (linePrefix.startsWith('## ')) {
+        before = value.substring(0, lineStart) + '### ' + linePrefix.slice(3)
+        replacement = selected
+        cursorOffset = 1
+      } else if (linePrefix.startsWith('# ')) {
+        before = value.substring(0, lineStart) + '## ' + linePrefix.slice(2)
+        replacement = selected
+        cursorOffset = 1
+      } else {
+        before = value.substring(0, lineStart) + '# ' + linePrefix
+        replacement = selected
+        cursorOffset = 2
+      }
+      break
+    }
+    case 'bold':
+      replacement = selected ? `**${selected}**` : '**bold**'
+      cursorOffset = selected ? 4 : 2
+      break
+    case 'italic':
+      replacement = selected ? `_${selected}_` : '_italic_'
+      cursorOffset = selected ? 2 : 1
+      break
+    case 'quote': {
+      const lines = selected ? selected.split('\n').map(l => `> ${l}`).join('\n') : '> '
+      replacement = lines
+      cursorOffset = selected ? replacement.length - selected.length : 2
+      break
+    }
+    case 'code':
+      if (selected.includes('\n')) {
+        replacement = `\`\`\`\n${selected}\n\`\`\``
+        cursorOffset = 4
+      } else {
+        replacement = selected ? `\`${selected}\`` : '`code`'
+        cursorOffset = selected ? 2 : 1
+      }
+      break
+    case 'link':
+      replacement = selected ? `[${selected}](url)` : '[text](url)'
+      cursorOffset = selected ? selected.length + 3 : 1
+      break
+    case 'ul': {
+      const ulLines = selected ? selected.split('\n').map(l => `- ${l}`).join('\n') : '- '
+      replacement = ulLines
+      cursorOffset = selected ? replacement.length - selected.length : 2
+      break
+    }
+    case 'ol': {
+      const olLines = selected ? selected.split('\n').map((l, i) => `${i + 1}. ${l}`).join('\n') : '1. '
+      replacement = olLines
+      cursorOffset = selected ? replacement.length - selected.length : 3
+      break
+    }
+    case 'tasklist': {
+      const tlLines = selected ? selected.split('\n').map(l => `- [ ] ${l}`).join('\n') : '- [ ] '
+      replacement = tlLines
+      cursorOffset = selected ? replacement.length - selected.length : 6
+      break
+    }
+  }
+
+  const newValue = before + replacement + after
+  onChange(newValue)
+  requestAnimationFrame(() => {
+    textarea.focus()
+    const newPos = start + (selected ? replacement.length : cursorOffset)
+    textarea.selectionStart = textarea.selectionEnd = newPos
+  })
+}
+
+interface ToolbarButtonProps {
+  icon: React.ReactNode
+  title: string
+  onClick: () => void
+  separator?: boolean
+}
+
+function ToolbarButton({ icon, title, onClick, separator }: ToolbarButtonProps) {
+  return (
+    <>
+      {separator && (
+        <div
+          className="w-px h-4 mx-1"
+          style={{ background: 'var(--vscode-panel-border)' }}
+        />
+      )}
+      <button
+        type="button"
+        onClick={onClick}
+        title={title}
+        className="p-1 rounded transition-colors"
+        style={{ color: 'var(--vscode-descriptionForeground)' }}
+        onMouseEnter={e => e.currentTarget.style.background = 'var(--vscode-list-hoverBackground)'}
+        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+      >
+        {icon}
+      </button>
+    </>
+  )
+}
+
+export function MarkdownEditor({ value, onChange, placeholder = 'Write markdown...', className, autoFocus }: MarkdownEditorProps) {
+  const [activeTab, setActiveTab] = useState<'write' | 'preview'>('write')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const previewHtml = useMemo(() => {
+    if (!value.trim()) return ''
+    return marked.parse(value, { async: false, gfm: true, breaks: true }) as string
+  }, [value])
+
+  // Auto-focus textarea when switching to write tab
+  useEffect(() => {
+    if (activeTab === 'write' && textareaRef.current) {
+      textareaRef.current.focus()
+    }
+  }, [activeTab])
+
+  // Initial auto-focus
+  useEffect(() => {
+    if (autoFocus && textareaRef.current) {
+      textareaRef.current.focus()
+    }
+  }, [autoFocus])
+
+  const handleFormat = useCallback((action: FormatAction) => {
+    if (textareaRef.current) {
+      wrapSelection(textareaRef.current, value, onChange, action)
+    }
+  }, [value, onChange])
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Tab key inserts spaces instead of changing focus
+    if (e.key === 'Tab') {
+      e.preventDefault()
+      const textarea = e.currentTarget
+      const start = textarea.selectionStart
+      const end = textarea.selectionEnd
+      const newValue = value.substring(0, start) + '  ' + value.substring(end)
+      onChange(newValue)
+      requestAnimationFrame(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2
+      })
+    }
+    // Ctrl/Cmd+B for bold
+    if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
+      e.preventDefault()
+      e.stopPropagation()
+      handleFormat('bold')
+    }
+    // Ctrl/Cmd+I for italic
+    if ((e.metaKey || e.ctrlKey) && e.key === 'i') {
+      e.preventDefault()
+      handleFormat('italic')
+    }
+    // Ctrl/Cmd+K for link
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault()
+      handleFormat('link')
+    }
+  }
+
+  return (
+    <div className={cn('flex flex-col h-full', className)}>
+      {/* Tab bar + toolbar */}
+      <div
+        className="flex items-center shrink-0"
+        style={{ borderBottom: '1px solid var(--vscode-panel-border)' }}
+      >
+        {/* Tabs */}
+        <button
+          type="button"
+          onClick={() => setActiveTab('write')}
+          className="px-3 py-2 text-xs font-medium transition-colors relative"
+          style={{
+            color: activeTab === 'write' ? 'var(--vscode-foreground)' : 'var(--vscode-descriptionForeground)',
+          }}
+        >
+          Write
+          {activeTab === 'write' && (
+            <span
+              className="absolute bottom-0 left-0 right-0 h-[2px] rounded-t"
+              style={{ background: 'var(--vscode-focusBorder)' }}
+            />
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={() => setActiveTab('preview')}
+          className="px-3 py-2 text-xs font-medium transition-colors relative"
+          style={{
+            color: activeTab === 'preview' ? 'var(--vscode-foreground)' : 'var(--vscode-descriptionForeground)',
+          }}
+        >
+          Preview
+          {activeTab === 'preview' && (
+            <span
+              className="absolute bottom-0 left-0 right-0 h-[2px] rounded-t"
+              style={{ background: 'var(--vscode-focusBorder)' }}
+            />
+          )}
+        </button>
+
+        {/* Toolbar - only visible on Write tab */}
+        {activeTab === 'write' && (
+          <div className="flex items-center ml-auto pr-2 gap-0.5">
+            <ToolbarButton icon={<Heading size={14} />} title="Heading" onClick={() => handleFormat('heading')} />
+            <ToolbarButton icon={<Bold size={14} />} title="Bold (⌘B)" onClick={() => handleFormat('bold')} />
+            <ToolbarButton icon={<Italic size={14} />} title="Italic (⌘I)" onClick={() => handleFormat('italic')} />
+            <ToolbarButton icon={<Quote size={14} />} title="Quote" onClick={() => handleFormat('quote')} separator />
+            <ToolbarButton icon={<Code size={14} />} title="Code" onClick={() => handleFormat('code')} />
+            <ToolbarButton icon={<Link size={14} />} title="Link (⌘K)" onClick={() => handleFormat('link')} />
+            <ToolbarButton icon={<List size={14} />} title="Bulleted list" onClick={() => handleFormat('ul')} separator />
+            <ToolbarButton icon={<ListOrdered size={14} />} title="Numbered list" onClick={() => handleFormat('ol')} />
+            <ToolbarButton icon={<ListChecks size={14} />} title="Task list" onClick={() => handleFormat('tasklist')} />
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto">
+        {activeTab === 'write' ? (
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            className="markdown-editor-textarea"
+            spellCheck={false}
+          />
+        ) : (
+          <div className="min-h-[200px]">
+            {previewHtml ? (
+              <div
+                className="prose prose-sm dark:prose-invert max-w-none p-4"
+                dangerouslySetInnerHTML={{ __html: previewHtml }}
+              />
+            ) : (
+              <p
+                className="p-4 text-sm italic"
+                style={{ color: 'var(--vscode-descriptionForeground)' }}
+              >
+                Nothing to preview
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/webview/components/PrioritySelect.tsx

@@ -0,0 +1,39 @@
+import { ChevronDown } from 'lucide-react'
+import type { Priority } from '../../shared/types'
+
+interface PrioritySelectProps {
+  value: Priority
+  onChange: (priority: Priority) => void
+  className?: string
+}
+
+const priorities: { value: Priority; label: string; color: string }[] = [
+  { value: 'critical', label: 'Critical', color: 'bg-red-500' },
+  { value: 'high', label: 'High', color: 'bg-orange-500' },
+  { value: 'medium', label: 'Medium', color: 'bg-yellow-500' },
+  { value: 'low', label: 'Low', color: 'bg-green-500' }
+]
+
+export function PrioritySelect({ value, onChange, className = '' }: PrioritySelectProps) {
+  const current = priorities.find((p) => p.value === value) || priorities[2]
+
+  return (
+    <div className={`relative ${className}`}>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value as Priority)}
+        className="appearance-none w-full bg-zinc-100 dark:bg-zinc-700 border border-zinc-200 dark:border-zinc-600 rounded-md px-3 py-2 pr-8 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
+      >
+        {priorities.map((p) => (
+          <option key={p.value} value={p.value}>
+            {p.label}
+          </option>
+        ))}
+      </select>
+      <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1.5 pointer-events-none">
+        <div className={`w-2 h-2 rounded-full ${current.color}`} />
+        <ChevronDown size={14} className="text-zinc-400" />
+      </div>
+    </div>
+  )
+}