refactor(web): extract NsfwOverlay into standalone component with flexbox centering

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} />}
     </>
   );
 };