refactor toast system to use react-hot-toast

2026-03-11 21:09:45 +01:00
parent 03384c1bda
commit cff416dd83
12 changed files with 151 additions and 132 deletions
@@ -1,89 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-import { useTheme } from "next-themes";
-import { useEffect, useState, type CSSProperties } from "react";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
-
-import { cn } from "@/lib/utils";
-
-export function Toaster(props: ToasterProps) {
-  const pathname = usePathname();
-  const { resolvedTheme = "light" } = useTheme();
-  const [documentLang, setDocumentLang] = useState("de");
-
-  useEffect(() => {
-    setDocumentLang(document.documentElement.lang || "de");
-  }, [pathname]);
-
-  const isArabic = documentLang === "ar";
-  const toastFontClassName = isArabic ? "font-arabic text-right tracking-normal" : "font-latin text-left";
-  const toasterStyle: CSSProperties & Record<"--width", string> = {
-    "--width": "max-content",
-    left: "50%",
-    right: "auto",
-    transform: "translateX(-50%)",
-    ...(props.style ?? {}),
-  };
-
-  return (
-    <Sonner
-      {...props}
-      dir={props.dir ?? "ltr"}
-      theme={resolvedTheme as ToasterProps["theme"]}
-      position={props.position ?? "top-center"}
-      duration={props.duration ?? 1800}
-      closeButton={props.closeButton ?? false}
-      offset={props.offset ?? "16px"}
-      mobileOffset={props.mobileOffset ?? "16px"}
-      className={cn("toaster group", props.className)}
-      style={toasterStyle}
-      toastOptions={{
-        ...props.toastOptions,
-        style: {
-          ...(props.toastOptions?.style ?? {}),
-          borderRadius: "16px",
-          padding: "10px 12px",
-          minWidth: "0",
-          maxWidth: "min(calc(100vw - 2rem), 32rem)",
-          background: "hsl(var(--card))",
-          color: "hsl(var(--card-foreground))",
-          border: "1px solid hsl(var(--border))",
-          direction: isArabic ? "rtl" : "ltr",
-          textAlign: isArabic ? "right" : "left",
-        },
-        classNames: {
-          ...props.toastOptions?.classNames,
-          toast: cn(
-            "group toast group-[.toaster]:min-w-0 group-[.toaster]:w-fit group-[.toaster]:max-w-[min(calc(100vw-2rem),32rem)] group-[.toaster]:rounded-[16px] group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-card group-[.toaster]:px-3 group-[.toaster]:py-2 group-[.toaster]:text-card-foreground group-[.toaster]:shadow-panel",
-            toastFontClassName,
-            props.toastOptions?.classNames?.toast,
-          ),
-          title: cn(
-            "text-[13px] font-medium leading-5",
-            isArabic ? "text-right" : "text-left",
-            props.toastOptions?.classNames?.title,
-          ),
-          description: cn(
-            "text-[13px] leading-5 text-muted-foreground",
-            isArabic ? "text-right" : "text-left",
-            props.toastOptions?.classNames?.description,
-          ),
-          default: cn(
-            "border-border bg-card text-card-foreground",
-            props.toastOptions?.classNames?.default,
-          ),
-          success: cn(
-            "border-status-success/30 bg-status-success-soft text-status-success dark:border-status-success/40 dark:bg-status-success-soft dark:text-status-success",
-            props.toastOptions?.classNames?.success,
-          ),
-          error: cn(
-            "border-destructive/30 bg-destructive/10 text-destructive dark:border-destructive/40 dark:bg-destructive/20 dark:text-destructive-foreground",
-            props.toastOptions?.classNames?.error,
-          ),
-          closeButton: "hidden",
-        },
-      }}
-    />
-  );
-}
@@ -0,0 +1,33 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Toaster as HotToaster, type ToasterProps } from "react-hot-toast";
+
+import { resolveLocale } from "@/lib/locale";
+
+export function Toaster(props: ToasterProps) {
+  const pathname = usePathname();
+  const locale = resolveLocale(pathname.split("/")[1] || "de");
+  const isArabic = locale === "ar";
+
+  const toastClassName = `${isArabic ? "font-arabic tracking-normal" : "font-latin"} text-[13px] leading-5`;
+
+  return (
+    <HotToaster
+      key={locale}
+      {...props}
+      position={props.position ?? (isArabic ? "top-right" : "top-left")}
+      reverseOrder={props.reverseOrder ?? false}
+      toastOptions={{
+        ...props.toastOptions,
+        className:
+          props.toastOptions?.className ??
+          toastClassName,
+        style: {
+          borderRadius: "36px",
+          ...(props.toastOptions?.style ?? {}),
+        },
+      }}
+    />
+  );
+}