From ca84241b8a04f591092b211d2f16803d4af99305 Mon Sep 17 00:00:00 2001
From: Johnny <yourselfhosted@gmail.com>
Date: Tue, 23 Dec 2025 19:18:24 +0800
Subject: [PATCH] fix(MemoEditor): restore focus mode styles

- Import and use FOCUS_MODE_STYLES from constants
- Apply proper fixed positioning, shadow, and spacing in focus mode
- Add transition animation for smooth mode switching
- Replace empty 'focus-mode' class with actual Tailwind utilities
---
 web/src/components/MemoEditor/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 1cf2b7125..14d01cb54 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -5,6 +5,7 @@ import useCurrentUser from "@/hooks/useCurrentUser";
 import { cn } from "@/lib/utils";
 import { useTranslate } from "@/utils/i18n";
 import { EditorContent, EditorMetadata, EditorToolbar, FocusModeOverlay } from "./components";
+import { FOCUS_MODE_STYLES } from "./constants";
 import type { EditorRefActions } from "./Editor";
 import { useAutoSave, useKeyboard, useMemoInit } from "./hooks";
 import { cacheService, errorService, memoService, validationService } from "./services";
@@ -125,7 +126,8 @@ const MemoEditorImpl: React.FC<Props> = ({
       <div
         className={cn(
           "group relative w-full flex flex-col justify-start items-start bg-card px-4 pt-3 pb-2 rounded-lg border border-border",
-          state.ui.isFocusMode && "focus-mode",
+          FOCUS_MODE_STYLES.transition,
+          state.ui.isFocusMode && cn(FOCUS_MODE_STYLES.container.base, FOCUS_MODE_STYLES.container.spacing),
           className,
         )}
       >