Feat/5896 | Add Focus Mode button in MemoHeader

web/src/components/MemoEditor/index.tsx

@@ -25,6 +25,7 @@ import type { EditorRefActions } from "./Editor";
 import { useAudioRecorder, useAutoSave, useFocusMode, useKeyboard, useMemoInit } from "./hooks";
 import { errorService, memoService, transcriptionService, validationService } from "./services";
 import { EditorProvider, useEditorContext } from "./state";
+import { initialState } from "./state/types";
 import type { MemoEditorProps } from "./types";
 import type { LocalFile } from "./types/attachment";
 
@@ -34,7 +35,15 @@ const TRANSCRIPTION_PROVIDER_TYPES: InstanceSetting_AIProviderType[] = [
 ];
 
 const MemoEditor = (props: MemoEditorProps) => (
-  <EditorProvider>
+  <EditorProvider
+    initialEditorState={{
+      ...initialState,
+      ui: {
+        ...initialState.ui,
+        isFocusMode: props.isFocusMode ?? initialState.ui.isFocusMode,
+      },
+    }}
+  >
     <MemoEditorImpl {...props} />
   </EditorProvider>
 );

web/src/components/MemoEditor/types/components.ts

@@ -11,6 +11,7 @@ export interface MemoEditorProps {
   memo?: Memo;
   parentMemoName?: string;
   autoFocus?: boolean;
+  isFocusMode?: boolean;
   onConfirm?: (memoName: string) => void;
   onCancel?: () => void;
 }

web/src/components/MemoView/MemoView.tsx

@@ -20,6 +20,7 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
   const { memo: memoData, className, parentPage: parentPageProp, compact, showCreator, showVisibility, showPinned } = props;
   const cardRef = useRef<HTMLDivElement>(null);
   const [showEditor, setShowEditor] = useState(false);
+  const [showEditorFocusMode, setShowEditorFocusMode] = useState(false);
   const [cardWidth, setCardWidth] = useState(0);
 
   const currentUser = useCurrentUser();
@@ -36,8 +37,14 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
 
   const { previewState, openPreview, setPreviewOpen } = useImagePreview();
 
-  const openEditor = useCallback(() => setShowEditor(true), []);
-  const closeEditor = useCallback(() => setShowEditor(false), []);
+  const openEditor = useCallback((isFocusMode?: boolean) => {
+    setShowEditorFocusMode(isFocusMode === true);
+    setShowEditor(true);
+  }, []);
+  const closeEditor = useCallback(() => {
+    setShowEditor(false);
+    setShowEditorFocusMode(false);
+  }, []);
 
   const location = useLocation();
   const isInMemoDetailPage = location.pathname.startsWith(`/${memoData.name}`) || location.pathname.startsWith("/memos/shares/");
@@ -109,6 +116,7 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
         cacheKey={`inline-memo-editor-${memoData.name}`}
         memo={memoData}
         parentMemoName={memoData.parent || undefined}
+        isFocusMode={showEditorFocusMode}
         onConfirm={closeEditor}
         onCancel={closeEditor}
       />

web/src/components/MemoView/MemoViewContext.tsx

@@ -18,7 +18,7 @@ export interface MemoViewContextValue {
   readonly: boolean;
   showBlurredContent: boolean;
   blurred: boolean;
-  openEditor: () => void;
+  openEditor: (isFocusMode?: boolean) => void;
   toggleBlurVisibility: () => void;
   openPreview: (items: string | string[] | PreviewMediaItem[], index?: number) => void;
 }

web/src/components/MemoView/components/MemoHeader.tsx

@@ -1,6 +1,7 @@
-import { BookmarkIcon } from "lucide-react";
+import { BookmarkIcon, Target } from "lucide-react";
 import { useCallback, useState } from "react";
 import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import i18n from "@/i18n";
@@ -95,6 +96,18 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({ showCreator, showVisibility, sh
           </TooltipProvider>
         )}
 
+        {!readonly && !isArchived && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="shadow-none"
+            aria-label={t("editor.focus-mode")}
+            title={t("editor.focus-mode")}
+            onClick={() => openEditor(true)}
+          >
+            <Target className="w-4 h-4" />
+          </Button>
+        )}
         <MemoActionMenu memo={memo} readonly={readonly} onEdit={openEditor} />
       </div>
     </div>