• Johnny's avatar
    feat(web): add Focus Mode for distraction-free writing · c8162ff3
    Johnny authored
    Add keyboard-activated Focus Mode to provide an immersive writing experience:
    
    Features:
    - Toggle with Cmd/Ctrl+Shift+F (matches GitHub, Google Docs)
    - Exit with Escape, toggle shortcut, button click, or backdrop click
    - Expands editor to ~80-90% of viewport with centered layout
    - Semi-transparent backdrop with blur effect
    - Maintains all editor functionality (attachments, shortcuts, etc.)
    - Smooth 300ms transitions
    
    Responsive Design:
    - Mobile (< 640px): 8px margins, 50vh min-height
    - Tablet (640-768px): 16px margins
    - Desktop (> 768px): 32px margins, 60vh min-height, 1024px max-width
    
    Implementation:
    - Centralized constants for easy maintenance (FOCUS_MODE_STYLES)
    - Extracted keyboard shortcuts and heights to named constants
    - JSDoc documentation for all new functions and interfaces
    - TypeScript type safety with 'as const'
    - Explicit positioning (top/left/right/bottom) to avoid width overflow
    
    Files Modified:
    - web/src/components/MemoEditor/index.tsx - Main Focus Mode logic
    - web/src/components/MemoEditor/Editor/index.tsx - Height adjustments
    - web/src/locales/en.json - Translation keys
    
    Design follows industry standards (GitHub Focus Mode, Notion, Obsidian)
    and maintains code quality with single source of truth pattern.
    c8162ff3
en.json 18.1 KB