Add Sonner-based notifications and UX polish

app/[locale]/(site)/contact/actions.ts

@@ -40,9 +40,15 @@ const contactErrorMessages = {
   },
 } as const;
 
-function withError(pathname: string, message: string) {
+const contactSuccessMessages = {
+  ar: "شكراً على رسالتك.",
+  en: "Thank you for your message.",
+  de: "Vielen Dank fuer deine Nachricht.",
+} as const;
+
+function withMessage(pathname: string, type: "success" | "error", message: string) {
   const params = new URLSearchParams();
-  params.set("error", message);
+  params.set(type, message);
 
   return `${pathname}?${params.toString()}`;
 }
@@ -80,18 +86,18 @@ export async function submitContactFormAction(formData: FormData) {
       message: values.message,
     });
 
-    redirect(getLocalizedPath(locale, "/success"));
+    redirect(withMessage(getLocalizedPath(locale, "/success"), "success", contactSuccessMessages[locale]));
   } catch (error) {
     if (isRedirectError(error)) {
       throw error;
     }
 
     if (error instanceof z.ZodError) {
-      redirect(withError(contactPath, contactErrorMessages[locale].invalid));
+      redirect(withMessage(contactPath, "error", contactErrorMessages[locale].invalid));
     }
 
     if (error instanceof Error && error.message === "Too many contact requests. Please try again later.") {
-      redirect(withError(contactPath, contactErrorMessages[locale].blocked));
+      redirect(withMessage(contactPath, "error", contactErrorMessages[locale].blocked));
     }
 
     if (
@@ -100,10 +106,10 @@ export async function submitContactFormAction(formData: FormData) {
         error.message === "Turnstile verification failed." ||
         error.message === "Turnstile verification request failed.")
     ) {
-      redirect(withError(contactPath, contactErrorMessages[locale].verification));
+      redirect(withMessage(contactPath, "error", contactErrorMessages[locale].verification));
     }
 
     console.error("Contact form delivery failed.", error);
-    redirect(withError(contactPath, contactErrorMessages[locale].failed));
+    redirect(withMessage(contactPath, "error", contactErrorMessages[locale].failed));
   }
 }

app/[locale]/(site)/contact/page.tsx

@@ -5,7 +5,6 @@ import { getTranslations } from "next-intl/server";
 import { Container } from "@/components/layout/container";
 import { PageHero } from "@/components/layout/page-hero";
 import { MotionFade } from "@/components/motion-fade";
-import { FlashMessage } from "@/components/root/flash-message";
 import { ContactForm } from "@/components/site/contact-form";
 import { buildLocalizedMetadata } from "@/lib/metadata";
 import { getPublicContactProtectionSettings } from "@/lib/app-config";
