From dcf66f23d0ebf808a77f63d3ff21caa6ec36d3b1 Mon Sep 17 00:00:00 2001
From: noelorin <noelorin@outlook.com>
Date: Sun, 27 Sep 2026 15:59:26 +0800
Subject: [PATCH] fix(ui): use sonner toast library with product styling

Replace hand-rolled notice with sonner; single Toaster in AppLayout; token-based toast styles, top-right.
---
 app/web/src/components/pages/AuthBody.tsx |  2 --
 app/web/src/layouts/AppLayout.astro       |  4 +++-
 app/web/src/views/browse.astro            |  2 --
 app/web/src/views/danmaku.astro           |  2 --
 app/web/src/views/library.astro           |  2 --
 app/web/src/views/mounts.astro            |  2 --
 app/web/src/views/watch.astro             |  2 --
 packages/ui/src/sonner.tsx                | 26 +++++++++++++++++------
 8 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/app/web/src/components/pages/AuthBody.tsx b/app/web/src/components/pages/AuthBody.tsx
index c00bff4..1fa2130 100644
--- a/app/web/src/components/pages/AuthBody.tsx
+++ b/app/web/src/components/pages/AuthBody.tsx
@@ -2,7 +2,6 @@
  * 鉴权页主体：薄 SSR — 外层容器 + AuthForm 在浏览器渲染。
  */
 import type { Locale } from "@app/i18n";
-import { Toaster } from "@app/ui";
 import AuthForm, { type AuthFormMode } from "~/components/AuthForm";
 
 export interface AuthBodyProps {
@@ -18,7 +17,6 @@ export default function AuthBody({ locale, mode, next, token }: AuthBodyProps) {
             <div className="flex min-h-[60vh] items-center justify-center px-4 py-16">
                 <AuthForm locale={locale} mode={mode} next={next} defaultToken={token} />
             </div>
-            <Toaster />
         </>
     );
 }
diff --git a/app/web/src/layouts/AppLayout.astro b/app/web/src/layouts/AppLayout.astro
index 06cff09..488be79 100644
--- a/app/web/src/layouts/AppLayout.astro
+++ b/app/web/src/layouts/AppLayout.astro
@@ -2,6 +2,7 @@
 import { ClientRouter } from "astro:transitions";
 import "../styles/globals.css";
 import UserMenu from "~/components/UserMenu";
+import { Toaster } from "@app/ui";
 import ThemeSwitch from "~/components/ThemeSwitch";
 import LocaleSwitch from "~/components/LocaleSwitch";
 import {
@@ -238,5 +239,6 @@ const nav = [
         </footer>
       )}
     </div>
-  </body>
+    <Toaster client:load />
+</body>
 </html>
diff --git a/app/web/src/views/browse.astro b/app/web/src/views/browse.astro
index 8a40e8b..4cb84f1 100644
--- a/app/web/src/views/browse.astro
+++ b/app/web/src/views/browse.astro
@@ -1,6 +1,5 @@
 ---
 import { type Locale, t } from "@app/i18n";
-import { Toaster } from "@app/ui";
 import { BrowseBody } from "~/components/pages/BrowseBody";
 import AppLayout from "~/layouts/AppLayout.astro";
 
@@ -23,5 +22,4 @@ const { locale } = Astro.props;
   }}
 >
   <BrowseBody locale={locale} client:load />
-  <Toaster client:load />
 </AppLayout>
diff --git a/app/web/src/views/danmaku.astro b/app/web/src/views/danmaku.astro
index 0a72850..9f8a7f0 100644
--- a/app/web/src/views/danmaku.astro
+++ b/app/web/src/views/danmaku.astro
@@ -1,6 +1,5 @@
 ---
 import { type Locale, t } from "@app/i18n";
-import { Toaster } from "@app/ui";
 import { DanmakuSettingsBody } from "~/components/pages/DanmakuSettingsBody";
 import AppLayout from "~/layouts/AppLayout.astro";
 
@@ -23,5 +22,4 @@ const { locale } = Astro.props;
   }}
 >
   <DanmakuSettingsBody locale={locale} client:load />
-  <Toaster client:load />
 </AppLayout>
