Merge pull request #16111 from ethereum/optimize-nav

Optimize mobile nav

Author: pettinarip

app/[locale]/layout.tsx

@@ -46,7 +46,7 @@ export default async function LocaleLayout({
   // Enable static rendering
   setRequestLocale(locale)
 
-  const allMessages = await getMessages({ locale })
+  const allMessages = await getMessages()
   const messages = pick(allMessages, "common")
 
   const lastDeployDate = getLastDeployDate()

app/[locale]/page.tsx

@@ -157,6 +157,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   if (!LOCALES_CODES.includes(locale)) return notFound()
 
   setRequestLocale(locale)
+
   const t = await getTranslations({ locale, namespace: "page-index" })
   const tCommon = await getTranslations({ locale, namespace: "common" })
   const { direction: dir, isRtl } = getDirection(locale)

package.json

@@ -38,6 +38,7 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-compose-refs": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",

pnpm-lock.yaml

@@ -0,0 +1,19 @@
+"use client"
+
+import { type ReactNode } from "react"
+
+import { useIsClient } from "@/hooks/useIsClient"
+
+type ClientOnlyProps = {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+const ClientOnly = ({ children, fallback = null }: ClientOnlyProps) => {
+  const isClient = useIsClient()
+
+  if (!isClient) return <>{fallback}</>
+  return <>{children}</>
+}
+
+export default ClientOnly

src/components/ClientOnly.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import type { LocaleDisplayInfo } from "@/lib/types"
+
+import { cn } from "@/lib/utils/cn"
+
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
+
+import LanguagePicker from "."
+
+import { useDisclosure } from "@/hooks/useDisclosure"
+import { useEventListener } from "@/hooks/useEventListener"
+
+type DesktopLanguagePickerProps = {
+  children: React.ReactNode
+  languages: LocaleDisplayInfo[]
+  className?: string
+}
+
+const DesktopLanguagePicker = ({
+  children,
+  languages,
+  className,
+}: DesktopLanguagePickerProps) => {
+  const { isOpen, setValue, onClose, onOpen } = useDisclosure()
+
+  /**
+   * Adds a keydown event listener to focus filter input (\).
+   * @param {string} event - The keydown event.
+   */
+  useEventListener("keydown", (e) => {
+    if (e.key !== "\\" || e.metaKey || e.ctrlKey) return
+    e.preventDefault()
+    onOpen()
+  })
+
+  return (
+    <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
+        )}
+      >
+        <LanguagePicker
+          className="max-h-[calc(100vh-12rem)]"
+          languages={languages}
+          onSelect={onClose}
+          onNoResultsClose={onClose}
+          onTranslationProgramClick={onClose}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default DesktopLanguagePicker

src/components/LanguagePicker/Desktop.tsx

@@ -0,0 +1,55 @@
+import { useLocale } from "next-intl"
+
+import type { LocaleDisplayInfo } from "@/lib/types"
+
+import { ButtonLink } from "@/components/ui/buttons/Button"
+
+import { DEFAULT_LOCALE } from "@/lib/constants"
+
+import { useTranslation } from "@/hooks/useTranslation"
+
+type LanguagePickerFooterProps = {
+  intlLanguagePreference?: LocaleDisplayInfo
+  onTranslationProgramClick: () => void
+}
+
+const LanguagePickerFooter = ({
+  intlLanguagePreference,
+  onTranslationProgramClick,
+}: LanguagePickerFooterProps) => {
+  const { t } = useTranslation("common")
+  const locale = useLocale()
+  return (
+    <div className="sticky bottom-0 flex border-t-2 border-primary bg-primary-low-contrast p-0 pb-1 pt-1">
+      <div className="flex w-full items-center justify-between px-4">
+        <div className="flex min-w-0 flex-col items-start">
+          {locale === DEFAULT_LOCALE ? (
+            <p className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold text-body">
+              {intlLanguagePreference
+                ? `${t("page-languages-translate-cta-title")} ${t(`language-${intlLanguagePreference.localeOption}`)}`
+                : "Translate ethereum.org"}
+            </p>
+          ) : (
+            <p className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold text-body">
+              {t("page-languages-translate-cta-title")}{" "}
+              {t(`language-${locale}`)}
+            </p>
+          )}
+          <p className="text-xs text-body">
+            {t("page-languages-recruit-community")}
+          </p>
+        </div>
+        <ButtonLink
+          className="text-nowrap"
+          href="/contributing/translation-program/"
+          size="sm"
+          onClick={onTranslationProgramClick}
+        >
+          {t("get-involved")}
+        </ButtonLink>
+      </div>
+    </div>
+  )
+}
+
+export default LanguagePickerFooter

src/components/LanguagePicker/LanguagePickerFooter.tsx

@@ -0,0 +1,85 @@
+import type { LocaleDisplayInfo } from "@/lib/types"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandList,
+} from "../ui/command"
+
+import MenuItem from "./MenuItem"
+import NoResultsCallout from "./NoResultsCallout"
+
+import { useTranslation } from "@/hooks/useTranslation"
+
+type LanguagePickerMenuProps = {
+  className?: string
+  languages: LocaleDisplayInfo[]
+  onClose: () => void
+  onSelect: (value: string) => void
+}
+
+const LanguagePickerMenu = ({
+  className,
+  languages,
+  onClose,
+  onSelect,
+}: LanguagePickerMenuProps) => {
+  const { t } = useTranslation("common")
+
+  return (
+    <Command
+      className={className}
+      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="\"
+        data-testid="language-filter-input"
+      />
+
+      <CommandList className="max-h-full">
+        <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}
+              data-testid={`language-option-${displayInfo.localeOption}`}
+            />
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export default LanguagePickerMenu

src/components/LanguagePicker/LanguagePickerMenu.tsx

@@ -22,24 +22,13 @@ const MenuItem = ({ displayInfo, ...props }: ItemProps) => {
     sourceName,
     targetName,
     approvalProgress,
-    wordsApproved,
+    progress,
+    words,
   } = displayInfo
   const { t } = useTranslation("common")
   const locale = useLocale()
   const isCurrent = localeOption === locale
 
-  const getProgressInfo = (approvalProgress: number, wordsApproved: number) => {
-    const percentage = new Intl.NumberFormat(locale!, {
-      style: "percent",
-    }).format(approvalProgress / 100)
-    const progress =
-      approvalProgress === 0 ? "<" + percentage.replace("0", "1") : percentage
-    const words = new Intl.NumberFormat(locale!).format(wordsApproved)
-    return { progress, words }
-  }
-
-  const { progress, words } = getProgressInfo(approvalProgress, wordsApproved)
-
   return (
     <CommandItem
       value={localeOption}