Enhance error formatting to include low-level cause details, update HeaderMenu to use MenuItem component for better structure, and improve LanguageSwitcher to support controlled open state. Update subproject commit status.

src/shared/components/HeaderMenu.js

@@ -2,16 +2,97 @@
 
 import { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
-import ThemeToggle from "./ThemeToggle";
-import LanguageSwitcher from "./LanguageSwitcher";
-import NineRemoteButton from "./NineRemoteButton";
+import { LOCALE_COOKIE, normalizeLocale } from "@/i18n/config";
+import { useTheme } from "@/shared/hooks/useTheme";
 import ChangelogModal from "./ChangelogModal";
+import NineRemotePromoModal from "./NineRemotePromoModal";
+import LanguageSwitcher from "./LanguageSwitcher";
+
+const LOCALE_INFO = {
+  "en": { name: "English", flag: "🇺🇸" },
+  "vi": { name: "Tiếng Việt", flag: "🇻🇳" },
+  "zh-CN": { name: "简体中文", flag: "🇨🇳" },
+  "zh-TW": { name: "繁體中文", flag: "🇹🇼" },
+  "ja": { name: "日本語", flag: "🇯🇵" },
+  "pt-BR": { name: "Português (BR)", flag: "🇧🇷" },
+  "pt-PT": { name: "Português (PT)", flag: "🇵🇹" },
+  "ko": { name: "한국어", flag: "🇰🇷" },
+  "es": { name: "Español", flag: "🇪🇸" },
+  "de": { name: "Deutsch", flag: "🇩🇪" },
+  "fr": { name: "Français", flag: "🇫🇷" },
+  "he": { name: "עברית", flag: "🇮🇱" },
+  "ar": { name: "العربية", flag: "🇸🇦" },
+  "ru": { name: "Русский", flag: "🇷🇺" },
+  "pl": { name: "Polski", flag: "🇵🇱" },
+  "cs": { name: "Čeština", flag: "🇨🇿" },
+  "nl": { name: "Nederlands", flag: "🇳🇱" },
+  "tr": { name: "Türkçe", flag: "🇹🇷" },
+  "uk": { name: "Українська", flag: "🇺🇦" },
+  "tl": { name: "Tagalog", flag: "🇵🇭" },
+  "id": { name: "Indonesia", flag: "🇮🇩" },
+  "th": { name: "ไทย", flag: "🇹🇭" },
+  "hi": { name: "हिन्दी", flag: "🇮🇳" },
+  "bn": { name: "বাংলা", flag: "🇧🇩" },
+  "ur": { name: "اردو", flag: "🇵🇰" },
+  "ro": { name: "Română", flag: "🇷🇴" },
+  "sv": { name: "Svenska", flag: "🇸🇪" },
+  "it": { name: "Italiano", flag: "🇮🇹" },
+  "el": { name: "Ελληνικά", flag: "🇬🇷" },
+  "hu": { name: "Magyar", flag: "🇭🇺" },
+  "fi": { name: "Suomi", flag: "🇫🇮" },
+  "da": { name: "Dansk", flag: "🇩🇰" },
+  "no": { name: "Norsk", flag: "🇳🇴" },
+};
+
+function getLocaleFromCookie() {
+  if (typeof document === "undefined") return "en";
+  const cookie = document.cookie
+    .split(";")
+    .find((c) => c.trim().startsWith(`${LOCALE_COOKIE}=`));
+  const value = cookie ? decodeURIComponent(cookie.split("=")[1]) : "en";
+  return normalizeLocale(value);
+}
+
+function MenuItem({ icon, label, onClick, trailing, danger }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`flex items-center gap-3 w-full px-4 py-2.5 text-sm transition-colors ${
+        danger
+          ? "text-red-500 hover:bg-red-500/10"
+          : "text-text-main hover:bg-black/5 dark:hover:bg-white/5"
+      }`}
+    >
+      <span className={`material-symbols-outlined text-[20px] ${danger ? "" : "text-text-muted"}`}>
+        {icon}
+      </span>
+      <span className="flex-1 text-left">{label}</span>
+      {trailing && <span className="text-base">{trailing}</span>}
+    </button>
+  );
+}
+
+MenuItem.propTypes = {
+  icon: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  trailing: PropTypes.node,
+  danger: PropTypes.bool,
+};
 
 export default function HeaderMenu({ onLogout }) {
   const [isOpen, setIsOpen] = useState(false);
   const [changelogOpen, setChangelogOpen] = useState(false);
+  const [remoteOpen, setRemoteOpen] = useState(false);
+  const [langOpen, setLangOpen] = useState(false);
+  const [locale, setLocale] = useState("en");
+  const { toggleTheme, isDark } = useTheme();
   const menuRef = useRef(null);
 
+  useEffect(() => {
+    setLocale(getLocaleFromCookie());
+  }, [langOpen]);
+
   useEffect(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -24,10 +105,7 @@ export default function HeaderMenu({ onLogout }) {
     }
   }, [isOpen]);
 
