Add Sonner-based notifications and UX polish

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