kanban-lite 1.0.4

package/src/webview/components/QuickAddInput.tsx

@@ -0,0 +1,72 @@
+import { useState, useRef, useEffect } from 'react'
+import { Plus } from 'lucide-react'
+import type { FeatureStatus, Priority } from '../../shared/types'
+import { useStore } from '../store'
+
+interface QuickAddInputProps {
+  status: FeatureStatus
+  onAdd: (data: { status: FeatureStatus; priority: Priority; content: string }) => void
+}
+
+export function QuickAddInput({ status, onAdd }: QuickAddInputProps) {
+  const { cardSettings } = useStore()
+  const [isEditing, setIsEditing] = useState(false)
+  const [value, setValue] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isEditing])
+
+  const handleSubmit = () => {
+    const title = value.trim()
+    if (title) {
+      // Build content with title as first # heading
+      const content = `# ${title}`
+      onAdd({
+        status,
+        priority: cardSettings.defaultPriority,
+        content
+      })
+      setValue('')
+    }
+    setIsEditing(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleSubmit()
+    } else if (e.key === 'Escape') {
+      setValue('')
+      setIsEditing(false)
+    }
+  }
+
+  if (!isEditing) {
+    return (
+      <button
+        onClick={() => setIsEditing(true)}
+        className="w-full flex items-center gap-1.5 px-2 py-1.5 text-sm text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors"
+      >
+        <Plus size={14} />
+        <span>Add feature</span>
+      </button>
+    )
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      type="text"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onBlur={handleSubmit}
+      onKeyDown={handleKeyDown}
+      placeholder="Feature title..."
+      className="w-full px-2 py-1.5 text-sm bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400"
+    />
+  )
+}

package/src/webview/components/SettingsPanel.tsx

