Add Sonner-based notifications and UX polish

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