refactor(ui): migrate to shadcn/ui components and fix scroll issues

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>
This commit is contained in:
Auto
2026-01-26 18:25:55 +02:00
parent e45b5b064e
commit c917582a64
69 changed files with 4900 additions and 4287 deletions

View File

@@ -3,6 +3,7 @@
*/
import { MessageCircle, X } from 'lucide-react'
import { Button } from '@/components/ui/button'
interface AssistantFABProps {
onClick: () => void
@@ -11,24 +12,14 @@ interface AssistantFABProps {
export function AssistantFAB({ onClick, isOpen }: AssistantFABProps) {
return (
<button
<Button
onClick={onClick}
className={`
fixed bottom-6 right-6 z-50
w-14 h-14
flex items-center justify-center
bg-[var(--color-neo-progress)] text-[var(--color-neo-text-on-bright)]
border-3 border-[var(--color-neo-border)]
shadow-neo-md
transition-all duration-200
hover:shadow-neo-lg hover:-translate-y-0.5
active:shadow-neo-sm active:translate-y-0.5
${isOpen ? 'rotate-0' : ''}
`}
size="icon"
className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0.5"
title={isOpen ? 'Close Assistant (Press A)' : 'Open Assistant (Press A)'}
aria-label={isOpen ? 'Close Assistant' : 'Open Assistant'}
>
{isOpen ? <X size={24} /> : <MessageCircle size={24} />}
</button>
</Button>
)
}