diff --git a/src/routes/viewer/PhaseSelect/LangSelect/index.tsx b/src/routes/viewer/PhaseSelect/LangSelect/index.tsx
new file mode 100644
index 00000000..562f4933
--- /dev/null
+++ b/src/routes/viewer/PhaseSelect/LangSelect/index.tsx
@@ -0,0 +1,56 @@
+import { Removable } from "@/components/custom-ui/Removable";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export type Lang = "ITA" | "ENG";
+const langs = [
+ {
+ label: 🇮🇹,
+ value: "ITA",
+ },
+ {
+ label: 🇬🇧,
+ value: "ENG",
+ },
+] as const;
+
+export type LangSelectProps = {
+ canChoose: boolean;
+ selectedLang: Lang;
+ onChange: (newLang: Lang) => void;
+};
+
+export default function LangSelect({
+ canChoose,
+ selectedLang,
+ onChange,
+}: LangSelectProps) {
+ const selectedLangOption = langs.find((l) => l.value === selectedLang);
+ if (!selectedLangOption) return <>>;
+
+ return (
+
+
Lingua
+ {canChoose ? (
+
onChange(v as Lang)}
+ className="flex flex-1"
+ >
+
+ {langs.map((lang) => (
+
+ {lang.label}
+
+ ))}
+
+
+ ) : (
+
{selectedLangOption.label}
+ )}
+
+ );
+}
diff --git a/src/routes/viewer/PhaseSelect/RankingSelect/Combobox.tsx b/src/routes/viewer/PhaseSelect/RankingSelect/Combobox.tsx
index 9e4a8c63..f8436dd6 100644
--- a/src/routes/viewer/PhaseSelect/RankingSelect/Combobox.tsx
+++ b/src/routes/viewer/PhaseSelect/RankingSelect/Combobox.tsx
@@ -15,7 +15,6 @@ import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { State } from "@/utils/types/state";
import { PhaseLink } from "@/utils/types/data/parsed/Index/RankingFile";
-import PhaseFlag from "@/components/custom-ui/PhaseFlag";
export type RankingComboboxProps = {
rankingOpen: State;
@@ -42,7 +41,7 @@ export default function RankingCombobox({
@@ -58,8 +57,7 @@ export default function RankingCombobox({
onSelect={handleChange}
value={phase.href}
>
- {phase.name}
-
+ {phase.name}
))}
diff --git a/src/routes/viewer/PhaseSelect/RankingSelect/Tabs.tsx b/src/routes/viewer/PhaseSelect/RankingSelect/Tabs.tsx
index e1a1dd01..60bf2337 100644
--- a/src/routes/viewer/PhaseSelect/RankingSelect/Tabs.tsx
+++ b/src/routes/viewer/PhaseSelect/RankingSelect/Tabs.tsx
@@ -1,4 +1,3 @@
-import PhaseFlag from "@/components/custom-ui/PhaseFlag";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PhaseLink } from "@/utils/types/data/parsed/Index/RankingFile";
@@ -35,7 +34,7 @@ export default function RankingTabs({
value={phase.href}
key={phase.href}
>
- {phase.name}
+ {phase.name}
))}
diff --git a/src/routes/viewer/PhaseSelect/index.tsx b/src/routes/viewer/PhaseSelect/index.tsx
index e113e90f..888d4663 100644
--- a/src/routes/viewer/PhaseSelect/index.tsx
+++ b/src/routes/viewer/PhaseSelect/index.tsx
@@ -9,6 +9,7 @@ import { NO_GROUP } from "@/utils/constants";
import { State } from "@/utils/types/state";
import RankingSelect from "./RankingSelect";
import GroupSelect from "./GroupSelect";
+import LangSelect, { Lang } from "./LangSelect";
export type GroupSelectProps = {
groups: PhaseGroup[];
@@ -30,8 +31,22 @@ export default function PhaseSelect(props: Props) {
const groupOpen = useState(false);
const rankingOpen = useState(false);
- const filteredPhases = selectedGroup.phases.filter(
- (a) => phases.all.findIndex((b) => a.href === b.href) !== -1,
+ const [selectedLang, setSelectedLang] = useState(
+ selectedPhase.order.isEnglish ? "ENG" : "ITA",
+ );
+
+ const showLangs =
+ phases.all.filter((p) => p.order.isEnglish).length > 0 &&
+ phases.all.filter((p) => !p.order.isEnglish).length > 0;
+
+ const filteredPhases = useMemo(
+ () =>
+ selectedGroup.phases
+ .filter((a) => phases.all.findIndex((b) => a.href === b.href) !== -1)
+ .filter(
+ (a) => !showLangs || a.order.isEnglish === (selectedLang === "ENG"),
+ ),
+ [phases.all, selectedGroup.phases, selectedLang, showLangs],
);
const isCombobox = useMemo(
@@ -57,6 +72,21 @@ export default function PhaseSelect(props: Props) {
onChange(link, group);
}
+ function handleOnLangChange(newLang: Lang): void {
+ setSelectedLang(newLang);
+
+ const filteredUpdated = phases.all.filter(
+ (p) => p.order.isEnglish === (newLang === "ENG"),
+ );
+ if (filteredUpdated.length === 0) return;
+
+ const firstValidPhase = filteredUpdated[0];
+ const group = phases.groups.get(firstValidPhase.group.value);
+ if (!group) return;
+
+ onChange(firstValidPhase, group);
+ }
+
return (
{showGroups && (
@@ -68,6 +98,11 @@ export default function PhaseSelect(props: Props) {
groups={phases.groups}
/>
)}
+