💄 style: Fix setting modal on responsive and some other style problem (…

…lobehub#2512)
SilvaneiMartins · May 15, 2024 · f6b4ca4 · f6b4ca4
1 parent d108280
commit f6b4ca4
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 81 deletions.
diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/icons": "latest",
     "@lobehub/tts": "latest",
-    "@lobehub/ui": "^1.138.23",
+    "@lobehub/ui": "^1.138.24",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@next/third-parties": "^14.2.3",
     "@sentry/nextjs": "^7.114.0",

diff --git a/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/index.tsx b/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/index.tsx
@@ -113,6 +113,6 @@ TopicListContent.displayName = 'TopicListContent';
 
 export default memo(() => (
   <Suspense fallback={<SkeletonList />}>
-    <TopicListContent />;
+    <TopicListContent />
   </Suspense>
 ));
diff --git a/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Main.tsx b/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Main.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useInitAgentConfig } from '@/app/(main)/chat/(workspace)/_layout/useInitAgentConfig';
+import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
@@ -45,7 +46,7 @@ const Main = memo(() => {
       />
     </Flexbox>
   ) : (
-    <Flexbox align={'flex-start'} gap={12} horizontal>
+    <Flexbox align={'center'} gap={4} horizontal>
       {
         <ActionIcon
           aria-label={t('agentsAndConversations')}
@@ -57,7 +58,7 @@ const Main = memo(() => {
               showSessionPanel: !currentShowSessionPanel,
             });
           }}
-          size="large"
+          size={DESKTOP_HEADER_ICON_SIZE}
           title={t('agentsAndConversations')}
         />
       }

