Commit 35711880 authored by Johnny's avatar Johnny

feat(web): add Focus Mode UI entry in Insert Menu

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
parent c8162ff3
import { LatLng } from "leaflet"; import { LatLng } from "leaflet";
import { uniqBy } from "lodash-es"; import { uniqBy } from "lodash-es";
import { FileIcon, LinkIcon, LoaderIcon, MapPinIcon, PlusIcon } from "lucide-react"; import { FileIcon, LinkIcon, LoaderIcon, MapPinIcon, Maximize2Icon, MoreHorizontalIcon, PlusIcon } from "lucide-react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Attachment } from "@/types/proto/api/v1/attachment_service"; import { Attachment } from "@/types/proto/api/v1/attachment_service";
import { Location, MemoRelation } from "@/types/proto/api/v1/memo_service"; import { Location, MemoRelation } from "@/types/proto/api/v1/memo_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
...@@ -19,6 +27,7 @@ interface Props { ...@@ -19,6 +27,7 @@ interface Props {
isUploading?: boolean; isUploading?: boolean;
location?: Location; location?: Location;
onLocationChange: (location?: Location) => void; onLocationChange: (location?: Location) => void;
onToggleFocusMode?: () => void;
} }
const InsertMenu = observer((props: Props) => { const InsertMenu = observer((props: Props) => {
...@@ -124,6 +133,20 @@ const InsertMenu = observer((props: Props) => { ...@@ -124,6 +133,20 @@ const InsertMenu = observer((props: Props) => {
<MapPinIcon className="w-4 h-4" /> <MapPinIcon className="w-4 h-4" />
{t("tooltip.select-location")} {t("tooltip.select-location")}
</DropdownMenuItem> </DropdownMenuItem>
{/* View submenu with Focus Mode */}
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<MoreHorizontalIcon className="w-4 h-4" />
{t("common.more")}
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem onClick={props.onToggleFocusMode}>
<Maximize2Icon className="w-4 h-4" />
{t("editor.focus-mode")}
<span className="ml-auto text-xs text-muted-foreground opacity-60">⌘⇧F</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
......
...@@ -591,6 +591,7 @@ const MemoEditor = observer((props: Props) => { ...@@ -591,6 +591,7 @@ const MemoEditor = observer((props: Props) => {
location, location,
})) }))
} }
onToggleFocusMode={toggleFocusMode}
/> />
</div> </div>
<div className="shrink-0 flex flex-row justify-end items-center"> <div className="shrink-0 flex flex-row justify-end items-center">
......
...@@ -102,7 +102,8 @@ ...@@ -102,7 +102,8 @@
"username": "Username", "username": "Username",
"version": "Version", "version": "Version",
"visibility": "Visibility", "visibility": "Visibility",
"yourself": "Yourself" "yourself": "Yourself",
"more": "More"
}, },
"days": { "days": {
"fri": "Fri", "fri": "Fri",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment