refactor(chat): reuse fullscreen back button

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", () => {

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({

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
+      <BackButton
-        type="button"
         className={styles.backButton}
         onClick={onClose}
-        aria-label="Back"
+        ariaLabel="Back"
-      >
+        iconSize={34}
-        <ChevronLeft size={34} strokeWidth={2.5} aria-hidden="true" />
+        variant="unstyled"
-      </button>
+      />
       <ChatMediaImage
         messageId={messageId}
         remoteUrl={imageUrl}