diff --git a/app/web/src/views/library.astro b/app/web/src/views/library.astro
index f51ff3f..d55ccb8 100644
--- a/app/web/src/views/library.astro
+++ b/app/web/src/views/library.astro
@@ -1,6 +1,5 @@
 ---
 import { type Locale, t } from "@app/i18n";
-import { Toaster } from "@app/ui";
 import { LibraryBody } from "~/components/pages/LibraryBody";
 import AppLayout from "~/layouts/AppLayout.astro";
 
@@ -23,5 +22,4 @@ const { locale } = Astro.props;
   }}
 >
   <LibraryBody locale={locale} client:load />
-  <Toaster client:load />
 </AppLayout>
diff --git a/app/web/src/views/mounts.astro b/app/web/src/views/mounts.astro
index 416077e..4e50615 100644
--- a/app/web/src/views/mounts.astro
+++ b/app/web/src/views/mounts.astro
@@ -1,6 +1,5 @@
 ---
 import { type Locale, t } from "@app/i18n";
-import { Toaster } from "@app/ui";
 import { MountsBody } from "~/components/pages/MountsBody";
 import AppLayout from "~/layouts/AppLayout.astro";
 
@@ -23,5 +22,4 @@ const { locale } = Astro.props;
   }}
 >
   <MountsBody locale={locale} client:load />
-  <Toaster client:load />
 </AppLayout>
diff --git a/app/web/src/views/watch.astro b/app/web/src/views/watch.astro
index d7051dc..2bc1b7c 100644
--- a/app/web/src/views/watch.astro
+++ b/app/web/src/views/watch.astro
@@ -1,6 +1,5 @@
 ---
 import { type Locale, t } from "@app/i18n";
-import { Toaster } from "@app/ui";
 import { WatchBody } from "~/components/pages/WatchBody";
 import AppLayout from "~/layouts/AppLayout.astro";
 
@@ -24,5 +23,4 @@ const { locale, mediaItemId } = Astro.props;
   }}
 >
   <WatchBody locale={locale} mediaItemId={mediaItemId} client:load />
-  <Toaster client:load />
 </AppLayout>
diff --git a/packages/ui/src/sonner.tsx b/packages/ui/src/sonner.tsx
index c183e6c..412ca4f 100644
--- a/packages/ui/src/sonner.tsx
+++ b/packages/ui/src/sonner.tsx
@@ -3,19 +3,31 @@ import { Toaster as SonnerToaster, toast } from "sonner";
 
 type ToasterProps = React.ComponentProps<typeof SonnerToaster>;
 
-const Toaster = ({ style, ...props }: ToasterProps) => {
+/**
+ * sonner 封装：站点统一 toast。
+ * 视觉用 design tokens，位置右上角，跟随主题。
+ */
+const Toaster = ({ ...props }: ToasterProps) => {
     return (
         <SonnerToaster
-            theme="light"
-            className="toaster group"
+            position="top-right"
+            offset={16}
+            gap={10}
+            mobileOffset={12}
             toastOptions={{
+                unstyled: false,
                 classNames: {
-                    toast: "group toast group-[.toaster]:bg-[var(--color-background)] group-[.toaster]:text-[var(--color-foreground)] group-[.toaster]:border-[var(--color-border)] group-[.toaster]:shadow-lg",
-                    description: "group-[.toast]:text-[var(--color-muted-foreground)]",
+                    toast:
+                        "group toast w-[min(22rem,calc(100vw-2rem))] rounded-lg border border-[var(--color-border)] bg-[var(--color-background)] px-3.5 py-2.5 text-sm text-[var(--color-foreground)] shadow-lg",
+                    title: "text-sm font-medium leading-snug",
+                    description: "text-[var(--color-muted-foreground)] text-xs",
                     actionButton:
-                        "group-[.toast]:bg-[var(--color-primary)] group-[.toast]:text-[var(--color-primary-foreground)]",
+                        "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md px-2.5 py-1 text-xs font-medium",
                     cancelButton:
-                        "group-[.toast]:bg-[var(--color-muted)] group-[.toast]:text-[var(--color-muted-foreground)]",
+                        "bg-[var(--color-muted)] text-[var(--color-muted-foreground)] rounded-md px-2.5 py-1 text-xs",
+                    success: "border-[var(--color-border)]",
+                    error: "border-[var(--color-destructive,#dc2626)]/45",
+                    info: "border-[var(--color-border)]",
                 },
             }}
             {...props}