From eec7c66ab6254bc0f29932205f87705853ab79f2 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Sat, 27 Jul 2024 11:09:43 +0200
Subject: [PATCH 01/13] initial lang picker migration and refactor to shadcn

---
 package.json                                  |   2 +
 src/components/LanguagePicker/MenuItem.tsx    | 115 +++-----
 .../LanguagePicker/MobileCloseBar.tsx         |  16 +-
 .../LanguagePicker/NoResultsCallout.tsx       |  43 ++-
 src/components/LanguagePicker/ProgressBar.tsx |   3 +
 src/components/LanguagePicker/index.tsx       | 271 ++++++------------
 .../LanguagePicker/useLanguagePicker.tsx      |  38 +--
 src/components/Nav/Desktop/index.tsx          |  59 +---
 src/components/Nav/Mobile/MenuFooter.tsx      |  28 +-
 src/components/ui/command.tsx                 | 157 ++++++++++
 src/components/ui/dialog.tsx                  | 120 ++++++++
 src/components/ui/popover.tsx                 |   2 +-
 src/hooks/useDisclosure.ts                    |   4 +-
 tailwind.config.ts                            |  15 +
 yarn.lock                                     |  30 +-
 15 files changed, 515 insertions(+), 388 deletions(-)
 create mode 100644 src/components/ui/command.tsx
 create mode 100644 src/components/ui/dialog.tsx

diff --git a/package.json b/package.json
index 2d3be73046e..7b52e5db518 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.8.0",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
@@ -43,6 +44,7 @@
     "chartjs-plugin-datalabels": "^2.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "embla-carousel-react": "^7.0.0",
     "ethereum-blockies-base64": "^1.0.2",
     "framer-motion": "^10.13.0",
diff --git a/src/components/LanguagePicker/MenuItem.tsx b/src/components/LanguagePicker/MenuItem.tsx
index c9f7a99e455..3e2116eec28 100644
--- a/src/components/LanguagePicker/MenuItem.tsx
+++ b/src/components/LanguagePicker/MenuItem.tsx
@@ -1,28 +1,22 @@
+import { ComponentPropsWithoutRef } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { BsCheck } from "react-icons/bs"
-import {
-  Badge,
-  Box,
-  Flex,
-  forwardRef,
-  Icon,
-  MenuItem as ChakraMenuItem,
-  type MenuItemProps as ChakraMenuItemProps,
-  Text,
-} from "@chakra-ui/react"
+import { Badge } from "@chakra-ui/react"
 
 import type { LocaleDisplayInfo } from "@/lib/types"
 
-import { BaseLink } from "@/components/Link"
+import { cn } from "@/lib/utils/cn"
+
+import { CommandItem } from "../ui/command"
 
 import ProgressBar from "./ProgressBar"
 
-type ItemProps = ChakraMenuItemProps & {
+type ItemProps = ComponentPropsWithoutRef<typeof CommandItem> & {
   displayInfo: LocaleDisplayInfo
 }
 
-const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
+const MenuItem = ({ displayInfo, ...props }: ItemProps) => {
   const {
     localeOption,
     sourceName,
@@ -32,7 +26,7 @@ const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
     isBrowserDefault,
   } = displayInfo
   const { t } = useTranslation("common")
-  const { asPath, locale } = useRouter()
+  const { locale } = useRouter()
   const isCurrent = localeOption === locale
 
   const getProgressInfo = (approvalProgress: number, wordsApproved: number) => {
@@ -48,51 +42,37 @@ const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
   const { progress, words } = getProgressInfo(approvalProgress, wordsApproved)
 
   return (
-    <ChakraMenuItem
-      as={BaseLink}
-      ref={ref}
-      flexDir="column"
-      w="full"
-      mb="1"
-      display="block"
-      pt="2 !important"
-      alignItems="start"
-      borderRadius="base"
-      bg={isCurrent ? "background.base" : "transparent"}
-      color="body.base"
-      textDecoration="none"
-      onFocus={(e) => {
-        e.target.scrollIntoView({ block: "nearest" })
-      }}
-      scrollMarginY="8"
-      _hover={{
-        bg: "primary.lowContrast",
-        textDecoration: "none",
-        "p.language-name": { color: "primary.base" },
-      }}
-      _focus={{ bg: "primary.lowContrast" }}
-      sx={{
-        p: {
-          textDecoration: "none",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-        },
-      }}
-      href={asPath}
-      locale={localeOption}
+    <CommandItem
+      value={localeOption}
+      className={cn(
+        "group mb-1 flex-col items-start rounded pt-2 text-body hover:bg-primary-low-contrast",
+        isCurrent
+          ? "bg-background hover:bg-primary-low-contrast"
+          : "bg-transparent"
+      )}
       {...props}
+      // TODO double check this
+      // sx={{
+      //   p: {
+      //     textDecoration: "none",
+      //     overflow: "hidden",
+      //     textOverflow: "ellipsis",
+      //     whiteSpace: "nowrap",
+      //   },
+      // }}
     >
-      <Flex alignItems="center" w="full">
-        <Box flex={1}>
-          <Flex alignItems="center" gap={2}>
-            <Text
-              className="language-name"
-              fontSize="lg"
-              color={isCurrent ? "primary.highContrast" : "body.base"}
+      <div className="flex w-full items-center">
+        <div className="flex-1">
+          <div className="flex items-center gap-2">
+            <p
+              className={cn(
+                "language-name text-lg group-aria-selected:text-primary",
+                isCurrent ? "text-primary-high-contrast" : "text-body"
+              )}
             >
               {targetName}
-            </Text>
+            </p>
+            {/* TODO */}
             {isBrowserDefault && (
               <Badge
                 border="1px"
@@ -107,27 +87,20 @@ const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
                 {t("page-languages-browser-default")}
               </Badge>
             )}
-          </Flex>
-          <Text textTransform="uppercase" fontSize="xs" color="body.base">
-            {sourceName}
-          </Text>
-        </Box>
+          </div>
+          <p className="text-xs uppercase text-body">{sourceName}</p>
+        </div>
         {isCurrent && (
-          <Icon as={BsCheck} fontSize="2xl" color="primary.highContrast" />
+          <BsCheck className="text-2xl text-primary-high-contrast" />
         )}
-      </Flex>
-      <Text
-        textTransform="lowercase"
-        fontSize="xs"
-        color="body.medium"
-        maxW="full"
-      >
+      </div>
+      <p className="max-w-full text-xs lowercase text-body-medium">
         {progress} {t("page-languages-translated")} • {words}{" "}
         {t("page-languages-words")}
-      </Text>
+      </p>
       <ProgressBar value={approvalProgress} />
-    </ChakraMenuItem>
+    </CommandItem>
   )
-})
+}
 
 export default MenuItem
diff --git a/src/components/LanguagePicker/MobileCloseBar.tsx b/src/components/LanguagePicker/MobileCloseBar.tsx
index c54bba831ef..6238aadfed2 100644
--- a/src/components/LanguagePicker/MobileCloseBar.tsx
+++ b/src/components/LanguagePicker/MobileCloseBar.tsx
@@ -1,8 +1,7 @@
 import { MouseEventHandler } from "react"
 import { useTranslation } from "next-i18next"
-import { Flex } from "@chakra-ui/react"
 
