226 lines
8.2 KiB
TypeScript
226 lines
8.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { Languages } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { useTranslation } from '@/contexts/language';
|
|
import { LANGUAGE_OPTIONS } from '@/lib/languageOptions';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const VISIBLE_LANGUAGE_OPTIONS = LANGUAGE_OPTIONS.filter((language) => !language.hidden);
|
|
|
|
interface LanguageToggleProps {
|
|
/** Show only the flag icon (compact mode) */
|
|
compact?: boolean;
|
|
/**
|
|
* Render the languages as an inline list instead of a dropdown. Use this
|
|
* INSIDE a Radix Sheet/Dialog: a portaled DropdownMenu inherits the dialog's
|
|
* `pointer-events: none` on <body> and its items become unclickable.
|
|
*/
|
|
inline?: boolean;
|
|
/** Additional class names */
|
|
className?: string;
|
|
/** Called after a locale is chosen (e.g. to close a sheet sub-view). */
|
|
onSelect?: () => void;
|
|
/** Variant style */
|
|
variant?: 'default' | 'outline' | 'ghost';
|
|
}
|
|
|
|
/**
|
|
* Flags are an emoji or a local SVG. Catalonia, the Basque Country, Galicia and
|
|
* England have no Unicode emoji, so they ship as real SVG files and render as
|
|
* an image instead of a text badge.
|
|
*/
|
|
function Flag({ flag, className }: { flag: string; className?: string }) {
|
|
if (flag.startsWith('/')) {
|
|
return (
|
|
<img
|
|
src={flag}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className={cn('h-4 w-6 shrink-0 rounded-[2px] object-cover shadow-sm', className)}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<span className={cn('inline-flex items-center justify-center text-lg leading-none', className)}>
|
|
{flag}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Language toggle dropdown for switching between the available locales
|
|
*/
|
|
export function LanguageToggle({ compact = false, inline = false, className, variant = 'ghost', onSelect }: LanguageToggleProps) {
|
|
const { language, setLanguage, t } = useTranslation();
|
|
const [query, setQuery] = useState('');
|
|
|
|
// Auto-focusing the search on a phone pops the keyboard over the list before
|
|
// the user can see the languages. Keep it for mouse/pen, not touch.
|
|
const autoFocusSearch =
|
|
typeof window !== 'undefined' && !!window.matchMedia?.('(pointer: fine)').matches;
|
|
|
|
const safeQuery = query.trim().toLowerCase();
|
|
const filteredLanguages = safeQuery
|
|
? VISIBLE_LANGUAGE_OPTIONS.filter(
|
|
(l) =>
|
|
l.name.toLowerCase().includes(safeQuery) ||
|
|
l.nativeName.toLowerCase().includes(safeQuery) ||
|
|
l.code.toLowerCase().includes(safeQuery)
|
|
)
|
|
: VISIBLE_LANGUAGE_OPTIONS;
|
|
|
|
const currentLanguage =
|
|
LANGUAGE_OPTIONS.find((l) => l.code === language) || LANGUAGE_OPTIONS[0];
|
|
|
|
if (inline) {
|
|
return (
|
|
<div className={cn('flex flex-col', className)}>
|
|
<div className="px-1 pb-2">
|
|
<input
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder={t('nav.searchLanguages')}
|
|
className="h-9 w-full rounded-lg border border-border bg-background px-3 text-sm outline-none focus:border-primary"
|
|
/>
|
|
</div>
|
|
{filteredLanguages.map((lang) => (
|
|
<button
|
|
key={lang.code}
|
|
type="button"
|
|
onClick={() => { setLanguage(lang.code); onSelect?.(); }}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-xl px-4 py-3 text-left transition-all duration-200',
|
|
language === lang.code
|
|
? 'bg-primary/10 text-primary'
|
|
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
|
|
)}
|
|
>
|
|
<span className="flex h-5 w-6 shrink-0 items-center justify-center"><Flag flag={lang.flag} /></span>
|
|
<div className="flex min-w-0 flex-col">
|
|
<span className="truncate font-medium" title={lang.nativeName}>{lang.nativeName}</span>
|
|
{lang.nativeName !== lang.name && (
|
|
<span className="truncate text-xs opacity-70" title={lang.name}>{lang.name}</span>
|
|
)}
|
|
</div>
|
|
{language === lang.code && <span className="ml-auto text-primary">✓</span>}
|
|
</button>
|
|
))}
|
|
{filteredLanguages.length === 0 && (
|
|
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
|
{t('nav.noLanguages')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu onOpenChange={(open) => { if (!open) setQuery(''); }}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant={variant}
|
|
size={compact ? 'icon' : 'default'}
|
|
aria-label={t('settings.selectLanguage')}
|
|
title={t('settings.selectLanguage')}
|
|
className={cn(
|
|
'gap-2',
|
|
compact ? 'w-10 h-10' : 'px-3',
|
|
className
|
|
)}
|
|
>
|
|
<Flag flag={currentLanguage.flag} />
|
|
{!compact && (
|
|
<>
|
|
<span className="hidden sm:inline">{currentLanguage.nativeName}</span>
|
|
<Languages className="h-4 w-4 sm:hidden" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-72">
|
|
<div
|
|
className="sticky top-0 z-10 -mx-1 -mt-1 mb-1 border-b bg-popover p-1"
|
|
onKeyDown={(e) => e.stopPropagation()}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
>
|
|
<input
|
|
autoFocus={autoFocusSearch}
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder={t('nav.searchLanguages')}
|
|
className="h-8 w-full rounded-sm bg-transparent px-2 text-sm outline-none placeholder:text-muted-foreground"
|
|
/>
|
|
</div>
|
|
{filteredLanguages.map((lang) => (
|
|
<DropdownMenuItem
|
|
key={lang.code}
|
|
onClick={() => { setLanguage(lang.code); onSelect?.(); }}
|
|
className={cn(
|
|
'flex min-h-11 items-center gap-3 cursor-pointer',
|
|
language === lang.code && 'bg-primary/10 text-primary'
|
|
)}
|
|
>
|
|
<span className="flex h-5 w-6 shrink-0 items-center justify-center"><Flag flag={lang.flag} /></span>
|
|
<div className="flex min-w-0 flex-col">
|
|
<span className="truncate font-medium" title={lang.nativeName}>{lang.nativeName}</span>
|
|
{lang.nativeName !== lang.name && (
|
|
<span className="truncate text-xs text-muted-foreground" title={lang.name}>{lang.name}</span>
|
|
)}
|
|
</div>
|
|
{language === lang.code && (
|
|
<span className="ml-auto shrink-0 text-primary">✓</span>
|
|
)}
|
|
</DropdownMenuItem>
|
|
))}
|
|
{filteredLanguages.length === 0 && (
|
|
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
|
{t('nav.noLanguages')}
|
|
</div>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Simple language selector for settings page
|
|
*/
|
|
export function LanguageSelector() {
|
|
const { language, setLanguage, t } = useTranslation();
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<label className="text-sm font-medium">{t('settings.selectLanguage')}</label>
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
{VISIBLE_LANGUAGE_OPTIONS.map((lang) => (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => setLanguage(lang.code)}
|
|
className={cn(
|
|
'flex items-center gap-3 p-4 rounded-xl border-2 text-left transition-all',
|
|
language === lang.code
|
|
? 'border-primary bg-primary/10 shadow-lg shadow-primary/20'
|
|
: 'border-border hover:border-primary/50 hover:bg-muted/50'
|
|
)}
|
|
>
|
|
<span className="flex h-7 w-9 shrink-0 items-center justify-center">
|
|
<Flag flag={lang.flag} className="h-6 w-9" />
|
|
</span>
|
|
<div className="min-w-0 text-left">
|
|
<div className="truncate font-bold" title={lang.nativeName}>{lang.nativeName}</div>
|
|
{lang.nativeName !== lang.name && (
|
|
<div className="truncate text-xs text-muted-foreground" title={lang.name}>{lang.name}</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|