feat: separate language selector from ranking selector (#233)

* feat: add Lang select

* fix: select correct lang on ranking load

* fix: handle undefined object

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: <span>&#x1F1EE;&#x1F1F9;</span>,
+    value: "ITA",
+  },
+  {
+    label: <span>&#x1F1EC;&#x1F1E7;</span>,
+    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 (
+    <div className="flex items-center space-x-4">
+      <p className="text-muted-foreground text-sm">Lingua</p>
+      {canChoose ? (
+        <Tabs
+          value={selectedLang}
+          onValueChange={(v) => onChange(v as Lang)}
+          className="flex flex-1"
+        >
+          <TabsList className="flex overflow-x-hidden">
+            {langs.map((lang) => (
+              <TabsTrigger
+                className="block"
+                value={lang.value}
+                key={lang.value}
+              >
+                {lang.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      ) : (
+        <Removable showRemove={false}>{selectedLangOption.label}</Removable>
+      )}
+    </div>
+  );
+}

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<boolean>;
@@ -42,7 +41,7 @@ export default function RankingCombobox({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button variant="outline" className="h-full justify-start">
-          <span className="mr-1">{selectedPhase.name}</span> <PhaseFlag phase={selectedPhase} />
+          {selectedPhase.name}
         </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0" side="bottom" align="start">
@@ -58,8 +57,7 @@ export default function RankingCombobox({
                     onSelect={handleChange}
                     value={phase.href}
                   >
-                    <span className="mr-1">{phase.name}</span>
-                    <PhaseFlag phase={phase} />
+                    {phase.name}
                   </CommandItem>
                 ))}
               </ScrollArea>

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} <PhaseFlag phase={phase} />
+            {phase.name}
           </TabsTrigger>
         ))}
       </TabsList>

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<boolean>(false);
   const rankingOpen = useState<boolean>(false);
 
-  const filteredPhases = selectedGroup.phases.filter(
-    (a) => phases.all.findIndex((b) => a.href === b.href) !== -1,
+  const [selectedLang, setSelectedLang] = useState<Lang>(
+    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 (
     <div className="flex w-full flex-wrap gap-4 max-sm:flex-col">
       {showGroups && (
@@ -68,6 +98,11 @@ export default function PhaseSelect(props: Props) {
           groups={phases.groups}
         />
       )}
+      <LangSelect
+        canChoose={showLangs}
+        selectedLang={selectedLang}
+        onChange={handleOnLangChange}
+      />
       <RankingSelect
         isCombobox={isCombobox}
         rankingOpen={rankingOpen}