mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-02-02 15:23:37 +00:00
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
@@ -10,6 +10,8 @@ import { MessageSquare, Trash2, Loader2, AlertCircle } from 'lucide-react'
|
||||
import { useConversations, useDeleteConversation } from '../hooks/useConversations'
|
||||
import { ConfirmDialog } from './ConfirmDialog'
|
||||
import type { AssistantConversation } from '../lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
|
||||
interface ConversationHistoryProps {
|
||||
projectName: string
|
||||
@@ -116,78 +118,73 @@ export function ConversationHistory({
|
||||
/>
|
||||
|
||||
{/* Dropdown */}
|
||||
<div
|
||||
className="absolute top-full left-0 mt-2 neo-dropdown z-50 w-[320px] max-w-[calc(100vw-2rem)]"
|
||||
style={{ boxShadow: 'var(--shadow-neo)' }}
|
||||
>
|
||||
<Card className="absolute top-full left-0 mt-2 z-50 w-[320px] max-w-[calc(100vw-2rem)] shadow-lg">
|
||||
{/* Header */}
|
||||
<div className="px-3 py-2 border-b-2 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
|
||||
<CardHeader className="p-3 border-b border-border">
|
||||
<h3 className="font-bold text-sm">Conversation History</h3>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{/* Content */}
|
||||
{isLoading ? (
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<Loader2 size={20} className="animate-spin text-[var(--color-neo-text-secondary)]" />
|
||||
</div>
|
||||
) : !conversations || conversations.length === 0 ? (
|
||||
<div className="p-4 text-center text-[var(--color-neo-text-secondary)] text-sm">
|
||||
No conversations yet
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-[300px] overflow-auto">
|
||||
{conversations.map((conversation) => {
|
||||
const isCurrent = conversation.id === currentConversationId
|
||||
<CardContent className="p-0">
|
||||
{isLoading ? (
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : !conversations || conversations.length === 0 ? (
|
||||
<div className="p-4 text-center text-muted-foreground text-sm">
|
||||
No conversations yet
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-[300px] overflow-y-auto">
|
||||
{conversations.map((conversation) => {
|
||||
const isCurrent = conversation.id === currentConversationId
|
||||
|
||||
return (
|
||||
<div
|
||||
key={conversation.id}
|
||||
className={`flex items-center group ${
|
||||
isCurrent
|
||||
? 'bg-[var(--color-neo-pending)] text-[var(--color-neo-text-on-bright)]'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => handleSelectConversation(conversation.id)}
|
||||
className="flex-1 neo-dropdown-item text-left"
|
||||
disabled={isCurrent}
|
||||
return (
|
||||
<div
|
||||
key={conversation.id}
|
||||
className={`flex items-center group ${
|
||||
isCurrent ? 'bg-primary/10' : 'hover:bg-muted'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<MessageSquare size={16} className="mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium truncate">
|
||||
{conversation.title || 'Untitled conversation'}
|
||||
</div>
|
||||
<div className={`text-xs flex items-center gap-2 ${
|
||||
isCurrent
|
||||
? 'text-[var(--color-neo-text-on-bright)] opacity-80'
|
||||
: 'text-[var(--color-neo-text-secondary)]'
|
||||
}`}>
|
||||
<span>{conversation.message_count} messages</span>
|
||||
<span>|</span>
|
||||
<span>{formatRelativeTime(conversation.updated_at)}</span>
|
||||
<button
|
||||
onClick={() => handleSelectConversation(conversation.id)}
|
||||
className="flex-1 px-3 py-2 text-left"
|
||||
disabled={isCurrent}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<MessageSquare size={16} className="mt-0.5 flex-shrink-0 text-muted-foreground" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium truncate text-foreground">
|
||||
{conversation.title || 'Untitled conversation'}
|
||||
</div>
|
||||
<div className="text-xs flex items-center gap-2 text-muted-foreground">
|
||||
<span>{conversation.message_count} messages</span>
|
||||
<span>|</span>
|
||||
<span>{formatRelativeTime(conversation.updated_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => handleDeleteClick(e, conversation)}
|
||||
className={`p-2 mr-2 transition-colors rounded ${
|
||||
isCurrent
|
||||
? 'text-[var(--color-neo-text-on-bright)] opacity-60 hover:opacity-100 hover:bg-[var(--color-neo-danger)]/20'
|
||||
: 'text-[var(--color-neo-text-secondary)] opacity-0 group-hover:opacity-100 hover:text-[var(--color-neo-danger)] hover:bg-[var(--color-neo-danger)]/10'
|
||||
}`}
|
||||
title="Delete conversation"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => handleDeleteClick(e, conversation)}
|
||||
className={`h-8 w-8 mr-2 ${
|
||||
isCurrent
|
||||
? 'opacity-60 hover:opacity-100'
|
||||
: 'opacity-0 group-hover:opacity-100'
|
||||
} hover:text-destructive hover:bg-destructive/10`}
|
||||
title="Delete conversation"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<ConfirmDialog
|
||||
@@ -197,7 +194,7 @@ export function ConversationHistory({
|
||||
deleteError ? (
|
||||
<div className="space-y-3">
|
||||
<p>{`Are you sure you want to delete "${conversationToDelete?.title || 'this conversation'}"? This action cannot be undone.`}</p>
|
||||
<div className="flex items-center gap-2 p-2 bg-[var(--color-neo-danger)]/10 border border-[var(--color-neo-danger)] rounded text-sm text-[var(--color-neo-danger)]">
|
||||
<div className="flex items-center gap-2 p-2 bg-destructive/10 border border-destructive rounded text-sm text-destructive">
|
||||
<AlertCircle size={16} className="flex-shrink-0" />
|
||||
<span>{deleteError}</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user