diff --git a/docs/design.md b/docs/design.md new file mode 100644 index 0000000..ed34621 --- /dev/null +++ b/docs/design.md @@ -0,0 +1,689 @@ +# UI Design Improvement Guide for YvCode + +> A comprehensive analysis and recommendations to modernize and enhance the user interface of YvCode - a lightweight code canvas for social media images. + +--- + +## ๐Ÿ“Š Current State Analysis + +### Strengths +- โœ… Clean dark theme foundation with good contrast +- โœ… Modern glassmorphism effects on the toolbar +- โœ… Well-organized component structure (TopBar, Layers, Canvas, Inspector) +- โœ… Good use of subtle borders (`border-white/5`) and backgrounds (`bg-white/5`) +- โœ… Proper iconography with consistent stroke-based SVGs +- โœ… Keyboard shortcuts implemented throughout + +### Areas for Improvement +- โš ๏ธ Limited visual hierarchy and depth +- โš ๏ธ Inconsistent spacing and component sizing +- โš ๏ธ Missing micro-interactions and animations +- โš ๏ธ Outdated form control styling +- โš ๏ธ No onboarding or empty states +- โš ๏ธ Missing visual feedback for user actions + +--- + +## ๐ŸŽจ Design System Recommendations + +### 1. Color Palette Enhancement + +**Current:** Basic neutral grays with blue accents + +**Recommended:** Expanded semantic color palette + +```css +/* Primary Colors */ +--primary-50: #eff6ff; +--primary-100: #dbeafe; +--primary-400: #60a5fa; +--primary-500: #3b82f6; +--primary-600: #2563eb; + +/* Surface Colors (for layered depth) */ +--surface-0: #09090b; /* Deepest - sidebars */ +--surface-1: #0f0f12; /* Base canvas area */ +--surface-2: #18181b; /* Elevated cards */ +--surface-3: #27272a; /* Interactive elements */ + +/* Semantic Colors */ +--success: #22c55e; +--warning: #f59e0b; +--error: #ef4444; +--info: #06b6d4; + +/* Glass Effects */ +--glass-bg: rgba(255, 255, 255, 0.03); +--glass-border: rgba(255, 255, 255, 0.06); +--glass-highlight: rgba(255, 255, 255, 0.08); +``` + +### 2. Typography Scale + +**Recommended Font System:** + +```css +/* Headings */ +--text-2xl: 1.5rem; /* Panel titles */ +--text-xl: 1.25rem; /* Section headers */ +--text-lg: 1.125rem; /* Subheadings */ + +/* Body */ +--text-base: 0.875rem; /* Default UI text */ +--text-sm: 0.8125rem; /* Secondary text */ +--text-xs: 0.75rem; /* Labels, hints */ + +/* Line Heights */ +--leading-tight: 1.25; +--leading-normal: 1.5; +--leading-relaxed: 1.75; +``` + +### 3. Spacing System + +Adopt an 8px grid system for consistent spacing: + +```css +--space-1: 4px; +--space-2: 8px; +--space-3: 12px; +--space-4: 16px; +--space-5: 20px; +--space-6: 24px; +--space-8: 32px; +--space-10: 40px; +--space-12: 48px; +``` + +--- + +## ๐Ÿงฉ Component-Specific Improvements + +### TopBar + +**Current Issues:** +- Fixed positioning with `h-16` may feel cramped +- Logo and title area lacks breathing room +- Export dropdown uses hover instead of click + +**Recommendations:** + +1. **Increase Height & Visual Weight** + ```tsx + // Change from h-16 to h-14 with better internal spacing +
+ ``` + +2. **Add Breadcrumb Navigation** + ```tsx +
+ Projects + + {snap.meta.title} +
+ ``` + +3. **Convert Export to Click-Triggered Dropdown with Animation** + - Use Radix UI or Headless UI for accessible dropdowns + - Add scale and fade animations on open/close + +4. **Add Status Indicator** + ```tsx +
+
+ Auto-saved +
+ ``` + +### Toolbar (Floating) + +**Current Issues:** +- Good glassmorphism base but could be more refined +- Tool icons lack visual distinction when inactive +- Zoom controls feel disconnected + +**Recommendations:** + +1. **Enhanced Glass Effect** + ```tsx +
+ ``` + +2. **Animated Tool Selection** + ```tsx + // Add spring animation for tool selection indicator + + ``` + +3. **Tooltips with Shortcuts** + - Add tooltips that show on hover with keyboard shortcut badges + - Use consistent tooltip styling across the app + +4. **Group Visual Separators** + - Use subtle vertical dividers with gradient fade + +### Layers Panel + +**Current Issues:** +- Minimal visual hierarchy +- Layer items lack drag handles or reordering indication +- Empty state is too plain + +**Recommendations:** + +1. **Add Drag & Drop Reordering** + - Use `@dnd-kit/sortable` for accessible drag-and-drop + - Add ghost element preview during drag + - Show insertion indicator line + +2. **Enhanced Layer Item Design** + ```tsx +
+ {/* Drag handle - visible on hover */} +
+ +
+ + {/* Layer thumbnail preview */} +
+ {/* Mini preview of element */} +
+ + {/* Content */} +
+ + {element.name} + + + {element.type} + +
+
+ ``` + +3. **Beautiful Empty State** + ```tsx +
+
+ +
+

