fix: add icon to user profile dropdown menu item

2025-02-05 15:49:50 +08:00 · 2025-02-05 15:49:50 +08:00 · cd932519b3
commit cd932519b3
parent 2ff2b08739
11 changed files with 1462 additions and 1301 deletions
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@ -0,0 +1,94 @@
+import { Menu, Transition } from '@headlessui/react'
+import { RiArrowRightSLine, RiArrowRightUpLine, RiDiscordLine, RiFeedbackLine, RiMailSendLine, RiVerifiedBadgeLine } from '@remixicon/react'
+import { Fragment } from 'react'
+import Link from 'next/link'
+import { useTranslation } from 'react-i18next'
+import { mailToSupport } from '../utils/util'
+import cn from '@/utils/classnames'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '@/app/components/billing/type'
+import { useAppContext } from '@/context/app-context'
+
+export default function Compliance() {
+  const itemClassName = `
+  flex items-center w-full h-9 pl-3 pr-2 text-text-secondary system-md-regular
+  rounded-lg hover:bg-state-base-hover cursor-pointer gap-1
+`
+  const { t } = useTranslation()
+  const { plan } = useProviderContext()
+  const { userProfile, langeniusVersionInfo } = useAppContext()
+  const canEmailSupport = plan.type === Plan.professional || plan.type === Plan.team || plan.type === Plan.enterprise
+
+  return <Menu as="div" className="relative w-full h-full">
+    {
+      ({ open }) => (
+        <>
+          <Menu.Button className={
+            cn('flex items-center pl-3 pr-2 py-2 h-9 w-full group hover:bg-state-base-hover rounded-lg gap-1',
+              open && 'bg-state-base-hover',
+            )}>
+            <RiVerifiedBadgeLine className='flex-shrink-0 size-4 text-text-tertiary' />
+            <div className='flex-grow text-left system-md-regular text-text-secondary'>{t('common.userProfile.compliance')}</div>
+            <RiArrowRightSLine className='shrink-0 size-[14px] text-text-tertiary' />
+          </Menu.Button>
+          <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"
+          >
+            <Menu.Items
+              className={cn(
+                `absolute top-[1px] w-[216px] max-h-[70vh] overflow-y-scroll z-10 bg-components-panel-bg-blur backdrop-blur-[5px] border-[0.5px] border-components-panel-border
+                divide-y divide-divider-subtle origin-top-right rounded-xl focus:outline-none shadow-lg -translate-x-full
+              `,
+              )}
+            >
+              <div className="px-1 py-1">
+                {!canEmailSupport && <Menu.Item>
+                  {({ active }) => <a
+                    className={cn(itemClassName, 'group justify-between',
+                      active && 'bg-state-base-hover',
+                    )}
+                    href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
+                    target='_blank' rel='noopener noreferrer'>
+                    <RiMailSendLine className='flex-shrink-0 size-4 text-text-tertiary' />
+                    <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.emailSupport')}</div>
+                    <RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
+                  </a>}
+                </Menu.Item>}
+                <Menu.Item>
+                  {({ active }) => <Link
+                    className={cn(itemClassName, 'group justify-between',
+                      active && 'bg-state-base-hover',
+                    )}
+                    href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
+                    target='_blank' rel='noopener noreferrer'>
+                    <RiFeedbackLine className='flex-shrink-0 size-4 text-text-tertiary' />
+                    <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.communityFeedback')}</div>
+                    <RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
+                  </Link>}
+                </Menu.Item>
+                <Menu.Item>
+                  {({ active }) => <Link
+                    className={cn(itemClassName, 'group justify-between',
+                      active && 'bg-state-base-hover',
+                    )}
+                    href='https://discord.gg/5AEfbxcd9k'
+                    target='_blank' rel='noopener noreferrer'>
+                    <RiDiscordLine className='flex-shrink-0 size-4 text-text-tertiary' />
+                    <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.community')}</div>
+                    <RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
+                  </Link>}
+                </Menu.Item>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </>
+      )
+    }
+  </Menu>
+}
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@ -2,24 +2,24 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { useContext } from 'use-context-selector'
-import { RiArrowDownSLine, RiLogoutBoxRLine } from '@remixicon/react'
+import { useContext, useContextSelector } from 'use-context-selector'
+import { RiAccountCircleLine, RiArrowDownSLine, RiArrowRightUpLine, RiBookOpenLine, RiGithubLine, RiInformation2Line, RiLogoutBoxRLine, RiMap2Line, RiSettings3Line, RiStarLine } from '@remixicon/react'
 import Link from 'next/link'
 import { Menu, Transition } from '@headlessui/react'
 import Indicator from '../indicator'
 import AccountAbout from '../account-about'
