From df6bb663c1fd033714af6d14e00307f57005ea5b Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Tue, 14 Jul 2026 16:54:26 +0800
Subject: [PATCH] refactor(chat): reuse fullscreen back button

---
 .../__tests__/tailwind-components.test.tsx          |  9 +++++++++
 src/app/_components/back-button.tsx                 |  3 ++-
 src/app/chat/components/fullscreen-image-viewer.tsx | 13 +++++++------
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/app/_components/__tests__/tailwind-components.test.tsx b/src/app/_components/__tests__/tailwind-components.test.tsx
index a217d314..94f8829c 100644
--- a/src/app/_components/__tests__/tailwind-components.test.tsx
+++ b/src/app/_components/__tests__/tailwind-components.test.tsx
@@ -21,6 +21,13 @@ describe("shared Tailwind components", () => {
         analyticsKey="chat.back_to_home"
       />,
     );
+    const unstyledHtml = renderToStaticMarkup(
+      <BackButton
+        onClick={() => undefined}
+        variant="unstyled"
+        className="custom-back"
+      />,
+    );
 
     expect(linkHtml).toContain('href="/chat"');
     expect(linkHtml).toContain('aria-label="Back to chat"');
@@ -35,6 +42,8 @@ describe("shared Tailwind components", () => {
     expect(darkHtml).toContain('data-analytics-key="chat.back_to_home"');
     expect(darkHtml).toContain("bg-[rgba(13,11,20,0.7)]");
     expect(darkHtml).toContain("text-white");
+    expect(unstyledHtml).toContain("custom-back");
+    expect(unstyledHtml).not.toContain("size-8");
   });
 
   it("renders CharacterAvatar with dynamic sizing and image utilities", () => {
diff --git a/src/app/_components/back-button.tsx b/src/app/_components/back-button.tsx
index 613c0567..de608b3b 100644
--- a/src/app/_components/back-button.tsx
+++ b/src/app/_components/back-button.tsx
@@ -8,7 +8,7 @@ interface BackButtonBaseProps {
   ariaLabel?: string;
   analyticsKey?: string;
   iconSize?: number;
-  variant?: "floating" | "soft" | "ghost" | "dark";
+  variant?: "floating" | "soft" | "ghost" | "dark" | "unstyled";
 }
 
 type BackButtonLinkProps = BackButtonBaseProps & {
@@ -35,6 +35,7 @@ const VARIANT_CLASS_NAMES = {
     "size-8 bg-transparent text-black hover:opacity-70 active:scale-96",
   dark:
     "size-(--responsive-icon-button-size,42px) border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-white shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md hover:bg-[rgba(28,24,39,0.82)] active:scale-96",
+  unstyled: "",
 } satisfies Record<NonNullable<BackButtonBaseProps["variant"]>, string>;
 
 export function BackButton({
diff --git a/src/app/chat/components/fullscreen-image-viewer.tsx b/src/app/chat/components/fullscreen-image-viewer.tsx
index 7128cb86..3fb92f5e 100644
--- a/src/app/chat/components/fullscreen-image-viewer.tsx
+++ b/src/app/chat/components/fullscreen-image-viewer.tsx
@@ -12,6 +12,8 @@
 import { ChevronLeft } from "lucide-react";
 import { useEffect } from "react";
 
+import { BackButton } from "@/app/_components";
+
 import { ChatMediaImage } from "./chat-media-image";
 import styles from "./fullscreen-image-viewer.module.css";
 
@@ -90,14 +92,13 @@ export function FullscreenImageViewer({
       aria-modal="true"
       aria-label="Fullscreen image"
     >
-      <button
-        type="button"
+      <BackButton
         className={styles.backButton}
         onClick={onClose}
-        aria-label="Back"
-      >
-        <ChevronLeft size={34} strokeWidth={2.5} aria-hidden="true" />
-      </button>
+        ariaLabel="Back"
+        iconSize={34}
+        variant="unstyled"
+      />
       <ChatMediaImage
         messageId={messageId}
         remoteUrl={imageUrl}