@@ -0,0 +1,284 @@
+import { useState, useEffect } from 'react'
+import { X, ChevronDown } from 'lucide-react'
+import type { CardDisplaySettings, Priority, FeatureStatus } from '../../shared/types'
+import { cn } from '../lib/utils'
+
+const priorityConfig: { value: Priority; label: string; dot: string }[] = [
+  { value: 'critical', label: 'Critical', dot: 'bg-red-500' },
+  { value: 'high', label: 'High', dot: 'bg-orange-500' },
+  { value: 'medium', label: 'Medium', dot: 'bg-yellow-500' },
+  { value: 'low', label: 'Low', dot: 'bg-green-500' }
+]
+
+const statusConfig: { value: FeatureStatus; label: string; dot: string }[] = [
+  { value: 'backlog', label: 'Backlog', dot: 'bg-zinc-400' },
+  { value: 'todo', label: 'To Do', dot: 'bg-blue-400' },
+  { value: 'in-progress', label: 'In Progress', dot: 'bg-amber-400' },
+  { value: 'review', label: 'Review', dot: 'bg-purple-400' },
+  { value: 'done', label: 'Done', dot: 'bg-emerald-400' }
+]
+
+interface SettingsPanelProps {
+  isOpen: boolean
+  settings: CardDisplaySettings
+  onClose: () => void
+  onSave: (settings: CardDisplaySettings) => void
+}
+
+export function SettingsPanel({ isOpen, settings, onClose, onSave }: SettingsPanelProps) {
+  if (!isOpen) return null
+  return <SettingsPanelContent settings={settings} onClose={onClose} onSave={onSave} />
+}
+
+function ToggleSwitch({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
+  return (
+    <button
+      type="button"
+      onClick={() => onChange(!checked)}
+      className={cn(
+        'relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0'
+      )}
+      style={{
+        background: checked
+          ? 'var(--vscode-button-background)'
+          : 'var(--vscode-badge-background, #6b7280)'
+      }}
+    >
+      <span
+        className="inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform"
+        style={{
+          transform: checked ? 'translateX(18px)' : 'translateX(3px)'
+        }}
+      />
+    </button>
+  )
+}
+
+function SettingsSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="py-3">
+      <h3
+        className="px-4 pb-2 text-xs font-semibold uppercase tracking-wider"
+        style={{ color: 'var(--vscode-descriptionForeground)' }}
+      >
+        {title}
+      </h3>
+      <div>{children}</div>
+    </div>
+  )
+}
+
+function SettingsToggle({ label, description, checked, onChange }: {
+  label: string
+  description?: string
+  checked: boolean
+  onChange: (v: boolean) => void
+}) {
+  return (
+    <div
+      className="flex items-center justify-between gap-4 px-4 py-2 transition-colors cursor-pointer"
+      onClick={() => onChange(!checked)}
+      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>
+      <ToggleSwitch checked={checked} onChange={onChange} />
+    </div>
+  )
+}
+
+function SettingsDropdown({ label, value, options, onChange }: {
+  label: string
+  value: string
+  options: { value: string; label: string; dot?: string }[]
+  onChange: (value: string) => void
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const current = options.find(o => o.value === value)
+
+  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="text-sm" style={{ color: 'var(--vscode-foreground)' }}>{label}</div>
+      <div className="relative">
+        <button
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          className="flex items-center gap-2 px-2 py-1 text-xs font-medium rounded transition-colors"
+          style={{ color: 'var(--vscode-foreground)' }}
+        >
+          {current?.dot && <span className={cn('w-2 h-2 rounded-full shrink-0', current.dot)} />}
+          <span>{current?.label}</span>
+          <ChevronDown size={12} style={{ color: 'var(--vscode-descriptionForeground)' }} />
+        </button>
+        {isOpen && (
+          <>
+            <div className="fixed inset-0 z-10" onClick={() => setIsOpen(false)} />
+            <div
+              className="absolute top-full right-0 mt-1 z-20 rounded-lg shadow-lg py-1 min-w-[140px]"
+              style={{
+                background: 'var(--vscode-dropdown-background)',
+                border: '1px solid var(--vscode-dropdown-border, var(--vscode-panel-border))',
+              }}
+            >
+              {options.map(option => (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => {
+                    onChange(option.value)
+                    setIsOpen(false)
+                  }}
+                  className="w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors"
+                  style={{
+                    color: 'var(--vscode-dropdown-foreground)',
+                    background: option.value === value ? 'var(--vscode-list-activeSelectionBackground)' : undefined,
+                  }}
+                  onMouseEnter={e => {
+                    if (option.value !== value) e.currentTarget.style.background = 'var(--vscode-list-hoverBackground)'
+                  }}
+                  onMouseLeave={e => {
+                    if (option.value !== value) e.currentTarget.style.background = 'transparent'
+                  }}
+                >
+                  {option.dot && <span className={cn('w-2 h-2 rounded-full shrink-0', option.dot)} />}
+                  <span className="flex-1 text-left">{option.label}</span>
+                </button>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function SettingsPanelContent({ settings, onClose, onSave }: Omit<SettingsPanelProps, 'isOpen'>) {
+  const [local, setLocal] = useState<CardDisplaySettings>(settings)
+
+  useEffect(() => { setLocal(settings) }, [settings])
+
+  const update = (patch: Partial<CardDisplaySettings>) => {
+    const next = { ...local, ...patch }
+    setLocal(next)
+    onSave(next)
+  }
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [onClose])
+
+  return (
+    <div className="fixed inset-0 z-50 flex justify-end">
+      <div className="absolute inset-0 bg-black/30" onClick={onClose} />
+      <div
+        className="relative h-full w-1/2 max-w-lg shadow-xl flex flex-col animate-in slide-in-from-right duration-200"
+        style={{
+          background: 'var(--vscode-editor-background)',
+          borderLeft: '1px solid var(--vscode-panel-border)',
+        }}
+      >
+        {/* Header */}
+        <div
+          className="flex items-center justify-between px-4 py-3"
+          style={{ borderBottom: '1px solid var(--vscode-panel-border)' }}
+        >
+          <h2 className="font-medium" style={{ color: 'var(--vscode-foreground)' }}>Settings</h2>
+          <button
+            onClick={onClose}
+            className="p-1.5 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'}
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-auto">
+          <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 })}
+            />
+          </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>
+
+        {/* Footer */}
+        <div
+          className="px-4 py-2"
+          style={{ borderTop: '1px solid var(--vscode-panel-border)' }}
+        >
+          <p className="text-xs" style={{ color: 'var(--vscode-descriptionForeground)' }}>
+            Settings are saved automatically and apply to all connected clients.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/webview/components/Toolbar.tsx

@@ -0,0 +1,175 @@
+import { Search, X, Columns, Rows, Settings, Plus } from 'lucide-react'
+import { useStore, type DueDateFilter } from '../store'
+import type { Priority } from '../../shared/types'
+
+const priorities: { value: Priority | 'all'; label: string }[] = [
+  { value: 'all', label: 'All Priorities' },
+  { value: 'critical', label: 'Critical' },
+  { value: 'high', label: 'High' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'low', label: 'Low' }
+]
+
+const dueDateOptions: { value: DueDateFilter; label: string }[] = [
+  { value: 'all', label: 'All Dates' },
+  { value: 'overdue', label: 'Overdue' },
+  { value: 'today', label: 'Due Today' },
+  { value: 'this-week', label: 'Due This Week' },
+  { value: 'no-date', label: 'No Due Date' }
+]
+
+const selectClassName =
+  'text-sm bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 rounded-md px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 text-zinc-900 dark:text-zinc-100'
+
+export function Toolbar({ onOpenSettings, onAddColumn }: { onOpenSettings: () => void; onAddColumn: () => void }) {
+  const {
+    searchQuery,
+    setSearchQuery,
+    priorityFilter,
+    setPriorityFilter,
+    assigneeFilter,
+    setAssigneeFilter,
+    labelFilter,
+    setLabelFilter,
+    dueDateFilter,
+    setDueDateFilter,
+    clearAllFilters,
+    getUniqueAssignees,
+    getUniqueLabels,
+    hasActiveFilters,
+    layout,
+    toggleLayout,
+    cardSettings
+  } = useStore()
+
+  const assignees = getUniqueAssignees()
+  const labels = getUniqueLabels()
+  const filtersActive = hasActiveFilters()
+
+  return (
+    <div className="flex items-center gap-2 px-4 py-2 border-b border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900/50 flex-wrap">
+      {/* Search */}
+      <div className="relative flex-1 min-w-[180px] max-w-xs">
+        <Search
+          size={14}
+          className="absolute left-2.5 top-1/2 -translate-y-1/2 text-zinc-400"
+        />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search features..."
+          className="w-full pl-8 pr-3 py-1.5 text-sm bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400"
+        />
+      </div>
+
+      {/* Priority Filter */}
+      {cardSettings.showPriorityBadges && (
+        <select
+          value={priorityFilter}
+          onChange={(e) => setPriorityFilter(e.target.value as Priority | 'all')}
+          className={selectClassName}
+        >
+          {priorities.map((p) => (
+            <option key={p.value} value={p.value}>
+              {p.label}
+            </option>
+          ))}
+        </select>
+      )}
+
+      {/* Assignee Filter */}
+      {cardSettings.showAssignee && (
+        <select
+          value={assigneeFilter}
+          onChange={(e) => setAssigneeFilter(e.target.value)}
+          className={selectClassName}
+        >
+          <option value="all">All Assignees</option>
+          <option value="unassigned">Unassigned</option>
+          {assignees.map((a) => (
+            <option key={a} value={a}>
+              {a}
+            </option>
+          ))}
+        </select>
+      )}
+
+      {/* Label Filter */}
+      {cardSettings.showLabels && (
+      <select
+        value={labelFilter}
+        onChange={(e) => setLabelFilter(e.target.value)}
+        className={selectClassName}
+      >
+        <option value="all">All Labels</option>
+        {labels.map((l) => (
+          <option key={l} value={l}>
+            {l}
+          </option>
+        ))}
+      </select>
+      )}
+
+      {/* Due Date Filter */}
+      {cardSettings.showDueDate && (
+        <select
+          value={dueDateFilter}
+          onChange={(e) => setDueDateFilter(e.target.value as DueDateFilter)}
+          className={selectClassName}
+        >
+          {dueDateOptions.map((d) => (
+            <option key={d.value} value={d.value}>
+              {d.label}
+            </option>
+          ))}
+        </select>
+      )}
+
+      {/* Clear Filters Button */}
+      {filtersActive && (
+        <button
+          onClick={clearAllFilters}
+          className="flex items-center gap-1 px-2 py-1.5 text-sm text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors"
+          title="Clear all filters"
+        >
+          <X size={14} />
+          <span>Clear</span>
+        </button>
+      )}
+
+      {/* Add List */}
+      <button
+        onClick={onAddColumn}
+        className="flex items-center gap-1 px-2 py-1.5 text-sm text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors"
+        title="Add new list"
+      >
+        <Plus size={16} />
+        <span>Add List</span>
+      </button>
+
+      {/* Layout Toggle */}
+      <button
+        onClick={toggleLayout}
+        className="flex items-center gap-1 px-2 py-1.5 text-sm text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors"
+        title={layout === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'}
+      >
+        {layout === 'horizontal' ? <Rows size={16} /> : <Columns size={16} />}
+      </button>
+
+      {/* Settings */}
+      <button
+        onClick={onOpenSettings}
+        className="flex items-center gap-1 px-2 py-1.5 text-sm text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors"
+        title="Open settings"
+      >
+        <Settings size={16} />
+      </button>
+
+      {/* Keyboard hint */}
+      <div className="ml-auto text-xs text-zinc-400">
+        Press <kbd className="px-1.5 py-0.5 bg-zinc-200 dark:bg-zinc-700 rounded">n</kbd> to add
+      </div>
+    </div>
+  )
+}

package/src/webview/components/UndoToast.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react'
+
+interface UndoToastProps {
+  message: string
+  onUndo: () => void
+  onExpire: () => void
+  duration: number
+  index: number
+}
+
+export function UndoToast({ message, onUndo, onExpire, duration, index }: UndoToastProps) {
+  const [progress, setProgress] = useState(100)
+
+  useEffect(() => {
+    const interval = 50
+    const step = (interval / duration) * 100
+    const timer = setInterval(() => {
+      setProgress(prev => {
+        const next = prev - step
+        if (next <= 0) {
+          clearInterval(timer)
+          return 0
+        }
+        return next
+      })
+    }, interval)
+
+    return () => clearInterval(timer)
+  }, [duration])
+
+  useEffect(() => {
+    if (progress <= 0) {
+      onExpire()
+    }
+  }, [progress, onExpire])
+
+  return (
+    <div
+      className="fixed right-4 z-50 flex flex-col min-w-[320px] max-w-[420px] shadow-[0_4px_16px_rgba(0,0,0,0.4)] transition-[bottom] duration-200 ease-out"
+      style={{
+        bottom: `${24 + index * 52}px`,
+        background: 'var(--vscode-notifications-background)',
+        color: 'var(--vscode-notifications-foreground)',
+        border: '1px solid var(--vscode-notifications-border, var(--vscode-widget-border))',
+      }}
+    >
+      <div className="flex items-center gap-3 px-3 py-2.5">
+        <span className="text-[13px] leading-snug flex-1 truncate">{message}</span>
+        <button
+          onClick={onUndo}
+          className="text-[13px] px-2 py-0.5 shrink-0"
+          style={{
+            background: 'var(--vscode-button-background)',
+            color: 'var(--vscode-button-foreground)',
+          }}
+          onMouseEnter={e => e.currentTarget.style.background = 'var(--vscode-button-hoverBackground)'}
+          onMouseLeave={e => e.currentTarget.style.background = 'var(--vscode-button-background)'}
+        >
+          Undo
+        </button>
+      </div>
+      <div className="h-[2px] w-full" style={{ background: 'var(--vscode-widget-border)' }}>
+        <div
+          className="h-full transition-none"
+          style={{ width: `${progress}%`, background: 'var(--vscode-progressBar-background)' }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/webview/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kanban Board</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

package/src/webview/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/webview/main.tsx

@@ -0,0 +1,11 @@
+import './assets/main.css'
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/src/webview/standalone-main.tsx

@@ -0,0 +1,13 @@
+import './standalone-shim'
+import './assets/main.css'
+import './assets/standalone-theme.css'
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)