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.
This commit is contained in:
decolua
@@ -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)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user