Feat/5896 | Add Focus Mode button in MemoHeader

[Moustafaa91]

Closes #5896

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds optional focus-mode support: MemoEditor accepts isFocusMode and initializes the editor state accordingly; MemoView and its context thread an optional isFocusMode through openEditor and local state; MemoHeader exposes a focus-mode button that opens the editor in focus mode.

Changes

Cohort / File(s)	Summary
MemoEditor web/src/components/MemoEditor/index.tsx, web/src/components/MemoEditor/types/components.ts	Adds optional isFocusMode?: boolean to MemoEditorProps and passes an explicit initialEditorState into EditorProvider, merging initialState and setting ui.isFocusMode from the prop when provided.
MemoView core web/src/components/MemoView/MemoView.tsx, web/src/components/MemoView/MemoViewContext.tsx	Changes MemoViewContextValue.openEditor to accept isFocusMode?: boolean; MemoView stores showEditorFocusMode from that argument, resets it on close, and forwards the prop to MemoEditor.
MemoHeader UI web/src/components/MemoView/components/MemoHeader.tsx	Adds a conditional ghost icon Button with Target icon visible when editable/non-archived; clicking it calls openEditor(true) to open the editor in focus mode.

Suggested reviewers

• boojack

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description references the linked issue #5896, providing context for the changes, though it lacks detailed explanation of implementation approach.
Linked Issues check	✅ Passed	The PR implements the requested feature to add visible focus-mode edit buttons to MemoHeader, addressing the core request in issue #5896 to expose previously buried functionality.
Out of Scope Changes check	✅ Passed	All changes are focused on implementing focus-mode button functionality. Supporting changes to MemoEditor props, MemoViewContext, and internal state management are directly necessary for this feature.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a Focus Mode button to the MemoHeader component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@web/src/components/MemoView/MemoView.tsx`:
- Around line 40-43: The openEditor callback uses Boolean(isFocusMode) which
relies on coercion; change it to an explicit equality check so only true sets
focus mode: in the openEditor function (which calls setShowEditorFocusMode and
setShowEditor) replace Boolean(isFocusMode) with isFocusMode === true to make
intent explicit and avoid accidental truthy values when openEditor is forwarded
or reassigned.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0f7c3420-d4b2-4da5-90e9-e3602e1f80b9

📥 Commits

Reviewing files that changed from the base of the PR and between 267f90a and 8c5d6ec.

📒 Files selected for processing (5)

• web/src/components/MemoEditor/index.tsx
• web/src/components/MemoEditor/types/components.ts
• web/src/components/MemoView/MemoView.tsx
• web/src/components/MemoView/MemoViewContext.tsx
• web/src/components/MemoView/components/MemoHeader.tsx