display Lang picker in a dialog on mobile

Author: pettinarip

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>
   )
 }
 

src/components/LanguagePicker/useLanguagePicker.tsx

@@ -95,7 +95,6 @@ export const useLanguagePicker = (handleClose?: () => void) => {
   }
 
   return {
-    t,
     disclosure: { isOpen, setValue, onOpen, onClose },
     languages,
   }

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}

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>

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}