kanban-lite 1.0.4

package/src/webview/components/DatePicker.tsx

@@ -0,0 +1,185 @@
+import { useState } from 'react'
+import { X, ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '../lib/utils'
+
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+
+interface DatePickerProps {
+  value: string
+  onChange: (date: string) => void
+  placeholder?: string
+}
+
+export function DatePicker({ value, onChange, placeholder = 'Due date' }: DatePickerProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const today = new Date()
+  const selected = value ? new Date(value + 'T00:00:00') : null
+  const [viewYear, setViewYear] = useState(selected?.getFullYear() ?? today.getFullYear())
+  const [viewMonth, setViewMonth] = useState(selected?.getMonth() ?? today.getMonth())
+
+  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate()
+  // Monday = 0
+  const firstDay = (new Date(viewYear, viewMonth, 1).getDay() + 6) % 7
+  const cells: (number | null)[] = Array(firstDay).fill(null)
+  for (let d = 1; d <= daysInMonth; d++) cells.push(d)
+
+  const prevMonth = () => {
+    if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1) }
+    else setViewMonth(m => m - 1)
+  }
+  const nextMonth = () => {
+    if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1) }
+    else setViewMonth(m => m + 1)
+  }
+
+  const selectDay = (day: number) => {
+    const m = String(viewMonth + 1).padStart(2, '0')
+    const d = String(day).padStart(2, '0')
+    onChange(`${viewYear}-${m}-${d}`)
+    setIsOpen(false)
+  }
+
+  const isToday = (day: number) =>
+    day === today.getDate() && viewMonth === today.getMonth() && viewYear === today.getFullYear()
+  const isSelected = (day: number) =>
+    selected !== null && day === selected.getDate() && viewMonth === selected.getMonth() && viewYear === selected.getFullYear()
+
+  const formatDisplay = (dateStr: string) => {
+    const d = new Date(dateStr + 'T00:00:00')
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+  }
+
+  return (
+    <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: value ? 'var(--vscode-foreground)' : 'var(--vscode-descriptionForeground)',
+        }}
+        onMouseEnter={e => e.currentTarget.style.background = 'var(--vscode-list-hoverBackground)'}
+        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+      >
+        <span>{value ? formatDisplay(value) : placeholder}</span>
+        {value && (
+          <span
+            role="button"
+            onClick={(e) => { e.stopPropagation(); onChange(''); setIsOpen(false) }}
+            className="ml-0.5 hover:text-red-500 transition-colors"
+          >
+            <X size={12} />
+          </span>
+        )}
+      </button>
+      {isOpen && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setIsOpen(false)} />
+          <div
+            className="absolute top-full left-0 mt-1 z-20 rounded-lg shadow-lg p-3 w-[252px]"
+            style={{
+              background: 'var(--vscode-dropdown-background)',
+              border: '1px solid var(--vscode-dropdown-border, var(--vscode-panel-border))',
+            }}
+          >
+            {/* Month/year nav */}
+            <div className="flex items-center justify-between mb-2">
+              <button
+                type="button"
+                onClick={prevMonth}
+                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'}
+              >
+                <ChevronLeft size={14} />
+              </button>
+              <span className="text-xs font-medium" style={{ color: 'var(--vscode-foreground)' }}>
+                {MONTHS[viewMonth]} {viewYear}
+              </span>
+              <button
+                type="button"
+                onClick={nextMonth}
+                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'}
+              >
+                <ChevronRight size={14} />
+              </button>
+            </div>
+            {/* Day headers */}
+            <div className="grid grid-cols-7 mb-1">
+              {DAYS.map(d => (
+                <div
+                  key={d}
+                  className="text-center text-[10px] font-medium py-1"
+                  style={{ color: 'var(--vscode-descriptionForeground)' }}
+                >
+                  {d}
+                </div>
+              ))}
+            </div>
+            {/* Day grid */}
+            <div className="grid grid-cols-7">
+              {cells.map((day, i) => (
+                <div key={i} className="flex items-center justify-center">
+                  {day ? (
+                    <button
+                      type="button"
+                      onClick={() => selectDay(day)}
+                      className={cn('w-7 h-7 rounded-md text-[11px] transition-colors font-medium')}
+                      style={{
+                        background: isSelected(day)
+                          ? 'var(--vscode-focusBorder)'
+                          : isToday(day)
+                            ? 'var(--vscode-editor-selectionBackground)'
+                            : undefined,
+                        color: isSelected(day)
+                          ? 'var(--vscode-editor-background)'
+                          : isToday(day)
+                            ? 'var(--vscode-foreground)'
+                            : 'var(--vscode-foreground)',
+                      }}
+                      onMouseEnter={e => {
+                        if (!isSelected(day)) e.currentTarget.style.background = 'var(--vscode-list-hoverBackground)'
+                      }}
+                      onMouseLeave={e => {
+                        if (!isSelected(day) && !isToday(day)) e.currentTarget.style.background = 'transparent'
+                        else if (isToday(day) && !isSelected(day)) e.currentTarget.style.background = 'var(--vscode-editor-selectionBackground)'
+                      }}
+                    >
+                      {day}
+                    </button>
+                  ) : <div className="w-7 h-7" />}
+                </div>
+              ))}
+            </div>
+            {/* Today shortcut */}
+            <div
+              className="mt-2 pt-2 flex justify-center"
+              style={{ borderTop: '1px solid var(--vscode-panel-border)' }}
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  const m = String(today.getMonth() + 1).padStart(2, '0')
+                  const d = String(today.getDate()).padStart(2, '0')
+                  onChange(`${today.getFullYear()}-${m}-${d}`)
+                  setIsOpen(false)
+                }}
+                className="text-[11px] font-medium transition-colors"
+                style={{ color: 'var(--vscode-textLink-foreground)' }}
+                onMouseEnter={e => e.currentTarget.style.color = 'var(--vscode-textLink-activeForeground)'}
+                onMouseLeave={e => e.currentTarget.style.color = 'var(--vscode-textLink-foreground)'}
+              >
+                Today
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/webview/components/FeatureCard.tsx

