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 { Translate } from "@phosphor-icons/react";
-import {
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui";
-  Button,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  ScrollArea,
-} from "@reactive-resume/ui";
-import { cn } from "@reactive-resume/utils";
 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>
+        <LocaleCombobox
-          <CommandInput placeholder={t`Search for a language`} />
+          value={i18n.locale}
-          <CommandEmpty>{t`No results found`}</CommandEmpty>
+          onValueChange={async (locale) => {
-          <CommandGroup>
+            await changeLanguage(locale);
-            <ScrollArea orientation="vertical">
+            setOpen(false);
-              <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>
       </PopoverContent>
     </Popover>
   );

apps/client/src/pages/dashboard/settings/_sections/profile.tsx

@@ -9,7 +9,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { useLanguages } from "@/client/services/resume/translation";
+import { LocaleCombobox } from "@/client/components/locale-combobox";
 import { useUpdateUser, useUser } from "@/client/services/user";
 
 const formSchema = z.object({
@@ -21,7 +21,6 @@ type FormValues = z.infer<typeof formSchema>;
 
 export const ProfileSettings = () => {
   const { user } = useUser();
-  const { languages } = useLanguages();
   const { theme, setTheme } = useTheme();
   const { updateUser, loading } = useUpdateUser();
 
@@ -95,19 +94,7 @@ export const ProfileSettings = () => {
               <FormItem>
                 <FormLabel>{t`Language`}</FormLabel>
                 <div className="w-full">
-                  <Combobox
+                  <LocaleCombobox value={field.value} onValueChange={field.onChange} />
-                    {...field}
-                    value={field.value}
-                    onValueChange={field.onChange}
-                    options={languages.map(({ locale, name }) => ({
-                      label: (
-                        <>
-                          {name} <span className="ml-1 text-xs opacity-50">({locale})</span>
-                        </>
-                      ),
-                      value: locale,
-                    }))}
-                  />
                 </div>
                 <FormDescription>
                   <span>

apps/client/src/pages/home/sections/faq/index.tsx

@@ -160,10 +160,10 @@ const Question4 = () => {
               className="no-underline"
               href={`https://crowdin.com/translate/reactive-resume/all/en-${language.editorCode}`}
             >
-              <div className="relative bg-secondary-accent font-medium">
+              <div className="relative bg-secondary-accent font-medium transition-colors hover:bg-primary hover:text-background">
                 <span className="px-2 py-1">{language.name}</span>
 
-                {language.progress && (
+                {language.progress !== undefined && (
                   <span
                     className={cn(
                       "inset-0 bg-warning px-1.5 py-1 text-xs text-white",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@reactive-resume/source",
   "description": "A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume.",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "license": "MIT",
   "private": true,
   "author": {
@@ -187,6 +187,7 @@
     "deepmerge": "^4.3.1",
     "file-saver": "^2.0.5",
     "framer-motion": "^10.16.5",
+    "fuzzy": "^0.1.3",
     "helmet": "^7.1.0",
     "immer": "^10.0.3",
     "ioredis": "^5.3.2",

pnpm-lock.yaml

@@ -227,6 +227,9 @@ dependencies:
   framer-motion:
     specifier: ^10.16.5
     version: 10.16.5(react-dom@18.2.0)(react@18.2.0)
+  fuzzy:
+    specifier: ^0.1.3
+    version: 0.1.3
   helmet:
     specifier: ^7.1.0
     version: 7.1.0
@@ -11300,6 +11303,11 @@ packages:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
     dev: true
 
+  /fuzzy@0.1.3:
+    resolution: {integrity: sha512-/gZffu4ykarLrCiP3Ygsa86UAo1E5vEVlvTrpkKywXSbP9Xhln3oSp9QSV57gEq3JFFpGJ4GZ+5zdEp3FcUh4w==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}