feat(canvas): Responsive full-screen layout and dark theme

Phase 2 of Canvas Professional Upgrade:
- Update AtomizerCanvas with Lucide icons (MessageCircle, Plug, X)
- Update CanvasView page with dark theme styling
- Replace emoji buttons with Lucide icons (ClipboardList, Download, Trash2)
- Update Setup canvas tab for full-width responsive layout
- Use calc(100vh-6rem) for proper canvas height

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-15 22:33:08 -05:00
parent 14acb52f8c
commit b6202c3f82
3 changed files with 18 additions and 16 deletions

View File

@@ -7,6 +7,7 @@ import ReactFlow, {
ReactFlowInstance,
} from 'reactflow';
import 'reactflow/dist/style.css';
import { MessageCircle, Plug, X } from 'lucide-react';
import { nodeTypes } from './nodes';
import { NodePalette } from './palette/NodePalette';
@@ -159,7 +160,7 @@ function CanvasFlow() {
}`}
title="Toggle Chat"
>
{isConnected ? '💬' : '🔌'}
{isConnected ? <MessageCircle size={18} /> : <Plug size={18} />}
</button>
<button
onClick={handleValidate}
@@ -206,7 +207,7 @@ function CanvasFlow() {
onClick={() => setShowChat(false)}
className="text-dark-400 hover:text-white transition-colors"
>
<X size={18} />
</button>
</div>
<ChatPanel