From 7967486af796c218218dadcc306ca0c4eab0606e Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Mon, 20 Jul 2026 14:58:30 +0800
Subject: [PATCH] feat(tip): add character splash back button

---
 src/app/tip/tip-screen.module.css | 3 ++-
 src/app/tip/tip-screen.tsx        | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/tip/tip-screen.module.css b/src/app/tip/tip-screen.module.css
index de967af8..a02ab1b8 100644
--- a/src/app/tip/tip-screen.module.css
+++ b/src/app/tip/tip-screen.module.css
@@ -68,7 +68,8 @@
 .header {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .headerPill {
diff --git a/src/app/tip/tip-screen.tsx b/src/app/tip/tip-screen.tsx
index 21961851..25d10181 100644
--- a/src/app/tip/tip-screen.tsx
+++ b/src/app/tip/tip-screen.tsx
@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState, type CSSProperties } from "react";
 import Image from "next/image";
 import { Heart, Sparkles } from "lucide-react";
 
-import { CharacterAvatar } from "@/app/_components";
+import { BackButton, CharacterAvatar } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
 import { PaymentMethodSelector } from "@/app/_components/payment/payment-method-selector";
 import { usePaymentMethodSelection } from "@/app/_hooks/use-payment-method-selection";
@@ -225,6 +225,12 @@ export function TipScreen({
         <div className={styles.bgGlowTwo} aria-hidden="true" />
 
         <header className={styles.header}>
+          <BackButton
+            href={characterRoutes.splash}
+            variant="soft"
+            ariaLabel="Back to character home"
+            analyticsKey="tip.back_to_splash"
+          />
           <span className={styles.headerPill}>{character.copy.tipHeader}</span>
         </header>