-  const openChangelog = () => {
-    setIsOpen(false);
-    setChangelogOpen(true);
-  };
+  const close = () => setIsOpen(false);
 
   return (
     <>
@@ -37,47 +115,45 @@ export default function HeaderMenu({ onLogout }) {
           className="flex items-center justify-center p-2 rounded-lg text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-all"
           title="Menu"
         >
-          <span className="material-symbols-outlined">more_vert</span>
+          <span className="material-symbols-outlined">grid_view</span>
         </button>
 
         {isOpen && (
           <div className="absolute right-0 top-full mt-2 w-60 bg-surface border border-black/10 dark:border-white/10 rounded-xl shadow-2xl z-50 animate-in fade-in zoom-in-95 duration-150 overflow-hidden py-1">
-            <button
-              onClick={openChangelog}
-              className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
-            >
-              <span className="material-symbols-outlined text-[20px] text-text-muted">history</span>
-              Change Log
-            </button>
-
-            <div className="flex items-center px-2 py-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
-              <LanguageSwitcher />
-            </div>
-
-            <div className="flex items-center px-2 py-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
-              <ThemeToggle />
-              <span className="text-sm text-text-main">Theme</span>
-            </div>
-
-            <button
-              onClick={() => {
-                setIsOpen(false);
-                onLogout();
-              }}
-              className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-red-500 hover:bg-red-500/10 transition-colors"
-            >
-              <span className="material-symbols-outlined text-[20px]">logout</span>
-              Logout
-            </button>
-
-            <div className="flex items-center px-2 py-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
-              <NineRemoteButton />
-            </div>
+            <MenuItem
+              icon="history"
+              label="Change Log"
+              onClick={() => { close(); setChangelogOpen(true); }}
+            />
+            <MenuItem
+              icon="language"
+              label={LOCALE_INFO[locale]?.name || locale}
+              trailing={LOCALE_INFO[locale]?.flag || "🌐"}
+              onClick={() => { close(); setLangOpen(true); }}
+            />
+            <MenuItem
+              icon={isDark ? "light_mode" : "dark_mode"}
+              label="Theme"
+              onClick={() => { toggleTheme(); close(); }}
+            />
+            <MenuItem
+              icon="computer"
+              label="Remote"
+              onClick={() => { close(); setRemoteOpen(true); }}
+            />
+            <MenuItem
+              icon="logout"
+              label="Logout"
+              danger
+              onClick={() => { close(); onLogout(); }}
+            />
           </div>
         )}
       </div>
 
       <ChangelogModal isOpen={changelogOpen} onClose={() => setChangelogOpen(false)} />
+      <NineRemotePromoModal isOpen={remoteOpen} onClose={() => setRemoteOpen(false)} />
+      <LanguageSwitcher hideTrigger isOpen={langOpen} onClose={() => setLangOpen(false)} />
     </>
   );
 }

src/shared/components/LanguageSwitcher.js

@@ -54,12 +54,22 @@ const getLocaleInfo = (locale) => {
   return locales[locale] || { name: locale, flag: "🌐" };
 };
 
-export default function LanguageSwitcher({ className = "" }) {
+export default function LanguageSwitcher({ className = "", isOpen: controlledOpen, onClose, hideTrigger = false }) {
   const [locale, setLocale] = useState("en");
   const [isPending, setIsPending] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
   const modalRef = useRef(null);
 
+  const isControlled = typeof controlledOpen === "boolean";
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const setIsOpen = (value) => {
+    if (isControlled) {
+      if (!value && onClose) onClose();
+    } else {
+      setInternalOpen(value);
+    }
+  };
+
   useEffect(() => {
     setLocale(getLocaleFromCookie());
   }, []);
@@ -102,17 +112,19 @@ export default function LanguageSwitcher({ className = "" }) {
   return (
     <div className={className}>
       {/* Trigger button */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        disabled={isPending}
-        className="flex items-center gap-2 px-3 py-2 rounded-lg text-text-muted hover:text-text-main hover:bg-surface/60 transition-colors"
-        title="Language"
-        data-i18n-skip="true"
-      >
-        <span className="material-symbols-outlined text-[20px]">language</span>
-        <span className="text-sm font-medium">{getLocaleInfo(locale).name}</span>
-        <span className="text-lg">{getLocaleInfo(locale).flag}</span>
-      </button>
+      {!hideTrigger && (
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          disabled={isPending}
+          className="flex items-center gap-2 px-3 py-2 rounded-lg text-text-muted hover:text-text-main hover:bg-surface/60 transition-colors"
+          title="Language"
+          data-i18n-skip="true"
+        >
+          <span className="material-symbols-outlined text-[20px]">language</span>
+          <span className="text-sm font-medium">{getLocaleInfo(locale).name}</span>
+          <span className="text-lg">{getLocaleInfo(locale).flag}</span>
+        </button>
+      )}
 
       {/* Portal modal - renders at document.body to avoid parent layout constraints */}
       {isOpen && createPortal(