fix: add icon to user profile dropdown menu item

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

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 { useContext, useContextSelector } from 'use-context-selector'
-import { RiArrowDownSLine, RiLogoutBoxRLine } from '@remixicon/react'
+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 AppContext, { useAppContext } from '@/context/app-context'
-import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useModalContext } from '@/context/modal-context'
 import { LanguagesSupported } from '@/i18n/language'
-import { useProviderContext } from '@/context/provider-context'
+import { LicenseStatus } from '@/types/feature'
-import { Plan } from '@/app/components/billing/type'
 
 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
+    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
+    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]'>
+                    <div className='flex flex-nowrap items-center pl-3 pr-2 py-[13px]'>
-                      <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} className='mr-3' />
                       <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>
+                        <RiAccountCircleLine className='size-4 flex-shrink-0 text-text-tertiary' />
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <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>
+                  </div>
-                      {({ active }) => <a
+                  <div className='p-1'>
-                        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>
                     <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>
+                        <RiBookOpenLine className='flex-shrink-0 size-4 text-text-tertiary' />
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <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>
+                        <RiMap2Line className='flex-shrink-0 size-4 text-text-tertiary' />
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        <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>
+                            <RiInformation2Line className='flex-shrink-0 size-4 text-text-tertiary' />
-                            <div className='flex items-center'>
+                            <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={
+                        className={classNames(itemClassName, 'group justify-between',
-                          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',
-                            active && 'bg-state-base-hover')}
+                        )}
                       >
-                        <div className='system-md-regular text-text-secondary'>{t('common.userProfile.logout')}</div>
+                        <RiLogoutBoxRLine className='flex-shrink-0 size-4 text-text-tertiary' />
-                        <RiLogoutBoxRLine className='hidden w-4 h-4 text-text-tertiary group-hover:flex' />
+                        <div className='flex-grow system-md-regular text-text-secondary'>{t('common.userProfile.logout')}</div>
                       </div>
                     </div>}
                   </Menu.Item>

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

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
+                w-full group hover:bg-state-base-hover pl-3 pr-2
-                group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-lg
               `,
+              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
+                    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-gray-100 origin-top-right rounded-xl focus:outline-none
+                    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>

web/app/components/header/github-star/index.tsx

@@ -1,50 +1,27 @@
 'use client'
-import React, { useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
-import { Github } from '@/app/components/base/icons/src/public/common'
+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 GithubStar: FC<{ className: string }> = (props) => {
-  const [githubRepo, setGithubRepo] = useState<GithubRepo>({ stargazers_count: 6000 })
+  const { isFetching, data } = useQuery<GithubRepo>({
-  const [isFetched, setIsFetched] = useState(false)
+    queryKey: ['github-star'],
-  useEffect(() => {
+    queryFn: getStar,
-    (async () => {
+    enabled: process.env.NODE_ENV !== 'development',
-      try {
+    initialData: { stargazers_count: 6000 },
-        if (process.env.NODE_ENV === 'development')
+  })
-          return
+  if (isFetching)
-
-        await setGithubRepo(await getStar())
-        setIsFetched(true)
-      }
-      catch (e) {
-
-      }
-    })()
-  }, [])
-
-  if (!isFetched)
     return null
-
+  return <span {...props}>{data.stargazers_count.toLocaleString()}</span>
-  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>
-  )
 }
 
 export default GithubStar

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 && (

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',

web/i18n/zh-Hans/common.ts

@@ -145,8 +145,11 @@ const translation = {
     workspace: '工作空间',
     createWorkspace: '创建工作空间',
     helpCenter: '帮助文档',
+    support: '支持',
+    compliance: '合规报告',
     communityFeedback: '用户反馈',
     roadmap: '路线图',
+    github: 'GitHub',
     community: '社区',
     about: '关于',
     logout: '登出',

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)',