-import { mailToSupport } from '../utils/util'
+import GithubStar from '../github-star'
 import WorkplaceSelector from './workplace-selector'
+import Support from './support'
+import Compliance from './compliance'
 import classNames from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import Avatar from '@/app/components/base/avatar'
 import { logout } from '@/service/common'
-import { useAppContext } from '@/context/app-context'
-import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import AppContext, { useAppContext } from '@/context/app-context'
 import { useModalContext } from '@/context/modal-context'
 import { LanguagesSupported } from '@/i18n/language'
-import { useProviderContext } from '@/context/provider-context'
-import { Plan } from '@/app/components/billing/type'
+import { LicenseStatus } from '@/types/feature'

 export type IAppSelector = {
  isMobile: boolean
@ -27,18 +27,17 @@ export type IAppSelector = {

 export default function AppSelector({ isMobile }: IAppSelector) {
  const itemClassName = `
-    flex items-center w-full h-9 px-3 text-text-secondary system-md-regular
-    rounded-lg hover:bg-state-base-hover cursor-pointer
+    flex items-center w-full h-9 pl-3 pr-2 text-text-secondary system-md-regular
+    rounded-lg hover:bg-state-base-hover cursor-pointer gap-1
  `
  const router = useRouter()
  const [aboutVisible, setAboutVisible] = useState(false)
+  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)

  const { locale } = useContext(I18n)
  const { t } = useTranslation()
  const { userProfile, langeniusVersionInfo } = useAppContext()
  const { setShowAccountSettingModal } = useModalContext()
-  const { plan } = useProviderContext()
-  const canEmailSupport = plan.type === Plan.professional || plan.type === Plan.team || plan.type === Plan.enterprise

  const handleLogout = async () => {
    await logout({
@ -63,15 +62,15 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                className={`
                    inline-flex items-center
                    rounded-[20px] py-1 pr-2.5 pl-1 text-sm
-                  text-gray-700 hover:bg-gray-200
+                  text-text-secondary hover:bg-state-base-hover
                    mobile:px-1
-                    ${open && 'bg-gray-200'}
+                    ${open && 'bg-state-base-hover'}
                  `}
              >
                <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
                {!isMobile && <>
                  {userProfile.name}
-                  <RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" />
+                  <RiArrowDownSLine className="w-3 h-3 ml-1 text-text-tertiary" />
                </>}
              </Menu.Button>
              <Transition
@ -91,70 +90,41 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                  "
                >
                  <Menu.Item disabled>
-                    <div className='flex flex-nowrap items-center px-4 py-[13px]'>
-                      <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} className='mr-3' />
+                    <div className='flex flex-nowrap items-center pl-3 pr-2 py-[13px]'>
                      <div className='grow'>
                        <div className='system-md-medium text-text-primary break-all'>{userProfile.name}</div>
                        <div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
                      </div>
+                      <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} className='mr-3' />
                    </div>
                  </Menu.Item>
-                  <div className='px-1 py-1'>
+                  <div className='p-1'>
                    <div className='mt-2 px-3 text-xs font-medium text-text-tertiary'>{t('common.userProfile.workspace')}</div>
                    <WorkplaceSelector />
                  </div>
-                  <div className="px-1 py-1">
+                  <div className="p-1">
                    <Menu.Item>
                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
+                        className={classNames(itemClassName, 'group',
                          active && 'bg-state-base-hover',
                        )}
                        href='/account'
                        target='_self' rel='noopener noreferrer'>
-                        <div>{t('common.account.account')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <RiAccountCircleLine className='size-4 flex-shrink-0 text-text-tertiary' />
+                        <div className='flex-grow system-md-regular text-text-secondary'>{t('common.account.account')}</div>
+                        <RiArrowRightUpLine className='size-[14px] flex-shrink-0 text-text-tertiary' />
                      </Link>}
                    </Menu.Item>
                    <Menu.Item>
                      {({ active }) => <div className={classNames(itemClassName,
                        active && 'bg-state-base-hover',
                      )} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
-                        <div>{t('common.userProfile.settings')}</div>
+                        <RiSettings3Line className='size-4 flex-shrink-0 text-text-tertiary' />
+                        <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.settings')}</div>
                      </div>}
                    </Menu.Item>
-                    {canEmailSupport && <Menu.Item>
-                      {({ active }) => <a
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.emailSupport')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </a>}
-                    </Menu.Item>}
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.communityFeedback')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://discord.gg/5AEfbxcd9k'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.community')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
+                  </div>
+                  <div className='p-1'>
                    <Menu.Item>
                      {({ active }) => <Link
                        className={classNames(itemClassName, 'group justify-between',
@ -164,10 +134,15 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                          locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
                        }
                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.helpCenter')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <RiBookOpenLine className='flex-shrink-0 size-4 text-text-tertiary' />
+                        <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.helpCenter')}</div>
+                        <RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
                      </Link>}
                    </Menu.Item>
+                    <Support />
+                    <Compliance />
+                  </div>
+                  <div className='p-1'>
                    <Menu.Item>
                      {({ active }) => <Link
                        className={classNames(itemClassName, 'group justify-between',
@ -175,18 +150,35 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                        )}
                        href='https://roadmap.dify.ai'
                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.roadmap')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <RiMap2Line className='flex-shrink-0 size-4 text-text-tertiary' />
+                        <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.roadmap')}</div>
+                        <RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
                      </Link>}
                    </Menu.Item>
+                    {systemFeatures.license.status !== LicenseStatus.NONE && <Menu.Item>
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
+                        href='https://github.com/langgenius/dify/stargazers'
+                        target='_blank' rel='noopener noreferrer'>
+                        <RiGithubLine className='flex-shrink-0 size-4 text-text-tertiary' />
+                        <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.github')}</div>
+                        <div className='flex items-center gap-0.5 px-[5px] py-[3px] border border-divider-deep rounded-[5px] bg-components-badge-bg-dimm'>
+                          <RiStarLine className='flex-shrink-0 size-3 text-text-tertiary' />
+                          <GithubStar className='system-2xs-medium-uppercase text-text-tertiary' />
+                        </div>
+                      </Link>}
+                    </Menu.Item>}
                    {
                      document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
                        <Menu.Item>
                          {({ active }) => <div className={classNames(itemClassName, 'justify-between',
                            active && 'bg-state-base-hover',
                          )} onClick={() => setAboutVisible(true)}>
-                            <div>{t('common.userProfile.about')}</div>
-                            <div className='flex items-center'>
+                            <RiInformation2Line className='flex-shrink-0 size-4 text-text-tertiary' />
+                            <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.about')}</div>
+                            <div className='flex-shrink-0 flex items-center'>
                              <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
                              <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
                            </div>
@ -198,12 +190,12 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                  <Menu.Item>
                    {({ active }) => <div className='p-1' onClick={() => handleLogout()}>
                      <div
-                        className={
-                          classNames('flex items-center justify-between h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover',
-                            active && 'bg-state-base-hover')}
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
                      >
-                        <div className='system-md-regular text-text-secondary'>{t('common.userProfile.logout')}</div>
-                        <RiLogoutBoxRLine className='hidden w-4 h-4 text-text-tertiary group-hover:flex' />
+                        <RiLogoutBoxRLine className='flex-shrink-0 size-4 text-text-tertiary' />
+                        <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.logout')}</div>
                      </div>
                    </div>}
                  </Menu.Item>
--- a/web/app/components/header/account-dropdown/support.tsx
+++ b/web/app/components/header/account-dropdown/support.tsx
@ -0,0 +1,94 @@
+import { Menu, Transition } from '@headlessui/react'
+import { RiArrowRightSLine, RiArrowRightUpLine, RiDiscordLine, RiFeedbackLine, RiMailSendLine, RiQuestionLine } from '@remixicon/react'
+import { Fragment } from 'react'
+import Link from 'next/link'
+import { useTranslation } from 'react-i18next'
+import { mailToSupport } from '../utils/util'
+import cn from '@/utils/classnames'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '@/app/components/billing/type'
+import { useAppContext } from '@/context/app-context'
+
+export default function Support() {
+  const itemClassName = `
+  flex items-center w-full h-9 pl-3 pr-2 text-text-secondary system-md-regular
+  rounded-lg hover:bg-state-base-hover cursor-pointer gap-1
+`
+  const { t } = useTranslation()
+  const { plan } = useProviderContext()
+  const { userProfile, langeniusVersionInfo } = useAppContext()
+  const canEmailSupport = plan.type === Plan.professional || plan.type === Plan.team || plan.type === Plan.enterprise
+
+  return <Menu as="div" className="relative w-full h-full">
+    {
+      ({ open }) => (
+        <>
+          <Menu.Button className={
+            cn('flex items-center pl-3 pr-2 py-2 h-9 w-full group hover:bg-state-base-hover rounded-lg gap-1',
+              open && 'bg-state-base-hover',
+            )}>
+            <RiQuestionLine className='flex-shrink-0 size-4 text-text-tertiary' />
+            <div className='flex-grow text-left system-md-regular text-text-secondary'>{t('common.userProfile.support')}</div>
+            <RiArrowRightSLine className='shrink-0 size-[14px] text-text-tertiary' />
+          </Menu.Button>
+          <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"
+          >
+            <Menu.Items
+              className={cn(
+                `absolute top-[1px] w-[216px] max-h-[70vh] overflow-y-scroll z-10 bg-components-panel-bg-blur backdrop-blur-[5px] border-[0.5px] border-components-panel-border
+                divide-y divide-divider-subtle origin-top-right rounded-xl focus:outline-none shadow-lg -translate-x-full
+              `,
+              )}
+            >
+              <div className="px-1 py-1">
+                {canEmailSupport && <Menu.Item>
+                  {({ active }) => <a
+                    className={cn(itemClassName, 'group justify-between',
+                      active && 'bg-state-base-hover',
+                    )}
+                    href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
+                    target='_blank' rel='noopener noreferrer'>
+                    <RiMailSendLine className='flex-shrink-0 size-4 text-text-tertiary' />
+                    <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.emailSupport')}</div>
+                    <RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
+                  </a>}
+                </Menu.Item>}
+                <Menu.Item>
+                  {({ active }) => <Link
+                    className={cn(itemClassName, 'group justify-between',
+                      active && 'bg-state-base-hover',
+                    )}
+                    href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
+                    target='_blank' rel='noopener noreferrer'>
+                    <RiFeedbackLine className='flex-shrink-0 size-4 text-text-tertiary' />
+                    <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.communityFeedback')}</div>
+                    <RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
+                  </Link>}
+                </Menu.Item>
+                <Menu.Item>
+                  {({ active }) => <Link
+                    className={cn(itemClassName, 'group justify-between',
+                      active && 'bg-state-base-hover',
+                    )}
+                    href='https://discord.gg/5AEfbxcd9k'
+                    target='_blank' rel='noopener noreferrer'>
+                    <RiDiscordLine className='flex-shrink-0 size-4 text-text-tertiary' />
+                    <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.community')}</div>
+                    <RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
+                  </Link>}
+                </Menu.Item>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </>
+      )
+    }
+  </Menu>
+}
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@ -9,19 +9,18 @@ import { useWorkspacesContext } from '@/context/workspace-context'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { ToastContext } from '@/app/components/base/toast'
-import classNames from '@/utils/classnames'

 const itemClassName = `
-  flex items-center px-3 py-2 h-10 cursor-pointer
+  flex items-center px-3 py-2 h-9 cursor-pointer rounded-lg
 `
 const itemIconClassName = `
-  shrink-0 mr-2 flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600
+  shrink-0 mr-2 flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-text-accent
 `
 const itemNameClassName = `
  grow mr-2 text-sm text-gray-700 text-left
 `
 const itemCheckClassName = `
-  shrink-0 w-4 h-4 text-primary-600
+  shrink-0 w-4 h-4 text-text-accent
 `

 const WorkplaceSelector = () => {
@ -48,15 +47,15 @@ const WorkplaceSelector = () => {
      {
        ({ open }) => (
          <>
-            <Menu.Button className={cn(
+            <Menu.Button className={cn(itemClassName,
              `
-                ${itemClassName} w-full
-                group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-lg
+                w-full group hover:bg-state-base-hover pl-3 pr-2
              `,
+              open && 'bg-state-base-hover',
            )}>
              <div className={itemIconClassName}>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
              <div className={`${itemNameClassName} truncate`}>{currentWorkspace?.name}</div>
-              <ChevronRight className='shrink-0 w-[14px] h-[14px] text-gray-500' />
+              <ChevronRight className='shrink-0 size-[14px] text-text-tertiary' />
            </Menu.Button>
            <Transition
              as={Fragment}
@ -70,8 +69,8 @@ const WorkplaceSelector = () => {
              <Menu.Items
                className={cn(
                  `
-                    absolute top-[1px] min-w-[200px] max-h-[70vh] overflow-y-scroll z-10 bg-white border-[0.5px] border-gray-200
-                    divide-y divide-gray-100 origin-top-right rounded-xl focus:outline-none
+                    absolute top-[1px] w-[216px] max-h-[70vh] overflow-y-scroll z-10 bg-components-panel-bg-blur backdrop-blur-[5px] border-[0.5px] border-components-panel-border
+                    divide-y divide-divider-subtle origin-top-right rounded-xl focus:outline-none
                  `,
                  s.popup,
                )}
@ -80,7 +79,7 @@ const WorkplaceSelector = () => {
                  {
                    workspaces.map(workspace => (
                      <Menu.Item key={workspace.id}>
-                        {({ active }) => <div className={classNames(itemClassName,
+                        {({ active }) => <div className={cn(itemClassName,
                          active && 'bg-state-base-hover',
                        )} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
                          <div className={itemIconClassName}>{workspace.name[0].toLocaleUpperCase()}</div>
--- a/web/app/components/header/github-star/index.tsx
+++ b/web/app/components/header/github-star/index.tsx
@ -1,50 +1,27 @@
 'use client'
-import React, { useEffect, useState } from 'react'
-import { Github } from '@/app/components/base/icons/src/public/common'
+import { useQuery } from '@tanstack/react-query'
+import type { FC } from 'react'
 import type { GithubRepo } from '@/models/common'

 const getStar = async () => {
  const res = await fetch('https://api.github.com/repos/langgenius/dify')

  if (!res.ok)
-    throw new Error('Failed to fetch data')
+    throw new Error('Failed to fetch github star')

  return res.json()
 }

-const GithubStar = () => {
-  const [githubRepo, setGithubRepo] = useState<GithubRepo>({ stargazers_count: 6000 })
-  const [isFetched, setIsFetched] = useState(false)
-  useEffect(() => {
-    (async () => {
-      try {
-        if (process.env.NODE_ENV === 'development')
-          return
-
-        await setGithubRepo(await getStar())
-        setIsFetched(true)
-      }
-      catch (e) {
-
-      }
-    })()
-  }, [])
-
-  if (!isFetched)
+const GithubStar: FC<{ className: string }> = (props) => {
+  const { isFetching, data } = useQuery<GithubRepo>({
+    queryKey: ['github-star'],
+    queryFn: getStar,
+    enabled: process.env.NODE_ENV !== 'development',
+    initialData: { stargazers_count: 6000 },
+  })
+  if (isFetching)
    return null
-
-  return (
-    <a
-      href='https://github.com/langgenius/dify'
-      target='_blank' rel='noopener noreferrer'
-      className='flex items-center leading-[18px] border border-gray-200 rounded-md text-xs text-gray-700 font-semibold overflow-hidden'>
-      <div className='flex items-center px-2 py-1 bg-gray-100'>
-        <Github className='mr-1 w-[18px] h-[18px]' />
-        Star
-      </div>
-      <div className='px-2 py-1 bg-white border-l border-gray-200'>{`${githubRepo.stargazers_count}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</div>
-    </a>
-  )
+  return <span {...props}>{data.stargazers_count.toLocaleString()}</span>
 }

 export default GithubStar
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@ -4,7 +4,6 @@ import Link from 'next/link'
 import { useBoolean } from 'ahooks'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import { Bars3Icon } from '@heroicons/react/20/solid'
-import { useContextSelector } from 'use-context-selector'
 import HeaderBillingBtn from '../billing/header-billing-btn'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
@ -12,15 +11,13 @@ import DatasetNav from './dataset-nav'
 import EnvNav from './env-nav'
 import ExploreNav from './explore-nav'
 import ToolsNav from './tools-nav'
-import GithubStar from './github-star'
 import LicenseNav from './license-env'
 import { WorkspaceProvider } from '@/context/workspace-context'
-import AppContext, { useAppContext } from '@/context/app-context'
+import { useAppContext } from '@/context/app-context'
 import LogoSite from '@/app/components/base/logo/logo-site'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
-import { LicenseStatus } from '@/types/feature'

 const navClassName = `
  flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
@ -30,7 +27,6 @@ const navClassName = `

 const Header = () => {
  const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
-  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
  const selectedSegment = useSelectedLayoutSegment()
  const media = useBreakpoints()
  const isMobile = media === MediaType.mobile
@ -62,7 +58,6 @@ const Header = () => {
          <Link href="/apps" className='flex items-center mr-4'>
            <LogoSite className='object-contain' />
          </Link>
-          {systemFeatures.license.status === LicenseStatus.NONE && <GithubStar />}
        </>}
      </div>
      {isMobile && (
@ -70,7 +65,6 @@ const Header = () => {
          <Link href="/apps" className='flex items-center mr-4'>
            <LogoSite />
          </Link>
-          {systemFeatures.license.status === LicenseStatus.NONE && <GithubStar />}
        </div>
      )}
      {!isMobile && (
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@ -144,9 +144,12 @@ const translation = {
    emailSupport: 'Email Support',
    workspace: 'Workspace',
    createWorkspace: 'Create Workspace',
-    helpCenter: 'Help',
+    helpCenter: 'Docs',
+    support: 'Support',
+    compliance: 'Compliance',
    communityFeedback: 'Feedback',
    roadmap: 'Roadmap',
+    github: 'GitHub',
    community: 'Community',
    about: 'About',
    logout: 'Log out',
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@ -145,8 +145,11 @@ const translation = {
    workspace: '工作空间',
    createWorkspace: '创建工作空间',
    helpCenter: '帮助文档',
+    support: '支持',
+    compliance: '合规报告',
    communityFeedback: '用户反馈',
    roadmap: '路线图',
+    github: 'GitHub',
    community: '社区',
    about: '关于',
    logout: '登出',
--- a/web/themes/dark.css
+++ b/web/themes/dark.css
--- a/web/themes/light.css
+++ b/web/themes/light.css
--- a/web/themes/tailwind-theme-var-define.ts
+++ b/web/themes/tailwind-theme-var-define.ts
@ -206,6 +206,7 @@ const vars = {
  'components-badge-bg-red-soft': 'var(--color-components-badge-bg-red-soft)',
  'components-badge-bg-blue-light-soft': 'var(--color-components-badge-bg-blue-light-soft)',
  'components-badge-bg-gray-soft': 'var(--color-components-badge-bg-gray-soft)',
+  'components-badge-bg-dimm': 'var(--color-components-badge-bg-dimm)',

  'components-chart-line': 'var(--color-components-chart-line)',
  'components-chart-area-1': 'var(--color-components-chart-area-1)',
@ -399,7 +400,6 @@ const vars = {
  'background-default-burn': 'var(--color-background-default-burn)',
  'background-overlay-fullscreen': 'var(--color-background-overlay-fullscreen)',
  'background-default-lighter': 'var(--color-background-default-lighter)',
-  'background-account-teams-bg': 'var(--color-account-teams-bg)',
  'background-section': 'var(--color-background-section)',
  'background-interaction-from-bg-1': 'var(--color-background-interaction-from-bg-1)',
  'background-interaction-from-bg-2': 'var(--color-background-interaction-from-bg-2)',
@ -503,6 +503,7 @@ const vars = {
  'state-base-hover-alt': 'var(--color-state-base-hover-alt)',
  'state-base-handle': 'var(--color-state-base-handle)',
  'state-base-handle-hover': 'var(--color-state-base-handle-hover)',
+  'state-base-hover-subtle': 'var(--color-state-base-hover-subtle)',

  'state-accent-hover': 'var(--color-state-accent-hover)',
  'state-accent-active': 'var(--color-state-accent-active)',