@startsimpli/ui 0.4.5 → 0.4.7

package/src/components/command-palette/CommandPalette.tsx

@@ -0,0 +1,344 @@
+'use client'
+
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Search, ArrowRight } from 'lucide-react'
+import { useCommandPalette } from './command-palette-context'
+
+export interface SearchResult {
+  id: string
+  type: string
+  name: string
+  detail: string
+  path: string
+}
+
+export interface QuickAction {
+  id: string
+  icon: React.ElementType
+  name: string
+  shortcut?: string
+  action: () => void
+}
+
+export interface NavigationItem {
+  id: string
+  icon: React.ElementType
+  name: string
+  path: string
+}
+
+export interface CommandPaletteProps {
+  searchFn?: (query: string) => Promise<SearchResult[]>
+  quickActions?: QuickAction[]
+  navigationItems?: NavigationItem[]
+  recentItems?: SearchResult[]
+  typeIcons?: Record<string, React.ElementType>
+  typeColors?: Record<string, string>
+  placeholder?: string
+  onNavigate: (path: string) => void
+}
+
+export function CommandPalette({
+  searchFn,
+  quickActions = [],
+  navigationItems = [],
+  recentItems = [],
+  typeIcons = {},
+  typeColors = {},
+  placeholder = 'Search or type a command...',
+  onNavigate,
+}: CommandPaletteProps) {
+  const { isOpen, close } = useCommandPalette()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [query, setQuery] = useState('')
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [results, setResults] = useState<SearchResult[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+
+  // Calculate all items for keyboard navigation
+  const filteredNav = query
+    ? navigationItems.filter(n => n.name.toLowerCase().includes(query.toLowerCase()))
+    : []
+
+  const allItems = [
+    ...results.map(r => ({ ...r, itemType: 'result' as const })),
+    ...quickActions.map(a => ({ ...a, itemType: 'action' as const })),
+    ...(!query ? recentItems.slice(0, 5).map(r => ({ ...r, itemType: 'recent' as const })) : []),
+    ...filteredNav.map(n => ({ ...n, itemType: 'nav' as const })),
+  ]
+
+  // Focus input when opened
+  useEffect(() => {
+    if (isOpen) {
+      setQuery('')
+      setSelectedIndex(0)
+      setResults([])
+      setTimeout(() => inputRef.current?.focus(), 0)
+    }
+  }, [isOpen])
+
+  // Search debounce
+  useEffect(() => {
+    if (!query.trim() || !searchFn) {
+      setResults([])
+      return
+    }
+
+    const timer = setTimeout(async () => {
+      setIsLoading(true)
+      try {
+        const data = await searchFn(query)
+        setResults(data)
+      } catch (error) {
+        console.error('Search error:', error)
+        setResults([])
+      } finally {
+        setIsLoading(false)
+      }
+    }, 200)
+
+    return () => clearTimeout(timer)
+  }, [query, searchFn])
+
+  // Keyboard navigation
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIndex(prev => Math.min(prev + 1, allItems.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIndex(prev => Math.max(prev - 1, 0))
+    } else if (e.key === 'Enter' && allItems[selectedIndex]) {
+      e.preventDefault()
+      const item = allItems[selectedIndex]
+      if (item.itemType === 'action') {
+        (item as unknown as QuickAction).action()
+      } else if ('path' in item) {
+        onNavigate(item.path)
+      }
+      close()
+    }
+  }, [allItems, selectedIndex, onNavigate, close])
+
+  // Reset selection when results change
+  useEffect(() => {
+    setSelectedIndex(0)
+  }, [results])
+
+  if (!isOpen) return null
+
+  const DefaultIcon = Search
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center pt-20"
+      onClick={close}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm pointer-events-none" />
+
+      {/* Palette */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        className="relative w-full max-w-xl bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden"
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-200">
+          <Search className="w-5 h-5 text-gray-400" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            className="flex-1 outline-none text-lg bg-transparent"
+          />
+          <kbd className="px-2 py-1 bg-gray-100 text-gray-500 text-xs rounded">ESC</kbd>
+        </div>
+
+        {/* Results */}
+        <div role="listbox" aria-label="Search results" className="max-h-96 overflow-y-auto">
+          {/* Search Results */}
+          {query && results.length > 0 && (
+            <>
+              <div className="px-3 py-2">
+                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Results for &quot;{query}&quot;
+                </p>
+              </div>
+              {results.map((result, i) => {
+                const Icon = typeIcons[result.type] || DefaultIcon
+                const colorClass = typeColors[result.type] || 'bg-gray-100 text-gray-600'
+                const itemIndex = i
+
+                return (
+                  <div
+                    key={result.id}
+                    role="option"
+                    aria-selected={selectedIndex === itemIndex}
+                    className={`flex items-center gap-3 px-4 py-3 cursor-pointer ${
+                      selectedIndex === itemIndex ? 'bg-blue-50' : 'hover:bg-gray-50'
+                    }`}
+                    onClick={() => {
+                      onNavigate(result.path)
+                      close()
+                    }}
+                  >
+                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${colorClass}`}>
+                      <Icon className="w-4 h-4" />
+                    </div>
+                    <div className="flex-1">
+                      <p className="font-medium text-gray-900">{result.name}</p>
+                      <p className="text-sm text-gray-500">{result.detail}</p>
+                    </div>
+                    <ArrowRight className="w-4 h-4 text-gray-400" />
+                  </div>
+                )
+              })}
+            </>
+          )}
+
+          {/* Loading state */}
+          {isLoading && (
+            <div className="px-4 py-3 text-gray-500 text-sm">
+              Searching...
+            </div>
+          )}
+
+          {/* No results */}
+          {query && !isLoading && results.length === 0 && (
+            <div className="px-4 py-3 text-gray-500 text-sm">
+              No results found for &quot;{query}&quot;
+            </div>
+          )}
+
+          {/* Quick Actions */}
+          {quickActions.length > 0 && (
+            <>
+              <div className="px-3 py-2 border-t border-gray-100">
+                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Quick Actions
+                </p>
+              </div>
+              {quickActions.map((action, i) => {
+                const itemIndex = results.length + i
+                return (
+                  <div
+                    key={action.id}
+                    role="option"
+                    aria-selected={selectedIndex === itemIndex}
+                    className={`flex items-center gap-3 px-4 py-3 cursor-pointer ${
+                      selectedIndex === itemIndex ? 'bg-blue-50' : 'hover:bg-gray-50'
+                    }`}
+                    onClick={() => {
+                      action.action()
+                      close()
+                    }}
+                  >
+                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
+                      <action.icon className="w-4 h-4 text-gray-600" />
+                    </div>
+                    <p className="flex-1 font-medium text-gray-700">{action.name}</p>
+                    {action.shortcut && (
+                      <kbd className="px-2 py-1 bg-gray-100 text-gray-500 text-xs rounded font-mono">
+                        {action.shortcut}
+                      </kbd>
+                    )}
+                  </div>
+                )
+              })}
+            </>
+          )}
+
+          {/* Recent Items (when no query) */}
+          {!query && recentItems.length > 0 && (
+            <>
+              <div className="px-3 py-2 border-t border-gray-100">
+                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Recent
+                </p>
+              </div>
+              {recentItems.slice(0, 5).map((item, i) => {
+                const Icon = typeIcons[item.type] || DefaultIcon
+                const itemIndex = results.length + quickActions.length + i
+
+                return (
+                  <div
+                    key={item.id}
+                    role="option"
+                    aria-selected={selectedIndex === itemIndex}
+                    className={`flex items-center gap-3 px-4 py-3 cursor-pointer ${
+                      selectedIndex === itemIndex ? 'bg-blue-50' : 'hover:bg-gray-50'
+                    }`}
+                    onClick={() => {
+                      onNavigate(item.path)
+                      close()
+                    }}
+                  >
+                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
+                      <Icon className="w-4 h-4 text-gray-600" />
+                    </div>
+                    <div className="flex-1">
+                      <p className="font-medium text-gray-700">{item.name}</p>
+                      <p className="text-sm text-gray-500">{item.detail}</p>
+                    </div>
+                    <ArrowRight className="w-4 h-4 text-gray-400" />
+                  </div>
+                )
+              })}
+            </>
+          )}
+
+          {/* Filtered Navigation (when query matches) */}
+          {filteredNav.length > 0 && (
+            <>
+              <div className="px-3 py-2 border-t border-gray-100">
+                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Go to
+                </p>
+              </div>
+              {filteredNav.map((navItem, i) => {
+                const itemIndex = results.length + quickActions.length + i
+
+                return (
+                  <div
+                    key={navItem.id}
+                    role="option"
+                    aria-selected={selectedIndex === itemIndex}
+                    className={`flex items-center gap-3 px-4 py-3 cursor-pointer ${
+                      selectedIndex === itemIndex ? 'bg-blue-50' : 'hover:bg-gray-50'
+                    }`}
+                    onClick={() => {
+                      onNavigate(navItem.path)
+                      close()
+                    }}
+                  >
+                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
+                      <navItem.icon className="w-4 h-4 text-gray-600" />
+                    </div>
+                    <p className="flex-1 font-medium text-gray-700">{navItem.name}</p>
+                    <ArrowRight className="w-4 h-4 text-gray-400" />
+                  </div>
+                )
+              })}
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-500">
+          <div className="flex items-center gap-4">
+            <span><kbd className="px-1.5 py-0.5 bg-white border rounded">&uarr;&darr;</kbd> Navigate</span>
+            <span><kbd className="px-1.5 py-0.5 bg-white border rounded">&crarr;</kbd> Select</span>
+            <span><kbd className="px-1.5 py-0.5 bg-white border rounded">ESC</kbd> Close</span>
+          </div>
+          <span>Press <kbd className="px-1.5 py-0.5 bg-white border rounded">&amp;#8984;K</kbd> anywhere</span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/command-palette/command-palette-context.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { createContext, useContext, useState, useCallback, useEffect, ReactNode } from 'react'
+
+interface CommandPaletteContextType {
+  isOpen: boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+const CommandPaletteContext = createContext<CommandPaletteContextType | undefined>(undefined)
+
+export function CommandPaletteProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const open = useCallback(() => setIsOpen(true), [])
+  const close = useCallback(() => setIsOpen(false), [])
+  const toggle = useCallback(() => setIsOpen(prev => !prev), [])
+
+  // Global keyboard shortcut: CMD+K / Ctrl+K
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        toggle()
+      }
+      if (e.key === 'Escape' && isOpen) {
+        e.preventDefault()
+        close()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, toggle, close])
+
+  return (
+    <CommandPaletteContext.Provider value={{ isOpen, open, close, toggle }}>
+      {children}
+    </CommandPaletteContext.Provider>
+  )
+}
+
+export function useCommandPalette() {
+  const context = useContext(CommandPaletteContext)
+  if (!context) {
+    throw new Error('useCommandPalette must be used within a CommandPaletteProvider')
+  }
+  return context
+}

package/src/components/command-palette/index.ts

@@ -0,0 +1,3 @@
+export { CommandPalette } from './CommandPalette'
+export type { CommandPaletteProps, SearchResult, QuickAction, NavigationItem } from './CommandPalette'
+export { CommandPaletteProvider, useCommandPalette } from './command-palette-context'

package/src/components/compose/compose-header.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { Button } from '../ui/button'
+import { ArrowLeft, Save, Eye, Send } from 'lucide-react'
+import { SaveStatusIndicator } from './save-status-indicator'
+
+interface ComposeHeaderProps {
+  title: string
+  saving: boolean
+  lastSavedLabel: string | null
+  hasUnsavedChanges: boolean
+  canSend: boolean
+  onBack: () => void
+  onSave: () => void
+  onPreview: () => void
+  onSend: () => void
+  extraActions?: ReactNode
+}
+
+export function ComposeHeader({
+  title,
+  saving,
+  lastSavedLabel,
+  hasUnsavedChanges,
+  canSend,
+  onBack,
+  onSave,
+  onPreview,
+  onSend,
+  extraActions,
+}: ComposeHeaderProps) {
+  return (
+    <div className="flex items-center justify-between px-4 py-2 border-b bg-background">
+      <div className="flex items-center gap-3 min-w-0">
+        <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={onBack}>
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+        <span className="text-sm font-medium truncate">{title}</span>
+        <SaveStatusIndicator
+          saving={saving}
+          lastSavedLabel={lastSavedLabel}
+          hasUnsavedChanges={hasUnsavedChanges}
+        />
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onSave}
+          disabled={saving}
+        >
+          <Save className="mr-1.5 h-3.5 w-3.5" />
+          Save
+        </Button>
+        <Button variant="outline" size="sm" onClick={onPreview}>
+          <Eye className="mr-1.5 h-3.5 w-3.5" />
+          Preview
+        </Button>
+        {extraActions}
+        <Button
+          size="sm"
+          disabled={!canSend}
+          onClick={onSend}
+        >
+          <Send className="mr-1.5 h-3.5 w-3.5" />
+          Send
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/compose/compose-loading.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+export function ComposeLoading() {
+  return (
+    <div className="p-6">
+      <div className="animate-pulse">
+        <div className="h-8 bg-gray-300 rounded w-1/4 mb-6"></div>
+        <div className="h-12 bg-gray-200 rounded mb-4"></div>
+        <div className="h-64 bg-gray-200 rounded"></div>
+      </div>
+    </div>
+  )
+}

package/src/components/compose/index.ts

@@ -0,0 +1,6 @@
+export { useAutoSave } from './useAutoSave'
+export { SaveStatusIndicator } from './save-status-indicator'
+export { ComposeHeader } from './compose-header'
+export { SendConfirmationDialog } from './send-confirmation-dialog'
+export { SubjectInput } from './subject-input'
+export { ComposeLoading } from './compose-loading'

package/src/components/compose/save-status-indicator.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { Loader2 } from 'lucide-react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../ui/tooltip'
+
+interface SaveStatusIndicatorProps {
+  saving: boolean
+  lastSavedLabel: string | null
+  hasUnsavedChanges: boolean
+}
+
+export function SaveStatusIndicator({
+  saving,
+  lastSavedLabel,
+  hasUnsavedChanges,
+}: SaveStatusIndicatorProps) {
+  const label = saving
+    ? 'Saving...'
+    : lastSavedLabel
+      ? `Saved ${lastSavedLabel}`
+      : hasUnsavedChanges
+        ? 'Unsaved changes'
+        : 'New draft'
+
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground cursor-default">
+            {saving ? (
+              <Loader2 className="h-2.5 w-2.5 animate-spin" />
+            ) : (
+              <span
+                className={`inline-block h-2 w-2 rounded-full ${
+                  hasUnsavedChanges
+                    ? 'bg-amber-400'
+                    : lastSavedLabel
+                      ? 'bg-green-500'
+                      : 'border border-muted-foreground'
+                }`}
+              />
+            )}
+            {label}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p className="text-xs">{label}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

package/src/components/compose/send-confirmation-dialog.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { Button } from '../ui/button'
+import { Send, Loader2, Clock } from 'lucide-react'
+
+interface SendSummaryItem {
+  label: string
+  value: string
+}
+
+interface SendConfirmationDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+  sending: boolean
+  title?: string
+  description?: string
+  summaryItems: SendSummaryItem[]
+  warningMessage?: string
+}
+
+export function SendConfirmationDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  sending,
+  title = 'Send Update',
+  description = 'Are you ready to send this?',
+  summaryItems,
+  warningMessage = 'Emails will be sent immediately. Each recipient will receive a personalized version with their information.',
+}: SendConfirmationDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="p-4 bg-muted rounded-lg space-y-2">
+            {summaryItems.map((item) => (
+              <div key={item.label} className="flex justify-between text-sm">
+                <span className="text-muted-foreground">{item.label}:</span>
+                <span className="font-medium">{item.value}</span>
+              </div>
+            ))}
+          </div>
+
+          {warningMessage && (
+            <div className="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-800">
+              <Clock className="h-4 w-4 mt-0.5 flex-shrink-0" />
+              <p className="text-sm">{warningMessage}</p>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={sending}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} disabled={sending}>
+            {sending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Sending...
+              </>
+            ) : (
+              <>
+                <Send className="mr-2 h-4 w-4" />
+                Send Now
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/compose/subject-input.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { Input } from '../ui/input'
+
+interface SubjectInputProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+}
+
+export function SubjectInput({
+  value,
+  onChange,
+  placeholder = 'Subject line...',
+}: SubjectInputProps) {
+  return (
+    <Input
+      id="subject"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className="border-0 shadow-none focus-visible:ring-0 text-lg font-medium px-0 h-auto py-0"
+    />
+  )
+}