mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-30 06:12:06 +00:00
c917582a64
Migrate UI component library from custom implementations to shadcn/ui: - Add shadcn/ui primitives (Button, Card, Dialog, Input, etc.) - Replace custom styles with Tailwind CSS v4 theme configuration - Remove custom-theme.css in favor of globals.css with @theme directive Fix scroll overflow issues in multiple components: - ProjectSelector: "New Project" button no longer overlays project list - FolderBrowser: folder list now scrolls properly within modal - AgentCard: log modal content stays within bounds - ConversationHistory: conversation list scrolls correctly - KanbanColumn: feature cards scroll within fixed height - ScheduleModal: schedule form content scrolls properly Key technical changes: - Replace ScrollArea component with native overflow-y-auto divs - Add min-h-0 to flex containers to allow proper shrinking - Restructure dropdown layouts with flex-col for fixed footers New files: - ui/components.json (shadcn/ui configuration) - ui/src/components/ui/* (20 UI primitive components) - ui/src/lib/utils.ts (cn utility for class merging) - ui/tsconfig.app.json (app-specific TypeScript config) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
import { useEffect, useCallback } from 'react'
|
|
import { Keyboard } from 'lucide-react'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
interface Shortcut {
|
|
key: string
|
|
description: string
|
|
context?: string
|
|
}
|
|
|
|
const shortcuts: Shortcut[] = [
|
|
{ key: '?', description: 'Show keyboard shortcuts' },
|
|
{ key: 'D', description: 'Toggle debug panel' },
|
|
{ key: 'T', description: 'Toggle terminal tab' },
|
|
{ key: 'N', description: 'Add new feature', context: 'with project' },
|
|
{ key: 'E', description: 'Expand project with AI', context: 'with features' },
|
|
{ key: 'A', description: 'Toggle AI assistant', context: 'with project' },
|
|
{ key: 'G', description: 'Toggle Kanban/Graph view', context: 'with project' },
|
|
{ key: ',', description: 'Open settings' },
|
|
{ key: 'Esc', description: 'Close modal/panel' },
|
|
]
|
|
|
|
interface KeyboardShortcutsHelpProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export function KeyboardShortcutsHelp({ isOpen, onClose }: KeyboardShortcutsHelpProps) {
|
|
const handleKeyDown = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
if (e.key === 'Escape' || e.key === '?') {
|
|
e.preventDefault()
|
|
onClose()
|
|
}
|
|
},
|
|
[onClose]
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
window.addEventListener('keydown', handleKeyDown)
|
|
return () => window.removeEventListener('keydown', handleKeyDown)
|
|
}
|
|
}, [isOpen, handleKeyDown])
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Keyboard size={20} className="text-primary" />
|
|
Keyboard Shortcuts
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{/* Shortcuts list */}
|
|
<ul className="space-y-1">
|
|
{shortcuts.map((shortcut) => (
|
|
<li
|
|
key={shortcut.key}
|
|
className="flex items-center justify-between py-2 border-b border-border/50 last:border-0"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<kbd className="px-2 py-1 text-xs font-mono bg-muted rounded border border-border min-w-[2rem] text-center">
|
|
{shortcut.key}
|
|
</kbd>
|
|
<span className="text-sm">{shortcut.description}</span>
|
|
</div>
|
|
{shortcut.context && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
{shortcut.context}
|
|
</Badge>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Footer */}
|
|
<p className="text-xs text-muted-foreground text-center pt-2">
|
|
Press ? or Esc to close
|
|
</p>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|