@@ -0,0 +1,186 @@
+import { marked } from 'marked'
+import { Calendar, Check, FileText, Paperclip } from 'lucide-react'
+import { getTitleFromContent } from '../../shared/types'
+import type { Feature, Priority } from '../../shared/types'
+import { useStore } from '../store'
+
+interface FeatureCardProps {
+  feature: Feature
+  onClick: () => void
+  isDragging?: boolean
+}
+
+const priorityColors: Record<Priority, string> = {
+  critical: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+  high: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
+  medium: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+  low: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+}
+
+const priorityLabels: Record<Priority, string> = {
+  critical: 'Critical',
+  high: 'High',
+  medium: 'Med',
+  low: 'Low'
+}
+
+function getDescriptionFromContent(content: string): string {
+  // Remove the first # heading line, then grab the remaining content
+  const lines = content.split('\n')
+  const headingIndex = lines.findIndex(l => /^#\s+/.test(l))
+  const afterHeading = headingIndex >= 0 ? lines.slice(headingIndex + 1) : lines
+  // Trim leading/trailing blank lines but preserve internal structure (lists, etc.)
+  const trimmed = afterHeading.join('\n').trim()
+  return trimmed
+}
+
+function renderDescriptionHtml(text: string): string {
+  return marked.parse(text, { async: false, gfm: true, breaks: true }) as string
+}
+
+export function FeatureCard({ feature, onClick, isDragging }: FeatureCardProps) {
+  const { cardSettings } = useStore()
+  const title = getTitleFromContent(feature.content)
+  const description = getDescriptionFromContent(feature.content)
+  const fileName = feature.filePath ? feature.filePath.split('/').pop() || '' : ''
+
+  const formatDueDate = (dateStr: string | null) => {
+    if (!dateStr) return null
+    const date = new Date(dateStr)
+    const now = new Date()
+    const diff = date.getTime() - now.getTime()
+    const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
+
+    if (days < 0) return { text: 'Overdue', className: 'text-red-500' }
+    if (days === 0) return { text: 'Today', className: 'text-orange-500' }
+    if (days === 1) return { text: 'Tomorrow', className: 'text-yellow-600 dark:text-yellow-400' }
+    if (days <= 7) return { text: `${days}d`, className: 'text-zinc-500 dark:text-zinc-400' }
+
+    return {
+      text: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+      className: 'text-zinc-500 dark:text-zinc-400'
+    }
+  }
+
+  const dueInfo = feature.status === 'done' ? null : formatDueDate(feature.dueDate)
+
+  const formatCompletedAt = (dateStr: string | null) => {
+    if (!dateStr) return null
+    const completed = new Date(dateStr)
+    const now = new Date()
+    const diffMs = now.getTime() - completed.getTime()
+    const diffMins = Math.floor(diffMs / (1000 * 60))
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+
+    if (diffMins < 1) return 'Just now'
+    if (diffMins < 60) return `${diffMins}m ago`
+    if (diffHours < 24) return `${diffHours}h ago`
+    if (diffDays === 1) return '1d ago'
+    if (diffDays < 30) return `${diffDays}d ago`
+    if (diffDays < 365) return `${Math.floor(diffDays / 30)}mo ago`
+    return `${Math.floor(diffDays / 365)}y ago`
+  }
+
+  const completedText = feature.status === 'done' ? formatCompletedAt(feature.completedAt) : null
+
+  return (
+    <div
+      onClick={onClick}
+      className={`group relative flex flex-col bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 ${cardSettings.compactMode ? 'p-2 min-h-[4.5rem]' : 'p-3 min-h-[7rem]'} cursor-pointer hover:shadow-md transition-shadow ${
+        isDragging ? 'shadow-lg opacity-90' : ''
+      }`}
+    >
+      {/* Title & Content */}
+      <div className="flex-1">
+        {/* File Name + Priority badge row (when fileName enabled) */}
+        {cardSettings.showFileName && fileName && (
+          <div className="flex items-center gap-1.5 mb-1">
+            <FileText size={10} className="shrink-0 text-zinc-400 dark:text-zinc-500" />
+            <span className="text-[10px] font-mono text-zinc-400 dark:text-zinc-500 truncate flex-1">
+              {fileName}
+            </span>
+            {cardSettings.showPriorityBadges && (
+              <span
+                className={`text-[10px] font-medium px-1.5 py-0.5 rounded shrink-0 ${priorityColors[feature.priority]}`}
+              >
+                {priorityLabels[feature.priority]}
+              </span>
+            )}
+          </div>
+        )}
+
+        <div className={`flex items-start gap-2 ${description ? 'mb-1' : cardSettings.compactMode ? 'mb-1' : 'mb-2'}`}>
+          <h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100 line-clamp-2 flex-1">
+            {title}
+          </h3>
+          {cardSettings.showPriorityBadges && !(cardSettings.showFileName && fileName) && (
+            <span
+              className={`text-xs font-medium px-1.5 py-0.5 rounded shrink-0 ${priorityColors[feature.priority]}`}
+            >
+              {priorityLabels[feature.priority]}
+            </span>
+          )}
+        </div>
+
+        {/* Description */}
+        {/* eslint-disable-next-line react/no-danger */}
+        {description && !cardSettings.compactMode && (
+          <div
+            className="text-xs text-zinc-500 dark:text-zinc-400 line-clamp-2 mb-2 card-inline-markdown"
+            dangerouslySetInnerHTML={{ __html: renderDescriptionHtml(description) }}
+          />
+        )}
+
+        {/* Labels */}
+        {cardSettings.showLabels && feature.labels.length > 0 && (
+          <div className="flex flex-wrap gap-1 mb-2">
+            {feature.labels.slice(0, 3).map((label) => (
+              <span
+                key={label}
+                className="text-xs px-1.5 py-0.5 rounded bg-zinc-100 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300"
+              >
+                {label}
+              </span>
+            ))}
+            {feature.labels.length > 3 && (
+              <span className="text-xs text-zinc-400">+{feature.labels.length - 3}</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between text-xs mt-auto">
+        <div className="flex items-center gap-1">
+          {cardSettings.showAssignee && feature.assignee && feature.assignee !== 'null' && (
+            <div className="flex items-center gap-1.5 text-zinc-500 dark:text-zinc-400">
+              <span className="shrink-0 w-4 h-4 rounded-full flex items-center justify-center text-[8px] font-bold bg-zinc-200 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-300">
+                {feature.assignee.split(/\s+/).map((w: string) => w[0]).join('').toUpperCase().slice(0, 2)}
+              </span>
+              <span>{feature.assignee}</span>
+            </div>
+          )}
+        </div>
+        {feature.attachments.length > 0 && (
+          <div className="flex items-center gap-1 text-zinc-400 dark:text-zinc-500">
+            <Paperclip size={12} />
+            <span>{feature.attachments.length}</span>
+          </div>
+        )}
+        {cardSettings.showDueDate && dueInfo && (
+          <div className={`flex items-center gap-1 ${dueInfo.className}`}>
+            <Calendar size={12} />
+            <span>{dueInfo.text}</span>
+          </div>
+        )}
+        {completedText && (
+          <div className="flex items-center gap-1" style={{ color: 'var(--vscode-descriptionForeground)' }}>
+            <Check size={12} />
+            <span>{completedText}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}