mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Add Sonner-based notifications and UX polish

Browse Source
This commit is contained in:
MOH
2026-03-10 17:43:26 +01:00
parent eceb0f3a54
commit 77cc9dca87
32 changed files with 279 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/(site)/contact/actions.ts
+13 -7
View File
@@ -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
+1 -13
View File
@@ -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
+7 -1
View File
@@ -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
+4 -1
View File
@@ -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 -24
View File
@@ -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 -22
View File
@@ -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 -24
View File
@@ -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
-14
View File
@@ -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
-18
View File
@@ -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 -16
View File
@@ -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
-16
View File
@@ -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
+1 -24
View File
@@ -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
+1 -24
View File
@@ -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 -22
View File
@@ -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}
components/layout/floating-preferences.tsx
+9
View File
@@ -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
+16
View File
@@ -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
-67
View File
@@ -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
+3 -8
View File
@@ -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
+1 -1
View File
@@ -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
+84
View File
@@ -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
+11 -2
View File
@@ -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
+11 -1
View File
@@ -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
+6
View File
@@ -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
+50
View File
@@ -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
+2 -2
View File
@@ -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
+1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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
Generated
+11
View File
@@ -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
+1
View File
@@ -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
+14
View File
@@ -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");
});
});