From 861b58cbf3a8bfc985c0f1aa64768ca762a971f6 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 12 Feb 2026 23:19:54 +0800
Subject: [PATCH] refactor(web): extract NsfwOverlay into standalone component
 with flexbox centering

---
 .../MemoView/components/MemoBody.tsx          | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/src/components/MemoView/components/MemoBody.tsx b/web/src/components/MemoView/components/MemoBody.tsx
index 66c92fc4f..8847ddf0a 100644
--- a/web/src/components/MemoView/components/MemoBody.tsx
+++ b/web/src/components/MemoView/components/MemoBody.tsx
@@ -7,9 +7,21 @@ import { useMemoViewContext } from "../MemoViewContext";
 import type { MemoBodyProps } from "../types";
 import { AttachmentList, LocationDisplay, RelationList } from "./metadata";
 
-const MemoBody: React.FC<MemoBodyProps> = ({ compact, onContentClick, onContentDoubleClick, onToggleNsfwVisibility }) => {
+const NsfwOverlay: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
   const t = useTranslate();
+  return (
+    <div className="absolute inset-0 z-10 pt-4 flex items-center justify-center" onClick={onClick}>
+      <button
+        type="button"
+        className="rounded-lg border border-border bg-card px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:bg-accent hover:text-foreground"
+      >
+        {t("memo.click-to-show-nsfw-content")}
+      </button>
+    </div>
+  );
+};
 
+const MemoBody: React.FC<MemoBodyProps> = ({ compact, onContentClick, onContentDoubleClick, onToggleNsfwVisibility }) => {
   const { memo, parentPage, showNSFWContent, nsfw } = useMemoViewContext();
 
   const referencedMemos = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
@@ -35,19 +47,7 @@ const MemoBody: React.FC<MemoBodyProps> = ({ compact, onContentClick, onContentD
         <MemoReactionListView memo={memo} reactions={memo.reactions} />
       </div>
 
-      {/* NSFW content overlay */}
-      {nsfw && !showNSFWContent && (
-        <>
-          <div className="absolute inset-0 bg-transparent" />
-          <button
-            type="button"
-            className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 py-2 px-4 text-sm text-muted-foreground hover:text-foreground hover:bg-accent hover:border-accent border border-border rounded-lg bg-card transition-colors"
-            onClick={onToggleNsfwVisibility}
-          >
-            {t("memo.click-to-show-nsfw-content")}
-          </button>
-        </>
-      )}
+      {nsfw && !showNSFWContent && <NsfwOverlay onClick={onToggleNsfwVisibility} />}
     </>
   );
 };