refactor(web): replace signin locale select with menu

web/app/components/base/select/locale-signin.tsx

@@ -1,64 +0,0 @@
-'use client'
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
-import { GlobeAltIcon } from '@heroicons/react/24/outline'
-import { Fragment } from 'react'
-
-type ISelectProps = {
-  items: Array<{ value: string, name: string }>
-  value?: string
-  className?: string
-  onChange?: (value: string) => void
-}
-
-export default function LocaleSigninSelect({
-  items,
-  value,
-  onChange,
-}: ISelectProps) {
-  const item = items.filter(item => item.value === value)[0]
-
-  return (
-    <div className="w-56 text-right">
-      <Menu as="div" className="relative inline-block text-left">
-        <div>
-          <MenuButton className="h-[44px]justify-center inline-flex w-full items-center rounded-lg border border-components-button-secondary-border px-[10px] py-[6px] text-[13px] font-medium text-text-primary hover:bg-state-base-hover">
-            <GlobeAltIcon className="mr-1 h-5 w-5" aria-hidden="true" />
-            {item?.name}
-          </MenuButton>
-        </div>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <MenuItems className="absolute right-0 z-10 mt-2 w-[200px] origin-top-right divide-y divide-divider-regular rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg focus:outline-hidden">
-            <div className="max-h-96 overflow-y-auto mask-[linear-gradient(to_bottom,transparent_0px,black_8px,black_calc(100%-8px),transparent_100%)] px-1 py-1">
-              {items.map((item) => {
-                return (
-                  <MenuItem key={item.value}>
-                    <button
-                      type="button"
-                      className="group flex w-full items-center rounded-lg px-3 py-2 text-sm text-text-secondary data-active:bg-state-base-hover"
-                      onClick={(evt) => {
-                        evt.preventDefault()
-                        onChange?.(item.value)
-                      }}
-                    >
-                      {item.name}
-                    </button>
-                  </MenuItem>
-                )
-              })}
-
-            </div>
-
-          </MenuItems>
-        </Transition>
-      </Menu>
-    </div>
-  )
-}

