Add Sonner-based notifications and UX polish

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