refactor toast system to use react-hot-toast

components/layout/floating-preferences.tsx

@@ -39,11 +39,6 @@ export function FloatingPreferences({
           />
           <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

@@ -19,14 +19,18 @@ type LocaleToggleProps = {
   locale: string;
   className?: string;
   showLabel?: boolean;
-  localeChangedLabels?: Partial<Record<AppLocale, string>>;
+};
+
+const localeChangedMessages: Record<AppLocale, string> = {
+  de: "Sprache auf Deutsch gewechselt",
+  en: "Language changed to English",
+  ar: "تم تغيير اللغة إلى العربية",
 };
 
 export function LocaleToggle({
   locale,
   className,
   showLabel = false,
-  localeChangedLabels,
 }: LocaleToggleProps) {
   const pathname = usePathname();
   const locales: AppLocale[] = ["de", "en", "ar"];
@@ -80,7 +84,7 @@ export function LocaleToggle({
             <a
               href={getLocalizedPath(targetLocale, currentPath)}
               onClick={() => {
-                const message = localeChangedLabels?.[targetLocale];
+                const message = localeChangedMessages[targetLocale];
 
                 if (!message) {
                   return;
@@ -88,7 +92,11 @@ export function LocaleToggle({
 
                 window.sessionStorage.setItem(
                   PENDING_TOAST_STORAGE_KEY,
-                  JSON.stringify({ message, type: "success" }),
+                  JSON.stringify({
+                    type: "success",
+                    message,
+                    targetLocale,
+                  }),
                 );
               }}
               className="group flex h-10 w-10 items-center justify-center rounded-full"

components/layout/site-header.tsx

@@ -6,7 +6,6 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
 
 import { Container } from "@/components/layout/container";
 import { LocaleToggle } from "@/components/layout/locale-toggle";
@@ -15,6 +14,7 @@ import { SoundToggle } from "@/components/sound-toggle";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
 import { getLocalizedPath, stripLocalePrefix } from "@/lib/locale";
+import { toast } from "@/lib/toast";
 import { cn } from "@/lib/utils";
 
 const navItems = [
@@ -295,11 +295,6 @@ export function SiteHeader({
             <div className={desktopControlRailClassName}>
               <LocaleToggle
                 locale={locale}
-                localeChangedLabels={{
-                  de: t("localeChangedDe"),
-                  en: t("localeChangedEn"),
-                  ar: t("localeChangedAr"),
-                }}
                 className={desktopControlButtonClassName}
               />
               <SoundToggle
@@ -449,11 +444,6 @@ export function SiteHeader({
                   <div className="flex items-center justify-between gap-2">
                     <LocaleToggle
                       locale={locale}
-                      localeChangedLabels={{
-                        de: t("localeChangedDe"),
-                        en: t("localeChangedEn"),
-                        ar: t("localeChangedAr"),
-                      }}
                       className={mobileControlButtonClassName}
                     />
                     <div className="flex items-center gap-2">