feat: language dropdown enhancements

src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx

@@ -1,7 +1,9 @@
+import { useEffect, useRef, useState } from "react"
 import { useLocale } from "next-intl"
 
 import { FilterInputState, Lang } from "@/lib/types"
 
+import Input from "@/components/ui/input"
 import {
   Select,
   SelectContent,
@@ -34,15 +36,31 @@ const FindWalletLanguageSelectInput = ({
   updateFilterState,
 }: FindWalletLanguageSelectInputProps) => {
   const locale = useLocale()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [isSelectOpen, setIsSelectOpen] = useState(false)
+  const searchInputRef = useRef<HTMLInputElement>(null)
   const { t } = useTranslation("page-wallets-find-wallet")
   const languageCountWalletsData = getLanguageCountWalletsData(locale as string)
-  const countSortedLanguagesCount = languageCountWalletsData.sort(
+  const countSortedLanguagesCount = [...languageCountWalletsData].sort(
     (a, b) => b.count - a.count
   )
 
+  useEffect(() => {
+    if (isSelectOpen) {
+      //Delay focus to ensure input is rendered
+      const frame = requestAnimationFrame(() => {
+        searchInputRef.current?.focus()
+      })
+
+      return () => clearTimeout(frame)
+    }
+  }, [isSelectOpen])
+
   return (
     <div className="flex flex-col gap-2">
       <Select
+        open={isSelectOpen}
+        onOpenChange={setIsSelectOpen}
         value={inputState as string}
         onValueChange={(e: Lang) => {
           trackCustomEvent({
@@ -51,15 +69,58 @@ const FindWalletLanguageSelectInput = ({
             eventName: getLanguageCodeName(e, locale!),
           })
           updateFilterState(filterIndex, itemIndex, e)
+          setSearchQuery("") // Reset search when selection is made
         }}
       >
         <SelectTrigger className="w-full">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
+          <div
+            className="sticky -top-2 z-10 bg-background p-2"
+            onKeyDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Input
+              ref={searchInputRef}
+              type="search"
+              placeholder={t("page-find-wallet-search-languages")}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key !== "Enter") return
+
+                const selectedLanguage = languageCountWalletsData.find((lang) =>
+                  lang.name.toLowerCase().includes(searchQuery.toLowerCase())
+                )
+                if (!selectedLanguage) return
+
+                trackCustomEvent({
+                  eventCategory: "WalletFilterSidebar",
+                  eventAction: "Language search",
+                  eventName: selectedLanguage.name,
+                })
+                updateFilterState(
+                  filterIndex,
+                  itemIndex,
+                  selectedLanguage.langCode
+                )
+                setIsSelectOpen(false)
+                setSearchQuery("")
+              }}
+              className="w-full"
+            />
+          </div>
           {languageCountWalletsData.map((language) => {
+            const isVisible = language.name
+              .toLowerCase()
+              .includes(searchQuery.toLowerCase())
             return (
-              <SelectItem key={language.langCode} value={language.langCode}>
+              <SelectItem
+                key={language.langCode}
+                value={language.langCode}
+                className={!isVisible ? "hidden" : ""}
+              >
                 {`${language.name} (${language.count})`}
               </SelectItem>
             )

src/intl/en/page-wallets-find-wallet.json

@@ -84,5 +84,6 @@
   "page-find-wallet-social-links": "Links",
   "page-find-wallet-empty-results-title": "No results",
   "page-find-wallet-empty-results-desc": "There are no wallets matching your criteria, try removing some filters.",
-  "page-find-wallet-see-wallets": "See wallets"
+  "page-find-wallet-see-wallets": "See wallets",
+  "page-find-wallet-search-languages": "Search languages..."
 }