@lobehub/chat 1.47.11 → 1.47.12

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.47.12](https://github.com/lobehub/lobe-chat/compare/v1.47.11...v1.47.12)
+
+<sup>Released on **2025-01-21**</sup>
+
+#### 💄 Styles
+
+- **misc**: Refactor `[@nav](https://github.com/nav)` layout and improve pin list style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Refactor `[@nav](https://github.com/nav)` layout and improve pin list style, closes [#5533](https://github.com/lobehub/lobe-chat/issues/5533) ([cc8a7f4](https://github.com/lobehub/lobe-chat/commit/cc8a7f4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.47.11](https://github.com/lobehub/lobe-chat/compare/v1.47.10...v1.47.11)
 
 <sup>Released on **2025-01-21**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Refactor [@nav](https://github.com/nav) layout and improve pin list style."
+      ]
+    },
+    "date": "2025-01-21",
+    "version": "1.47.12"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.47.11",
+  "version": "1.47.12",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/{@nav/_layout/Desktop → _layout/Desktop/SideBar}/PinList/index.tsx

@@ -21,9 +21,29 @@ const useStyles = createStyles(({ css, token }) => ({
       box-shadow: 0 0 0 2px ${token.colorPrimary};
     }
   `,
-  avatarActive: css`
-    background: ${token.colorFillQuaternary};
-    box-shadow: 0 0 0 2px ${token.colorPrimaryBorder};
+  ink: css`
+    &::before {
+      content: '';
+
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: -${12 + 3}px;
+      transform: translateY(-50%);
+
+      width: 4px;
+      height: 0;
+      border-radius: 50px;
+
+      background: ${token.colorPrimary};
+
+      transition: height 150ms ease-out;
+    }
+  `,
+  inkActive: css`
+    &::before {
+      width: 8px;
+      height: 32px;
+    }
   `,
 }));
 
@@ -61,28 +81,33 @@ const PinList = () => {
         <Divider style={{ margin: '8px 12px' }} />
         <Flexbox flex={1} gap={12} height={'100%'}>
           {list.slice(0, 9).map((item, index) => (
-            <Tooltip
-              key={item.id}
-              placement={'right'}
-              title={
-                <Flexbox gap={8} horizontal>
-                  {sessionHelpers.getTitle(item.meta)}
-                  <HotKeys inverseTheme keys={`ctrl+${index + 1}`} />
+            <Flexbox key={item.id} style={{ position: 'relative' }}>
+              <Tooltip
+                placement={'right'}
+                title={
+                  <Flexbox gap={8} horizontal>
+                    {sessionHelpers.getTitle(item.meta)}
+                    <HotKeys inverseTheme keys={`ctrl+${index + 1}`} />
+                  </Flexbox>
+                }
+              >
+                <Flexbox
+                  className={cx(
+                    styles.ink,
+                    isPinned && activeId === item.id ? styles.inkActive : undefined,
+                  )}
+                >
+                  <Avatar
+                    avatar={sessionHelpers.getAvatar(item.meta)}
+                    background={item.meta.backgroundColor}
+                    className={cx(styles.avatar)}
+                    onClick={() => {
+                      switchAgent(item.id);
+                    }}
+                  />
                 </Flexbox>
-              }
-            >
-              <Avatar
-                avatar={sessionHelpers.getAvatar(item.meta)}
-                background={item.meta.backgroundColor}
-                className={cx(
-                  styles.avatar,
-                  isPinned && activeId === item.id ? styles.avatarActive : undefined,
-                )}
-                onClick={() => {
-                  switchAgent(item.id);
-                }}
-              />
-            </Tooltip>
+              </Tooltip>
+            </Flexbox>
           ))}
         </Flexbox>
       </>

package/src/app/(main)/_layout/{Desktop.tsx → Desktop/index.tsx}

@@ -2,18 +2,18 @@
 
 import { useTheme } from 'antd-style';
 import dynamic from 'next/dynamic';
-import { memo } from 'react';
+import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { BANNER_HEIGHT } from '@/features/AlertBanner/CloudBanner';
 import { usePlatform } from '@/hooks/usePlatform';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
-import { LayoutProps } from './type';
+import SideBar from './SideBar';
 
 const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
 
-const Layout = memo<LayoutProps>(({ children, nav }) => {
+const Layout = memo<PropsWithChildren>(({ children }) => {
   const { isPWA } = usePlatform();
   const theme = useTheme();
 
@@ -31,7 +31,7 @@ const Layout = memo<LayoutProps>(({ children, nav }) => {
         }}
         width={'100%'}
       >
-        {nav}
+        <SideBar />
         {children}
       </Flexbox>
     </>

package/src/app/(main)/{@nav/_layout/Mobile.tsx → _layout/Mobile/NavBar.tsx}

@@ -27,7 +27,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Nav = memo(() => {
+const NavBar = memo(() => {
   const { t } = useTranslation('common');
   const { styles } = useStyles();
   const activeKey = useActiveTabKey();
@@ -75,6 +75,6 @@ const Nav = memo(() => {
   return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} />;
 });
 
-Nav.displayName = 'MobileNav';
+NavBar.displayName = 'NavBar';
 
-export default Nav;
+export default NavBar;

package/src/app/(main)/_layout/{Mobile.tsx → Mobile/index.tsx}

@@ -3,12 +3,12 @@
 import dynamic from 'next/dynamic';
 import { usePathname } from 'next/navigation';
 import qs from 'query-string';
-import { memo } from 'react';
+import { PropsWithChildren, memo } from 'react';
 
 import { useQuery } from '@/hooks/useQuery';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
-import { LayoutProps } from './type';
+import NavBar from './NavBar';
 
 const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
 const MOBILE_NAV_ROUTES = new Set([
@@ -21,7 +21,7 @@ const MOBILE_NAV_ROUTES = new Set([
   '/me',
 ]);
 
-const Layout = memo(({ children, nav }: LayoutProps) => {
+const Layout = memo(({ children }: PropsWithChildren) => {
   const { showMobileWorkspace } = useQuery();
   const pathname = usePathname();
   const { url } = qs.parseUrl(pathname);
@@ -33,7 +33,7 @@ const Layout = memo(({ children, nav }: LayoutProps) => {
     <>
       {showCloudPromotion && <CloudBanner mobile />}
       {children}
-      {showNav && nav}
+      {showNav && <NavBar />}
     </>
   );
 });

package/src/app/(main)/layout.tsx

@@ -2,9 +2,8 @@ import ServerLayout from '@/components/server/ServerLayout';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
-import { LayoutProps } from './_layout/type';
 
-const MainLayout = ServerLayout<LayoutProps>({ Desktop, Mobile });
+const MainLayout = ServerLayout({ Desktop, Mobile });
 
 MainLayout.displayName = 'MainLayout';
 

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -93,7 +93,6 @@ const StoreInitialization = memo(() => {
       router.prefetch('/me');
     } else {
       router.prefetch('/chat/settings/modal');
-      router.prefetch('/settings/modal');
     }
   }, [router, mobile]);
 

package/src/app/(main)/@nav/default.tsx

@@ -1,10 +0,0 @@
-import ServerLayout from '@/components/server/ServerLayout';
-
-import Desktop from './_layout/Desktop';
-import Mobile from './_layout/Mobile';
-
-const Nav = ServerLayout({ Desktop, Mobile });
-
-Nav.displayName = 'Nav';
-
-export default Nav;

package/src/app/(main)/_layout/type.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface LayoutProps {
-  children: ReactNode;
-  nav: ReactNode;
-}