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({
-  params: { locale },
-  searchParams,
-}: ContactPageProps) {
+export default async function ContactPage({ params: { locale } }: 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 = {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootMarqueePage({
-  searchParams,
-}: RootMarqueePageProps) {
+export default async function RootMarqueePage() {
   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 = {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootMediaPage({ searchParams }: RootMediaPageProps) {
+export default async function RootMediaPage() {
   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 = {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootPortfolioCategoriesPage({
-  searchParams,
-}: RootPortfolioCategoriesPageProps) {
+export default async function RootPortfolioCategoriesPage() {
   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 = {
-  searchParams?: {
-    error?: string;
-  };
-};
-
-export default async function RootNewPortfolioProjectPage({
-  searchParams,
-}: RootNewPortfolioProjectPageProps) {
+export default async function RootNewPortfolioProjectPage() {
   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 = {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootSiteSettingsPage({
-  searchParams,
-}: RootSiteSettingsPageProps) {
+export default async function RootSiteSettingsPage() {
   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 = {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootSMTPProtectionPage({
-  searchParams,
-}: RootSMTPProtectionPageProps) {
+export default async function RootSMTPProtectionPage() {
   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 = {
-  searchParams?: {
-    success?: string;
-    error?: string;
-  };
-};
-
-export default async function RootSMTPPage({ searchParams }: RootSMTPPageProps) {
+export default async function RootSMTPPage() {
   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}