• Johnny's avatar
    feat(web): add Focus Mode UI entry in Insert Menu · 35711880
    Johnny authored
    Add discoverable UI entry point for Focus Mode via Insert Menu submenu:
    
    UI Changes:
    - Add "View" submenu to Insert Menu (+ button dropdown)
    - Nested menu with Focus Mode option (ChatGPT-style pattern)
    - Display keyboard shortcut hint (⌘⇧F) next to menu item
    - Uses DropdownMenuSub components from Radix UI
    
    User Access Methods:
    1. Keyboard: Cmd/Ctrl+Shift+F (primary, power users)
    2. Mouse: + menu → View → Focus Mode (discoverable)
    3. Mobile: Touch-friendly menu access
    
    Benefits:
    - Improves discoverability for new users
    - Doesn't clutter main editor UI
    - Educates users about keyboard shortcut
    - Extensible for future view options (typewriter, reading mode, etc.)
    - Follows familiar UI patterns (ChatGPT, Notion)
    
    Files Modified:
    - web/src/components/MemoEditor/ActionButton/InsertMenu.tsx
      * Add DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent
      * Add View submenu with Focus Mode entry
      * Add onToggleFocusMode prop
    - web/src/components/MemoEditor/index.tsx
      * Pass toggleFocusMode to InsertMenu component
    - web/src/locales/en.json
      * Add "editor.view" translation key
    35711880
InsertMenu.tsx 6.51 KB