refactor toast system to use react-hot-toast

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">