fix: implement fuzzy search with locale switcher and settings page

apps/client/src/components/locale-combobox.tsx

@@ -0,0 +1,71 @@
+import { t } from "@lingui/macro";
+import { Check } from "@phosphor-icons/react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  ScrollArea,
+} from "@reactive-resume/ui";
+import { cn } from "@reactive-resume/utils";
+import fuzzy from "fuzzy";
+import { useMemo, useState } from "react";
+
+import { useLanguages } from "../services/resume/translation";
+
+type Props = {
+  value: string;
+  onValueChange: (locale: string) => void;
+};
+
+export const LocaleCombobox = ({ value, onValueChange }: Props) => {
+  const { languages } = useLanguages();
+  const [search, setSearch] = useState("");
+
+  const options = useMemo(() => {
+    return fuzzy.filter(search, languages, {
+      extract: (lang) => `${lang.name} ${lang.locale}`,
+    });
+  }, [search, languages]);
+
+  return (
+    <Command shouldFilter={false}>
+      <CommandInput
+        value={search}
+        onValueChange={setSearch}
+        placeholder={t`Search for a language`}
+      />
+      <CommandEmpty>{t`No results found`}</CommandEmpty>
+      <CommandGroup>
+        <ScrollArea orientation="vertical">
+          <div className="max-h-60">
+            {options.map(({ original }) => (
+              <CommandItem
+                key={original.locale}
+                value={original.locale.trim().toLowerCase()}
+                onSelect={async (selectedValue) => {
+                  const result = options.find(
+                    ({ original }) => original.locale.trim().toLowerCase() === selectedValue,
+                  );
+
+                  if (!result) return null;
+
+                  onValueChange(result.original.locale);
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4 opacity-0",
+                    value === original.locale && "opacity-100",
+                  )}
+                />
+                {original.name} <span className="ml-1 text-xs opacity-50">({original.locale})</span>
+              </CommandItem>
+            ))}
+          </div>
+        </ScrollArea>
+      </CommandGroup>
+    </Command>
+  );
+};

apps/client/src/components/locale-switch.tsx

@@ -1,35 +1,15 @@
-import { t } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { Check, Translate } from "@phosphor-icons/react";
-import {
-  Button,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  ScrollArea,
-} from "@reactive-resume/ui";
-import { cn } from "@reactive-resume/utils";
+import { Translate } from "@phosphor-icons/react";
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui";
 import { useState } from "react";
 
 import { changeLanguage } from "../providers/locale";
-import { useLanguages } from "../services/resume/translation";
+import { LocaleCombobox } from "./locale-combobox";
 
 export const LocaleSwitch = () => {
   const { i18n } = useLingui();
-  const { languages } = useLanguages();
-
   const [open, setOpen] = useState(false);
 
-  const options = languages.map((language) => ({
-    label: language.name,
-    value: language.locale,
-  }));
-
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -38,40 +18,13 @@ export const LocaleSwitch = () => {
         </Button>
       </PopoverTrigger>
       <PopoverContent align="end" className="p-0">
-        <Command>
-          <CommandInput placeholder={t`Search for a language`} />
-          <CommandEmpty>{t`No results found`}</CommandEmpty>
-          <CommandGroup>
-            <ScrollArea orientation="vertical">
-              <div className="max-h-60">
-                {options.map((option) => (
-                  <CommandItem
-                    key={option.value}
-                    value={option.value.toLowerCase().trim()}
-                    onSelect={async (selectedValue) => {
-                      const option = options.find(
-                        (option) => option.value.toLowerCase().trim() === selectedValue,
-                      );
-
-                      if (!option) return null;
-
-                      await changeLanguage(option.value);
-                      setOpen(false);
-                    }}
-                  >
-                    <Check
-                      className={cn(
-                        "mr-2 h-4 w-4 opacity-0",
-                        i18n.locale === option.value && "opacity-100",
-                      )}
-                    />
-                    {option.label} <span className="ml-1 text-xs opacity-50">({option.value})</span>
-                  </CommandItem>
-                ))}
-              </div>
-            </ScrollArea>
-          </CommandGroup>
-        </Command>
+        <LocaleCombobox
+          value={i18n.locale}
+          onValueChange={async (locale) => {
+            await changeLanguage(locale);
+            setOpen(false);
+          }}
+        />
       </PopoverContent>
     </Popover>
   );