kanban-lite 1.0.21 → 1.0.23

package/src/webview/components/KanbanColumn.tsx

@@ -1,10 +1,18 @@
 import { useState, useRef, useEffect } from 'react'
-import { Plus, MoreVertical, Pencil, Trash2 } from 'lucide-react'
+import { Plus, MoreVertical, Pencil, Trash2, Check } from 'lucide-react'
 import { FeatureCard } from './FeatureCard'
 import type { Feature, KanbanColumn as KanbanColumnType } from '../../shared/types'
-import type { LayoutMode } from '../store'
+import type { LayoutMode, SortOrder } from '../store'
 import type { DropTarget } from './KanbanBoard'
 
+const SORT_OPTIONS: { value: SortOrder; label: string }[] = [
+  { value: 'order', label: 'Board Order' },
+  { value: 'created:asc', label: 'Created (oldest)' },
+  { value: 'created:desc', label: 'Created (newest)' },
+  { value: 'modified:asc', label: 'Modified (oldest)' },
+  { value: 'modified:desc', label: 'Modified (newest)' },
+]
+
 interface KanbanColumnProps {
   column: KanbanColumnType
   features: Feature[]
@@ -12,6 +20,7 @@ interface KanbanColumnProps {
   onAddFeature: (status: string) => void
   onEditColumn: (columnId: string) => void
   onRemoveColumn: (columnId: string) => void
+  onCleanupColumn: (columnId: string) => void
   onDragStart: (e: React.DragEvent, feature: Feature) => void
   onDragOver: (e: React.DragEvent) => void
   onDragOverCard: (e: React.DragEvent, columnId: string, cardIndex: number) => void
@@ -23,6 +32,8 @@ interface KanbanColumnProps {
   isDeletedColumn?: boolean
   onPurgeColumn?: () => void
   selectedFeatureId?: string
+  sort: SortOrder
+  onSortChange: (sort: SortOrder) => void
 }
 
 export function KanbanColumn({
@@ -32,6 +43,7 @@ export function KanbanColumn({
   onAddFeature,
   onEditColumn,
   onRemoveColumn,
+  onCleanupColumn,
   onDragStart,
   onDragOver,
   onDragOverCard,
@@ -42,7 +54,9 @@ export function KanbanColumn({
   layout,
   isDeletedColumn,
   onPurgeColumn,
-  selectedFeatureId
+  selectedFeatureId,
+  sort,
+  onSortChange
 }: KanbanColumnProps) {
   const isVertical = layout === 'vertical'
   const isDropTarget = dropTarget && dropTarget.columnId === column.id
@@ -114,7 +128,20 @@ export function KanbanColumn({
                   <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]">
+                  <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-[170px]">
+                    <div className="px-3 py-1 text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wide">Sort by</div>
+                    {SORT_OPTIONS.map((opt) => (
+                      <button
+                        key={opt.value}
+                        type="button"
+                        onClick={() => { onSortChange(opt.value) }}
+                        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"
+                      >
+                        <Check size={14} className={sort === opt.value ? 'text-blue-500' : 'invisible'} />
+                        {opt.label}
+                      </button>
+                    ))}
+                    <div className="border-t border-zinc-200 dark:border-zinc-600 my-1" />
                     <button
                       type="button"
                       onClick={() => { setMenuOpen(false); onEditColumn(column.id) }}
@@ -131,6 +158,14 @@ export function KanbanColumn({
                       <Trash2 size={14} />
                       Remove List
                     </button>
+                    <button
+                      type="button"
+                      onClick={() => { setMenuOpen(false); onCleanupColumn(column.id) }}
+                      className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-orange-600 dark:text-orange-400 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
+                    >
+                      <Trash2 size={14} />
+                      Cleanup List
+                    </button>
                   </div>
                 )}
               </div>
@@ -155,6 +190,7 @@ export function KanbanColumn({
             )}
             <div
               draggable
+              data-card-id={feature.id}
               onDragStart={(e) => onDragStart(e, feature)}
               onDragOver={(e) => onDragOverCard(e, column.id, index)}
               onDragEnd={onDragEnd}

package/src/webview/components/SettingsPanel.tsx

@@ -182,6 +182,53 @@ function SettingsDropdown({ label, value, options, onChange }: {
   )
 }
 
+function SettingsSlider({ label, description, value, min, max, step, unit, onChange }: {
+  label: string
+  description?: string
+  value: number
+  min: number
+  max: number
+  step: number
+  unit?: string
+  onChange: (v: number) => void
+}) {
+  const pct = ((value - min) / (max - min)) * 100
+  return (
+    <div
+      className="flex items-center justify-between gap-4 px-4 py-2 transition-colors"
+      onMouseEnter={e => e.currentTarget.style.background = 'var(--vscode-list-hoverBackground)'}
+      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+    >
+      <div className="flex-1 min-w-0">
+        <div className="text-sm" style={{ color: 'var(--vscode-foreground)' }}>{label}</div>
+        {description && (
+          <div className="text-xs mt-0.5" style={{ color: 'var(--vscode-descriptionForeground)' }}>{description}</div>
+        )}
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={e => onChange(Number(e.target.value))}
+          className="settings-slider"
+          style={{
+            background: `linear-gradient(to right, var(--vscode-button-background) ${pct}%, var(--vscode-badge-background, #6b7280) ${pct}%)`,
+          }}
+        />
+        <span
+          className="text-xs font-mono w-12 text-right tabular-nums"
+          style={{ color: 'var(--vscode-foreground)' }}
+        >
+          {value}{unit || '%'}
+        </span>
+      </div>
+    </div>
+  )
+}
+
 function ColorPicker({ value, onChange }: { value: string; onChange: (color: string) => void }) {
   const [isOpen, setIsOpen] = useState(false)
   const [customHex, setCustomHex] = useState('')
@@ -509,6 +556,7 @@ function LabelsSection({ onSetLabel, onRenameLabel, onDeleteLabel }: {
 
 function SettingsPanelContent({ settings, workspace, onClose, onSave, onSetLabel, onRenameLabel, onDeleteLabel }: Omit<SettingsPanelProps, 'isOpen'>) {
   const [local, setLocal] = useState<CardDisplaySettings>(settings)
+  const [activeTab, setActiveTab] = useState<'general' | 'defaults' | 'labels'>('general')
 
   useEffect(() => { setLocal(settings) }, [settings])
 
@@ -556,90 +604,144 @@ function SettingsPanelContent({ settings, workspace, onClose, onSave, onSetLabel
           </button>
         </div>
 
+        {/* Tab Bar */}
+        <div
+          className="flex"
+          style={{ borderBottom: '1px solid var(--vscode-panel-border)' }}
+        >
+          {(['general', 'defaults', 'labels'] as const).map(tab => (
+            <button
+              key={tab}
+              type="button"
+              onClick={() => setActiveTab(tab)}
+              className="px-4 py-2.5 text-xs font-medium transition-colors relative"
+              style={{
+                color: activeTab === tab
+                  ? 'var(--vscode-foreground)'
+                  : 'var(--vscode-descriptionForeground)',
+                background: 'transparent',
+              }}
+            >
+              {tab.charAt(0).toUpperCase() + tab.slice(1)}
+              {activeTab === tab && (
+                <span
+                  className="absolute bottom-0 left-0 right-0 h-0.5"
+                  style={{ background: 'var(--vscode-button-background)' }}
+                />
+              )}
+            </button>
+          ))}
+        </div>
+
         {/* Content */}
         <div className="flex-1 overflow-auto">
-          {workspace && (
+          {activeTab === 'general' && (
             <>
-              <SettingsSection title="Workspace">
-                <SettingsInfo label="Project Path" value={workspace.projectPath} />
-                <SettingsInfo label="Features Directory" value={workspace.featuresDirectory} />
-                <SettingsInfo label="Server Port" value={String(workspace.port)} />
-                <SettingsInfo label="Config Version" value={String(workspace.configVersion)} />
+              {workspace && (
+                <>
+                  <SettingsSection title="Workspace">
+                    <SettingsInfo label="Project Path" value={workspace.projectPath} />
+                    <SettingsInfo label="Features Directory" value={workspace.featuresDirectory} />
+                    <SettingsInfo label="Server Port" value={String(workspace.port)} />
+                    <SettingsInfo label="Config Version" value={String(workspace.configVersion)} />
+                  </SettingsSection>
+                  <div style={{ borderTop: '1px solid var(--vscode-panel-border)' }} />
+                </>
+              )}
+              <SettingsSection title="Card Display">
+                <SettingsToggle
+                  label="Show Priority Badges"
+                  description="Display priority indicators on feature cards"
+                  checked={local.showPriorityBadges}
+                  onChange={v => update({ showPriorityBadges: v })}
+                />
+                <SettingsToggle
+                  label="Show Assignee"
+                  description="Display assigned person on feature cards"
+                  checked={local.showAssignee}
+                  onChange={v => update({ showAssignee: v })}
+                />
+                <SettingsToggle
+                  label="Show Due Date"
+                  description="Display due dates on feature cards"
+                  checked={local.showDueDate}
+                  onChange={v => update({ showDueDate: v })}
+                />
+                <SettingsToggle
+                  label="Show Labels"
+                  description="Display labels on feature cards and in editors"
+                  checked={local.showLabels}
+                  onChange={v => update({ showLabels: v })}
+                />
+                <SettingsToggle
+                  label="Show Filename"
+                  description="Display the source markdown filename on cards"
+                  checked={local.showFileName}
+                  onChange={v => update({ showFileName: v })}
+                />
+                <SettingsToggle
+                  label="Compact Mode"
+                  description="Use compact card layout to show more features"
+                  checked={local.compactMode}
+                  onChange={v => update({ compactMode: v })}
+                />
+                <SettingsToggle
+                  label="Show Deleted Column"
+                  description="Display the Deleted column to manage soft-deleted cards"
+                  checked={local.showDeletedColumn}
+                  onChange={v => update({ showDeletedColumn: v })}
+                />
               </SettingsSection>
               <div style={{ borderTop: '1px solid var(--vscode-panel-border)' }} />
+              <SettingsSection title="Zoom">
+                <SettingsSlider
+                  label="Board Zoom"
+                  description="Scale text size on the board view"
+                  value={local.boardZoom}
+                  min={75}
+                  max={150}
+                  step={5}
+                  onChange={v => update({ boardZoom: v })}
+                />
+                <SettingsSlider
+                  label="Card Detail Zoom"
+                  description="Scale text size in the card detail panel"
+                  value={local.cardZoom}
+                  min={75}
+                  max={150}
+                  step={5}
+                  onChange={v => update({ cardZoom: v })}
+                />
+              </SettingsSection>
             </>
           )}
-          <SettingsSection title="Card Display">
-            <SettingsToggle
-              label="Show Priority Badges"
-              description="Display priority indicators on feature cards"
-              checked={local.showPriorityBadges}
-              onChange={v => update({ showPriorityBadges: v })}
-            />
-            <SettingsToggle
-              label="Show Assignee"
-              description="Display assigned person on feature cards"
-              checked={local.showAssignee}
-              onChange={v => update({ showAssignee: v })}
-            />
-            <SettingsToggle
-              label="Show Due Date"
-              description="Display due dates on feature cards"
-              checked={local.showDueDate}
-              onChange={v => update({ showDueDate: v })}
-            />
-            <SettingsToggle
-              label="Show Labels"
-              description="Display labels on feature cards and in editors"
-              checked={local.showLabels}
-              onChange={v => update({ showLabels: v })}
-            />
-            <SettingsToggle
-              label="Show Filename"
-              description="Display the source markdown filename on cards"
-              checked={local.showFileName}
-              onChange={v => update({ showFileName: v })}
-            />
-            <SettingsToggle
-              label="Compact Mode"
-              description="Use compact card layout to show more features"
-              checked={local.compactMode}
-              onChange={v => update({ compactMode: v })}
-            />
-            <SettingsToggle
-              label="Show Deleted Column"
-              description="Display the Deleted column to manage soft-deleted cards"
-              checked={local.showDeletedColumn}
-              onChange={v => update({ showDeletedColumn: v })}
-            />
-          </SettingsSection>
-
-          <div style={{ borderTop: '1px solid var(--vscode-panel-border)' }} />
-
-          <SettingsSection title="Defaults">
-            <SettingsDropdown
-              label="Default Priority"
-              value={local.defaultPriority}
-              options={priorityConfig}
-              onChange={v => update({ defaultPriority: v as Priority })}
-            />
-            <SettingsDropdown
-              label="Default Status"
-              value={local.defaultStatus}
-              options={statusConfig}
-              onChange={v => update({ defaultStatus: v as FeatureStatus })}
-            />
-          </SettingsSection>
-
-          <div style={{ borderTop: '1px solid var(--vscode-panel-border)' }} />
-
-          <SettingsSection title="Labels">
-            <LabelsSection
-              onSetLabel={onSetLabel}
-              onRenameLabel={onRenameLabel}
-              onDeleteLabel={onDeleteLabel}
-            />
-          </SettingsSection>
+
+          {activeTab === 'defaults' && (
+            <SettingsSection title="Defaults">
+              <SettingsDropdown
+                label="Default Priority"
+                value={local.defaultPriority}
+                options={priorityConfig}
+                onChange={v => update({ defaultPriority: v as Priority })}
+              />
+              <SettingsDropdown
+                label="Default Status"
+                value={local.defaultStatus}
+                options={statusConfig}
+                onChange={v => update({ defaultStatus: v as FeatureStatus })}
+              />
+            </SettingsSection>
+          )}
+
+          {activeTab === 'labels' && (
+            <SettingsSection title="Labels">
+              <LabelsSection
+                onSetLabel={onSetLabel}
+                onRenameLabel={onRenameLabel}
+                onDeleteLabel={onDeleteLabel}
+              />
+            </SettingsSection>
+          )}
         </div>
 
         {/* Footer */}

package/src/webview/components/Toolbar.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useMemo } from 'react'
-import { Search, X, Columns, Rows, Settings, Plus, Moon, Sun, ChevronDown, Check } from 'lucide-react'
-import { useStore, type DueDateFilter, type SortOrder } from '../store'
+import { Search, X, Columns, Rows, Settings, Plus, Moon, Sun, ChevronDown, Check, Tag } from 'lucide-react'
+import { useStore, type DueDateFilter } from '../store'
 import type { Priority } from '../../shared/types'
 
 const priorities: { value: Priority | 'all'; label: string }[] = [
@@ -34,8 +34,6 @@ export function Toolbar({ onOpenSettings, onAddColumn, onToggleTheme, onSwitchBo
     setLabelFilter,
     dueDateFilter,
     setDueDateFilter,
-    sortOrder,
-    setSortOrder,
     clearAllFilters,
     getUniqueAssignees,
     getUniqueLabels,
@@ -71,6 +69,21 @@ export function Toolbar({ onOpenSettings, onAddColumn, onToggleTheme, onSwitchBo
   const dropdownRef = useRef<HTMLDivElement>(null)
   const newBoardInputRef = useRef<HTMLInputElement>(null)
 
+  const [labelDropdownOpen, setLabelDropdownOpen] = useState(false)
+  const [labelSearch, setLabelSearch] = useState('')
+  const labelDropdownRef = useRef<HTMLDivElement>(null)
+
+  const filteredGroupedLabels = useMemo(() => {
+    if (!labelSearch) return groupedLabels
+    const q = labelSearch.toLowerCase()
+    const result: Record<string, string[]> = {}
+    Object.entries(groupedLabels).forEach(([group, groupLabels]) => {
+      const matched = groupLabels.filter(l => l.toLowerCase().includes(q))
+      if (matched.length > 0) result[group] = matched
+    })
+    return result
+  }, [groupedLabels, labelSearch])
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
@@ -85,6 +98,19 @@ export function Toolbar({ onOpenSettings, onAddColumn, onToggleTheme, onSwitchBo
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [boardDropdownOpen])
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (labelDropdownRef.current && !labelDropdownRef.current.contains(e.target as Node)) {
+        setLabelDropdownOpen(false)
+        setLabelSearch('')
+      }
+    }
+    if (labelDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [labelDropdownOpen])
+
   useEffect(() => {
     if (creatingBoard && newBoardInputRef.current) {
       newBoardInputRef.current.focus()
@@ -209,21 +235,103 @@ export function Toolbar({ onOpenSettings, onAddColumn, onToggleTheme, onSwitchBo
 
       {/* Label Filter */}
       {cardSettings.showLabels && (
-      <select
-        value={labelFilter}
-        onChange={(e) => setLabelFilter(e.target.value)}
-        className={selectClassName}
-      >
-        <option value="all">All Labels</option>
-        {Object.entries(groupedLabels).map(([group, groupLabels]) => (
-          <optgroup key={group} label={group}>
-            <option value={`group:${group}`}>All {group}</option>
-            {groupLabels.map((l) => (
-              <option key={l} value={l}>{l}</option>
-            ))}
-          </optgroup>
-        ))}
-      </select>
+        <div className="relative" ref={labelDropdownRef}>
+          <button
+            type="button"
+            onClick={() => setLabelDropdownOpen(!labelDropdownOpen)}
+            className={`flex items-center gap-1.5 text-sm bg-white dark:bg-zinc-800 border rounded-md px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 text-zinc-900 dark:text-zinc-100 transition-colors ${
+              labelFilter.length > 0
+                ? 'border-blue-500 dark:border-blue-400'
+                : 'border-zinc-200 dark:border-zinc-600'
+            }`}
+          >
+            <Tag size={14} className="text-zinc-400 shrink-0" />
+            <span className="max-w-[100px] truncate">
+              {labelFilter.length === 0
+                ? 'All Labels'
+                : labelFilter.length === 1
+                ? labelFilter[0]
+                : `${labelFilter.length} Labels`}
+            </span>
+            <ChevronDown size={14} className={`text-zinc-400 transition-transform ${labelDropdownOpen ? 'rotate-180' : ''}`} />
+          </button>
+          {labelDropdownOpen && (
+            <div className="absolute top-full left-0 mt-1 min-w-[200px] max-h-72 overflow-y-auto bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 rounded-md shadow-lg z-50 py-1">
+              {/* Search */}
+              <div className="px-2 pb-1">
+                <input
+                  type="text"
+                  value={labelSearch}
+                  onChange={(e) => setLabelSearch(e.target.value)}
+                  placeholder="Filter labels..."
+                  autoFocus
+                  className="w-full px-2 py-1 text-sm bg-zinc-50 dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-500 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400"
+                />
+              </div>
+              {/* All Labels option */}
+              {!labelSearch && (
+                <button
+                  type="button"
+                  onClick={() => setLabelFilter([])}
+                  className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors ${
+                    labelFilter.length === 0 ? 'text-blue-600 dark:text-blue-400 font-medium' : 'text-zinc-900 dark:text-zinc-100'
+                  }`}
+                >
+                  <div className={`w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0 ${
+                    labelFilter.length === 0 ? 'border-blue-500 bg-blue-500' : 'border-zinc-300 dark:border-zinc-500'
+                  }`}>
+                    {labelFilter.length === 0 && <Check size={10} className="text-white" />}
+                  </div>
+                  <span>All Labels</span>
+                </button>
+              )}
+              {/* Grouped labels */}
+              {Object.entries(filteredGroupedLabels).map(([group, groupLabels]) => (
+                <div key={group}>
+                  {Object.keys(filteredGroupedLabels).length > 1 && (
+                    <div className="px-3 pt-1.5 pb-0.5 text-xs font-semibold text-zinc-400 dark:text-zinc-500 uppercase tracking-wide">
+                      {group}
+                    </div>
+                  )}
+                  {groupLabels.map((l) => {
+                    const def = labelDefs[l]
+                    const checked = labelFilter.includes(l)
+                    return (
+                      <button
+                        key={l}
+                        type="button"
+                        onClick={() => {
+                          if (checked) {
+                            setLabelFilter(labelFilter.filter(x => x !== l))
+                          } else {
+                            setLabelFilter([...labelFilter, l])
+                          }
+                        }}
+                        className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-zinc-100 dark:hover:bg-zinc-700 text-zinc-900 dark:text-zinc-100 transition-colors"
+                      >
+                        <div className={`w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0 ${
+                          checked ? 'border-blue-500 bg-blue-500' : 'border-zinc-300 dark:border-zinc-500'
+                        }`}>
+                          {checked && <Check size={10} className="text-white" />}
+                        </div>
+                        {def?.color && (
+                          <span
+                            className="w-2.5 h-2.5 rounded-full shrink-0"
+                            style={{ backgroundColor: def.color }}
+                          />
+                        )}
+                        <span className="truncate">{l}</span>
+                      </button>
+                    )
+                  })}
+                </div>
+              ))}
+              {Object.keys(filteredGroupedLabels).length === 0 && (
+                <div className="px-3 py-2 text-sm text-zinc-400 dark:text-zinc-500">No labels found</div>
+              )}
+            </div>
+          )}
+        </div>
       )}
 
       {/* Due Date Filter */}
@@ -241,19 +349,6 @@ export function Toolbar({ onOpenSettings, onAddColumn, onToggleTheme, onSwitchBo
         </select>
       )}
 
-      {/* Sort Order */}
-      <select
-        value={sortOrder}
-        onChange={(e) => setSortOrder(e.target.value as SortOrder)}
-        className={selectClassName}
-      >
-        <option value="order">Board Order</option>
-        <option value="created:asc">Created (oldest)</option>
-        <option value="created:desc">Created (newest)</option>
-        <option value="modified:asc">Modified (oldest)</option>
-        <option value="modified:desc">Modified (newest)</option>
-      </select>
-
       {/* Clear Filters Button */}
       {filtersActive && (
         <button