• 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
Name
Last commit
Last update
..
public Loading commit data...
src Loading commit data...
.gitignore Loading commit data...
biome.json Loading commit data...
components.json Loading commit data...
index.html Loading commit data...
package.json Loading commit data...
pnpm-lock.yaml Loading commit data...
tsconfig.json Loading commit data...
vite.config.mts Loading commit data...