diff --git a/src/app/(main)/settings/_layout/Desktop/Header.tsx b/src/app/(main)/settings/_layout/Desktop/Header.tsx
@@ -1,20 +1,15 @@
 'use client';
 
 import { ActionIcon, ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
-import { Drawer, type DrawerProps, Tag } from 'antd';
+import { type DrawerProps, Popover } from 'antd';
 import { createStyles } from 'antd-style';
 import { Menu } from 'lucide-react';
-import { PropsWithChildren, memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import BrandWatermark from '@/components/BrandWatermark';
-import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
-import { SettingsTabs } from '@/store/global/initialState';
+import { PropsWithChildren, memo } from 'react';
 
 const useStyles = createStyles(({ token, css }) => ({
   container: css`
     position: relative;
+    flex: none;
     height: 54px;
     background: ${token.colorBgContainer};
   `,
@@ -25,68 +20,33 @@ const useStyles = createStyles(({ token, css }) => ({
   `,
 }));
 
-const Header = memo<PropsWithChildren & Pick<DrawerProps, 'getContainer'>>(
-  ({ children, getContainer }) => {
-    const [open, setOpen] = useState(false);
-    const { styles, theme } = useStyles();
-    const { t } = useTranslation('setting');
-
-    const activeKey = useActiveSettingsKey();
+const Header = memo<PropsWithChildren & Pick<DrawerProps, 'getContainer'>>(({ children }) => {
+  const { styles, theme } = useStyles();
 
-    return (
-      <>
-        <ChatHeader
-          className={styles.container}
-          left={
-            <div style={{ paddingLeft: 8 }}>
-              <ChatHeaderTitle
-                title={
-                  <Flexbox align={'center'} className={styles.title} gap={4} horizontal>
-                    <ActionIcon
-                      color={theme.colorText}
-                      icon={Menu}
-                      onClick={() => setOpen(true)}
-                      size={{ blockSize: 32, fontSize: 18 }}
-                    />
-                    {t(`tab.${activeKey}`)}
-                    {activeKey === SettingsTabs.Sync && (
-                      <Tag color={'gold'}>{t('tab.experiment')}</Tag>
-                    )}
-                  </Flexbox>
-                }
+  return (
+    <ChatHeader
+      className={styles.container}
+      left={
+        <ChatHeaderTitle
+          title={
+            <Popover
+              arrow={false}
+              content={children}
+              overlayInnerStyle={{ minWidth: 240, padding: '2px 4px' }}
+              placement={'bottomLeft'}
+              trigger={['click']}
+            >
+              <ActionIcon
+                color={theme.colorText}
+                icon={Menu}
+                size={{ blockSize: 32, fontSize: 18 }}
               />
-            </div>
+            </Popover>
           }
         />
-        <Drawer
-          bodyStyle={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 20,
-            justifyContent: 'space-between',
-            padding: 16,
-          }}
-          getContainer={getContainer}
-          headerStyle={{ display: 'none' }}
-          maskStyle={{ background: 'transparent' }}
-          onClick={() => setOpen(false)}
-          onClose={() => setOpen(false)}
-          open={open}
-          placement={'left'}
-          rootStyle={{ position: 'absolute' }}
-          style={{
-            background: theme.colorBgContainer,
-            borderRight: `1px solid ${theme.colorSplit}`,
-          }}
-          width={260}
-          zIndex={10}
-        >
-          {children}
-          <BrandWatermark paddingInline={12} />
-        </Drawer>
-      </>
-    );
-  },
-);
+      }
+    />
+  );
+});
 
 export default Header;
diff --git a/src/app/@modal/_layout/SettingModalLayout.tsx b/src/app/@modal/_layout/SettingModalLayout.tsx
@@ -18,11 +18,11 @@ const SettingModalLayout = memo<SettingLayoutProps>(({ children, category, desc,
   const ref = useRef<any>(null);
   const theme = useTheme();
   const { isDarkMode } = useThemeMode();
-  const { md = true } = useResponsive();
+  const { mobile = false } = useResponsive();
 
   return (
-    <>
-      {md ? (
+    <Flexbox horizontal={!mobile} width={'100%'}>
+      {!mobile ? (
         <SideBar
           desc={desc}
           style={{
@@ -38,19 +38,25 @@ const SettingModalLayout = memo<SettingLayoutProps>(({ children, category, desc,
       )}
       <Flexbox
         align={'center'}
-        gap={64}
+        gap={mobile ? 0 : 64}
+        ref={ref}
         style={{
-          background: isDarkMode ? theme.colorFillQuaternary : theme.colorBgElevated,
+          background: mobile
+            ? theme.colorBgContainer
+            : isDarkMode
+              ? theme.colorFillQuaternary
+              : theme.colorBgElevated,
+          minHeight: '100%',
           overflowX: 'hidden',
           overflowY: 'auto',
-          paddingBlock: 40,
-          paddingInline: 56,
+          paddingBlock: mobile ? 0 : 40,
+          paddingInline: mobile ? 0 : 56,
         }}
         width={'100%'}
       >
         {children}
       </Flexbox>
-    </>
+    </Flexbox>
   );
 });
 

diff --git a/src/components/404/index.tsx b/src/components/404/index.tsx
@@ -12,7 +12,7 @@ import { MAX_WIDTH } from '@/const/layoutTokens';
 const NotFound = memo(() => {
   const { t } = useTranslation('error');
   return (
-    <Flexbox align={'center'} justify={'center'} style={{ height: '100%', width: '100%' }}>
+    <Flexbox align={'center'} justify={'center'} style={{ minHeight: '100%', width: '100%' }}>
       <h1
         style={{
           filter: 'blur(8px)',

diff --git a/src/components/Error/index.tsx b/src/components/Error/index.tsx
@@ -24,7 +24,7 @@ const ErrorCapture = memo<ErrorCaptureProps>(({ reset, error }) => {
   }, [error]);
 
   return (
-    <Flexbox align={'center'} justify={'center'} style={{ height: '100%', width: '100%' }}>
+    <Flexbox align={'center'} justify={'center'} style={{ minHeight: '100%', width: '100%' }}>
       <h1
         style={{
           filter: 'blur(8px)',

diff --git a/src/hooks/useActiveSettingsKey.ts b/src/hooks/useActiveSettingsKey.ts
@@ -1,16 +1,20 @@
 import { usePathname } from 'next/navigation';
 
+import { useQuery } from '@/hooks/useQuery';
 import { SettingsTabs } from '@/store/global/initialState';
 
 /**
  * Returns the active setting page key (common/sync/agent/...)
  */
 export const useActiveSettingsKey = () => {
   const pathname = usePathname();
+  const { tab } = useQuery();
 
   const tabs = pathname.split('/').at(-1);
 
   if (tabs === 'settings') return SettingsTabs.Common;
 
+  if (tabs === 'modal') return tab as SettingsTabs;
+
   return tabs as SettingsTabs;
 };