2371bbb1b7
- Add language and theme selector submenus to UserMenu component for quick access - Refactor shared utilities: extract THEME_OPTIONS constant and getLocaleDisplayName() function - Update LocaleSelect and ThemeSelect to use shared utilities, eliminating code duplication - Make UserMenu reactive with MobX observer for real-time setting updates - Fix language switching reactivity by immediately updating workspaceStore.state.locale - Add scrollable menu support for language selector (max-h-[90vh]) - Apply same instant locale update to PreferencesSection for consistency 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
38 lines
1 KiB
TypeScript
38 lines
1 KiB
TypeScript
import { GlobeIcon } from "lucide-react";
|
|
import { FC } from "react";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { locales } from "@/i18n";
|
|
import { getLocaleDisplayName } from "@/utils/i18n";
|
|
|
|
interface Props {
|
|
value: Locale;
|
|
onChange: (locale: Locale) => void;
|
|
}
|
|
|
|
const LocaleSelect: FC<Props> = (props: Props) => {
|
|
const { onChange, value } = props;
|
|
|
|
const handleSelectChange = async (locale: Locale) => {
|
|
onChange(locale);
|
|
};
|
|
|
|
return (
|
|
<Select value={value} onValueChange={handleSelectChange}>
|
|
<SelectTrigger>
|
|
<div className="flex items-center gap-2">
|
|
<GlobeIcon className="w-4 h-auto" />
|
|
<SelectValue placeholder="Select language" />
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{locales.map((locale) => (
|
|
<SelectItem key={locale} value={locale}>
|
|
{getLocaleDisplayName(locale)}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
};
|
|
|
|
export default LocaleSelect;
|