@@ -19,9 +18,6 @@ type ContactPageProps = {
   params: {
     locale: string;
   };
-  searchParams?: {
-    error?: string;
-  };
 };
 
 export async function generateMetadata({
@@ -38,10 +34,7 @@ export async function generateMetadata({
   });
 }
 
-export default async function ContactPage({
+export default async function ContactPage({ params: { locale } }: ContactPageProps) {
-  params: { locale },
-  searchParams,
-}: ContactPageProps) {
   const localeKey = resolveLocale(locale);
   const [t, protection] = await Promise.all([
     getTranslations({ locale: localeKey, namespace: "contactPage" }),
@@ -86,11 +79,6 @@ export default async function ContactPage({
         <MotionFade delay={0.05}>
         <AppCard>
           <CardContent className="pt-6">
-            {searchParams?.error ? (
-              <div className="mb-4">
-                <FlashMessage type="error" message={searchParams.error} />
-              </div>
-            ) : null}
             <ContactForm
               action={submitContactFormAction}
               locale={localeKey}

app/layout.tsx

@@ -3,8 +3,10 @@ import { unstable_noStore as noStore } from "next/cache";
 import localFont from "next/font/local";
 import Script from "next/script";
 import { getLocale } from "next-intl/server";
+import { QueryToastBridge } from "@/components/root/query-toast-bridge";
 import { SoundProvider } from "@/components/sound-provider";
 import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
 import { buildAppMetadata } from "@/lib/metadata";
 import { getDirection } from "@/lib/locale";
 import "./globals.css";
@@ -95,7 +97,11 @@ export default async function RootLayout({
     <html lang={locale} dir={getDirection(locale)} suppressHydrationWarning>
       <body className={`${museo.variable} ${dubai.variable}`}>
         <ThemeProvider>
-          <SoundProvider>{children}</SoundProvider>
+          <SoundProvider>
+            {children}
+            <QueryToastBridge />
+            <Toaster />
+          </SoundProvider>
         </ThemeProvider>
         <Script
           src="https://plausible.mohfarawati.de/js/pa-H7WDubj39eeDW3cfzeXhU.js"

app/root/maintenance/actions.ts

@@ -21,7 +21,10 @@ export async function updateMaintenanceModeAction(formData: FormData) {
   const nextValue = formData.get("enabled") === "true";
   const redirectPath = String(formData.get("redirectPath") ?? "/root");
   const redirectUrl = new URL(redirectPath, "http://localhost");
-  redirectUrl.searchParams.set("__saved", "maintenance");
+  redirectUrl.searchParams.set(
+    "success",
+    nextValue ? "Wartungsmodus aktiviert." : "Wartungsmodus deaktiviert.",
+  );
 
   await setMaintenanceMode(nextValue);
   revalidatePath("/", "layout");

app/root/marquee/page.tsx

@@ -1,6 +1,5 @@
 import { redirect } from "next/navigation";
 
-import { FlashMessage } from "@/components/root/flash-message";
 import { MarqueeSettingsForm } from "@/components/root/marquee-settings-form";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { MotionFade } from "@/components/motion-fade";
@@ -26,16 +25,7 @@ const copy = {
   backToSite: "Zur Website",
 };
 
-type RootMarqueePageProps = {
+export default async function RootMarqueePage() {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootMarqueePage({
-  searchParams,
-}: RootMarqueePageProps) {
   if (!isAdminAuthenticated()) {
     redirect("/root");
   }
@@ -57,21 +47,8 @@ export default async function RootMarqueePage({
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
       saveFormId="marquee-settings-form"
-      reloadDocumentOnSave
     >
       <div className="space-y-6">
-        {searchParams?.success ? (
-          <MotionFade delay={0.08}>
-            <FlashMessage type="success" message={searchParams.success} />
-          </MotionFade>
-        ) : null}
-
-        {searchParams?.error ? (
-          <MotionFade delay={0.1}>
-            <FlashMessage type="error" message={searchParams.error} />
-          </MotionFade>
-        ) : null}
-
         <MotionFade delay={0.14}>
           <MarqueeSettingsForm
             action={saveMarqueeSettingsAction}

app/root/media/page.tsx

@@ -1,8 +1,6 @@
 import { redirect } from "next/navigation";
 
-import { FlashMessage } from "@/components/root/flash-message";
 import { MediaLibraryManager } from "@/components/root/media-library-manager";
-import { MotionFade } from "@/components/motion-fade";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { getAdminMediaAssets } from "@/lib/media";
@@ -22,14 +20,7 @@ const copy = {
   backToSite: "Zur Website",
 };
 
-type RootMediaPageProps = {
+export default async function RootMediaPage() {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootMediaPage({ searchParams }: RootMediaPageProps) {
   if (!isAdminAuthenticated()) {
     redirect("/root");
   }
@@ -52,18 +43,6 @@ export default async function RootMediaPage({ searchParams }: RootMediaPageProps
       headerDescription={copy.subtitle}
     >
       <div className="space-y-6">
-        {searchParams?.success ? (
-          <MotionFade delay={0.1}>
-            <FlashMessage type="success" message={searchParams.success} />
-          </MotionFade>
-        ) : null}
-
-        {searchParams?.error ? (
-          <MotionFade delay={0.12}>
-            <FlashMessage type="error" message={searchParams.error} />
-          </MotionFade>
-        ) : null}
-
         <MediaLibraryManager mediaAssets={mediaAssets} />
       </div>
     </RootDashboardShell>

app/root/portfolio/categories/page.tsx

@@ -1,7 +1,5 @@
 import { redirect } from "next/navigation";
 
-import { MotionFade } from "@/components/motion-fade";
-import { FlashMessage } from "@/components/root/flash-message";
 import { PortfolioCategoriesManager } from "@/components/root/portfolio-categories-manager";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
@@ -24,16 +22,7 @@ const copy = {
   backToSite: "Zur Website",
 };
 
-type RootPortfolioCategoriesPageProps = {
+export default async function RootPortfolioCategoriesPage() {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootPortfolioCategoriesPage({
-  searchParams,
-}: RootPortfolioCategoriesPageProps) {
   if (!isAdminAuthenticated()) {
     redirect("/root");
   }
@@ -59,18 +48,6 @@ export default async function RootPortfolioCategoriesPage({
       headerDescription={copy.subtitle}
     >
       <div className="space-y-6">
-        {searchParams?.success ? (
-          <MotionFade delay={0.08}>
-            <FlashMessage type="success" message={searchParams.success} />
-          </MotionFade>
-        ) : null}
-
-        {searchParams?.error ? (
-          <MotionFade delay={0.1}>
-            <FlashMessage type="error" message={searchParams.error} />
-          </MotionFade>
-        ) : null}
-
         <PortfolioCategoriesManager
           categories={categories}
           activeCount={activeCount}

app/root/portfolio/page.tsx

@@ -1,8 +1,6 @@
 import { redirect } from "next/navigation";
 
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
-import { MotionFade } from "@/components/motion-fade";
-import { FlashMessage } from "@/components/root/flash-message";
 import { PortfolioProjectsOverview } from "@/components/root/portfolio-projects-overview";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { getAdminPortfolioCategories, getAdminPortfolioProjects } from "@/lib/portfolio";
@@ -67,18 +65,6 @@ export default async function RootPortfolioPage({ searchParams }: RootPortfolioP
       headerDescription={copy.subtitle}
     >
       <div className="space-y-6">
-        {searchParams?.success ? (
-          <MotionFade delay={0.08}>
-            <FlashMessage type="success" message={searchParams.success} />
-          </MotionFade>
-        ) : null}
-
-        {searchParams?.error ? (
-          <MotionFade delay={0.1}>
-            <FlashMessage type="error" message={searchParams.error} />
-          </MotionFade>
-        ) : null}
-
         <PortfolioProjectsOverview
           categories={categories}
           projects={projects}

app/root/portfolio/projects/[id]/page.tsx

@@ -1,7 +1,6 @@
 import { redirect } from "next/navigation";
 
 import { MotionFade } from "@/components/motion-fade";
-import { FlashMessage } from "@/components/root/flash-message";
 import { PortfolioProjectForm } from "@/components/root/portfolio-project-form";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { AppCard } from "@/components/ui/app-card";
@@ -39,15 +38,10 @@ type RootPortfolioProjectPageProps = {
   params: {
     id: string;
   };
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
 };
 
 export default async function RootPortfolioProjectPage({
   params,
-  searchParams,
 }: RootPortfolioProjectPageProps) {
   if (!isAdminAuthenticated()) {
     redirect("/root");
@@ -82,18 +76,6 @@ export default async function RootPortfolioProjectPage({
       saveButtonLabel={copy.saveProject}
     >
       <div className="space-y-6">
-        {searchParams?.success ? (
-          <MotionFade delay={0.1}>
-            <FlashMessage type="success" message={searchParams.success} />
-          </MotionFade>
-        ) : null}
-
-        {searchParams?.error ? (
-          <MotionFade delay={0.12}>
-            <FlashMessage type="error" message={searchParams.error} />
-          </MotionFade>
-        ) : null}
-
         <MotionFade delay={0.15}>
           <PortfolioProjectForm
             action={saveProjectAction}

app/root/portfolio/projects/new/page.tsx

@@ -1,7 +1,6 @@
 import { redirect } from "next/navigation";
 
 import { MotionFade } from "@/components/motion-fade";
-import { FlashMessage } from "@/components/root/flash-message";
 import { PortfolioProjectForm } from "@/components/root/portfolio-project-form";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
@@ -25,15 +24,7 @@ const copy = {
   backToSite: "Zur Website",
 };
 
-type RootNewPortfolioProjectPageProps = {
+export default async function RootNewPortfolioProjectPage() {
-  searchParams?: {
-    error?: string;
-  };
-};
-
-export default async function RootNewPortfolioProjectPage({
-  searchParams,
-}: RootNewPortfolioProjectPageProps) {
   if (!isAdminAuthenticated()) {
     redirect("/root");
   }
@@ -61,12 +52,6 @@ export default async function RootNewPortfolioProjectPage({
       saveFormId="portfolio-project-form"
     >
       <div className="space-y-6">
-        {searchParams?.error ? (
-          <MotionFade delay={0.1}>
-            <FlashMessage type="error" message={searchParams.error} />
-          </MotionFade>
-        ) : null}
-
         <MotionFade delay={0.15}>
           <PortfolioProjectForm
             action={saveProjectAction}

app/root/portfolio/projects/page.tsx

@@ -1,7 +1,5 @@
 import { redirect } from "next/navigation";
 
-import { MotionFade } from "@/components/motion-fade";
-import { FlashMessage } from "@/components/root/flash-message";
 import { PortfolioProjectsOverview } from "@/components/root/portfolio-projects-overview";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
@@ -26,8 +24,6 @@ type RootPortfolioProjectsPageProps = {
   searchParams?: {
     category?: string;
     status?: "all" | "draft" | "published";
-    success?: string;
-    error?: string;
   };
 };
 
@@ -69,18 +65,6 @@ export default async function RootPortfolioProjectsPage({
       headerDescription={copy.subtitle}
     >
       <div className="space-y-6">
-        {searchParams?.success ? (
-          <MotionFade delay={0.08}>
-            <FlashMessage type="success" message={searchParams.success} />
-          </MotionFade>
-        ) : null}
-
-        {searchParams?.error ? (
-          <MotionFade delay={0.1}>
-            <FlashMessage type="error" message={searchParams.error} />
-          </MotionFade>
-        ) : null}
-
         <PortfolioProjectsOverview
           categories={categories}
           projects={projects}

app/root/site-settings/page.tsx

@@ -2,7 +2,6 @@ import { MediaKind } from "@prisma/client";
 import { redirect } from "next/navigation";
 
 import { MotionFade } from "@/components/motion-fade";
-import { FlashMessage } from "@/components/root/flash-message";
 import { SiteSettingsForm } from "@/components/root/site-settings-form";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
@@ -30,16 +29,7 @@ const copy = {
   backToSite: "Zur Website",
 };
 
-type RootSiteSettingsPageProps = {
+export default async function RootSiteSettingsPage() {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootSiteSettingsPage({
-  searchParams,
-}: RootSiteSettingsPageProps) {
   if (!isAdminAuthenticated()) {
     redirect("/root");
   }
@@ -65,21 +55,8 @@ export default async function RootSiteSettingsPage({
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
       saveFormId="site-settings-form"
-      reloadDocumentOnSave
     >
       <div className="space-y-6">
-        {searchParams?.success ? (
-          <MotionFade delay={0.1}>
-            <FlashMessage type="success" message={searchParams.success} />
-          </MotionFade>
-        ) : null}
-
-        {searchParams?.error ? (
-          <MotionFade delay={0.12}>
-            <FlashMessage type="error" message={searchParams.error} />
-          </MotionFade>
-        ) : null}
-
         <MotionFade delay={0.16}>
           <SiteSettingsForm
             action={saveSiteSettingsAction}

app/root/smtp/contact-protection/page.tsx

@@ -2,7 +2,6 @@ import { redirect } from "next/navigation";
 
 import { MotionFade } from "@/components/motion-fade";
 import { ContactProtectionForm } from "@/components/root/contact-protection-form";
-import { FlashMessage } from "@/components/root/flash-message";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { getContactProtectionFormValues } from "@/lib/app-config";
@@ -26,16 +25,7 @@ const copy = {
   backToSite: "Zur Website",
 };
 
-type RootSMTPProtectionPageProps = {
+export default async function RootSMTPProtectionPage() {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootSMTPProtectionPage({
-  searchParams,
-}: RootSMTPProtectionPageProps) {
   if (!isAdminAuthenticated()) {
     redirect("/root");
   }
@@ -58,21 +48,8 @@ export default async function RootSMTPProtectionPage({
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
       saveFormId="contact-protection-form"
-      reloadDocumentOnSave
     >
       <div className="space-y-6">
-        {searchParams?.success ? (
-          <MotionFade delay={0.1}>
-            <FlashMessage type="success" message={searchParams.success} />
-          </MotionFade>
-        ) : null}
-
-        {searchParams?.error ? (
-          <MotionFade delay={0.12}>
-            <FlashMessage type="error" message={searchParams.error} />
-          </MotionFade>
-        ) : null}
-
         <MotionFade delay={0.16}>
           <ContactProtectionForm
             action={saveContactProtectionSettingsAction}

app/root/smtp/page.tsx

@@ -1,7 +1,6 @@
 import { redirect } from "next/navigation";
 
 import { MotionFade } from "@/components/motion-fade";
-import { FlashMessage } from "@/components/root/flash-message";
 import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { SMTPSettingsForm } from "@/components/root/smtp-settings-form";
 import { Button } from "@/components/ui/button";
@@ -27,14 +26,7 @@ const copy = {
   backToSite: "Zur Website",
 };
 
-type RootSMTPPageProps = {
+export default async function RootSMTPPage() {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootSMTPPage({ searchParams }: RootSMTPPageProps) {
   if (!isAdminAuthenticated()) {
     redirect("/root");
   }
@@ -57,7 +49,6 @@ export default async function RootSMTPPage({ searchParams }: RootSMTPPageProps)
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
       saveFormId="smtp-settings-form"
-      reloadDocumentOnSave
       headerActions={(
         <form action={sendTestEmailAction}>
           <Button type="submit" variant="outline">
@@ -67,18 +58,6 @@ export default async function RootSMTPPage({ searchParams }: RootSMTPPageProps)
       )}
     >
       <div className="space-y-6">
-        {searchParams?.success ? (
-          <MotionFade delay={0.1}>
-            <FlashMessage type="success" message={searchParams.success} />
-          </MotionFade>
-        ) : null}
-
-        {searchParams?.error ? (
-          <MotionFade delay={0.12}>
-            <FlashMessage type="error" message={searchParams.error} />
-          </MotionFade>
-        ) : null}
-
         <MotionFade delay={0.16}>
           <SMTPSettingsForm
             action={saveMailSettingsAction}

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) {
+    setIsSubmitting(false);
-      window.location.reload();
+    dirtyFormsRef.current.delete(pendingSubmission.formId);
-      return;
-    }
-
-    router.refresh();
 
     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" />
+      <SoundToggle
-      <ThemeToggle ariaLabel="Theme wechseln" />
+        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}
+    />
+  );
+}

lib/media-service.ts

@@ -164,7 +164,7 @@ export function inferMediaKindFromMimeType(mimeType: string | null | undefined):
 export function inferMediaKindFromFileName(fileName: string): MediaKind {
   const extension = path.extname(fileName).toLowerCase();
 
-  if ([".jpg", ".jpeg", ".png", ".webp", ".svg"].includes(extension)) {
+  if ([".gif", ".jpg", ".jpeg", ".png", ".webp", ".svg"].includes(extension)) {
     return MediaKind.IMAGE;
   }
 
@@ -174,7 +174,7 @@ export function inferMediaKindFromFileName(fileName: string): MediaKind {
 export function getKindFromUploadFile(file: File) {
   const extension = getExtensionForMimeType(file.type);
 
-  if (extension && [".jpg", ".jpeg", ".png", ".webp", ".svg"].includes(extension)) {
+  if (extension && [".gif", ".jpg", ".jpeg", ".png", ".webp", ".svg"].includes(extension)) {
     return MediaKind.IMAGE;
   }
 

lib/media-storage.ts

@@ -8,6 +8,7 @@ export const MAX_MEDIA_FILE_SIZE = 5 * 1024 * 1024;
 const MIME_EXTENSIONS: Record<string, string> = {
   "image/x-icon": ".ico",
   "image/vnd.microsoft.icon": ".ico",
+  "image/gif": ".gif",
   "image/jpeg": ".jpg",
   "image/png": ".png",
   "image/webp": ".webp",

messages/ar.json

@@ -9,8 +9,16 @@
     "openMenu": "فتح القائمة",
     "closeMenu": "إغلاق القائمة",
     "themeToggle": "تبديل المظهر",
+    "themeLight": "تم تفعيل الوضع الفاتح",
+    "themeDark": "تم تفعيل الوضع الداكن",
     "soundMute": "كتم الأصوات",
-    "soundUnmute": "تشغيل الأصوات"
+    "soundUnmute": "تشغيل الأصوات",
+    "soundMuted": "تم كتم الصوت",
+    "soundEnabled": "تم تشغيل الصوت",
+    "localeChangedDe": "تم تغيير اللغة إلى الألمانية",
+    "localeChangedEn": "تم تغيير اللغة إلى الإنجليزية",
+    "localeChangedAr": "تم تغيير اللغة إلى العربية",
+    "logoTripleClick": "هدي اللعب... اللوغو مو زر طوارئ."
   },
   "footer": {
     "copyright": "© {year} moh-sass. جميع الحقوق محفوظة."

messages/de.json

@@ -9,8 +9,16 @@
     "openMenu": "Menü öffnen",
     "closeMenu": "Menü schliessen",
     "themeToggle": "Theme wechseln",
+    "themeLight": "Heller Modus aktiviert",
+    "themeDark": "Dunkler Modus aktiviert",
     "soundMute": "Sounds stummschalten",
-    "soundUnmute": "Sounds aktivieren"
+    "soundUnmute": "Sounds aktivieren",
+    "soundMuted": "Sound stummgeschaltet",
+    "soundEnabled": "Sound aktiviert",
+    "localeChangedDe": "Sprache auf Deutsch gewechselt",
+    "localeChangedEn": "Sprache auf Englisch gewechselt",
+    "localeChangedAr": "Sprache auf Arabisch gewechselt",
+    "logoTripleClick": "Ganz ruhig. Das Logo ist kein Panikknopf."
   },
   "footer": {
     "copyright": "© {year} moh-sass. Alle Rechte vorbehalten."

messages/en.json

@@ -9,8 +9,16 @@
     "openMenu": "Open menu",
     "closeMenu": "Close menu",
     "themeToggle": "Toggle theme",
+    "themeLight": "Light mode enabled",
+    "themeDark": "Dark mode enabled",
     "soundMute": "Mute sounds",
-    "soundUnmute": "Unmute sounds"
+    "soundUnmute": "Unmute sounds",
+    "soundMuted": "Sound muted",
+    "soundEnabled": "Sound enabled",
+    "localeChangedDe": "Language changed to German",
+    "localeChangedEn": "Language changed to English",
+    "localeChangedAr": "Language changed to Arabic",
+    "logoTripleClick": "Easy there. The logo is not a panic button."
   },
   "footer": {
     "copyright": "© {year} moh-sass. All rights reserved."

package-lock.json

@@ -29,6 +29,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.71.2",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
         "zod": "^4.3.6"
       },
@@ -9002,6 +9003,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

package.json

@@ -38,6 +38,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.71.2",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },

tests/media-storage.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+
+import { getExtensionForMimeType } from "@/lib/media-storage";
+import { inferMediaKindFromFileName } from "@/lib/media-service";
+
+describe("media upload types", () => {
+  it("accepts gif mime types", () => {
+    expect(getExtensionForMimeType("image/gif")).toBe(".gif");
+  });
+
+  it("treats gif files as images", () => {
+    expect(inferMediaKindFromFileName("animation.gif")).toBe("IMAGE");
+  });
+});