web/app/signin/__tests__/_locale-menu.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import LocaleSigninSelect from '../locale-signin'
+import LocaleMenu from '../_locale-menu'
 
 const localeItems = [
   { value: 'en-US', name: 'English (US)' },
@@ -8,16 +8,15 @@ const localeItems = [
   { value: 'ja-JP', name: '日本語' },
 ]
 
-describe('LocaleSigninSelect', () => {
+describe('LocaleMenu', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  // Rendering behavior for selected value and fallback state.
   describe('Rendering', () => {
     it('should render selected locale name when value matches an item', () => {
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={localeItems}
           value="en-US"
           onChange={vi.fn()}
@@ -29,7 +28,7 @@ describe('LocaleSigninSelect', () => {
 
     it('should render trigger without selected label when value is not found', () => {
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={localeItems}
           value="missing"
           onChange={vi.fn()}
@@ -42,14 +41,13 @@ describe('LocaleSigninSelect', () => {
     })
   })
 
-  // Menu interactions and callback behavior.
   describe('User Interactions', () => {
     it('should call onChange with selected locale value when clicking an option', async () => {
       const user = userEvent.setup()
       const onChange = vi.fn()
 
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={localeItems}
           value="en-US"
           onChange={onChange}
@@ -57,16 +55,16 @@ describe('LocaleSigninSelect', () => {
       )
 
       await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
-      await user.click(screen.getByRole('menuitem', { name: '日本語' }))
+      await user.click(screen.getByRole('menuitemradio', { name: '日本語' }))
 
-      expect(onChange).toHaveBeenCalledWith('ja-JP')
+      expect(onChange).toHaveBeenCalledWith('ja-JP', expect.anything())
     })
 
     it('should render all locale options when menu is opened', async () => {
       const user = userEvent.setup()
 
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={localeItems}
           value="en-US"
           onChange={vi.fn()}
@@ -75,34 +73,34 @@ describe('LocaleSigninSelect', () => {
 
       await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
 
-      expect(screen.getByRole('menuitem', { name: 'English (US)' })).toBeInTheDocument()
-      expect(screen.getByRole('menuitem', { name: '简体中文' })).toBeInTheDocument()
-      expect(screen.getByRole('menuitem', { name: '日本語' })).toBeInTheDocument()
+      expect(screen.getByRole('menuitemradio', { name: 'English (US)' })).toBeInTheDocument()
+      expect(screen.getByRole('menuitemradio', { name: '简体中文' })).toBeInTheDocument()
+      expect(screen.getByRole('menuitemradio', { name: '日本語' })).toBeInTheDocument()
     })
   })
 
-  // Edge behavior for missing callback and empty data.
   describe('Edge Cases', () => {
     it('should not throw when onChange is undefined and option is selected', async () => {
       const user = userEvent.setup()
 
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={localeItems}
           value="en-US"
         />,
       )
 
       await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
-      await user.click(screen.getByRole('menuitem', { name: '简体中文' }))
-      // No assertion needed — test verifies no exception is thrown during selection without onChange.
+      await user.click(screen.getByRole('menuitemradio', { name: '简体中文' }))
+
+      expect(screen.getByRole('menuitemradio', { name: '简体中文' })).toBeInTheDocument()
     })
 
     it('should render no options when items are empty', async () => {
       const user = userEvent.setup()
 
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={[]}
           value="en-US"
           onChange={vi.fn()}
@@ -110,7 +108,8 @@ describe('LocaleSigninSelect', () => {
       )
 
       await user.click(screen.getByRole('button'))
-      expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
+
+      expect(screen.queryAllByRole('menuitemradio')).toHaveLength(0)
     })
   })
 })

web/app/signin/_header.tsx

@@ -2,12 +2,12 @@
 import type { Locale } from '@/i18n-config'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import Divider from '@/app/components/base/divider'
-import LocaleSigninSelect from '@/app/components/base/select/locale-signin'
 import { useLocale } from '@/context/i18n'
 import { setLocaleOnClient } from '@/i18n-config'
 import { languages } from '@/i18n-config/language'
 import dynamic from '@/next/dynamic'
 import { systemFeaturesQueryOptions } from '@/service/system-features'
+import LocaleMenu from './_locale-menu'
 
 // Avoid rendering the logo and theme selector on the server
 const DifyLogo = dynamic(() => import('@/app/components/base/logo/dify-logo'), {
@@ -35,7 +35,7 @@ const Header = () => {
           )
         : <DifyLogo size="large" />}
       <div className="flex items-center gap-1">
-        <LocaleSigninSelect
+        <LocaleMenu
           value={locale}
           items={languages.filter(item => item.supported)}
           onChange={(value) => {

web/app/signin/_locale-menu.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuRadioItemIndicator,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+
+type LocaleMenuProps = {
+  items: Array<{ value: string, name: string }>
+  value?: string
+  onChange?: (value: string) => void
+}
+
+export default function LocaleMenu({
+  items,
+  value,
+  onChange,
+}: LocaleMenuProps) {
+  const selectedItem = items.find(item => item.value === value)
+
+  return (
+    <div className="w-56 text-right">
+      <DropdownMenu>
+        <div className="relative inline-block text-left">
+          <div>
+            <DropdownMenuTrigger
+              render={(
+                <button
+                  type="button"
+                  className="inline-flex w-full items-center rounded-lg border border-components-button-secondary-border px-[10px] py-[6px] text-[13px] font-medium text-text-primary hover:bg-state-base-hover"
+                />
+              )}
+            >
+              <span className="mr-1 i-heroicons-globe-alt h-5 w-5" aria-hidden="true" />
+              {selectedItem?.name}
+            </DropdownMenuTrigger>
+          </div>
+        </div>
+        <DropdownMenuContent
+          placement="bottom-end"
+          sideOffset={8}
+          popupClassName="w-[200px]"
+        >
+          <DropdownMenuRadioGroup value={value} onValueChange={onChange}>
+            {items.map(item => (
+              <DropdownMenuRadioItem
+                key={item.value}
+                value={item.value}
+                className="px-3 py-2 text-sm text-text-secondary"
+              >
+                <span className="grow truncate">{item.name}</span>
+                <DropdownMenuRadioItemIndicator />
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}