No layers yet

+

+ Click on the canvas or use
+ C + T + A + to add elements +

+
+ ``` + +### Inspector Panel + +**Current Issues:** +- Dense information without clear sections +- Form controls need modernization +- No collapsible sections + +**Recommendations:** + +1. **Collapsible Accordion Sections** + ```tsx + + + + Appearance + + + + {/* Content */} + + + + ``` + +2. **Modern Input Fields** + ```tsx + // Enhanced number input with stepper +
+ +
+ + +
+
+ ``` + +3. **Enhanced Color Picker** + ```tsx + // Modern color picker with swatches and opacity +
+
+
+ {/* Checkerboard background for transparency */} +
+ +
+
+
+ +
+
+ + {/* Recent colors */} +
+ {recentColors.map(c => ( +
+
+ ``` + +4. **Slider with Value Display** + ```tsx +
+
+ + {value}px +
+ +
+ ``` + +### Canvas Area + +**Current Issues:** +- Basic checkered or solid background +- No visual indicators for safe zones +- Selection handles could be more refined + +**Recommendations:** + +1. **Subtle Canvas Background Pattern** + ```tsx + // Add subtle dot grid pattern to canvas workspace +
+ ``` + +2. **Enhanced Selection Handles** + ```tsx + // Modern corner handles +
+ ``` + +3. **Canvas Info Badge** + ```tsx + // Show canvas size in corner +
+ {width} ร— {height} +
+ ``` + +--- + +## โœจ Micro-Interactions & Animations + +### 1. Button Press Effects + +```tsx +// Add satisfying press feedback + +
+``` + +### 4. Preview Mode + +Full-screen distraction-free preview: + +```tsx +
+ + + {/* Canvas preview at actual size */} +
+ {/* Rendered canvas */} +
+
+``` + +--- + +## ๐Ÿ“ฑ Responsive Considerations + +### Breakpoint Strategy + +```css +/* Collapse side panels to bottom sheets on tablet */ +@media (max-width: 1024px) { + .layers-panel, + .inspector-panel { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 40vh; + border-radius: 24px 24px 0 0; + transform: translateY(calc(100% - 48px)); + transition: transform 0.3s ease; + } + + .panel-open { + transform: translateY(0); + } +} + +/* Hide panels completely on mobile - show as modals */ +@media (max-width: 768px) { + .side-panels { + display: none; + } +} +``` + +--- + +## ๐ŸŽฏ Implementation Priority + +### Phase 1: Quick Wins (1-2 days) +1. โœ… Update color palette and CSS variables +2. โœ… Enhance button/input hover states +3. โœ… Add micro-animations (scale, transitions) +4. โœ… Improve empty states + +### Phase 2: Component Polish (3-5 days) +1. ๐Ÿ”ฒ Redesign Inspector panel with collapsible sections +2. ๐Ÿ”ฒ Enhance Layers panel with drag-and-drop +3. ๐Ÿ”ฒ Modernize all form controls +4. ๐Ÿ”ฒ Add toast notifications + +### Phase 3: Advanced Features (1-2 weeks) +1. ๐Ÿ”ฒ Command palette (โŒ˜K) +2. ๐Ÿ”ฒ Onboarding tour +3. ๐Ÿ”ฒ Context menus +4. ๐Ÿ”ฒ Preview mode +5. ๐Ÿ”ฒ Responsive adaptations + +--- + +## ๐Ÿ› ๏ธ Recommended Libraries + +| Purpose | Library | Why | +|---------|---------|-----| +| Animations | `framer-motion` | Smooth, spring-based animations | +| UI Primitives | `@radix-ui/react-*` | Accessible, unstyled components | +| Drag & Drop | `@dnd-kit/core` | Modern, accessible DnD | +| Icons | `lucide-react` | Consistent, customizable icons | +| Tooltips | `@radix-ui/react-tooltip` | Accessible tooltips | +| Toasts | `sonner` | Beautiful toast notifications | +| Command Palette | `cmdk` | โŒ˜K style command menu | + +--- + +## ๐Ÿ“ Visual Reference + +### Inspiration Sources +- [Figma](https://figma.com) - Panel organization, inspector design +- [Linear](https://linear.app) - Command palette, animations +- [Raycast](https://raycast.com) - Glass effects, dark theme +- [Arc Browser](https://arc.net) - Sidebar design, animations +- [Vercel Dashboard](https://vercel.com) - Cards, buttons, clean typography + +--- + +## Summary + +The current YvCode UI has a solid foundation with its dark theme and component organization. The key improvements focus on: + +1. **Visual Polish** - Enhanced glass effects, refined colors, better shadows +2. **Interaction Design** - Micro-animations, better feedback, modern controls +3. **Information Architecture** - Collapsible sections, better empty states, contextual help +4. **Power User Features** - Command palette, keyboard shortcuts display, context menus + +Implementing these changes will transform YvCode into a professional-grade design tool that feels modern, responsive, and delightful to use. diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx index 6426f72..3bb161f 100644 --- a/src/components/TopBar.tsx +++ b/src/components/TopBar.tsx @@ -11,7 +11,9 @@ interface TopBarProps { const TopBar: React.FC = ({ stageRef }) => { const [showRecentSnaps, setShowRecentSnaps] = useState(false); + const [showExportMenu, setShowExportMenu] = useState(false); const recentButtonRef = useRef(null); + const exportButtonRef = useRef(null); const { snap, @@ -76,7 +78,9 @@ const TopBar: React.FC = ({ stageRef }) => { link.download = `${snap.meta.title || 'canvas'}.${format}`; link.href = dataUrl; link.click(); - }, [stageRef, snap.meta]); + setShowExportMenu(false); + addRecentSnap(snap); + }, [stageRef, snap, addRecentSnap]); const handleExportJSON = useCallback(() => { const json = exportSnap(); @@ -88,6 +92,7 @@ const TopBar: React.FC = ({ stageRef }) => { link.click(); URL.revokeObjectURL(url); + setShowExportMenu(false); // Save to recent snaps when exporting addRecentSnap(snap); }, [exportSnap, snap, addRecentSnap]); @@ -120,81 +125,88 @@ const TopBar: React.FC = ({ stageRef }) => { }, []); return ( -
- {/* Left section: Logo & Actions */} -
-
-
- - - -
- - YvCode - -
+ <> + {/* Overlay for closing export menu */} + {showExportMenu && ( +
setShowExportMenu(false)} + /> + )} -
- - - - {/* Recent Snaps Button */} -
+
+ {/* Left section: Logo & Actions */} +
+
+
+ + + +
+ + YvCode + +
+ +
- setShowRecentSnaps(false)} - anchorRef={recentButtonRef as React.RefObject} - /> + + +
+ + setShowRecentSnaps(false)} + anchorRef={recentButtonRef as React.RefObject} + /> +
-
- {/* Center section: Title & Tools */} -
-
+ {/* Center section: Title & Tools */} +
updateMeta({ title: e.target.value })} - className="bg-transparent text-sm font-medium text-center text-neutral-200 focus:text-white px-2 py-1 outline-none rounded hover:bg-white/5 focus:bg-white/10 transition-colors placeholder-neutral-600 w-48" + className="bg-transparent text-sm font-medium text-center text-neutral-200 focus:text-white px-3 py-1.5 outline-none rounded-md hover:bg-white/5 focus:bg-white/10 transition-colors placeholder-neutral-600 w-48 border border-transparent focus:border-white/10" placeholder="Untitled Project" /> -
- +
+
-
- {/* Right section: History & Export */} -
-
- - -
- -
- -
- + {/* Right section: History & Export */} +
+
+ + +
-
-
Format
+
+ +
- -
- + + {showExportMenu && ( +
+
+ Download Image +
+ +
+ + + +
+ +
+ +
+ Project File +
+ +
+ +
+
+ )}
-
+ ); }; diff --git a/src/index.css b/src/index.css index c9e690f..cf1295e 100644 --- a/src/index.css +++ b/src/index.css @@ -3,12 +3,6 @@ @import "tailwindcss"; -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - html, body, #root { height: 100%; width: 100%;