Add Sonner-based notifications and UX polish

components/layout/floating-preferences.tsx

@@ -25,16 +25,25 @@ export function FloatingPreferences({
           <SoundToggle
             ariaLabel={t("soundMute")}
             mutedAriaLabel={t("soundUnmute")}
+            mutedToastLabel={t("soundMuted")}
+            unmutedToastLabel={t("soundEnabled")}
             variant="ghost"
             className="h-9 w-9 rounded-pill border border-transparent bg-transparent text-foreground/80 hover:bg-accent hover:text-foreground"
           />
           <ThemeToggle
             ariaLabel={t("themeToggle")}
+            lightToastLabel={t("themeLight")}
+            darkToastLabel={t("themeDark")}
             variant="ghost"
             className="h-9 w-9 rounded-pill border border-transparent bg-transparent text-foreground/80 hover:bg-accent hover:text-foreground"
           />
           <LocaleToggle
             locale={locale}
+            localeChangedLabels={{
+              de: t("localeChangedDe"),
+              en: t("localeChangedEn"),
+              ar: t("localeChangedAr"),
+            }}
             className="h-9 w-9 rounded-pill border border-transparent bg-transparent p-0 text-foreground/80 hover:bg-accent hover:text-foreground"
           />
         </div>

components/layout/locale-toggle.tsx

@@ -13,16 +13,20 @@ import {
 import { AppLocale, getLocalizedPath, stripLocalePrefix } from "@/lib/locale";
 import { cn } from "@/lib/utils";
 
+const PENDING_TOAST_STORAGE_KEY = "mohfarawati-pending-toast";
+
 type LocaleToggleProps = {
   locale: string;
   className?: string;
   showLabel?: boolean;
+  localeChangedLabels?: Partial<Record<AppLocale, string>>;
 };
 
 export function LocaleToggle({
   locale,
   className,
   showLabel = false,
+  localeChangedLabels,
 }: LocaleToggleProps) {
   const pathname = usePathname();
   const locales: AppLocale[] = ["de", "en", "ar"];
@@ -75,6 +79,18 @@ export function LocaleToggle({
           >
             <a
               href={getLocalizedPath(targetLocale, currentPath)}
+              onClick={() => {
+                const message = localeChangedLabels?.[targetLocale];
+
+                if (!message) {
+                  return;
+                }
+
+                window.sessionStorage.setItem(
+                  PENDING_TOAST_STORAGE_KEY,
+                  JSON.stringify({ message, type: "success" }),
+                );
+              }}
               className="group flex h-10 w-10 items-center justify-center rounded-full"
             >
               <Image

components/root/flash-message.tsx

@@ -1,67 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-
-import { cn } from "@/lib/utils";
-
-type FlashMessageProps = {
-  type: "success" | "error";
-  message: string;
-  clearDelayMs?: number;
-};
-
-export function FlashMessage({
-  type,
-  message,
-  clearDelayMs = 4000,
-}: FlashMessageProps) {
-  const pathname = usePathname();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [visible, setVisible] = useState(true);
-
-  useEffect(() => {
-    setVisible(true);
-  }, [message, pathname, searchParams]);
-
-  useEffect(() => {
-    if (!message) {
-      return undefined;
-    }
-
-    const timeoutId = window.setTimeout(() => {
-      setVisible(false);
-
-      const nextParams = new URLSearchParams(searchParams.toString());
-      nextParams.delete("success");
-      nextParams.delete("error");
-
-      const nextQuery = nextParams.toString();
-      router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, {
-        scroll: false,
-      });
-    }, clearDelayMs);
-
-    return () => {
-      window.clearTimeout(timeoutId);
-    };
-  }, [clearDelayMs, message, pathname, router, searchParams]);
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <p
-      className={cn(
-        "rounded-nested border px-4 py-3 text-sm",
-        type === "success"
-          ? "border-status-success/30 bg-status-success/10 text-status-success"
-          : "border-destructive/30 bg-destructive/10 text-destructive",
-      )}
-    >
-      {message}
-    </p>
-  );
-}

components/root/form-save-button.tsx

@@ -30,7 +30,6 @@ export function FormSaveButton({
   formSelector,
   formSelectors,
   label = "Speichern",
-  reloadDocumentOnSuccess = false,
 }: FormSaveButtonProps) {
   const pathname = usePathname();
   const router = useRouter();
@@ -280,12 +279,8 @@ export function FormSaveButton({
     }
 
     pendingSubmissionRef.current = null;
-    if (reloadDocumentOnSuccess) {
-      window.location.reload();
-      return;
-    }
-
-    router.refresh();
+    setIsSubmitting(false);
+    dirtyFormsRef.current.delete(pendingSubmission.formId);
 
     if (!searchParams.has("__saved")) {
       return;
@@ -298,7 +293,7 @@ export function FormSaveButton({
     router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, {
       scroll: false,
     });
-  }, [currentUrl, pathname, reloadDocumentOnSuccess, router, searchParams]);
+  }, [currentUrl, pathname, router, searchParams]);
 
   return (
     <Button type="submit" form={activeFormId ?? undefined} disabled={!activeFormId || !isDirty || isSubmitting}>

components/root/media-library-manager.tsx

@@ -33,7 +33,7 @@ import { createMediaAssetAction, deleteMediaAssetAction } from "@/app/root/media
 const copy = {
   addMedia: "Upload Media File",
   addMediaDescription: "Datei hochladen und direkt in die Media Library uebernehmen.",
-  addMediaHint: "PNG, JPG, GIF oder PDF bis 4 MB",
+  addMediaHint: "PNG, JPG, GIF oder PDF bis 5 MB",
   label: "Bezeichnung",
   kind: "Typ",
   image: "Image",

components/root/query-toast-bridge.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { toast } from "sonner";
+
+const TOAST_PARAM_NAMES = ["success", "error"] as const;
+const PENDING_TOAST_STORAGE_KEY = "mohfarawati-pending-toast";
+
+export function QueryToastBridge() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const handledKeyRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const rawToast = window.sessionStorage.getItem(PENDING_TOAST_STORAGE_KEY);
+
+    if (!rawToast) {
+      return;
+    }
+
+    try {
+      const pendingToast = JSON.parse(rawToast) as {
+        message?: string;
+        type?: "success" | "error";
+      };
+
+      if (!pendingToast.message) {
+        return;
+      }
+
+      if (pendingToast.type === "error") {
+        toast.error(pendingToast.message);
+      } else if (pendingToast.type === "success") {
+        toast.success(pendingToast.message);
+      } else {
+        toast(pendingToast.message);
+      }
+    } finally {
+      window.sessionStorage.removeItem(PENDING_TOAST_STORAGE_KEY);
+    }
+  }, [pathname]);
+
+  useEffect(() => {
+    const successMessage = searchParams.get("success");
+    const errorMessage = searchParams.get("error");
+
+    if (!successMessage && !errorMessage) {
+      handledKeyRef.current = null;
+      return;
+    }
+
+    const handledKey = `${pathname}:${successMessage ?? ""}:${errorMessage ?? ""}`;
+
+    if (handledKeyRef.current === handledKey) {
+      return;
+    }
+
+    handledKeyRef.current = handledKey;
+
+    if (successMessage) {
+      toast.success(successMessage);
+    }
+
+    if (errorMessage) {
+      toast.error(errorMessage);
+    }
+
+    const nextParams = new URLSearchParams(searchParams.toString());
+
+    for (const name of TOAST_PARAM_NAMES) {
+      nextParams.delete(name);
+    }
+
+    const nextQuery = nextParams.toString();
+
+    router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, {
+      scroll: false,
+    });
+  }, [pathname, router, searchParams]);
+
+  return null;
+}

components/root/root-dashboard-shell.tsx

@@ -120,8 +120,17 @@ export async function RootDashboardShell({
         label={saveButtonLabel ?? "Speichern"}
         reloadDocumentOnSuccess={reloadDocumentOnSave}
       />
-      <SoundToggle ariaLabel="Mute sounds" mutedAriaLabel="Unmute sounds" />
-      <ThemeToggle ariaLabel="Theme wechseln" />
+      <SoundToggle
+        ariaLabel="Mute sounds"
+        mutedAriaLabel="Unmute sounds"
+        mutedToastLabel="Sound muted"
+        unmutedToastLabel="Sound enabled"
+      />
+      <ThemeToggle
+        ariaLabel="Theme wechseln"
+        lightToastLabel="Light mode enabled"
+        darkToastLabel="Dark mode enabled"
+      />
     </>
   );
 

components/sound-toggle.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Volume2, VolumeX } from "lucide-react";
+import { toast } from "sonner";
 
 import { useSound } from "@/components/sound-provider";
 import { Button, type ButtonProps } from "@/components/ui/button";
@@ -9,6 +10,8 @@ import { cn } from "@/lib/utils";
 type SoundToggleProps = {
   ariaLabel?: string;
   mutedAriaLabel?: string;
+  mutedToastLabel?: string;
+  unmutedToastLabel?: string;
   variant?: ButtonProps["variant"];
   className?: string;
   iconClassName?: string;
@@ -17,18 +20,25 @@ type SoundToggleProps = {
 export function SoundToggle({
   ariaLabel = "Mute sounds",
   mutedAriaLabel = "Unmute sounds",
+  mutedToastLabel = "Sound muted",
+  unmutedToastLabel = "Sound enabled",
   variant = "outline",
   className,
   iconClassName,
 }: SoundToggleProps) {
   const { isMuted, toggleMuted } = useSound();
 
+  const handleToggle = () => {
+    toggleMuted();
+    toast(isMuted ? unmutedToastLabel : mutedToastLabel);
+  };
+
   return (
     <Button
       type="button"
       variant={variant}
       size="icon"
-      onClick={toggleMuted}
+      onClick={handleToggle}
       aria-label={isMuted ? mutedAriaLabel : ariaLabel}
       aria-pressed={isMuted}
       className={cn("group cursor-pointer", className)}

components/theme-toggle.tsx

@@ -3,6 +3,7 @@
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
+import { toast } from "sonner";
 
 import { useSound } from "@/components/sound-provider";
 import { Button, type ButtonProps } from "@/components/ui/button";
@@ -11,6 +12,8 @@ import { cn } from "@/lib/utils";
 type ThemeToggleProps = {
   ariaLabel?: string;
   label?: string;
+  lightToastLabel?: string;
+  darkToastLabel?: string;
   variant?: ButtonProps["variant"];
   className?: string;
   iconClassName?: string;
@@ -19,6 +22,8 @@ type ThemeToggleProps = {
 export function ThemeToggle({
   ariaLabel = "Toggle theme",
   label,
+  lightToastLabel = "Light mode enabled",
+  darkToastLabel = "Dark mode enabled",
   variant = "outline",
   className,
   iconClassName,
@@ -54,6 +59,7 @@ export function ThemeToggle({
 
     setTheme(nextTheme);
     playSound(nextTheme === "dark" ? "/audio/dark.mp3" : "/audio/light.mp3");
+    toast(nextTheme === "dark" ? darkToastLabel : lightToastLabel);
   };
 
   return (

components/ui/sonner.tsx

@@ -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}
+    />
+  );
+}