From 6a9d2024147a34d69330681a551254ac2113ef7c Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 23 Jul 2024 17:11:02 +0800
Subject: [PATCH] chore: layout UI upgrade (#6577)

---
 web/app/(commonLayout)/layout.tsx             |   2 +-
 web/app/components/app-sidebar/app-info.tsx   |   2 +-
 web/app/components/app-sidebar/index.tsx      |   8 +++----
 web/app/components/app-sidebar/navLink.tsx    |   3 +--
 web/app/components/base/logo/logo-site.tsx    |  11 +++++++++-
 .../components/header/explore-nav/index.tsx   |   4 ++--
 .../{HeaderWrapper.tsx => header-wrapper.tsx} |   2 +-
 web/app/components/header/nav/index.tsx       |   8 +++----
 .../header/nav/nav-selector/index.tsx         |   4 ++--
 web/context/app-context.tsx                   |  20 +++++++++++++++++-
 web/public/logo/logo-site-dark.png            | Bin 0 -> 4270 bytes
 web/tailwind.config.js                        |   1 +
 web/types/app.ts                              |   5 +++++
 13 files changed, 51 insertions(+), 19 deletions(-)
 rename web/app/components/header/{HeaderWrapper.tsx => header-wrapper.tsx} (84%)
 create mode 100644 web/public/logo/logo-site-dark.png

diff --git a/web/app/(commonLayout)/layout.tsx b/web/app/(commonLayout)/layout.tsx
index ceeb164315..af36d4d961 100644
--- a/web/app/(commonLayout)/layout.tsx
+++ b/web/app/(commonLayout)/layout.tsx
@@ -3,7 +3,7 @@ import type { ReactNode } from 'react'
 import SwrInitor from '@/app/components/swr-initor'
 import { AppContextProvider } from '@/context/app-context'
 import GA, { GaType } from '@/app/components/base/ga'
-import HeaderWrapper from '@/app/components/header/HeaderWrapper'
+import HeaderWrapper from '@/app/components/header/header-wrapper'
 import Header from '@/app/components/header'
 import { EventEmitterContextProvider } from '@/context/event-emitter'
 import { ProviderContextProvider } from '@/context/provider-context'
diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index ef37ff3c78..90d3717d2c 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -218,7 +218,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
             </div>
             {expand && (
               <div className="grow w-0">
-                <div className='flex justify-between items-center text-sm leading-5 font-medium text-gray-900'>
+                <div className='flex justify-between items-center text-sm leading-5 font-medium text-text-secondary'>
                   <div className='truncate' title={appDetail.name}>{appDetail.name}</div>
                   {isCurrentWorkspaceEditor && <RiArrowDownSLine className='shrink-0 ml-[2px] w-3 h-3 text-gray-500' />}
                 </div>
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index 9a78cd7e6e..5d5d407dc0 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -49,7 +49,7 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
   return (
     <div
       className={`
-        shrink-0 flex flex-col bg-white border-r border-gray-200 transition-all
+        shrink-0 flex flex-col bg-background-default-subtle border-r border-divider-burn transition-all
         ${expand ? 'w-[216px]' : 'w-14'}
       `}
     >
@@ -60,7 +60,7 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
         `}
       >
         {iconType === 'app' && (
-          <AppInfo expand={expand}/>
+          <AppInfo expand={expand} />
         )}
         {iconType !== 'app' && (
           <AppBasic
@@ -74,11 +74,11 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
         )}
       </div>
       {!expand && (
-        <div className='mt-1 mx-auto w-6 h-[1px] bg-gray-100'/>
+        <div className='mt-1 mx-auto w-6 h-[1px] bg-divider-subtle' />
       )}
       <nav
         className={`
-          grow space-y-1 bg-white
+          grow space-y-1
           ${expand ? 'p-4' : 'px-2.5 py-4'}
         `}
       >
diff --git a/web/app/components/app-sidebar/navLink.tsx b/web/app/components/app-sidebar/navLink.tsx
index ec5277ce1a..bec6bf105f 100644
--- a/web/app/components/app-sidebar/navLink.tsx
+++ b/web/app/components/app-sidebar/navLink.tsx
@@ -44,7 +44,7 @@ export default function NavLink({
       key={name}
       href={href}
       className={classNames(
-        isActive ? 'bg-primary-50 text-primary-600 font-semibold' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-700',
+        isActive ? 'bg-state-accent-active text-text-accent font-semibold' : 'text-components-menu-item-text hover:bg-gray-100 hover:text-components-menu-item-text-hover',
         'group flex items-center h-9 rounded-md py-2 text-sm font-normal',
         mode === 'expand' ? 'px-3' : 'px-2.5',
       )}
@@ -53,7 +53,6 @@ export default function NavLink({
       <NavIcon
         className={classNames(
           'h-4 w-4 flex-shrink-0',
-          isActive ? 'text-primary-600' : 'text-gray-700',
           mode === 'expand' ? 'mr-2' : 'mr-0',
         )}
         aria-hidden="true"
diff --git a/web/app/components/base/logo/logo-site.tsx b/web/app/components/base/logo/logo-site.tsx
index 2db61a9cbb..a399ff3301 100644
--- a/web/app/components/base/logo/logo-site.tsx
+++ b/web/app/components/base/logo/logo-site.tsx
@@ -1,5 +1,7 @@
+'use client'
 import type { FC } from 'react'
 import classNames from '@/utils/classnames'
+import { useSelector } from '@/context/app-context'
 
 type LogoSiteProps = {
   className?: string
@@ -8,9 +10,16 @@ type LogoSiteProps = {
 const LogoSite: FC<LogoSiteProps> = ({
   className,
 }) => {
+  const { theme } = useSelector((s) => {
+    return {
+      theme: s.theme,
+    }
+  })
+
+  const src = theme === 'light' ? '/logo/logo-site.png' : `/logo/logo-site-${theme}.png`
   return (
     <img
-      src='/logo/logo-site.png'
+      src={src}
       className={classNames('block w-auto h-10', className)}
       alt='logo'
     />
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
index 4394518dc1..032b886613 100644
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -22,8 +22,8 @@ const ExploreNav = ({
   return (
     <Link href="/explore/apps" className={classNames(
       className, 'group',
-      actived && 'bg-white shadow-md',
-      actived ? 'text-primary-600' : 'text-gray-500 hover:bg-gray-200',
+      actived && 'bg-components-main-nav-nav-button-bg-active shadow-md',
+      actived ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover',
     )}>
       {
         actived
diff --git a/web/app/components/header/HeaderWrapper.tsx b/web/app/components/header/header-wrapper.tsx
similarity index 84%
rename from web/app/components/header/HeaderWrapper.tsx
rename to web/app/components/header/header-wrapper.tsx
index ba0047fe44..205a379a90 100644
--- a/web/app/components/header/HeaderWrapper.tsx
+++ b/web/app/components/header/header-wrapper.tsx
@@ -15,7 +15,7 @@ const HeaderWrapper = ({
 
   return (
     <div className={classNames(
-      'sticky top-0 left-0 right-0 z-30 flex flex-col bg-gray-100 grow-0 shrink-0 basis-auto min-h-[56px]',
+      'sticky top-0 left-0 right-0 z-30 flex flex-col grow-0 shrink-0 basis-auto min-h-[56px]',
       s.header,
       isBordered ? 'border-b border-gray-200' : '',
     )}
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index 85d7eb0301..1ea36c5123 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -39,16 +39,16 @@ const Nav = ({
   return (
     <div className={`
       flex items-center h-8 mr-0 sm:mr-3 px-0.5 rounded-xl text-sm shrink-0 font-medium
-      ${isActived && 'bg-white shadow-md font-semibold'}
-      ${!curNav && !isActived && 'hover:bg-gray-200'}
+      ${isActived && 'bg-components-main-nav-nav-button-bg-active shadow-md font-semibold'}
+      ${!curNav && !isActived && 'hover:bg-components-main-nav-nav-button-bg-hover'}
     `}>
       <Link href={link}>
         <div
           onClick={() => setAppDetail()}
           className={classNames(`
             flex items-center h-7 px-2.5 cursor-pointer rounded-[10px]
-            ${isActived ? 'text-primary-600' : 'text-gray-500'}
-            ${curNav && isActived && 'hover:bg-primary-50'}
+            ${isActived ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text'}
+            ${curNav && isActived && 'hover:bg-components-main-nav-nav-button-bg-active-hover'}
           `)}
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index b67a5cc0fd..51192c6580 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -55,8 +55,8 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
         {({ open }) => (
           <>
             <Menu.Button className={cn(
-              'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-primary-600 hover:bg-primary-50',
-              open && 'bg-primary-50',
+              'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active hover:hover:bg-components-main-nav-nav-button-bg-active-hover',
+              open && 'bg-components-main-nav-nav-button-bg-active',
             )}>
               <div className='max-w-[180px] truncate' title={curNav?.name}>{curNav?.name}</div>
               <RiArrowDownSLine
diff --git a/web/context/app-context.tsx b/web/context/app-context.tsx
index d141a78212..db28d28518 100644
--- a/web/context/app-context.tsx
+++ b/web/context/app-context.tsx
@@ -8,10 +8,13 @@ import { fetchAppList } from '@/service/apps'
 import Loading from '@/app/components/base/loading'
 import { fetchCurrentWorkspace, fetchLanggeniusVersion, fetchUserProfile } from '@/service/common'
 import type { App } from '@/types/app'
+import { Theme } from '@/types/app'
 import type { ICurrentWorkspace, LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
 import MaintenanceNotice from '@/app/components/header/maintenance-notice'
 
 export type AppContextValue = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
   apps: App[]
   mutateApps: VoidFunction
   userProfile: UserProfileResponse
@@ -49,6 +52,8 @@ const initialWorkspaceInfo: ICurrentWorkspace = {
 }
 
 const AppContext = createContext<AppContextValue>({
+  theme: Theme.light,
+  setTheme: () => { },
   apps: [],
   mutateApps: () => { },
   userProfile: {
@@ -112,11 +117,24 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
       setCurrentWorkspace(currentWorkspaceResponse)
   }, [currentWorkspaceResponse])
 
+  const [theme, setTheme] = useState<Theme>(Theme.light)
+  const handleSetTheme = useCallback((theme: Theme) => {
+    setTheme(theme)
+    globalThis.document.documentElement.setAttribute('data-theme', theme)
+  }, [])
+
+  useEffect(() => {
+    globalThis.document.documentElement.setAttribute('data-theme', theme)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   if (!appList || !userProfile)
     return <Loading type='app' />
 
   return (
     <AppContext.Provider value={{
+      theme,
+      setTheme: handleSetTheme,
       apps: appList.data,
       mutateApps,
       userProfile,
@@ -133,7 +151,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
     }}>
       <div className='flex flex-col h-full overflow-y-auto'>
         {globalThis.document?.body?.getAttribute('data-public-maintenance-notice') && <MaintenanceNotice />}
-        <div ref={pageContainerRef} className='grow relative flex flex-col overflow-y-auto overflow-x-hidden bg-gray-100'>
+        <div ref={pageContainerRef} className='grow relative flex flex-col overflow-y-auto overflow-x-hidden bg-background-body'>
           {children}
         </div>
       </div>
diff --git a/web/public/logo/logo-site-dark.png b/web/public/logo/logo-site-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..02041f05b3b9059f1ba01001eb166069ebfe7256
GIT binary patch
literal 4270
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
YG@9v7$|NfC?|T8DuWhVV4|PWT2NoC!UjP6A

literal 0
HcmV?d00001

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 1c1b6dccb6..ad62e74fa6 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
   content: [
     './app/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
+    './context/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     typography: require('./typography'),
diff --git a/web/types/app.ts b/web/types/app.ts
index ed73e2f5f7..73879af627 100644
--- a/web/types/app.ts
+++ b/web/types/app.ts
@@ -3,6 +3,11 @@ import type { CollectionType } from '@/app/components/tools/types'
 import type { LanguagesSupported } from '@/i18n/language'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 
+export enum Theme {
+  light = 'light',
+  dark = 'dark',
+}
+
 export enum ProviderType {
   openai = 'openai',
   anthropic = 'anthropic',