Add Sonner-based notifications and UX polish

2026-03-10 17:43:26 +01:00
parent eceb0f3a54
commit 77cc9dca87
32 changed files with 279 additions and 310 deletions
@@ -0,0 +1,50 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+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 toastFontFamily = isArabic ? "var(--font-dubai), sans-serif" : "var(--font-museo), sans-serif";
+
+  return (
+    <Sonner
+      theme={resolvedTheme as ToasterProps["theme"]}
+      position="top-center"
+      duration={2400}
+      toastOptions={{
+        style: {
+          borderRadius: "16px",
+          padding: "10px 12px",
+          background: "hsl(var(--card))",
+          color: "hsl(var(--card-foreground))",
+          border: "1px solid hsl(var(--border))",
+          fontFamily: toastFontFamily,
+        },
+        classNames: {
+          toast:
+            "rounded-[16px] border border-border bg-card px-3 py-2 text-card-foreground shadow-panel",
+          default:
+            "border-border bg-card text-card-foreground",
+          title: "text-[13px] font-medium leading-5",
+          description: "text-[13px] leading-5 text-muted-foreground",
+          success:
+            "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",
+          error:
+            "border-destructive/30 bg-destructive/10 text-destructive dark:border-destructive/40 dark:bg-destructive/20 dark:text-destructive-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+}