-import { Button } from "@/components/Buttons"
+import { Button } from "../../../tailwind/ui/buttons/Button"
 
 type MobileCloseBarProps = {
   handleClick: MouseEventHandler<HTMLButtonElement>
@@ -12,17 +11,10 @@ export const MobileCloseBar = ({ handleClick }: MobileCloseBarProps) => {
   const { t } = useTranslation()
 
   return (
-    <Flex
-      justifyContent="end"
-      hideFrom="md"
-      position="sticky"
-      zIndex="sticky"
-      top="0"
-      bg="background.base"
-    >
-      <Button p="4" variant="ghost" alignSelf="end" onClick={handleClick}>
+    <div className="sticky top-0 flex justify-end bg-background md:hidden">
+      <Button className="self-end p-4" variant="ghost" onClick={handleClick}>
         {t("close")}
       </Button>
-    </Flex>
+    </div>
   )
 }
diff --git a/src/components/LanguagePicker/NoResultsCallout.tsx b/src/components/LanguagePicker/NoResultsCallout.tsx
index 2478d55c38f..69b3dc767f2 100644
--- a/src/components/LanguagePicker/NoResultsCallout.tsx
+++ b/src/components/LanguagePicker/NoResultsCallout.tsx
@@ -1,5 +1,4 @@
 import { useTranslation } from "next-i18next"
-import { FormHelperText, forwardRef, Text } from "@chakra-ui/react"
 
 import { BaseLink } from "@/components/Link"
 
@@ -7,27 +6,25 @@ import MenuItem from "./MenuItem"
 
 type NoResultsCalloutProps = { onClose: () => void }
 
-const NoResultsCallout = forwardRef(
-  ({ onClose }: NoResultsCalloutProps, ref) => {
-    const { t } = useTranslation("common")
-    return (
-      <FormHelperText color="body.medium" lineHeight="base" fontSize="md">
-        <Text fontWeight="bold" mb="2" color="body.base">
-          {t("page-languages-want-more-header")}
-        </Text>
-        {t("page-languages-want-more-paragraph")}{" "}
-        <BaseLink
-          ref={ref}
-          as={MenuItem}
-          key="item-no-results"
-          href="contributing/translation-program"
-          onClick={onClose}
-        >
-          {t("page-languages-want-more-link")}
-        </BaseLink>
-      </FormHelperText>
-    )
-  }
-)
+const NoResultsCallout = ({ onClose }: NoResultsCalloutProps) => {
+  const { t } = useTranslation("common")
+  return (
+    <div>
+      <p className="mb-2 font-bold">{t("page-languages-want-more-header")}</p>
+      <p className="text-body-medium">
+        {t("page-languages-want-more-paragraph")}
+      </p>
+      {/* TODO: use migrated Link component */}
+      <BaseLink
+        as={MenuItem}
+        key="item-no-results"
+        href="contributing/translation-program"
+        onClick={onClose}
+      >
+        {t("page-languages-want-more-link")}
+      </BaseLink>
+    </div>
+  )
+}
 
 export default NoResultsCallout
diff --git a/src/components/LanguagePicker/ProgressBar.tsx b/src/components/LanguagePicker/ProgressBar.tsx
index 06bb008923f..1ea42523757 100644
--- a/src/components/LanguagePicker/ProgressBar.tsx
+++ b/src/components/LanguagePicker/ProgressBar.tsx
@@ -2,6 +2,9 @@ import { Progress, ProgressProps } from "@chakra-ui/react"
 
 type ProgressBarProps = Pick<ProgressProps, "value">
 
+{
+  /* TODO migrate */
+}
 const ProgressBar = ({ value }: ProgressBarProps) => (
   <Progress
     value={value}
diff --git a/src/components/LanguagePicker/index.tsx b/src/components/LanguagePicker/index.tsx
index 5d411cd520b..c3053f9f51c 100644
--- a/src/components/LanguagePicker/index.tsx
+++ b/src/components/LanguagePicker/index.tsx
@@ -1,102 +1,81 @@
 import { useRouter } from "next/router"
-import {
-  Box,
-  Flex,
-  FormControl,
-  FormLabel,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  InputRightElement,
-  Kbd,
-  Menu,
-  MenuList,
-  type MenuListProps,
-  type MenuProps,
-  Text,
-  type UseDisclosureReturn,
-  useEventListener,
-} from "@chakra-ui/react"
-
-import { Lang, LocaleDisplayInfo } from "@/lib/types"
 
 import { BaseLink } from "@/components/Link"
 
+import { cn } from "@/lib/utils/cn"
 import { isMobile } from "@/lib/utils/isMobile"
-import { isLangRightToLeft } from "@/lib/utils/translations"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandList,
+} from "../ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
 
 import MenuItem from "./MenuItem"
 import { MobileCloseBar } from "./MobileCloseBar"
 import NoResultsCallout from "./NoResultsCallout"
 import { useLanguagePicker } from "./useLanguagePicker"
 
-type LanguagePickerProps = Omit<MenuListProps, "children"> & {
+type LanguagePickerProps = {
   children: React.ReactNode
-  placement?: MenuProps["placement"]
+  className?: string
   handleClose?: () => void
-  menuState?: UseDisclosureReturn
 }
 
 const LanguagePicker = ({
   children,
-  placement,
   handleClose,
-  menuState,
-  ...props
+  className,
 }: LanguagePickerProps) => {
+  const { asPath, push } = useRouter()
   const {
     t,
-    refs,
     disclosure,
-    filterValue,
-    setFilterValue,
     filteredNames,
-    handleInputFocus,
-  } = useLanguagePicker(handleClose, menuState)
-  const { inputRef, firstItemRef, noResultsRef, footerRef } = refs
-  const { onClose } = disclosure
+    // TODO: Implement this
+    // handleInputFocus,
+  } = useLanguagePicker(handleClose)
+  const { isOpen, setValue, onClose } = disclosure
 
   /**
    * Adds a keydown event listener to focus filter input (\).
    * @param {string} event - The keydown event.
    */
-  useEventListener("keydown", (e) => {
-    if (e.key !== "\\") return
-    e.preventDefault()
-    inputRef.current?.focus()
-  })
+  // useEventListener("keydown", (e) => {
+  //   if (e.key !== "\\") return
+  //   e.preventDefault()
+  //   inputRef.current?.focus()
+  // })
 
   // onClick handlers
   const handleMobileCloseBarClick = () => onClose()
-  const handleMenuItemClose = (displayInfo: LocaleDisplayInfo) =>
+  const handleMenuItemSelect = (currentValue: string) => {
+    push(asPath, asPath, {
+      locale: currentValue,
+    })
     onClose({
       eventAction: "Locale chosen",
-      eventName: displayInfo.localeOption,
+      eventName: currentValue,
     })
+  }
   const handleBaseLinkClose = () =>
     onClose({
       eventAction: "Translation program link (menu footer)",
       eventName: "/contributing/translation-program",
     })
 
-  const { locale } = useRouter()
-  const isRtl = isLangRightToLeft(locale! as Lang)
-
   return (
-    <Menu isLazy placement={placement} autoSelect={false} {...disclosure}>
-      {children}
-      <MenuList
-        position="relative"
-        overflow="auto"
-        borderRadius="base"
-        py="0"
-        onKeyDown={(e) => {
-          if (e.key === "Tab" || e.key === "\\") {
-            e.preventDefault()
-            ;(e.shiftKey ? inputRef : footerRef).current?.focus()
-          }
-        }}
-        {...props}
+    <Popover open={isOpen} onOpenChange={setValue}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className={cn(
+          "flex w-[320px] flex-col bg-background-highlight p-0",
+          className
+        )}
       >
         {/* Mobile Close bar */}
         {/* avoid rendering mobile only feature on desktop */}
@@ -104,113 +83,44 @@ const LanguagePicker = ({
           <MobileCloseBar handleClick={handleMobileCloseBarClick} />
         )}
 
-        {/* Main Language selection menu */}
-        <Box
-          position="relative"
-          w="100%"
-          minH="calc(100% - 53px)" // Fill height with space for close button on mobile
-          p="4"
-          bg="background.highlight"
-          sx={{ "[role=menuitem]": { py: "3", px: "2" } }}
+        <Command
+          className="gap-2 p-4"
+          filter={(value: string, search: string) => {
+            const item = filteredNames.find(
+              (name) => name.localeOption === value
+            )
+
+            if (!item) return 0
+
+            const { localeOption, sourceName, targetName, englishName } = item
+
+            if (
+              (localeOption + sourceName + targetName + englishName)
+                .toLowerCase()
+                .includes(search.toLowerCase())
+            ) {
+              return 1
+            }
+
+            return 0
+          }}
         >
-          <FormControl>
-            <FormLabel fontSize="xs" color="body.medium">
-              {t("page-languages-filter-label")}{" "}
-              <Text as="span" textTransform="lowercase">
-                ({filteredNames.length} {t("common:languages")})
-              </Text>
-            </FormLabel>
-            <InputGroup>
-              <Input
-                type="search"
-                autoComplete="off"
-                placeholder={t("page-languages-filter-placeholder")}
-                value={filterValue}
-                onChange={(e) => setFilterValue(e.target.value)}
-                onBlur={(e) => {
-                  if (e.relatedTarget?.tagName.toLowerCase() === "div") {
-                    e.currentTarget.focus()
-                  }
-                }}
-                ref={inputRef}
-                h="8"
-                mt="1"
-                mb="2"
-                bg="background.base"
-                color="body.base"
-                sx={isRtl ? { pl: 10, pr: 2 } : {}}
-                onKeyDown={(e) => {
-                  // Navigate to first result on enter
-                  if (e.key === "Enter") {
-                    e.preventDefault()
-                    firstItemRef.current?.click()
-                  }
-                  // If Tab/ArrowDown, focus on first item if available, NoResults link otherwise
-                  if (e.key === "Tab" || e.key === "ArrowDown") {
-                    e.preventDefault()
-                    ;(filteredNames.length === 0
-                      ? noResultsRef
-                      : firstItemRef
-                    ).current?.focus()
-                    e.stopPropagation()
-                  }
-                }}
-                onFocus={handleInputFocus}
-              />
-              {isRtl ? (
-                <InputLeftElement hideBelow="md" cursor="text">
-                  <Kbd
-                    fontSize="sm"
-                    lineHeight="none"
-                    ms="4"
-                    p="1"
-                    py="0.5"
-                    me="auto"
-                    border="1px"
-                    borderColor="disabled"
-                    color="disabled"
-                    rounded="base"
-                  >
-                    /
-                  </Kbd>
-                </InputLeftElement>
-              ) : (
-                <InputRightElement hideBelow="md" cursor="text">
-                  <Kbd
-                    fontSize="sm"
-                    lineHeight="none"
-                    me="2"
-                    p="1"
-                    py="0.5"
-                    ms="auto"
-                    border="1px"
-                    borderColor="disabled"
-                    color="disabled"
-                    rounded="base"
-                  >
-                    \
-                  </Kbd>
-                </InputRightElement>
-              )}
-            </InputGroup>
-
-            {filteredNames.map((displayInfo, index) => (
-              <MenuItem
-                key={"item-" + displayInfo.localeOption}
-                displayInfo={displayInfo}
-                ref={index === 0 ? firstItemRef : null}
-                onKeyDown={(e) => {
-                  if (e.key !== "\\") return
-                  e.preventDefault()
-                  inputRef.current?.focus()
-                }}
-                onClick={() => handleMenuItemClose(displayInfo)}
-              />
-            ))}
+          <div className="text-xs text-body-medium">
+            {t("page-languages-filter-label")}{" "}
+            <span className="lowercase">
+              ({filteredNames.length} {t("common:languages")})
+            </span>
+          </div>
+
+          <CommandInput
+            placeholder={t("page-languages-filter-placeholder")}
+            className="h-9"
+            icon={undefined}
+          />
 
-            {filteredNames.length === 0 && (
+          <CommandList className="max-h-[75vh]">
+            <CommandEmpty className="py-0 text-left text-base">
               <NoResultsCallout
-                ref={noResultsRef}
                 onClose={() =>
                   onClose({
                     eventAction: "Translation program link (no results)",
@@ -218,33 +128,34 @@ const LanguagePicker = ({
                   })
                 }
               />
-            )}
-          </FormControl>
-        </Box>
+            </CommandEmpty>
+            <CommandGroup className="p-0">
+              {filteredNames.map((displayInfo) => (
+                <MenuItem
+                  key={"item-" + displayInfo.localeOption}
+                  displayInfo={displayInfo}
+                  onSelect={handleMenuItemSelect}
+                />
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
 
         {/* Footer callout */}
-        <Flex
-          borderTop="2px"
-          borderColor="primary.base"
-          bg="primary.lowContrast"
-          p="3"
-          position="sticky"
-          bottom="0"
-          justifyContent="center"
-        >
-          <Text fontSize="xs" textAlign="center" color="body.base">
+        <div className="sticky bottom-0 flex justify-center border-t-2 border-primary bg-primary-low-contrast p-3">
+          <p className="text-center text-xs text-body">
             {t("page-languages-recruit-community")}{" "}
+            {/* TODO migrate once #13411 is merged */}
             <BaseLink
-              ref={footerRef}
               href="/contributing/translation-program"
               onClick={handleBaseLinkClose}
             >
               {t("common:learn-more")}
             </BaseLink>
-          </Text>
-        </Flex>
-      </MenuList>
-    </Menu>
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
   )
 }
 
diff --git a/src/components/LanguagePicker/useLanguagePicker.tsx b/src/components/LanguagePicker/useLanguagePicker.tsx
index b0cf925d43b..d1215b20321 100644
--- a/src/components/LanguagePicker/useLanguagePicker.tsx
+++ b/src/components/LanguagePicker/useLanguagePicker.tsx
@@ -1,7 +1,6 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useState } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { useDisclosure, type UseDisclosureReturn } from "@chakra-ui/react"
 
 import type {
   I18nLocale,
@@ -17,21 +16,13 @@ import progressDataJson from "@/data/translationProgress.json"
 
 import { DEFAULT_LOCALE } from "@/lib/constants"
 
+import useDisclosure from "@/hooks/useDisclosure"
+
 const progressData = progressDataJson satisfies ProjectProgressData[]
 
-export const useLanguagePicker = (
-  handleClose?: () => void,
-  menuState?: UseDisclosureReturn
-) => {
+export const useLanguagePicker = (handleClose?: () => void) => {
   const { t } = useTranslation("common")
   const { locale, locales: rawLocales } = useRouter()
-  const refs = {
-    inputRef: useRef<HTMLInputElement>(null),
-    firstItemRef: useRef<HTMLAnchorElement>(null),
-    noResultsRef: useRef<HTMLAnchorElement>(null),
-    footerRef: useRef<HTMLAnchorElement>(null),
-  }
-  const [filterValue, setFilterValue] = useState("")
 
   const [filteredNames, setFilteredNames] = useState<LocaleDisplayInfo[]>([])
 
@@ -161,17 +152,10 @@ export const useLanguagePicker = (
         return b.approvalProgress - a.approvalProgress
       }) || []
 
-    setFilteredNames(
-      displayNames.filter(
-        ({ localeOption, sourceName, targetName, englishName }) =>
-          (localeOption + sourceName + targetName + englishName)
-            .toLowerCase()
-            .includes(filterValue.toLowerCase())
-      )
-    )
-  }, [filterValue, locale, rawLocales, t])
+    setFilteredNames(displayNames)
+  }, [locale, rawLocales, t])
 
-  const { isOpen, ...menu } = useDisclosure()
+  const { isOpen, setValue, ...menu } = useDisclosure()
 
   const eventBase: Pick<MatomoEventOptions, "eventCategory" | "eventAction"> = {
     eventCategory: `Language picker`,
@@ -180,7 +164,6 @@ export const useLanguagePicker = (
 
   const onOpen = () => {
     menu.onOpen()
-    menuState?.onOpen()
     trackCustomEvent({
       ...eventBase,
       eventName: "Opened",
@@ -195,10 +178,8 @@ export const useLanguagePicker = (
     customMatomoEvent?: Required<Pick<MatomoEventOptions, "eventName">> &
       Partial<MatomoEventOptions>
   ): void => {
-    setFilterValue("")
     handleClose && handleClose()
     menu.onClose()
-    menuState?.onClose()
     trackCustomEvent(
       (customMatomoEvent
         ? { ...eventBase, ...customMatomoEvent }
@@ -223,10 +204,7 @@ export const useLanguagePicker = (
 
   return {
     t,
-    refs,
-    disclosure: { isOpen, onOpen, onClose },
-    filterValue,
-    setFilterValue,
+    disclosure: { isOpen, setValue, onOpen, onClose },
     filteredNames,
     handleInputFocus,
   }
diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx
index d4cb0a59587..911b1d3c659 100644
--- a/src/components/Nav/Desktop/index.tsx
+++ b/src/components/Nav/Desktop/index.tsx
@@ -3,22 +3,15 @@ import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { BsTranslate } from "react-icons/bs"
 import { MdBrightness2, MdWbSunny } from "react-icons/md"
-import {
-  Button,
-  HStack,
-  Icon,
-  MenuButton,
-  Text,
-  useColorModeValue,
-  useDisclosure,
-  useEventListener,
-} from "@chakra-ui/react"
+import { HStack, useColorModeValue, useEventListener } from "@chakra-ui/react"
 
 import { IconButton } from "@/components/Buttons"
 import LanguagePicker from "@/components/LanguagePicker"
 
 import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 
+import { Button } from "../../../../tailwind/ui/buttons/Button"
+
 type DesktopNavMenuProps = {
   toggleColorMode: () => void
 }
@@ -26,7 +19,6 @@ type DesktopNavMenuProps = {
 const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
   const { t } = useTranslation("common")
   const { locale } = useRouter()
-  const languagePickerState = useDisclosure()
   const languagePickerRef = useRef<HTMLButtonElement>(null)
 
   const ThemeIcon = useColorModeValue(<MdBrightness2 />, <MdWbSunny />)
@@ -54,8 +46,9 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
     if (e.metaKey || e.ctrlKey) {
       toggleColorMode()
     } else {
-      if (languagePickerState.isOpen) return
-      languagePickerRef.current?.click()
+      // TODO add this to the language picker
+      // if (languagePickerState.isOpen) return
+      // languagePickerRef.current?.click()
     }
   })
 
@@ -74,46 +67,20 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
 
       {/* Locale-picker menu */}
       <LanguagePicker
-        placement="bottom-end"
-        minH="unset"
-        maxH="75vh"
-        w="xs"
-        inset="unset"
-        top="unset"
-        menuState={languagePickerState}
+      // TODO w="xs"
       >
-        <MenuButton
-          as={Button}
+        <Button
           name={DESKTOP_LANGUAGE_BUTTON_NAME}
           ref={languagePickerRef}
           variant="ghost"
-          color="body.base"
-          transition="color 0.2s"
-          px={{ base: "2", xl: "3" }}
-          _hover={{
-            color: "primary.hover",
-            "& svg": {
-              transform: "rotate(10deg)",
-              transition: "transform 0.5s",
-            },
-          }}
-          _active={{
-            color: "primary.hover",
-            bg: "primary.lowContrast",
-          }}
-          sx={{
-            "& svg": {
-              transform: "rotate(0deg)",
-              transition: "transform 0.5s",
-            },
-          }}
+          className="gap-0 px-2 text-body transition-colors duration-200 active:bg-primary-low-contrast active:text-primary-hover data-[state='open']:bg-primary-low-contrast data-[state='open']:text-primary-hover xl:px-3 [&>svg]:transition-transform [&>svg]:duration-500 [&_svg]:hover:rotate-12"
         >
-          <Icon as={BsTranslate} fontSize="2xl" verticalAlign="middle" me={2} />
-          <Text hideBelow="lg" as="span">
+          <BsTranslate className="me-2 align-middle text-2xl" />
+          <span className="hidden lg:inline-block">
             {t("common:languages")}&nbsp;
-          </Text>
+          </span>
           {locale!.toUpperCase()}
-        </MenuButton>
+        </Button>
       </LanguagePicker>
     </HStack>
   )
diff --git a/src/components/Nav/Mobile/MenuFooter.tsx b/src/components/Nav/Mobile/MenuFooter.tsx
index da537b82d81..acbe645064f 100644
--- a/src/components/Nav/Mobile/MenuFooter.tsx
+++ b/src/components/Nav/Mobile/MenuFooter.tsx
@@ -1,12 +1,7 @@
 import { useTranslation } from "next-i18next"
 import { BsTranslate } from "react-icons/bs"
 import { MdBrightness2, MdSearch, MdWbSunny } from "react-icons/md"
-import {
-  DrawerFooter,
-  Grid,
-  MenuButton,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { DrawerFooter, Grid, useColorModeValue } from "@chakra-ui/react"
 
 import LanguagePicker from "@/components/LanguagePicker"
 
@@ -57,26 +52,13 @@ const MenuFooter = ({
           <FooterItemText>{t(themeLabelKey)}</FooterItemText>
         </FooterButton>
         <LanguagePicker
-          hideFrom="md"
-          position="fixed"
-          w="calc(100vw - var(--eth-sizes-8))"
-          inset="4"
+          className="fixed inset-4 h-[calc(100vh-var(--eth-sizes-8))]"
           handleClose={onToggle}
-          _before={{
-            content: '""',
-            position: "fixed",
-            inset: 0,
-            bg: "black",
-            opacity: 0.4,
-          }} // TODO: Replace with overlay component
         >
-          <MenuButton
-            as={FooterButton}
-            icon={BsTranslate}
-            name={MOBILE_LANGUAGE_BUTTON_NAME}
-          >
+          {/* TODO migrate once #13449 is merged */}
+          <FooterButton icon={BsTranslate} name={MOBILE_LANGUAGE_BUTTON_NAME}>
             <FooterItemText>{t("languages")}</FooterItemText>
-          </MenuButton>
+          </FooterButton>
         </LanguagePicker>
       </Grid>
     </DrawerFooter>
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 00000000000..5e165866111
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,157 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+import { cn } from "@/lib/utils/cn"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-background-highlight",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div
+    className="flex items-center rounded border border-body px-3"
+    cmdk-input-wrapper=""
+  >
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className={cn("py-6 text-center text-sm", className)}
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("bg-border -mx-1 h-px", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary-low-contrast data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 00000000000..947ea462c0b
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import { X } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+
+import { cn } from "@/lib/utils/cn"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index ee8322f3345..e83b7de3107 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "text-popover-foreground z-popover w-72 rounded-md border bg-background p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
diff --git a/src/hooks/useDisclosure.ts b/src/hooks/useDisclosure.ts
index 2bb5612be23..f5a8ce11d1b 100644
--- a/src/hooks/useDisclosure.ts
+++ b/src/hooks/useDisclosure.ts
@@ -5,13 +5,15 @@ import { useBoolean } from "usehooks-ts"
  * modal, dropdown, or any other component that can be opened and closed.
  */
 function useDisclosure(defaultValue = false) {
-  const { value, setTrue, setFalse, toggle } = useBoolean(defaultValue)
+  const { value, setTrue, setFalse, toggle, setValue } =
+    useBoolean(defaultValue)
 
   return {
     isOpen: value,
     onOpen: setTrue,
     onClose: setFalse,
     onToggle: toggle,
+    setValue,
   }
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5e6cb29630a..5e8ffb5ddd9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -37,6 +37,21 @@ const config = {
         sm: "1.5",
         base: "1.6",
       },
+      zIndex: {
+        hide: "-1",
+        auto: "auto",
+        base: "0",
+        docked: "10",
+        dropdown: "1000",
+        sticky: "1100",
+        banner: "1200",
+        overlay: "1300",
+        modal: "1400",
+        popover: "1500",
+        skipLink: "1600",
+        toast: "1700",
+        tooltip: "1800",
+      },
       colors: {
         primary: {
           DEFAULT: "var(--primary)",
diff --git a/yarn.lock b/yarn.lock
index 4790756573b..93346cef5a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3837,7 +3837,7 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8"
   integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==
 
-"@radix-ui/react-dialog@^1.0.5":
+"@radix-ui/react-dialog@1.0.5", "@radix-ui/react-dialog@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
   integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
@@ -3858,6 +3858,26 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
+"@radix-ui/react-dialog@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz#4906507f7b4ad31e22d7dad69d9330c87c431d44"
+  integrity sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.0"
+    "@radix-ui/react-focus-guards" "1.1.0"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-portal" "1.1.1"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.7"
+
 "@radix-ui/react-direction@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
@@ -7037,6 +7057,14 @@ clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
+cmdk@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.0.0.tgz#0a095fdafca3dfabed82d1db78a6262fb163ded9"
+  integrity sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==
+  dependencies:
+    "@radix-ui/react-dialog" "1.0.5"
+    "@radix-ui/react-primitive" "1.0.3"
+
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"

From 895203521c02ebb2050a6057a93e67d97a970fc6 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Sun, 28 Jul 2024 11:47:10 +0200
Subject: [PATCH 02/13] migrate progress bar

---
 package.json                                  |  1 +
 src/components/LanguagePicker/ProgressBar.tsx | 21 ++++-----------
 src/components/ui/progress.tsx                | 26 +++++++++++++++++++
 yarn.lock                                     |  8 ++++++
 4 files changed, 40 insertions(+), 16 deletions(-)
 create mode 100644 src/components/ui/progress.tsx

diff --git a/package.json b/package.json
index 7b52e5db518..d2c3fab9209 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@socialgouv/matomo-next": "^1.8.0",
     "chart.js": "^4.4.2",
diff --git a/src/components/LanguagePicker/ProgressBar.tsx b/src/components/LanguagePicker/ProgressBar.tsx
index 1ea42523757..327ae272ba8 100644
--- a/src/components/LanguagePicker/ProgressBar.tsx
+++ b/src/components/LanguagePicker/ProgressBar.tsx
@@ -1,22 +1,11 @@
-import { Progress, ProgressProps } from "@chakra-ui/react"
+import { ComponentPropsWithoutRef } from "react"
 
-type ProgressBarProps = Pick<ProgressProps, "value">
+import { Progress } from "../ui/progress"
+
+type ProgressBarProps = Pick<ComponentPropsWithoutRef<typeof Progress>, "value">
 
-{
-  /* TODO migrate */
-}
 const ProgressBar = ({ value }: ProgressBarProps) => (
-  <Progress
-    value={value}
-    h="0.5"
-    w="full"
-    bg="body.light"
-    sx={{
-      "[role=progressbar]": {
-        backgroundColor: "disabled",
-      },
-    }}
-  />
+  <Progress value={value} className="h-0.5" />
 )
 
 export default ProgressBar
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 00000000000..46c7aeca193
--- /dev/null
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils/cn"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-body-light",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-disabled transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/yarn.lock b/yarn.lock
index 93346cef5a5..c80989d52e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4057,6 +4057,14 @@
   dependencies:
     "@radix-ui/react-slot" "1.1.0"
 
+"@radix-ui/react-progress@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.1.0.tgz#28c267885ec154fc557ec7a66cb462787312f7e2"
+  integrity sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==
+  dependencies:
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/react-slot@1.0.2", "@radix-ui/react-slot@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"

From 87ddb2fc73ccd7c4ba3b1e1a09f7c23f01456767 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Sun, 28 Jul 2024 12:20:10 +0200
Subject: [PATCH 03/13] migrate badge used in language picker

---
 src/components/LanguagePicker/MenuItem.tsx | 12 ++-----
 src/components/ui/badge.tsx                | 40 ++++++++++++++++++++++
 tailwind.config.ts                         |  1 +
 3 files changed, 44 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ui/badge.tsx

diff --git a/src/components/LanguagePicker/MenuItem.tsx b/src/components/LanguagePicker/MenuItem.tsx
index 3e2116eec28..fc4873ca98e 100644
--- a/src/components/LanguagePicker/MenuItem.tsx
+++ b/src/components/LanguagePicker/MenuItem.tsx
@@ -2,12 +2,12 @@ import { ComponentPropsWithoutRef } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { BsCheck } from "react-icons/bs"
-import { Badge } from "@chakra-ui/react"
 
 import type { LocaleDisplayInfo } from "@/lib/types"
 
 import { cn } from "@/lib/utils/cn"
 
+import { Badge } from "../ui/badge"
 import { CommandItem } from "../ui/command"
 
 import ProgressBar from "./ProgressBar"
@@ -75,14 +75,8 @@ const MenuItem = ({ displayInfo, ...props }: ItemProps) => {
             {/* TODO */}
             {isBrowserDefault && (
               <Badge
-                border="1px"
-                borderColor="body.medium"
-                color="body.medium"
-                lineHeight="none"
-                fontSize="2xs"
-                p="1"
-                h="fit-content"
-                bg="none"
+                className="h-fit-content rounded border-body-medium p-1 text-2xs font-normal uppercase leading-none text-body-medium"
+                variant="outline"
               >
                 {t("page-languages-browser-default")}
               </Badge>
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 00000000000..5d453ef21ca
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils/cn"
+
+/**
+ * TODO: finish migration. Needs to implement the DS badge styles. Currently is
+ * only used in the LanguagePicker component.
+ */
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5e8ffb5ddd9..f53ccbc9de7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -26,6 +26,7 @@ const config = {
         md: ["1rem", "1.6"], // [md, base]
         sm: ["0.875rem", "1.6"], // [sm, base]
         xs: ["0.75rem", "1.6"], // [xs, base]
+        "2xs": ["0.625rem", "1.6"], // [2xs, base]
       },
       lineHeight: {
         "6xs": "1.1",

From 9d11e3ad9e7544924900bd790ef3cf1da5ea5bc8 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Sun, 28 Jul 2024 12:22:53 +0200
Subject: [PATCH 04/13] add event listener for shortcut to open the language
 picker

---
 src/components/LanguagePicker/index.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/LanguagePicker/index.tsx b/src/components/LanguagePicker/index.tsx
index c3053f9f51c..373a85117b0 100644
--- a/src/components/LanguagePicker/index.tsx
+++ b/src/components/LanguagePicker/index.tsx
@@ -19,6 +19,8 @@ import { MobileCloseBar } from "./MobileCloseBar"
 import NoResultsCallout from "./NoResultsCallout"
 import { useLanguagePicker } from "./useLanguagePicker"
 
+import { useEventListener } from "@/hooks/useEventListener"
+
 type LanguagePickerProps = {
   children: React.ReactNode
   className?: string
@@ -38,17 +40,17 @@ const LanguagePicker = ({
     // TODO: Implement this
     // handleInputFocus,
   } = useLanguagePicker(handleClose)
-  const { isOpen, setValue, onClose } = disclosure
+  const { isOpen, setValue, onClose, onOpen } = disclosure
 
   /**
    * Adds a keydown event listener to focus filter input (\).
    * @param {string} event - The keydown event.
    */
-  // useEventListener("keydown", (e) => {
-  //   if (e.key !== "\\") return
-  //   e.preventDefault()
-  //   inputRef.current?.focus()
-  // })
+  useEventListener("keydown", (e) => {
+    if (e.key !== "\\") return
+    e.preventDefault()
+    onOpen()
+  })
 
   // onClick handlers
   const handleMobileCloseBarClick = () => onClose()

From d2a6906d3ab1ac9b41beb4ba4f722d4412e8df3e Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Sun, 28 Jul 2024 12:31:04 +0200
Subject: [PATCH 05/13] cleanup

---
 src/components/LanguagePicker/MenuItem.tsx    |  1 -
 src/components/LanguagePicker/index.tsx       |  8 +------
 .../LanguagePicker/useLanguagePicker.tsx      | 24 -------------------
 3 files changed, 1 insertion(+), 32 deletions(-)

diff --git a/src/components/LanguagePicker/MenuItem.tsx b/src/components/LanguagePicker/MenuItem.tsx
index fc4873ca98e..a5acc4ef5a4 100644
--- a/src/components/LanguagePicker/MenuItem.tsx
+++ b/src/components/LanguagePicker/MenuItem.tsx
@@ -72,7 +72,6 @@ const MenuItem = ({ displayInfo, ...props }: ItemProps) => {
             >
               {targetName}
             </p>
-            {/* TODO */}
             {isBrowserDefault && (
               <Badge
                 className="h-fit-content rounded border-body-medium p-1 text-2xs font-normal uppercase leading-none text-body-medium"
diff --git a/src/components/LanguagePicker/index.tsx b/src/components/LanguagePicker/index.tsx
index 373a85117b0..91b482931ff 100644
--- a/src/components/LanguagePicker/index.tsx
+++ b/src/components/LanguagePicker/index.tsx
@@ -33,13 +33,7 @@ const LanguagePicker = ({
   className,
 }: LanguagePickerProps) => {
   const { asPath, push } = useRouter()
-  const {
-    t,
-    disclosure,
-    filteredNames,
-    // TODO: Implement this
-    // handleInputFocus,
-  } = useLanguagePicker(handleClose)
+  const { t, disclosure, filteredNames } = useLanguagePicker(handleClose)
   const { isOpen, setValue, onClose, onOpen } = disclosure
 
   /**
diff --git a/src/components/LanguagePicker/useLanguagePicker.tsx b/src/components/LanguagePicker/useLanguagePicker.tsx
index d1215b20321..3750fa23fbd 100644
--- a/src/components/LanguagePicker/useLanguagePicker.tsx
+++ b/src/components/LanguagePicker/useLanguagePicker.tsx
@@ -26,14 +26,6 @@ export const useLanguagePicker = (handleClose?: () => void) => {
 
   const [filteredNames, setFilteredNames] = useState<LocaleDisplayInfo[]>([])
 
-  // Used to only send one matomo event for users who focus the filter input
-  const [hasFocusedInput, setHasFocusedInput] = useState(false)
-
-  // Reset if user switches languages
-  useEffect(() => {
-    setHasFocusedInput(false)
-  }, [locale])
-
   // perform all the filtering and mapping when the filter value change
   useEffect(() => {
     const locales = filterRealLocales(rawLocales)
@@ -187,25 +179,9 @@ export const useLanguagePicker = (handleClose?: () => void) => {
     )
   }
 
-  /**
-   * Send Matomo event when user focuses in the filter input.
-   * Only send once per user per session per language
-   * @returns void
-   */
-  const handleInputFocus = (): void => {
-    if (hasFocusedInput) return
-    trackCustomEvent({
-      ...eventBase,
-      eventAction: "Filter input",
-      eventName: "Focused inside filter input",
-    })
-    setHasFocusedInput(true)
-  }
-
   return {
     t,
     disclosure: { isOpen, setValue, onOpen, onClose },
     filteredNames,
-    handleInputFocus,
   }
 }

From 9aa5d3f747fe858ffd3cd4ad47ed9b5df612b4b9 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Sun, 28 Jul 2024 19:01:48 +0200
Subject: [PATCH 06/13] refactor: move localeToDisplayInfo to its own function
 + remove useEffect for filtering

---
 src/components/LanguagePicker/index.tsx       |  10 +-
 .../LanguagePicker/localeToDisplayInfo.ts     |  95 ++++++++++++
 .../LanguagePicker/useLanguagePicker.tsx      | 135 ++++--------------
 3 files changed, 124 insertions(+), 116 deletions(-)
 create mode 100644 src/components/LanguagePicker/localeToDisplayInfo.ts

diff --git a/src/components/LanguagePicker/index.tsx b/src/components/LanguagePicker/index.tsx
index 91b482931ff..4fc9424f72b 100644
--- a/src/components/LanguagePicker/index.tsx
+++ b/src/components/LanguagePicker/index.tsx
@@ -33,7 +33,7 @@ const LanguagePicker = ({
   className,
 }: LanguagePickerProps) => {
   const { asPath, push } = useRouter()
-  const { t, disclosure, filteredNames } = useLanguagePicker(handleClose)
+  const { t, disclosure, languages } = useLanguagePicker(handleClose)
   const { isOpen, setValue, onClose, onOpen } = disclosure
 
   /**
@@ -82,9 +82,7 @@ const LanguagePicker = ({
         <Command
           className="gap-2 p-4"
           filter={(value: string, search: string) => {
-            const item = filteredNames.find(
-              (name) => name.localeOption === value
-            )
+            const item = languages.find((name) => name.localeOption === value)
 
             if (!item) return 0
 
@@ -104,7 +102,7 @@ const LanguagePicker = ({
           <div className="text-xs text-body-medium">
             {t("page-languages-filter-label")}{" "}
             <span className="lowercase">
-              ({filteredNames.length} {t("common:languages")})
+              ({languages.length} {t("common:languages")})
             </span>
           </div>
 
@@ -126,7 +124,7 @@ const LanguagePicker = ({
               />
             </CommandEmpty>
             <CommandGroup className="p-0">
-              {filteredNames.map((displayInfo) => (
+              {languages.map((displayInfo) => (
                 <MenuItem
                   key={"item-" + displayInfo.localeOption}
                   displayInfo={displayInfo}
diff --git a/src/components/LanguagePicker/localeToDisplayInfo.ts b/src/components/LanguagePicker/localeToDisplayInfo.ts
new file mode 100644
index 00000000000..916bd868746
--- /dev/null
+++ b/src/components/LanguagePicker/localeToDisplayInfo.ts
@@ -0,0 +1,95 @@
+import type {
+  I18nLocale,
+  Lang,
+  LocaleDisplayInfo,
+  ProjectProgressData,
+} from "@/lib/types"
+
+import { languages } from "@/lib/utils/translations"
+
+import progressDataJson from "@/data/translationProgress.json"
+
+import { DEFAULT_LOCALE } from "@/lib/constants"
+
+const progressData = progressDataJson satisfies ProjectProgressData[]
+
+export const localeToDisplayInfo = (
+  localeOption: Lang,
+  sourceLocale: Lang,
+  t: (key: string) => string
+): LocaleDisplayInfo => {
+  const i18nItem: I18nLocale = languages[localeOption]
+  const englishName = i18nItem.name
+
+  // Get "source" display name (Language choice displayed in language of current locale)
+  const intlSource = new Intl.DisplayNames([sourceLocale], {
+    type: "language",
+  }).of(localeOption)
+  // For languages that do not have an Intl display name, use English name as fallback
+  const fallbackSource = intlSource !== localeOption ? intlSource : englishName
+  const i18nKey = "language-" + localeOption.toLowerCase()
+  const i18nSource = t(i18nKey) // Falls back to English namespace if not found
+
+  // If i18nSource (fetched from `language-{locale}` in current namespace)
+  // is not translated (output === englishName), or not available
+  // (output === i18nKey), use the Intl.DisplayNames result as fallback
+  const sourceName = [i18nKey, englishName].includes(i18nSource)
+    ? fallbackSource
+    : i18nSource
+
+  // Get "target" display name (Language choice displayed in that language)
+  const fallbackTarget = new Intl.DisplayNames([localeOption], {
+    type: "language",
+  }).of(localeOption)
+  const i18nConfigTarget = i18nItem.localName
+  const targetName = i18nConfigTarget || fallbackTarget
+
+  if (!sourceName || !targetName) {
+    console.warn("Missing language display name:", {
+      localeOption,
+      sourceName,
+      targetName,
+    })
+  }
+
+  // English will not have a dataItem
+  const dataItem = progressData.find(
+    ({ languageId }) =>
+      i18nItem.crowdinCode.toLowerCase() === languageId.toLowerCase()
+  )
+
+  const approvalProgress =
+    localeOption === DEFAULT_LOCALE
+      ? 100
+      : Math.floor((dataItem!.words.approved / dataItem!.words.total) * 100) ||
+        0
+
+  const returnData: Partial<LocaleDisplayInfo> = {
+    localeOption,
+    sourceName: sourceName ?? localeOption,
+    targetName: targetName ?? localeOption,
+    englishName,
+  }
+
+  if (progressData.length < 1) {
+    console.warn(`Missing translation progress data; check GitHub action`)
+    return {
+      ...returnData,
+      approvalProgress: 0,
+      wordsApproved: 0,
+    } as LocaleDisplayInfo
+  }
+
+  const totalWords = progressData[0].words.total
+
+  const wordsApproved =
+    localeOption === DEFAULT_LOCALE
+      ? totalWords || 0
+      : dataItem?.words.approved || 0
+
+  return {
+    ...returnData,
+    approvalProgress,
+    wordsApproved,
+  } as LocaleDisplayInfo
+}
diff --git a/src/components/LanguagePicker/useLanguagePicker.tsx b/src/components/LanguagePicker/useLanguagePicker.tsx
index 3750fa23fbd..b88942b2a3e 100644
--- a/src/components/LanguagePicker/useLanguagePicker.tsx
+++ b/src/components/LanguagePicker/useLanguagePicker.tsx
@@ -1,33 +1,21 @@
-import { useEffect, useState } from "react"
+import { useMemo } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
-import type {
-  I18nLocale,
-  Lang,
-  LocaleDisplayInfo,
-  ProjectProgressData,
-} from "@/lib/types"
+import type { Lang, LocaleDisplayInfo } from "@/lib/types"
 
 import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
-import { filterRealLocales, languages } from "@/lib/utils/translations"
+import { filterRealLocales } from "@/lib/utils/translations"
 
-import progressDataJson from "@/data/translationProgress.json"
-
-import { DEFAULT_LOCALE } from "@/lib/constants"
+import { localeToDisplayInfo } from "./localeToDisplayInfo"
 
 import useDisclosure from "@/hooks/useDisclosure"
 
-const progressData = progressDataJson satisfies ProjectProgressData[]
-
 export const useLanguagePicker = (handleClose?: () => void) => {
   const { t } = useTranslation("common")
   const { locale, locales: rawLocales } = useRouter()
 
-  const [filteredNames, setFilteredNames] = useState<LocaleDisplayInfo[]>([])
-
-  // perform all the filtering and mapping when the filter value change
-  useEffect(() => {
+  const languages = useMemo<LocaleDisplayInfo[]>(() => {
     const locales = filterRealLocales(rawLocales)
 
     // Get the preferred languages for the users browser
@@ -52,99 +40,26 @@ export const useLanguagePicker = (handleClose?: () => void) => {
     // Remove duplicate matches
     const browserLocales = Array.from(new Set(allBrowserLocales))
 
-    const localeToDisplayInfo = (localeOption: Lang): LocaleDisplayInfo => {
-      const i18nItem: I18nLocale = languages[localeOption]
-      const englishName = i18nItem.name
-
-      // Get "source" display name (Language choice displayed in language of current locale)
-      const intlSource = new Intl.DisplayNames([locale!], {
-        type: "language",
-      }).of(localeOption)
-      // For languages that do not have an Intl display name, use English name as fallback
-      const fallbackSource =
-        intlSource !== localeOption ? intlSource : englishName
-      const i18nKey = "language-" + localeOption.toLowerCase()
-      const i18nSource = t(i18nKey) // Falls back to English namespace if not found
-
-      // If i18nSource (fetched from `language-{locale}` in current namespace)
-      // is not translated (output === englishName), or not available
-      // (output === i18nKey), use the Intl.DisplayNames result as fallback
-      const sourceName = [i18nKey, englishName].includes(i18nSource)
-        ? fallbackSource
-        : i18nSource
-
-      // Get "target" display name (Language choice displayed in that language)
-      const fallbackTarget = new Intl.DisplayNames([localeOption], {
-        type: "language",
-      }).of(localeOption)
-      const i18nConfigTarget = i18nItem.localName
-      const targetName = i18nConfigTarget || fallbackTarget
-
-      if (!sourceName || !targetName) {
-        console.warn("Missing language display name:", {
-          localeOption,
-          sourceName,
-          targetName,
+    return (
+      (locales as Lang[])
+        ?.map((localeOption) => {
+          const displayInfo = localeToDisplayInfo(
+            localeOption,
+            locale as Lang,
+            t
+          )
+          const isBrowserDefault = browserLocales.includes(localeOption)
+          return { ...displayInfo, isBrowserDefault }
         })
-      }
-
-      // English will not have a dataItem
-      const dataItem = progressData.find(
-        ({ languageId }) =>
-          i18nItem.crowdinCode.toLowerCase() === languageId.toLowerCase()
-      )
-
-      const approvalProgress =
-        localeOption === DEFAULT_LOCALE
-          ? 100
-          : Math.floor(
-              (dataItem!.words.approved / dataItem!.words.total) * 100
-            ) || 0
-
-      const isBrowserDefault = browserLocales.includes(localeOption)
-
-      const returnData: Partial<LocaleDisplayInfo> = {
-        localeOption,
-        sourceName: sourceName ?? localeOption,
-        targetName: targetName ?? localeOption,
-        englishName,
-        isBrowserDefault,
-      }
-
-      if (progressData.length < 1) {
-        console.warn(`Missing translation progress data; check GitHub action`)
-        return {
-          ...returnData,
-          approvalProgress: 0,
-          wordsApproved: 0,
-        } as LocaleDisplayInfo
-      }
-
-      const totalWords = progressData[0].words.total
-
-      const wordsApproved =
-        localeOption === DEFAULT_LOCALE
-          ? totalWords || 0
-          : dataItem?.words.approved || 0
-
-      return {
-        ...returnData,
-        approvalProgress,
-        wordsApproved,
-      } as LocaleDisplayInfo
-    }
-
-    const displayNames: LocaleDisplayInfo[] =
-      (locales as Lang[])?.map(localeToDisplayInfo).sort((a, b) => {
-        const indexA = browserLocales.indexOf(a.localeOption as Lang)
-        const indexB = browserLocales.indexOf(b.localeOption as Lang)
-        if (indexA >= 0 && indexB >= 0) return indexA - indexB
-        if (indexA >= 0) return -1
-        if (indexB >= 0) return 1
-        return b.approvalProgress - a.approvalProgress
-      }) || []
-
-    setFilteredNames(displayNames)
+        .sort((a, b) => {
+          const indexA = browserLocales.indexOf(a.localeOption as Lang)
+          const indexB = browserLocales.indexOf(b.localeOption as Lang)
+          if (indexA >= 0 && indexB >= 0) return indexA - indexB
+          if (indexA >= 0) return -1
+          if (indexB >= 0) return 1
+          return b.approvalProgress - a.approvalProgress
+        }) || []
+    )
   }, [locale, rawLocales, t])
 
   const { isOpen, setValue, ...menu } = useDisclosure()
@@ -182,6 +97,6 @@ export const useLanguagePicker = (handleClose?: () => void) => {
   return {
     t,
     disclosure: { isOpen, setValue, onOpen, onClose },
-    filteredNames,
+    languages,
   }
 }

From 1f295bfe7ca79f8076c67a72b369574ef9199b54 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Mon, 29 Jul 2024 14:34:47 +0200
Subject: [PATCH 07/13] fix bad prop

---
 src/components/LanguagePicker/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/LanguagePicker/index.tsx b/src/components/LanguagePicker/index.tsx
index 4fc9424f72b..595ec11408a 100644
--- a/src/components/LanguagePicker/index.tsx
+++ b/src/components/LanguagePicker/index.tsx
@@ -109,7 +109,6 @@ const LanguagePicker = ({
           <CommandInput
             placeholder={t("page-languages-filter-placeholder")}
             className="h-9"
-            icon={undefined}
           />
 
           <CommandList className="max-h-[75vh]">

From 38dc84d7ed7348c9cb1aa4be3aa36f9341fb3da7 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Mon, 5 Aug 2024 18:27:21 +0200
Subject: [PATCH 08/13] on mobile, set the popover's width to fill all the vw
 space

---
 src/components/Nav/Mobile/MenuFooter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Nav/Mobile/MenuFooter.tsx b/src/components/Nav/Mobile/MenuFooter.tsx
index acbe645064f..bde756e192a 100644
--- a/src/components/Nav/Mobile/MenuFooter.tsx
+++ b/src/components/Nav/Mobile/MenuFooter.tsx
@@ -52,7 +52,7 @@ const MenuFooter = ({
           <FooterItemText>{t(themeLabelKey)}</FooterItemText>
         </FooterButton>
         <LanguagePicker
-          className="fixed inset-4 h-[calc(100vh-var(--eth-sizes-8))]"
+          className="fixed inset-4 h-[calc(100vh-var(--eth-sizes-8))] w-[calc(100vw-var(--eth-sizes-8))]"
           handleClose={onToggle}
         >
           {/* TODO migrate once #13449 is merged */}

From 225c9c84ff41e91e5a7b7d661e4a1a908a29c09d Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 8 Aug 2024 15:33:29 +0200
Subject: [PATCH 09/13] remove unused code

---
 src/components/LanguagePicker/MenuItem.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/LanguagePicker/MenuItem.tsx b/src/components/LanguagePicker/MenuItem.tsx
index a5acc4ef5a4..50deb50f51e 100644
--- a/src/components/LanguagePicker/MenuItem.tsx
+++ b/src/components/LanguagePicker/MenuItem.tsx
@@ -51,15 +51,6 @@ const MenuItem = ({ displayInfo, ...props }: ItemProps) => {
           : "bg-transparent"
       )}
       {...props}
-      // TODO double check this
-      // sx={{
-      //   p: {
-      //     textDecoration: "none",
-      //     overflow: "hidden",
-      //     textOverflow: "ellipsis",
-      //     whiteSpace: "nowrap",
-      //   },
-      // }}
     >
       <div className="flex w-full items-center">
         <div className="flex-1">

From b67df3cb65f5110129f23361e349546f853565d3 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 8 Aug 2024 17:15:55 +0200
Subject: [PATCH 10/13] display kbd shortcut inside the search input field

---
 src/components/LanguagePicker/index.tsx |  1 +
 src/components/ui/command.tsx           | 51 ++++++++++++++++---------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/components/LanguagePicker/index.tsx b/src/components/LanguagePicker/index.tsx
index 595ec11408a..9b4447bef9e 100644
--- a/src/components/LanguagePicker/index.tsx
+++ b/src/components/LanguagePicker/index.tsx
@@ -109,6 +109,7 @@ const LanguagePicker = ({
           <CommandInput
             placeholder={t("page-languages-filter-placeholder")}
             className="h-9"
+            kbdShortcut="\"
           />
 
           <CommandList className="max-h-[75vh]">
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 5e165866111..980d569a7ec 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import { MdOutlineSearch } from "react-icons/md"
 import { type DialogProps } from "@radix-ui/react-dialog"
 
 import { Dialog, DialogContent } from "@/components/ui/dialog"
@@ -36,25 +36,42 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   )
 }
 
+type CommandInputProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Input
+> & {
+  icon?: React.ElementType
+  kbdShortcut?: string
+}
+
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div
-    className="flex items-center rounded border border-body px-3"
-    cmdk-input-wrapper=""
-  >
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
+  CommandInputProps
+>(({ className, icon = MdOutlineSearch, kbdShortcut, ...props }, ref) => {
+  const Icon = icon
+  return (
+    <div
+      className="flex items-center rounded border border-body px-3"
+      cmdk-input-wrapper=""
+    >
+      <CommandPrimitive.Input
+        ref={ref}
+        className={cn(
+          "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+      {kbdShortcut && (
+        <kbd className="rounded border border-solid border-disabled px-1 text-sm text-disabled">
+          {kbdShortcut}
+        </kbd>
       )}
-      {...props}
-    />
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-  </div>
-))
+      {!kbdShortcut && Icon && (
+        <Icon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+      )}
+    </div>
+  )
+})
 
 CommandInput.displayName = CommandPrimitive.Input.displayName
 

From 88bf2b016ab2a2be3aa211db297d96bb6db62e73 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 8 Aug 2024 17:19:24 +0200
Subject: [PATCH 11/13] adjust colors

---
 src/components/ui/command.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 980d569a7ec..df1325e4c94 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -14,7 +14,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-background-highlight",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-background-highlight text-body",
       className
     )}
     {...props}
@@ -28,7 +28,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-disabled [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -56,7 +56,7 @@ const CommandInput = React.forwardRef<
       <CommandPrimitive.Input
         ref={ref}
         className={cn(
-          "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-disabled disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}
@@ -108,7 +108,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      "text-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-disabled",
       className
     )}
     {...props}
@@ -136,7 +136,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary-low-contrast data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary-low-contrast aria-selected:text-body data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}
@@ -151,10 +151,7 @@ const CommandShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-disabled", className)}
       {...props}
     />
   )

From 4c32eed91b6a08940157a13acc77d5dfc3244734 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Tue, 13 Aug 2024 18:57:54 +0200
Subject: [PATCH 12/13] fix imports

---
 src/components/LanguagePicker/MobileCloseBar.tsx | 2 +-
 src/components/Nav/Desktop/index.tsx             | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/LanguagePicker/MobileCloseBar.tsx b/src/components/LanguagePicker/MobileCloseBar.tsx
index 6238aadfed2..5678294259c 100644
--- a/src/components/LanguagePicker/MobileCloseBar.tsx
+++ b/src/components/LanguagePicker/MobileCloseBar.tsx
@@ -1,7 +1,7 @@
 import { MouseEventHandler } from "react"
 import { useTranslation } from "next-i18next"
 
-import { Button } from "../../../tailwind/ui/buttons/Button"
+import { Button } from "../ui/buttons/Button"
 
 type MobileCloseBarProps = {
   handleClick: MouseEventHandler<HTMLButtonElement>
diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx
index 911b1d3c659..01f36de203c 100644
--- a/src/components/Nav/Desktop/index.tsx
+++ b/src/components/Nav/Desktop/index.tsx
@@ -7,11 +7,10 @@ import { HStack, useColorModeValue, useEventListener } from "@chakra-ui/react"
 
 import { IconButton } from "@/components/Buttons"
 import LanguagePicker from "@/components/LanguagePicker"
+import { Button } from "@/components/ui/buttons/Button"
 
 import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 
-import { Button } from "../../../../tailwind/ui/buttons/Button"
-
 type DesktopNavMenuProps = {
   toggleColorMode: () => void
 }

From ed4df194ec476a2ea1e6ba0879c55324f23f5692 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Tue, 13 Aug 2024 18:58:14 +0200
Subject: [PATCH 13/13] display Lang picker in a dialog on mobile

---
 src/components/LanguagePicker/index.tsx       | 189 +++++++++++-------
 .../LanguagePicker/useLanguagePicker.tsx      |   1 -
 src/components/Nav/Desktop/index.tsx          |   4 +-
 src/components/Nav/Mobile/MenuFooter.tsx      |   5 +-
 src/components/ui/dialog.tsx                  |   4 +-
 5 files changed, 119 insertions(+), 84 deletions(-)

diff --git a/src/components/LanguagePicker/index.tsx b/src/components/LanguagePicker/index.tsx
index 9b4447bef9e..0b38e913c12 100644
--- a/src/components/LanguagePicker/index.tsx
+++ b/src/components/LanguagePicker/index.tsx
@@ -1,9 +1,9 @@
 import { useRouter } from "next/router"
+import { useTranslation } from "react-i18next"
 
 import { BaseLink } from "@/components/Link"
 
 import { cn } from "@/lib/utils/cn"
-import { isMobile } from "@/lib/utils/isMobile"
 
 import {
   Command,
@@ -12,6 +12,7 @@ import {
   CommandInput,
   CommandList,
 } from "../ui/command"
+import { Dialog, DialogContent, DialogTrigger } from "../ui/dialog"
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
 
 import MenuItem from "./MenuItem"
@@ -25,15 +26,17 @@ type LanguagePickerProps = {
   children: React.ReactNode
   className?: string
   handleClose?: () => void
+  dialog?: boolean
 }
 
 const LanguagePicker = ({
   children,
   handleClose,
   className,
+  dialog,
 }: LanguagePickerProps) => {
   const { asPath, push } = useRouter()
-  const { t, disclosure, languages } = useLanguagePicker(handleClose)
+  const { disclosure, languages } = useLanguagePicker(handleClose)
   const { isOpen, setValue, onClose, onOpen } = disclosure
 
   /**
@@ -63,6 +66,33 @@ const LanguagePicker = ({
       eventName: "/contributing/translation-program",
     })
 
+  if (dialog) {
+    return (
+      <Dialog open={isOpen} onOpenChange={setValue}>
+        <DialogTrigger asChild>{children}</DialogTrigger>
+        <DialogContent className="inset-4 flex h-auto w-auto transform-none flex-col bg-background-highlight p-0 [&>button]:hidden">
+          {/* Mobile Close bar */}
+          <MobileCloseBar handleClick={handleMobileCloseBarClick} />
+
+          <LanguagePickerMenu
+            languages={languages}
+            onSelect={handleMenuItemSelect}
+            onClose={() =>
+              onClose({
+                eventAction: "Translation program link (no results)",
+                eventName: "/contributing/translation-program",
+              })
+            }
+          />
+
+          <LanguagePickerFooter
+            onTranslationProgramClick={handleBaseLinkClose}
+          />
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
   return (
     <Popover open={isOpen} onOpenChange={setValue}>
       <PopoverTrigger asChild>{children}</PopoverTrigger>
@@ -73,83 +103,94 @@ const LanguagePicker = ({
           className
         )}
       >
-        {/* Mobile Close bar */}
-        {/* avoid rendering mobile only feature on desktop */}
-        {isMobile() && (
-          <MobileCloseBar handleClick={handleMobileCloseBarClick} />
-        )}
-
-        <Command
-          className="gap-2 p-4"
-          filter={(value: string, search: string) => {
-            const item = languages.find((name) => name.localeOption === value)
+        <LanguagePickerMenu
+          languages={languages}
+          onSelect={handleMenuItemSelect}
+          onClose={() =>
+            onClose({
+              eventAction: "Translation program link (no results)",
+              eventName: "/contributing/translation-program",
+            })
+          }
+        />
+
+        <LanguagePickerFooter onTranslationProgramClick={handleBaseLinkClose} />
+      </PopoverContent>
+    </Popover>
+  )
+}
 
-            if (!item) return 0
+const LanguagePickerMenu = ({ languages, onClose, onSelect }) => {
+  const { t } = useTranslation("common")
 
-            const { localeOption, sourceName, targetName, englishName } = item
+  return (
+    <Command
+      className="gap-2 p-4"
+      filter={(value: string, search: string) => {
+        const item = languages.find((name) => name.localeOption === value)
+
+        if (!item) return 0
+
+        const { localeOption, sourceName, targetName, englishName } = item
+
+        if (
+          (localeOption + sourceName + targetName + englishName)
+            .toLowerCase()
+            .includes(search.toLowerCase())
+        ) {
+          return 1
+        }
+
+        return 0
+      }}
+    >
+      <div className="text-xs text-body-medium">
+        {t("page-languages-filter-label")}{" "}
+        <span className="lowercase">
+          ({languages.length} {t("common:languages")})
+        </span>
+      </div>
+
+      <CommandInput
+        placeholder={t("page-languages-filter-placeholder")}
+        className="h-9"
+        kbdShortcut="\"
+      />
+
+      <CommandList className="max-h-[75vh]">
+        <CommandEmpty className="py-0 text-left text-base">
+          <NoResultsCallout onClose={onClose} />
+        </CommandEmpty>
+        <CommandGroup className="p-0">
+          {languages.map((displayInfo) => (
+            <MenuItem
+              key={"item-" + displayInfo.localeOption}
+              displayInfo={displayInfo}
+              onSelect={onSelect}
+            />
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
 
-            if (
-              (localeOption + sourceName + targetName + englishName)
-                .toLowerCase()
-                .includes(search.toLowerCase())
-            ) {
-              return 1
-            }
+const LanguagePickerFooter = ({ onTranslationProgramClick }) => {
+  const { t } = useTranslation("common")
 
-            return 0
-          }}
+  return (
+    <div className="sticky bottom-0 flex justify-center border-t-2 border-primary bg-primary-low-contrast p-3">
+      <p className="text-center text-xs text-body">
+        {t("page-languages-recruit-community")}{" "}
+        {/* TODO migrate once #13411 is merged */}
+        <BaseLink
+          href="/contributing/translation-program"
+          onClick={onTranslationProgramClick}
         >
-          <div className="text-xs text-body-medium">
-            {t("page-languages-filter-label")}{" "}
-            <span className="lowercase">
-              ({languages.length} {t("common:languages")})
-            </span>
-          </div>
-
-          <CommandInput
-            placeholder={t("page-languages-filter-placeholder")}
-            className="h-9"
-            kbdShortcut="\"
-          />
-
-          <CommandList className="max-h-[75vh]">
-            <CommandEmpty className="py-0 text-left text-base">
-              <NoResultsCallout
-                onClose={() =>
-                  onClose({
-                    eventAction: "Translation program link (no results)",
-                    eventName: "/contributing/translation-program",
-                  })
-                }
-              />
-            </CommandEmpty>
-            <CommandGroup className="p-0">
-              {languages.map((displayInfo) => (
-                <MenuItem
-                  key={"item-" + displayInfo.localeOption}
-                  displayInfo={displayInfo}
-                  onSelect={handleMenuItemSelect}
-                />
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-
-        {/* Footer callout */}
-        <div className="sticky bottom-0 flex justify-center border-t-2 border-primary bg-primary-low-contrast p-3">
-          <p className="text-center text-xs text-body">
-            {t("page-languages-recruit-community")}{" "}
-            {/* TODO migrate once #13411 is merged */}
-            <BaseLink
-              href="/contributing/translation-program"
-              onClick={handleBaseLinkClose}
-            >
-              {t("common:learn-more")}
-            </BaseLink>
-          </p>
-        </div>
-      </PopoverContent>
-    </Popover>
+          {t("common:learn-more")}
+        </BaseLink>
+      </p>
+    </div>
   )
 }
 
diff --git a/src/components/LanguagePicker/useLanguagePicker.tsx b/src/components/LanguagePicker/useLanguagePicker.tsx
index 4ff97b41313..441424ce59b 100644
--- a/src/components/LanguagePicker/useLanguagePicker.tsx
+++ b/src/components/LanguagePicker/useLanguagePicker.tsx
@@ -95,7 +95,6 @@ export const useLanguagePicker = (handleClose?: () => void) => {
   }
 
   return {
-    t,
     disclosure: { isOpen, setValue, onOpen, onClose },
     languages,
   }
diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx
index 01f36de203c..b5cdf216510 100644
--- a/src/components/Nav/Desktop/index.tsx
+++ b/src/components/Nav/Desktop/index.tsx
@@ -65,9 +65,7 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
       />
 
       {/* Locale-picker menu */}
-      <LanguagePicker
-      // TODO w="xs"
-      >
+      <LanguagePicker>
         <Button
           name={DESKTOP_LANGUAGE_BUTTON_NAME}
           ref={languagePickerRef}
diff --git a/src/components/Nav/Mobile/MenuFooter.tsx b/src/components/Nav/Mobile/MenuFooter.tsx
index 5e127b019b3..db48b3a132c 100644
--- a/src/components/Nav/Mobile/MenuFooter.tsx
+++ b/src/components/Nav/Mobile/MenuFooter.tsx
@@ -43,10 +43,7 @@ const MenuFooter = ({
         <FooterItemText>{t(themeLabelKey)}</FooterItemText>
       </FooterButton>
 
-      <LanguagePicker
-        className="fixed inset-4 h-[calc(100vh-var(--eth-sizes-8))] w-[calc(100vw-var(--eth-sizes-8))]"
-        handleClose={onToggle}
-      >
+      <LanguagePicker dialog handleClose={onToggle}>
         <FooterButton icon={BsTranslate} name={MOBILE_LANGUAGE_BUTTON_NAME}>
           <FooterItemText>{t("languages")}</FooterItemText>
         </FooterButton>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 947ea462c0b..8eea2cf29a0 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-modal bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}