Merge branch 'feat/sidebar' of github.com:CherryHQ/cherry-studio into feat/sidebar

- Added new path to ESLint configuration for better linting coverage.
- Refactored useDiscoverCategories to simplify category handling and improve URL path matching logic.
- Removed unnecessary items from initialCategories for clarity and maintainability.

.prettierrc

@@ -4,5 +4,8 @@
   "printWidth": 120,
   "trailingComma": "none",
   "endOfLine": "lf",
-  "bracketSameLine": true
+  "bracketSameLine": true,
+  "tailwindStylesheet": "./src/renderer/src/assets/styles/tailwind.css",
+  "tailwindFunctions": ["clsx"],
+  "plugins": ["prettier-plugin-tailwindcss"],
 }

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/renderer/src/assets/styles/tailwind.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@renderer/ui/third-party",
+    "utils": "@renderer/utils",
+    "ui": "@renderer/ui",
+    "lib": "@renderer/lib",
+    "hooks": "@renderer/hooks"
+  },
+  "iconLibrary": "lucide"
+}

electron.vite.config.ts

@@ -40,6 +40,7 @@ export default defineConfig({
   },
   renderer: {
     plugins: [
+      (async () => (await import('@tailwindcss/vite')).default())(),
       react({
         plugins: [
           [

eslint.config.mjs

@@ -62,7 +62,8 @@ export default defineConfig([
       '.yarn/**',
       '.gitignore',
       'scripts/cloudflare-worker.js',
-      'src/main/integration/nutstore/sso/lib/**'
+      'src/main/integration/nutstore/sso/lib/**',
+      'src/renderer/src/ui/**'
     ]
   }
 ])

package.json

@@ -119,9 +119,18 @@
     "@mozilla/readability": "^0.6.0",
     "@notionhq/client": "^2.2.15",
     "@playwright/test": "^1.52.0",
+    "@radix-ui/react-collapsible": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-separator": "^1.1.6",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.6",
     "@reduxjs/toolkit": "^2.2.5",
     "@shikijs/markdown-it": "^3.4.2",
     "@swc/plugin-styled-components": "^7.1.5",
+    "@tailwindcss/vite": "^4.1.5",
+    "@tavily/core": "patch:@tavily/core@npm%3A0.3.1#~/.yarn/patches/@tavily-core-npm-0.3.1-fe69bf2bea.patch",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -150,6 +159,8 @@
     "antd": "^5.22.5",
     "axios": "^1.7.3",
     "browser-image-compression": "^2.0.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "color": "^5.0.0",
     "dayjs": "^1.11.11",
     "dexie": "^4.0.8",
@@ -173,15 +184,17 @@
     "lint-staged": "^15.5.0",
     "lodash": "^4.17.21",
     "lru-cache": "^11.1.0",
-    "lucide-react": "^0.487.0",
+    "lucide-react": "^0.511.0",
     "mermaid": "^11.6.0",
     "mime": "^4.0.4",
-    "motion": "^12.10.5",
+    "motion": "^12.12.1",
+    "next-themes": "^0.4.6",
     "npx-scope-finder": "^1.2.0",
     "openai": "patch:openai@npm%3A5.1.0#~/.yarn/patches/openai-npm-5.1.0-0e7b3ccb07.patch",
     "p-queue": "^8.1.0",
     "playwright": "^1.52.0",
     "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "rc-virtual-list": "^3.18.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -205,11 +218,16 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.88.0",
     "shiki": "^3.4.2",
+    "sonner": "^2.0.3",
     "string-width": "^7.2.0",
     "styled-components": "^6.1.11",
+    "tailwind-merge": "^3.2.0",
+    "tailwindcss": "^4.1.5",
     "tiny-pinyin": "^1.3.2",
     "tokenx": "^0.4.1",
+    "tw-animate-css": "^1.2.9",
     "typescript": "^5.6.2",
+    "usehooks-ts": "^3.1.1",
     "uuid": "^10.0.0",
     "vite": "6.2.6",
     "vitest": "^3.1.4"

src/main/config.ts

@@ -11,13 +11,13 @@ if (isDev) {
 export const DATA_PATH = getDataPath()
 
 export const titleBarOverlayDark = {
-  height: 40,
+  height: 42,
   color: 'rgba(255,255,255,0)',
   symbolColor: '#fff'
 }
 
 export const titleBarOverlayLight = {
-  height: 40,
+  height: 42,
   color: 'rgba(255,255,255,0)',
   symbolColor: '#000'
 }

src/main/services/WindowService.ts

@@ -56,14 +56,14 @@ export class WindowService {
       minHeight: 600,
       show: false,
       autoHideMenuBar: true,
-      transparent: isMac,
+      transparent: false,
       vibrancy: 'sidebar',
       visualEffectState: 'active',
       titleBarStyle: 'hidden',
       titleBarOverlay: nativeTheme.shouldUseDarkColors ? titleBarOverlayDark : titleBarOverlayLight,
       backgroundColor: isMac ? undefined : nativeTheme.shouldUseDarkColors ? '#181818' : '#FFFFFF',
       darkTheme: nativeTheme.shouldUseDarkColors,
-      trafficLightPosition: { x: 8, y: 12 },
+      trafficLightPosition: { x: 12, y: 12 },
       ...(isLinux ? { icon } : {}),
       webPreferences: {
         preload: join(__dirname, '../preload/index.js'),

src/main/services/mcp/oauth/provider.ts

@@ -1,8 +1,12 @@
 import path from 'node:path'
 
 import { getConfigDir } from '@main/utils/file'
-import { OAuthClientProvider } from '@modelcontextprotocol/sdk/client/auth'
-import { OAuthClientInformation, OAuthClientInformationFull, OAuthTokens } from '@modelcontextprotocol/sdk/shared/auth'
+import { OAuthClientProvider } from '@modelcontextprotocol/sdk/client/auth.js'
+import {
+  OAuthClientInformation,
+  OAuthClientInformationFull,
+  OAuthTokens
+} from '@modelcontextprotocol/sdk/shared/auth.js'
 import Logger from 'electron-log'
 import open from 'open'
 

src/main/services/urlschema/mcp-install.ts

@@ -65,7 +65,7 @@ export function handleMcpProtocolUrl(url: URL) {
 
       const mainWindow = windowService.getMainWindow()
       if (mainWindow && !mainWindow.isDestroyed()) {
-        mainWindow.webContents.executeJavaScript("window.navigate('/settings/mcp')")
+        mainWindow.webContents.executeJavaScript("window.navigate('/mcp-servers')")
       }
       break
     }

src/renderer/src/App.tsx

@@ -5,7 +5,7 @@ import { Provider } from 'react-redux'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import { PersistGate } from 'redux-persist/integration/react'
 
-import Sidebar from './components/app/Sidebar'
+import MainSidebar from './components/app/MainSidebar'
 import TopViewContainer from './components/TopView'
 import AntdProvider from './context/AntdProvider'
 import { CodeStyleProvider } from './context/CodeStyleProvider'
@@ -13,11 +13,11 @@ import { NotificationProvider } from './context/NotificationProvider'
 import StyleSheetManager from './context/StyleSheetManager'
 import { ThemeProvider } from './context/ThemeProvider'
 import NavigationHandler from './handler/NavigationHandler'
-import AgentsPage from './pages/agents/AgentsPage'
-import AppsPage from './pages/apps/AppsPage'
+import DiscoverPage from './pages/discover'
 import FilesPage from './pages/files/FilesPage'
 import HomePage from './pages/home/HomePage'
 import KnowledgePage from './pages/knowledge/KnowledgePage'
+import McpServersPage from './pages/mcp-servers'
 import PaintingsRoutePage from './pages/paintings/PaintingsRoutePage'
 import SettingsPage from './pages/settings/SettingsPage'
 import TranslatePage from './pages/translate/TranslatePage'
@@ -34,16 +34,18 @@ function App(): React.ReactElement {
                   <TopViewContainer>
                     <HashRouter>
                       <NavigationHandler />
-                      <Sidebar />
+                      <MainSidebar />
                       <Routes>
                         <Route path="/" element={<HomePage />} />
-                        <Route path="/agents" element={<AgentsPage />} />
+                        {/* <Route path="/agents" element={<AgentsPage />} /> */}
                         <Route path="/paintings/*" element={<PaintingsRoutePage />} />
                         <Route path="/translate" element={<TranslatePage />} />
                         <Route path="/files" element={<FilesPage />} />
                         <Route path="/knowledge" element={<KnowledgePage />} />
-                        <Route path="/apps" element={<AppsPage />} />
+                        {/* <Route path="/apps" element={<AppsPage />} /> */}
+                        <Route path="/mcp-servers/*" element={<McpServersPage />} />
                         <Route path="/settings/*" element={<SettingsPage />} />
+                        <Route path="/discover/*" element={<DiscoverPage />} />
                       </Routes>
                     </HashRouter>
                   </TopViewContainer>

src/renderer/src/assets/styles/ant.scss

@@ -25,7 +25,6 @@
 }
 
 .minapp-drawer {
-  max-width: calc(100vw - var(--sidebar-width));
   .ant-drawer-content-wrapper {
     box-shadow: none;
   }
@@ -33,7 +32,7 @@
     position: absolute;
     -webkit-app-region: drag;
     min-height: calc(var(--navbar-height) + 0.5px);
-    width: calc(100vw - var(--sidebar-width));
+    width: 100%;
     margin-top: -0.5px;
     border-bottom: none;
   }

src/renderer/src/assets/styles/color.scss

@@ -29,7 +29,7 @@
   --color-text-secondary: rgba(235, 235, 245, 0.7);
   --color-icon: #ffffff99;
   --color-icon-white: #ffffff;
-  --color-border: #ffffff19;
+  --color-border: #383838;
   --color-border-soft: #ffffff10;
   --color-border-mute: #ffffff05;
   --color-error: #f44336;
@@ -44,8 +44,8 @@
   --color-reference-text: #ffffff;
   --color-reference-background: #0b0e12;
 
-  --color-list-item: #222;
-  --color-list-item-hover: #1e1e1e;
+  --color-list-item: rgba(255, 255, 255, 0.1);
+  --color-list-item-hover: rgba(255, 255, 255, 0.05);
 
   --modal-background: #1f1f1f;
 
@@ -56,7 +56,7 @@
   --navbar-background-mac: rgba(20, 20, 20, 0.55);
   --navbar-background: #1f1f1f;
 
-  --navbar-height: 40px;
+  --navbar-height: 42px;
   --sidebar-width: 50px;
   --status-bar-height: 40px;
   --input-bar-height: 100px;
@@ -66,12 +66,13 @@
   --settings-width: 250px;
   --scrollbar-width: 5px;
 
-  --chat-background: #111111;
-  --chat-background-user: #28b561;
-  --chat-background-assistant: #2c2c2c;
+  --chat-background: transparent;
+  --chat-background-user: #232325;
+  --chat-background-assistant: transparent;
   --chat-text-user: var(--color-black);
 
-  --list-item-border-radius: 20px;
+  --list-item-border-radius: 8px;
+  --border-width: 0.5px;
 }
 
 [theme-mode='light'] {
@@ -120,8 +121,8 @@
   --color-reference-text: #000000;
   --color-reference-background: #f1f7ff;
 
-  --color-list-item: #eee;
-  --color-list-item-hover: #f5f5f5;
+  --color-list-item: rgba(255, 255, 255, 0.9);
+  --color-list-item-hover: rgba(255, 255, 255, 0.5);
 
   --modal-background: var(--color-white);
 
@@ -132,8 +133,10 @@
   --navbar-background-mac: rgba(255, 255, 255, 0.55);
   --navbar-background: rgba(244, 244, 244);
 
-  --chat-background: #f3f3f3;
-  --chat-background-user: #95ec69;
-  --chat-background-assistant: #ffffff;
+  --chat-background: transparent;
+  --chat-background-user: #f3f3f3;
+  --chat-background-assistant: transparent;
   --chat-text-user: var(--color-text);
+
+  --border-width: 0.5px;
 }

src/renderer/src/assets/styles/container.scss

@@ -1,8 +1,6 @@
 #content-container {
   background-color: var(--color-background);
   border-top: 0.5px solid var(--color-border);
-  border-top-left-radius: 10px;
-  border-left: 0.5px solid var(--color-border);
 }
 
 .group-container {

src/renderer/src/assets/styles/index.scss

@@ -12,7 +12,7 @@
 *::before,
 *::after {
   box-sizing: border-box;
-  margin: 0;
+  // margin: 0;
   font-weight: normal;
 }
 
@@ -119,32 +119,21 @@ ul {
   #messages {
     background-color: var(--chat-background);
   }
-  #inputbar {
-    margin: -5px 15px 15px 15px;
-    background: var(--color-background);
-  }
   .system-prompt {
     background-color: var(--chat-background-assistant);
   }
   .message-content-container {
     margin: 5px 0;
     border-radius: 8px;
-    padding: 10px 15px 0 15px;
   }
   .message-thought-container {
     margin-top: 8px;
   }
   .message-user {
-    color: var(--chat-text-user);
-    .markdown,
-    .anticon,
-    .iconfont,
-    .lucide,
-    .message-tokens {
-      color: var(--chat-text-user) !important;
-    }
-    .message-action-button:hover {
-      background-color: var(--color-white-soft);
+    .message-content-container {
+      margin: 5px 0;
+      border-radius: 8px 0 8px 8px;
+      padding: 10px 15px 0 15px;
     }
   }
   .group-grid-container.horizontal,

src/renderer/src/assets/styles/tailwind.css

@@ -0,0 +1,146 @@
+@import 'tailwindcss' source('../../../src');
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+/* 如需自定义:
+1. 清晰地组织自定义 CSS 到相应的层中。
+2. 基础样式（如全局重置、链接样式）放入 base 层；
+3. 可复用的组件样式（如果仍使用 @apply 或原生 CSS 嵌套创建）放入 components 层；
+4. 新的自定义工具类放入 utilities 层。 
+*/
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --animate-marquee: marquee var(--duration) infinite linear;
+  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+  @keyframes marquee {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
+  }
+  @keyframes marquee-vertical {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(-100% - var(--gap)));
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/renderer/src/components/MinApp/MinappPopupContainer.tsx

@@ -395,10 +395,7 @@ const MinappPopupContainer: React.FC = () => {
       height={'100%'}
       maskClosable={false}
       closeIcon={null}
-      style={{
-        marginLeft: 'var(--sidebar-width)',
-        backgroundColor: window.root.style.background
-      }}>
+      style={{ backgroundColor: window.root.style.background }}>
       {!isReady && (
         <EmptyView>
           <Avatar
@@ -418,7 +415,7 @@ const TitleContainer = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding-left: ${isMac ? '20px' : '10px'};
+  padding-left: ${isMac ? '80px' : '10px'};
   padding-right: 10px;
   position: absolute;
   top: 0;

src/renderer/src/components/MinApp/WebviewContainer.tsx

@@ -78,7 +78,7 @@ const WebviewContainer = memo(
 )
 
 const WebviewStyle: React.CSSProperties = {
-  width: 'calc(100vw - var(--sidebar-width))',
+  width: '100vw',
   height: 'calc(100vh - var(--navbar-height))',
   backgroundColor: 'var(--color-background)',
   display: 'inline-flex'

src/renderer/src/components/app/MainNavbar.tsx

@@ -0,0 +1,90 @@
+import { isMac } from '@renderer/config/constant'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import { Tooltip } from 'antd'
+import { t } from 'i18next'
+import { MessageSquareDiff, Search } from 'lucide-react'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+import SearchPopup from '../Popups/SearchPopup'
+
+interface Props {}
+
+const HeaderNavbar: FC<Props> = () => {
+  return (
+    <Container>
+      <div>
+        {!isMac && (
+          <Tooltip title={t('chat.assistant.search.placeholder')} mouseEnterDelay={0.8}>
+            <NarrowIcon onClick={() => SearchPopup.show()}>
+              <Search size={18} />
+            </NarrowIcon>
+          </Tooltip>
+        )}
+      </div>
+      <Tooltip title={t('settings.shortcuts.new_topic')} mouseEnterDelay={0.8}>
+        <NavbarIcon onClick={() => EventEmitter.emit(EVENT_NAMES.ADD_NEW_TOPIC)} style={{ marginRight: 5 }}>
+          <MessageSquareDiff size={18} />
+        </NavbarIcon>
+      </Tooltip>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  width: var(--assistant-width);
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0;
+  padding-left: var(--sidebar-width);
+  height: var(--navbar-height);
+  min-height: var(--navbar-height);
+  background-color: transparent;
+  -webkit-app-region: drag;
+  padding-left: ${isMac ? '75px' : '0'};
+`
+
+export const NavbarIcon = styled.div`
+  -webkit-app-region: none;
+  border-radius: 8px;
+  height: 30px;
+  padding: 0 7px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  -webkit-app-region: no-drag;
+  cursor: pointer;
+  .iconfont {
+    font-size: 18px;
+    color: var(--color-icon);
+    &.icon-a-addchat {
+      font-size: 20px;
+    }
+    &.icon-a-darkmode {
+      font-size: 20px;
+    }
+    &.icon-appstore {
+      font-size: 20px;
+    }
+  }
+  .anticon {
+    color: var(--color-icon);
+    font-size: 16px;
+  }
+  &:hover {
+    background-color: var(--color-background-mute);
+    color: var(--color-icon-white);
+  }
+`
+
+const NarrowIcon = styled(NavbarIcon)`
+  @media (max-width: 1000px) {
+    display: none;
+  }
+`
+
+export default HeaderNavbar

src/renderer/src/components/app/MainSidebar.tsx

@@ -0,0 +1,379 @@
+import EmojiAvatar from '@renderer/components/Avatar/EmojiAvatar'
+import { UserAvatar } from '@renderer/config/env'
+import { useTheme } from '@renderer/context/ThemeProvider'
+import { useAssistants } from '@renderer/hooks/useAssistant'
+import useAvatar from '@renderer/hooks/useAvatar'
+import { useChat } from '@renderer/hooks/useChat'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import NavigationService from '@renderer/services/NavigationService'
+import { ThemeMode } from '@renderer/types'
+import { isEmoji } from '@renderer/utils'
+import { Avatar, Tooltip } from 'antd'
+import {
+  Blocks,
+  Bot,
+  ChevronDown,
+  ChevronRight,
+  Compass,
+  FileSearch,
+  Folder,
+  Languages,
+  MessageSquare,
+  Moon,
+  Palette,
+  SquareTerminal,
+  Sun,
+  SunMoon
+} from 'lucide-react'
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation, useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
+
+import Tabs from '../../pages/home/Tabs'
+import MainNavbar from './MainNavbar'
+
+type Tab = 'assistants' | 'topic' | 'settings'
+
+const MainSidebar: FC = () => {
+  const { assistants } = useAssistants()
+  const navigate = useNavigate()
+  const [tab, setTab] = useState<Tab>('assistants')
+  const avatar = useAvatar()
+  const { userName, defaultPaintingProvider } = useSettings()
+  const { t } = useTranslation()
+  const { theme, settedTheme, toggleTheme } = useTheme()
+  const [isAppMenuExpanded, setIsAppMenuExpanded] = useState(false)
+
+  const location = useLocation()
+  const { pathname } = location
+
+  const { activeAssistant, activeTopic, setActiveAssistant, setActiveTopic } = useChat()
+  const { showAssistants, showTopics, topicPosition } = useSettings()
+
+  useEffect(() => {
+    NavigationService.setNavigate(navigate)
+  }, [navigate])
+
+  useEffect(() => {
+    const unsubscribe = EventEmitter.on(EVENT_NAMES.SHOW_TOPIC_SIDEBAR, () => setTab('topic'))
+    return () => unsubscribe()
+  }, [])
+
+  useEffect(() => {
+    const unsubscribe = EventEmitter.on(EVENT_NAMES.SWITCH_ASSISTANT, (assistantId: string) => {
+      const newAssistant = assistants.find((a) => a.id === assistantId)
+      if (newAssistant) {
+        setActiveAssistant(newAssistant)
+      }
+    })
+
+    return () => {
+      unsubscribe()
+    }
+  }, [assistants, setActiveAssistant])
+
+  useEffect(() => {
+    const canMinimize = !showAssistants && !showTopics
+    window.api.window.setMinimumSize(canMinimize ? 520 : 1080, 600)
+
+    return () => {
+      window.api.window.resetMinimumSize()
+    }
+  }, [showAssistants, showTopics, topicPosition])
+
+  useEffect(() => {
+    setIsAppMenuExpanded(false)
+  }, [activeAssistant.id, activeTopic.id])
+
+  const onAvatarClick = () => {
+    navigate('/settings/provider')
+  }
+
+  const onChageTheme = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    toggleTheme()
+  }
+
+  const appMenuItems = [
+    // { icon: <Sparkle size={18} className="icon" />, text: t('agents.title'), path: '/agents' },
+    { icon: <Compass size={18} className="icon" />, text: t('discover.title'), path: '/discover' },
+    { icon: <Languages size={18} className="icon" />, text: t('translate.title'), path: '/translate' },
+    {
+      icon: <Palette size={18} className="icon" />,
+      text: t('paintings.title'),
+      path: `/paintings/${defaultPaintingProvider}`
+    },
+    // { icon: <LayoutGrid size={18} className="icon" />, text: t('minapp.title'), path: '/apps' },
+    { icon: <FileSearch size={18} className="icon" />, text: t('knowledge.title'), path: '/knowledge' },
+    { icon: <SquareTerminal size={18} className="icon" />, text: t('common.mcp'), path: '/mcp-servers' },
+    { icon: <Folder size={18} className="icon" />, text: t('files.title'), path: '/files' }
+  ]
+
+  const isRoutes = (path: string): boolean => pathname.startsWith(path)
+
+  const onChageTab = (tab: Tab) => {
+    setTab(tab)
+    setIsAppMenuExpanded(false)
+  }
+
+  if (!showAssistants) {
+    return null
+  }
+
+  if (location.pathname !== '/') {
+    return null
+  }
+
+  return (
+    <Container id="main-sidebar">
+      <MainNavbar />
+      <MainMenu>
+        <MainMenuItem
+          active={tab === 'assistants' && location.pathname === '/'}
+          onClick={() => onChageTab('assistants')}>
+          <MainMenuItemLeft>
+            <MainMenuItemIcon>
+              <Bot size={18} />
+            </MainMenuItemIcon>
+            <MainMenuItemText>{t('assistants.title')}</MainMenuItemText>
+          </MainMenuItemLeft>
+          {tab === 'topic' && (
+            <MainMenuItemRight>
+              <MainMenuItemRightText>{activeAssistant.name}</MainMenuItemRightText>
+            </MainMenuItemRight>
+          )}
+        </MainMenuItem>
+        <MainMenuItem active={tab === 'topic' && location.pathname === '/'} onClick={() => onChageTab('topic')}>
+          <MainMenuItemLeft>
+            <MainMenuItemIcon>
+              <MessageSquare size={18} />
+            </MainMenuItemIcon>
+            <MainMenuItemText>{t('common.topics')}</MainMenuItemText>
+          </MainMenuItemLeft>
+        </MainMenuItem>
+        <MainMenuItem
+          style={{ opacity: isAppMenuExpanded ? 0.5 : 1 }}
+          onClick={() => setIsAppMenuExpanded(!isAppMenuExpanded)}>
+          <MainMenuItemLeft>
+            <MainMenuItemIcon>
+              <Blocks size={19} className="icon" />
+            </MainMenuItemIcon>
+            <MainMenuItemText>{t('common.apps')}</MainMenuItemText>
+          </MainMenuItemLeft>
+          <MainMenuItemRight>
+            {isAppMenuExpanded ? (
+              <ChevronDown size={18} color="var(--color-text-3)" />
+            ) : (
+              <ChevronRight size={18} color="var(--color-text-3)" />
+            )}
+          </MainMenuItemRight>
+        </MainMenuItem>
+        {isAppMenuExpanded && (
+          <SubMenu>
+            {appMenuItems.map((item) => (
+              <MainMenuItem key={item.path} active={isRoutes(item.path)} onClick={() => navigate(item.path)}>
+                <MainMenuItemLeft>
+                  <MainMenuItemIcon>{item.icon}</MainMenuItemIcon>
+                  <MainMenuItemText>{item.text}</MainMenuItemText>
+                </MainMenuItemLeft>
+              </MainMenuItem>
+            ))}
+          </SubMenu>
+        )}
+      </MainMenu>
+      <Tabs
+        tab={tab}
+        activeAssistant={activeAssistant}
+        activeTopic={activeTopic}
+        setActiveAssistant={setActiveAssistant}
+        setActiveTopic={setActiveTopic}
+      />
+      <UserMenu onClick={onAvatarClick}>
+        <UserMenuLeft>
+          {isEmoji(avatar) ? (
+            <EmojiAvatar className="sidebar-avatar" size={31} fontSize={18}>
+              {avatar}
+            </EmojiAvatar>
+          ) : (
+            <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" />
+          )}
+          <UserMenuText>{userName}</UserMenuText>
+        </UserMenuLeft>
+        <Tooltip
+          title={t('settings.theme.title') + ': ' + t(`settings.theme.${settedTheme}`)}
+          mouseEnterDelay={0.8}
+          placement="right">
+          <Icon theme={theme} onClick={onChageTheme}>
+            {settedTheme === ThemeMode.dark ? (
+              <Moon size={18} className="icon" />
+            ) : settedTheme === ThemeMode.light ? (
+              <Sun size={18} className="icon" />
+            ) : (
+              <SunMoon size={18} className="icon" />
+            )}
+          </Icon>
+        </Tooltip>
+      </UserMenu>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: var(--assistant-width);
+  max-width: var(--assistant-width);
+  border-right: 0.5px solid var(--color-border);
+`
+
+const MainMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  padding-top: 0;
+  gap: 8px;
+`
+
+const MainMenuItem = styled.div<{ active?: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 5px;
+  background-color: ${({ active }) => (active ? 'var(--color-list-item)' : 'transparent')};
+  padding: 5px 10px;
+  border-radius: 5px;
+  border-radius: 8px;
+  &:hover {
+    background-color: ${({ active }) => (active ? 'var(--color-list-item)' : 'var(--color-list-item-hover)')};
+  }
+`
+
+const MainMenuItemLeft = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`
+
+const MainMenuItemRight = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`
+
+const MainMenuItemRightText = styled.div`
+  font-size: 12px;
+  color: var(--color-text-3);
+`
+
+const MainMenuItemIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+`
+
+const MainMenuItemText = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+`
+
+const UserMenu = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px;
+  margin-bottom: 10px;
+  padding: 4px 8px;
+  gap: 5px;
+
+  border-radius: 8px;
+  &:hover {
+    background-color: var(--color-list-item);
+  }
+`
+
+const UserMenuLeft = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`
+
+const AvatarImg = styled(Avatar)`
+  width: 28px;
+  height: 28px;
+  background-color: var(--color-background-soft);
+  border: none;
+  cursor: pointer;
+`
+
+const UserMenuText = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+`
+
+const Icon = styled.div<{ theme: string }>`
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  box-sizing: border-box;
+  -webkit-app-region: none;
+  border: 0.5px solid transparent;
+  &:hover {
+    background-color: ${({ theme }) => (theme === 'dark' ? 'var(--color-black)' : 'var(--color-white)')};
+    opacity: 0.8;
+    cursor: pointer;
+    .icon {
+      color: var(--color-icon-white);
+    }
+  }
+  &.active {
+    background-color: ${({ theme }) => (theme === 'dark' ? 'var(--color-black)' : 'var(--color-white)')};
+    border: 0.5px solid var(--color-border);
+    .icon {
+      color: var(--color-primary);
+    }
+  }
+
+  @keyframes borderBreath {
+    0% {
+      opacity: 0.1;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.1;
+    }
+  }
+
+  &.opened-minapp {
+    position: relative;
+  }
+  &.opened-minapp::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border-radius: inherit;
+    opacity: 0.3;
+    border: 0.5px solid var(--color-primary);
+  }
+`
+
+const SubMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`
+
+export default MainSidebar

src/renderer/src/components/app/Navbar.tsx

@@ -1,24 +1,16 @@
 import { isLinux, isMac, isWindows } from '@renderer/config/constant'
 import { useFullscreen } from '@renderer/hooks/useFullscreen'
-import useNavBackgroundColor from '@renderer/hooks/useNavBackgroundColor'
+import { Button } from 'antd'
+import { ChevronDown, X } from 'lucide-react'
 import type { FC, PropsWithChildren } from 'react'
 import type { HTMLAttributes } from 'react'
+import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
 type Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>
 
 export const Navbar: FC<Props> = ({ children, ...props }) => {
-  const backgroundColor = useNavBackgroundColor()
-
-  return (
-    <NavbarContainer {...props} style={{ backgroundColor }}>
-      {children}
-    </NavbarContainer>
-  )
-}
-
-export const NavbarLeft: FC<Props> = ({ children, ...props }) => {
-  return <NavbarLeftContainer {...props}>{children}</NavbarLeftContainer>
+  return <NavbarContainer {...props}>{children}</NavbarContainer>
 }
 
 export const NavbarCenter: FC<Props> = ({ children, ...props }) => {
@@ -36,41 +28,54 @@ export const NavbarRight: FC<Props> = ({ children, ...props }) => {
 
 export const NavbarMain: FC<Props> = ({ children, ...props }) => {
   const isFullscreen = useFullscreen()
+
   return (
     <NavbarMainContainer {...props} $isFullscreen={isFullscreen}>
+      <CloseIconWindows />
       {children}
+      <CloseIconMac />
     </NavbarMainContainer>
   )
 }
 
+const CloseIconMac = () => {
+  const navigate = useNavigate()
+
+  if (!isMac) {
+    return null
+  }
+
+  return <Button type="text" icon={<X size={18} />} onClick={() => navigate('/')} className="nodrag" />
+}
+
+const CloseIconWindows = () => {
+  const navigate = useNavigate()
+
+  if (isMac) {
+    return null
+  }
+
+  return (
+    <Button
+      size="small"
+      type="default"
+      shape="circle"
+      icon={<ChevronDown size={16} />}
+      onClick={() => navigate('/')}
+      className="nodrag"
+      style={{ marginRight: 5 }}
+    />
+  )
+}
+
 const NavbarContainer = styled.div`
   min-width: 100%;
   display: flex;
   flex-direction: row;
   min-height: var(--navbar-height);
   max-height: var(--navbar-height);
-  margin-left: ${isMac ? 'calc(var(--sidebar-width) * -1)' : 0};
-  padding-left: ${isMac ? 'var(--sidebar-width)' : 0};
   -webkit-app-region: drag;
-`
-
-const NavbarLeftContainer = styled.div`
-  min-width: var(--assistants-width);
-  padding: 0 10px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-weight: bold;
-  color: var(--color-text-1);
-`
-
-const NavbarCenterContainer = styled.div`
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: 0 ${isMac ? '20px' : 0};
-  font-weight: bold;
-  color: var(--color-text-1);
+  background-color: var(--color-background);
 `
 
 const NavbarRightContainer = styled.div<{ $isFullscreen: boolean }>`
@@ -87,9 +92,26 @@ const NavbarMainContainer = styled.div<{ $isFullscreen: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
+  height: var(--navbar-height);
+  max-height: var(--navbar-height);
+  min-height: var(--navbar-height);
   justify-content: space-between;
-  padding: 0 ${isMac ? '20px' : 0};
+  padding-left: ${isMac ? '70px' : '10px'};
   font-weight: bold;
   color: var(--color-text-1);
   padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWindows ? '140px' : isLinux ? '120px' : '12px')};
+  -webkit-app-region: drag;
+`
+
+const NavbarCenterContainer = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: var(--navbar-height);
+  max-height: var(--navbar-height);
+  min-height: var(--navbar-height);
+  padding: 0 8px;
+  font-weight: bold;
+  justify-content: space-between;
+  color: var(--color-text-1);
 `

src/renderer/src/components/app/Sidebar.tsx

@@ -16,6 +16,7 @@ import type { MenuProps } from 'antd'
 import { Avatar, Dropdown, Tooltip } from 'antd'
 import {
   CircleHelp,
+  Compass,
   FileSearch,
   Folder,
   Languages,
@@ -155,7 +156,8 @@ const MainMenus: FC = () => {
     translate: <Languages size={18} className="icon" />,
     minapp: <LayoutGrid size={18} className="icon" />,
     knowledge: <FileSearch size={18} className="icon" />,
-    files: <Folder size={17} className="icon" />
+    files: <Folder size={17} className="icon" />,
+    discover: <Compass size={18} className="icon" />
   }
 
   const pathMap = {
@@ -165,7 +167,8 @@ const MainMenus: FC = () => {
     translate: '/translate',
     minapp: '/apps',
     knowledge: '/knowledge',
-    files: '/files'
+    files: '/files',
+    discover: '/discover'
   }
 
   return sidebarIcons.visible.map((icon) => {

src/renderer/src/config/prompts.ts

@@ -47,7 +47,7 @@ As [role name], with [list skills], strictly adhering to [list constraints], usi
 `
 
 export const SUMMARIZE_PROMPT =
-  "You are an assistant skilled in conversation. You need to summarize the user's conversation into a title within 10 words. The language of the title should be consistent with the user's primary language. Do not use punctuation marks or other special symbols"
+  "You are an assistant skilled in conversation. You need to summarize the user's conversation into a title within 10 words. The language of the title should be consistent with the user's primary language. Do not use punctuation marks, markdown language markers, or other special symbols"
 
 // https://github.com/ItzCrazyKns/Perplexica/blob/master/src/lib/prompts/webSearch.ts
 export const SEARCH_SUMMARY_PROMPT = `

src/renderer/src/context/ThemeProvider.tsx

@@ -38,8 +38,22 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
     setSettedTheme(nextTheme || ThemeMode.system)
   }
 
+  const tailwindThemeChange = (theme) => {
+    const root = window.document.documentElement
+    root.classList.remove('light', 'dark')
+    root.classList.add(theme)
+  }
+
+  useEffect(() => {
+    window.api?.setTheme(settedTheme || actualTheme)
+  }, [settedTheme, actualTheme])
+
+  useEffect(() => {
+    document.body.setAttribute('theme-mode', settedTheme)
+    tailwindThemeChange(settedTheme)
+  }, [settedTheme])
+
   useEffect(() => {
-    // Set initial theme and OS attributes on body
     document.body.setAttribute('os', isMac ? 'mac' : 'windows')
     document.body.setAttribute('theme-mode', actualTheme)
 

src/renderer/src/entryPoint.tsx

@@ -1,5 +1,6 @@
 import './assets/styles/index.scss'
 import '@ant-design/v5-patch-for-react-19'
+import './assets/styles/tailwind.css'
 
 import { createRoot } from 'react-dom/client'
 

src/renderer/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

src/renderer/src/hooks/useChat.tsx

@@ -0,0 +1,47 @@
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import { useAppDispatch, useAppSelector } from '@renderer/store'
+import { setActiveAssistant, setActiveTopic } from '@renderer/store/runtime'
+import { loadTopicMessagesThunk } from '@renderer/store/thunk/messageThunk'
+import { Assistant } from '@renderer/types'
+import { Topic } from '@renderer/types'
+import { useEffect } from 'react'
+
+import { useAssistants } from './useAssistant'
+import { useSettings } from './useSettings'
+
+export const useChat = () => {
+  const { assistants } = useAssistants()
+  const activeAssistant = useAppSelector((state) => state.runtime.chat.activeAssistant) || assistants[0]
+  const activeTopic = useAppSelector((state) => state.runtime.chat.activeTopic) || activeAssistant?.topics[0]!
+  const { clickAssistantToShowTopic } = useSettings()
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    if (activeTopic) {
+      dispatch(loadTopicMessagesThunk(activeTopic.id))
+      EventEmitter.emit(EVENT_NAMES.CHANGE_TOPIC, activeTopic)
+    }
+  }, [activeTopic, dispatch])
+
+  useEffect(() => {
+    const firstTopic = activeAssistant.topics[0]
+    firstTopic && dispatch(setActiveTopic(firstTopic))
+  }, [activeAssistant, dispatch])
+
+  useEffect(() => {
+    if (clickAssistantToShowTopic) {
+      EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)
+    }
+  }, [clickAssistantToShowTopic, activeAssistant])
+
+  return {
+    activeAssistant,
+    activeTopic,
+    setActiveAssistant: (assistant: Assistant) => {
+      dispatch(setActiveAssistant(assistant))
+    },
+    setActiveTopic: (topic: Topic) => {
+      dispatch(setActiveTopic(topic))
+    }
+  }
+}

src/renderer/src/hooks/useTopic.ts

@@ -1,47 +1,16 @@
 import db from '@renderer/databases'
 import i18n from '@renderer/i18n'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { deleteMessageFiles } from '@renderer/services/MessagesService'
 import store from '@renderer/store'
 import { updateTopic } from '@renderer/store/assistants'
-import { loadTopicMessagesThunk } from '@renderer/store/thunk/messageThunk'
 import { Assistant, Topic } from '@renderer/types'
 import { findMainTextBlocks } from '@renderer/utils/messageUtils/find'
-import { find, isEmpty } from 'lodash'
-import { useEffect, useState } from 'react'
+import { isEmpty } from 'lodash'
 
-import { useAssistant } from './useAssistant'
 import { getStoreSetting } from './useSettings'
 
 const renamingTopics = new Set<string>()
 
-let _activeTopic: Topic
-let _setActiveTopic: (topic: Topic) => void
-
-export function useActiveTopic(_assistant: Assistant, topic?: Topic) {
-  const { assistant } = useAssistant(_assistant.id)
-  const [activeTopic, setActiveTopic] = useState(topic || _activeTopic || assistant?.topics[0])
-
-  _activeTopic = activeTopic
-  _setActiveTopic = setActiveTopic
-
-  useEffect(() => {
-    if (activeTopic) {
-      store.dispatch(loadTopicMessagesThunk(activeTopic.id))
-      EventEmitter.emit(EVENT_NAMES.CHANGE_TOPIC, activeTopic)
-    }
-  }, [activeTopic])
-
-  useEffect(() => {
-    // activeTopic not in assistant.topics
-    if (assistant && !find(assistant.topics, { id: activeTopic?.id })) {
-      setActiveTopic(assistant.topics[0])
-    }
-  }, [activeTopic?.id, assistant])
-
-  return { activeTopic, setActiveTopic }
-}
-
 export function useTopic(assistant: Assistant, topicId?: string) {
   return assistant?.topics.find((topic) => topic.id === topicId)
 }
@@ -86,7 +55,6 @@ export const autoRenameTopic = async (assistant: Assistant, topicId: string) =>
         .substring(0, 50)
       if (topicName) {
         const data = { ...topic, name: topicName } as Topic
-        _setActiveTopic(data)
         store.dispatch(updateTopic({ assistantId: assistant.id, topic: data }))
       }
       return
@@ -97,7 +65,6 @@ export const autoRenameTopic = async (assistant: Assistant, topicId: string) =>
       const summaryText = await fetchMessagesSummary({ messages: topic.messages, assistant })
       if (summaryText) {
         const data = { ...topic, name: summaryText }
-        _setActiveTopic(data)
         store.dispatch(updateTopic({ assistantId: assistant.id, topic: data }))
       } else {
         window.message?.error(i18n.t('message.error.fetchTopicName'))

src/renderer/src/i18n/locales/en-us.json

@@ -421,7 +421,9 @@
         "pinyin.asc": "Sort by Pinyin (A-Z)",
         "pinyin.desc": "Sort by Pinyin (Z-A)"
       },
-      "no_results": "No results"
+      "no_results": "No results",
+      "apps": "Apps",
+      "mcp": "Tools"
     },
     "docs": {
       "title": "Docs"

src/renderer/src/i18n/locales/ja-jp.json

@@ -421,7 +421,9 @@
         "pinyin.asc": "ピンインで昇順ソート",
         "pinyin.desc": "ピンインで降順ソート"
       },
-      "no_results": "検索結果なし"
+      "no_results": "検索結果なし",
+      "apps": "アプリ",
+      "mcp": "ツール"
     },
     "docs": {
       "title": "ドキュメント"

src/renderer/src/i18n/locales/ru-ru.json

@@ -421,7 +421,9 @@
         "pinyin.asc": "Сортировать по пиньинь (А-Я)",
         "pinyin.desc": "Сортировать по пиньинь (Я-А)"
       },
-      "no_results": "Результатов не найдено"
+      "no_results": "Результатов не найдено",
+      "apps": "Приложения",
+      "mcp": "Инструменты"
     },
     "docs": {
       "title": "Документация"

src/renderer/src/i18n/locales/zh-cn.json

@@ -421,7 +421,9 @@
         "pinyin.asc": "按拼音升序",
         "pinyin.desc": "按拼音降序"
       },
-      "no_results": "无结果"
+      "no_results": "无结果",
+      "apps": "应用",
+      "mcp": "工具"
     },
     "docs": {
       "title": "帮助文档"
@@ -1812,6 +1814,13 @@
         "service_tier.flex": "灵活"
       }
     },
+    "discover": {
+      "title": "发现",
+      "install": "安装",
+      "uninstall": "卸载",
+      "update": "更新",
+      "update_all": "全部更新"
+    },
     "translate": {
       "any.language": "任意语言",
       "target_language": "目标语言",

src/renderer/src/i18n/locales/zh-tw.json

@@ -421,7 +421,9 @@
         "pinyin.asc": "按拼音升序",
         "pinyin.desc": "按拼音降序"
       },
-      "no_results": "沒有結果"
+      "no_results": "沒有結果",
+      "apps": "應用",
+      "mcp": "工具"
     },
     "docs": {
       "title": "說明文件"

src/renderer/src/pages/agents/AgentsPage.tsx

@@ -1,5 +1,4 @@
 import { ImportOutlined, PlusOutlined } from '@ant-design/icons'
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import CustomTag from '@renderer/components/CustomTag'
 import ListItem from '@renderer/components/ListItem'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -152,27 +151,23 @@ const AgentsPage: FC = () => {
 
   return (
     <Container>
-      <Navbar>
-        <NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}>
-          {t('agents.title')}
-          <Input
-            placeholder={t('common.search')}
-            className="nodrag"
-            style={{ width: '30%', height: 28, borderRadius: 15, paddingLeft: 12 }}
-            size="small"
-            variant="filled"
-            allowClear
-            onClear={handleSearchClear}
-            suffix={<Search size={14} color="var(--color-icon)" onClick={handleSearch} />}
-            value={searchInput}
-            maxLength={50}
-            onChange={(e) => setSearchInput(e.target.value)}
-            onPressEnter={handleSearch}
-          />
-          <div style={{ width: 80 }} />
-        </NavbarCenter>
-      </Navbar>
-
+      <div className="p-4">
+        <Input
+          placeholder={t('common.search')}
+          className="nodrag"
+          style={{ width: '30%', height: 28, borderRadius: 15, paddingLeft: 12 }}
+          size="small"
+          variant="filled"
+          allowClear
+          onClear={handleSearchClear}
+          suffix={<Search size={14} color="var(--color-icon)" onClick={handleSearch} />}
+          value={searchInput}
+          maxLength={50}
+          onChange={(e) => setSearchInput(e.target.value)}
+          onPressEnter={handleSearch}
+        />
+        <div style={{ width: 80 }} />
+      </div>
       <Main id="content-container">
         <AgentsGroupList>
           {Object.entries(agentGroups).map(([group]) => (

src/renderer/src/pages/apps/AppsPage.tsx

@@ -1,4 +1,3 @@
-import { Navbar, NavbarMain } from '@renderer/components/app/Navbar'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import { Button, Input } from 'antd'
 import { Search, SettingsIcon, X } from 'lucide-react'
@@ -41,35 +40,37 @@ const AppsPage: FC = () => {
 
   return (
     <Container onContextMenu={handleContextMenu}>
-      <Navbar>
-        <NavbarMain>
-          {t('minapp.title')}
-          <Input
-            placeholder={t('common.search')}
-            className="nodrag"
-            style={{
-              width: '30%',
-              height: 28,
-              borderRadius: 15,
-              position: 'absolute',
-              left: '50vw',
-              transform: 'translateX(-50%)'
-            }}
-            size="small"
-            variant="filled"
-            suffix={<Search size={18} />}
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            disabled={isSettingsOpen}
-          />
-          <Button
-            type="text"
-            className="nodrag"
-            icon={isSettingsOpen ? <X size={18} /> : <SettingsIcon size={18} color="var(--color-text-2)" />}
-            onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-          />
-        </NavbarMain>
-      </Navbar>
+      {/* <Navbar> */}
+      {/* <NavbarMain> */}
+      {/* {t('minapp.title')} */}
+      <div className="p-2">
+        <Input
+          placeholder={t('common.search')}
+          className="nodrag"
+          style={{
+            width: '30%',
+            height: 28,
+            borderRadius: 15,
+            position: 'absolute',
+            left: '50vw',
+            transform: 'translateX(-50%)'
+          }}
+          size="small"
+          variant="filled"
+          suffix={<Search size={18} />}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          disabled={isSettingsOpen}
+        />
+        <Button
+          type="text"
+          className="nodrag"
+          icon={isSettingsOpen ? <X size={18} /> : <SettingsIcon size={18} color="var(--color-text-2)" />}
+          onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+        />
+      </div>
+      {/* </NavbarMain> */}
+      {/* </Navbar> */}
       <ContentContainer id="content-container">
         {isSettingsOpen && <MiniAppSettings />}
         {!isSettingsOpen && (

src/renderer/src/pages/discover/components/DiscoverContent.tsx

@@ -0,0 +1,46 @@
+import { Category } from '@renderer/types/cherryStore'
+import React from 'react'
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
+
+// 实际的 AgentsPage 组件 - 请确保路径正确
+import AgentsPage from '../../agents/AgentsPage'
+import AppsPage from '../../apps/AppsPage'
+// import AssistantDetailsPage from '../../agents/AssistantDetailsPage'; // 示例详情页
+
+// 其他分类的页面组件 (如果需要)
+// const MiniAppPagePlaceholder = ({ categoryId, subcategoryId }: { categoryId?: string; subcategoryId?: string }) => (
+//   <div className="p-4">
+//     MiniApp Placeholder for Category: {categoryId || 'N/A'}, Subcategory: {subcategoryId || 'N/A'}
+//   </div>
+// )
+
+export interface DiscoverContentProps {
+  activeTabId: string // This should be one of the CherryStoreType values, e.g., "Assistant"
+  // selectedSubcategoryId: string
+  currentCategory: Category | undefined
+}
+
+const DiscoverContent: React.FC<DiscoverContentProps> = ({ activeTabId, currentCategory }) => {
+  const location = useLocation() // To see the current path for debugging or more complex logic
+
+  if (!currentCategory || !activeTabId) {
+    return <div className="p-4 text-center">Loading: Category or Tab ID missing...</div>
+  }
+
+  if (!activeTabId && !location.pathname.startsWith('/discover/')) {
+    return <Navigate to="/discover/assistant?subcategory=all" replace /> // Fallback redirect, adjust as needed
+  }
+
+  return (
+    <Routes>
+      {/* Path for Assistant category */}
+      <Route path="assistant" element={<AgentsPage />} />
+      {/* Path for Mini-App category */}
+      <Route path="mini-app" element={<AppsPage />} />
+
+      <Route path="*" element={<div>Discover Feature Not Found at {location.pathname}</div>} />
+    </Routes>
+  )
+}
+
+export default DiscoverContent

src/renderer/src/pages/discover/components/DiscoverSidebar.tsx

@@ -0,0 +1,64 @@
+import { SubCategoryItem } from '@renderer/types/cherryStore'
+import { Badge } from '@renderer/ui/badge'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuSubItem,
+  SidebarProvider
+} from '@renderer/ui/sidebar'
+
+import { InternalCategory } from '../hooks/useDiscoverCategories'
+
+interface DiscoverSidebarProps {
+  activeCategory: InternalCategory | undefined
+  selectedSubcategory: string
+  onSelectSubcategory: (subcategoryId: string, row?: SubCategoryItem) => void
+}
+
+export default function DiscoverSidebar({
+  activeCategory,
+  selectedSubcategory,
+  onSelectSubcategory
+}: DiscoverSidebarProps) {
+  if (!activeCategory) {
+    return (
+      <Sidebar className="absolute top-0 left-0 h-full border-r">
+        <SidebarContent>
+          <p className="p-4 text-sm text-gray-500">No active category selected.</p>
+        </SidebarContent>
+      </Sidebar>
+    )
+  }
+
+  return (
+    <SidebarProvider className="relative h-full min-h-full w-full">
+      <Sidebar className="absolute top-0 left-0 h-full border-r">
+        <SidebarContent>
+          <SidebarMenu>
+            {activeCategory.items &&
+              activeCategory.items.length > 0 &&
+              activeCategory.items.map((subItem) => (
+                <SidebarMenuSubItem key={subItem.id}>
+                  <SidebarMenuButton
+                    isActive={subItem.id === selectedSubcategory}
+                    onClick={() => {
+                      onSelectSubcategory(subItem.id, subItem)
+                    }}
+                    size="sm">
+                    <span className="truncate">{subItem.name}</span>
+                    {typeof subItem.count === 'number' && (
+                      <Badge variant="secondary" className="ml-auto shrink-0">
+                        {subItem.count}
+                      </Badge>
+                    )}
+                  </SidebarMenuButton>
+                </SidebarMenuSubItem>
+              ))}
+          </SidebarMenu>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}

src/renderer/src/pages/discover/hooks/useDiscoverCategories.ts

@@ -0,0 +1,165 @@
+import { Category, CherryStoreType } from '@renderer/types/cherryStore'
+import { useEffect, useMemo, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+// Extended Category type for internal use in hook, including path and sidebar flag
+// Export this interface so other files can import it
+export interface InternalCategory extends Category {
+  path: string
+  hasSidebar?: boolean // Optional: defaults to true if not specified, or handle explicitly
+}
+
+// Initial category data with path and hasSidebar
+const initialCategories: InternalCategory[] = [
+  {
+    id: CherryStoreType.ASSISTANT,
+    title: 'Assistants',
+    path: 'assistant',
+    hasSidebar: false,
+    items: []
+  },
+  {
+    id: CherryStoreType.MINI_APP,
+    title: 'Mini Apps',
+    path: 'mini-app',
+    hasSidebar: false,
+    items: []
+  }
+  // Add more categories as needed
+]
+
+// Helper to find category by path
+const findCategoryByPath = (path: string | undefined): InternalCategory | undefined =>
+  initialCategories.find((cat) => cat.path === path)
+
+// Helper to find category by id (activeTab)
+const findCategoryById = (id: string | undefined): InternalCategory | undefined =>
+  initialCategories.find((cat) => cat.id === id)
+
+export function useDiscoverCategories() {
+  const [categories, setCategories] = useState<InternalCategory[]>(initialCategories)
+  const [activeTab, setActiveTab] = useState<string>('')
+  const [selectedSubcategory, setSelectedSubcategory] = useState<string>('all')
+
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  // Effect to initialize activeTab from URL path segment or navigate to default
+  useEffect(() => {
+    const pathSegments = location.pathname.split('/').filter(Boolean) // e.g., ["discover", "assistant"]
+    // Expects URL like /discover/:categoryPathSegment/...
+    const currentCategoryPath = pathSegments.length >= 2 && pathSegments[0] === 'discover' ? pathSegments[1] : undefined
+
+    const categoryFromPath = findCategoryByPath(currentCategoryPath)
+
+    // Synchronize active tab with the category determined from the URL path.
+    // If a category is found from the path, update the active tab to match its ID.
+    if (categoryFromPath) {
+      if (activeTab !== categoryFromPath.id) {
+        setActiveTab(categoryFromPath.id)
+      }
+    } else if (location.pathname === '/discover' || location.pathname === '/discover/') {
+      // Handle the case where the URL is the base /discover path.
+      // Redirect to the first category's path to ensure a category is always selected.
+      if (categories.length > 0) {
+        const firstCategory = categories[0]
+        if (firstCategory?.path) {
+          navigate(`/discover/${firstCategory.path}?subcategory=all`, { replace: true })
+        }
+      }
+    } else if (!currentCategoryPath && categories.length > 0 && !activeTab) {
+      // Fallback for invalid or unmatched /discover/xxx URLs.
+      // If the URL contains a path segment that doesn't correspond to a known category,
+      // and no tab is active, redirect to the first valid category.
+      const firstCategory = categories[0]
+      if (firstCategory?.path) {
+        navigate(`/discover/${firstCategory.path}?subcategory=all`, { replace: true })
+      }
+    }
+    // If categoryFromPath is undefined, and it's not /discover, it means it's an invalid path like /discover/unknown
+    // In this case, we don't navigate from here; ideally App.tsx has a NotFound route, or DiscoverContent shows a message.
+  }, [location.pathname, categories, activeTab, navigate])
+
+  // Effect to initialize selectedSubcategory from URL query param or default to 'all'
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search)
+    const subcategoryIdFromQuery = searchParams.get('subcategory')
+    const currentCatDetails = findCategoryById(activeTab) // Use the helper here
+
+    if (subcategoryIdFromQuery && currentCatDetails) {
+      // Check if the subcategory from query is valid for the current active category
+      if (currentCatDetails.items.some((item) => item.id === subcategoryIdFromQuery)) {
+        if (selectedSubcategory !== subcategoryIdFromQuery) {
+          setSelectedSubcategory(subcategoryIdFromQuery)
+        }
+        return // Valid subcategory from URL is set, no further action needed in this effect iteration
+      }
+    }
+
+    // If no valid subcategory in query, or if activeTab has changed and subcategory needs reset/defaulting
+    if (activeTab && currentCatDetails) {
+      const defaultSub = currentCatDetails.items.find((item) => item.id === 'all') || currentCatDetails.items[0]
+      if (defaultSub) {
+        // Ensure defaultSub exists
+        // Set selectedSubcategory state first
+        if (selectedSubcategory !== defaultSub.id) {
+          setSelectedSubcategory(defaultSub.id)
+        }
+        // Then, if URL doesn't match this default, update URL to reflect the default subcategory
+        // This ensures the URL is the source of truth / always consistent.
+        if (!subcategoryIdFromQuery || subcategoryIdFromQuery !== defaultSub.id) {
+          const newSearchParams = new URLSearchParams() // Start with clean params for this path
+          newSearchParams.set('subcategory', defaultSub.id)
+          // Ensure we use the current actual path from currentCatDetails if available for navigation
+          // This avoids issues if location.pathname is briefly out of sync during transitions.
+          const basePath = currentCatDetails.path
+            ? `/discover/${currentCatDetails.path}`
+            : location.pathname.split('?')[0]
+          navigate(`${basePath}?${newSearchParams.toString()}`, { replace: true })
+        }
+      }
+    }
+  }, [activeTab, location.search, categories, navigate, selectedSubcategory]) // location.pathname removed as basePath logic handles path part
+
+  const currentCategory = useMemo(() => {
+    return findCategoryById(activeTab) // Use the helper here
+  }, [activeTab]) // categories removed from deps as findCategoryById uses stable initialCategories
+
+  const handleSelectTab = (tabId: string) => {
+    const categoryToSelect = findCategoryById(tabId)
+    if (categoryToSelect && categoryToSelect.path && activeTab !== tabId) {
+      navigate(`/discover/${categoryToSelect.path}?subcategory=all`)
+    }
+  }
+
+  const handleSelectSubcategory = (subcategoryId: string) => {
+    const currentCatDetails = findCategoryById(activeTab)
+    if (selectedSubcategory !== subcategoryId && currentCatDetails?.path) {
+      const newSearchParams = new URLSearchParams()
+      newSearchParams.set('subcategory', subcategoryId)
+      navigate(`/discover/${currentCatDetails.path}?${newSearchParams.toString()}`, { replace: false })
+    }
+  }
+
+  // Ensure each category has an "All" subcategory (runs once on mount)
+  useEffect(() => {
+    setCategories((prev) =>
+      prev.map((cat) => {
+        if (!cat.items.some((item) => item.id === 'all')) {
+          return { ...cat, items: [{ id: 'all', name: `All ${cat.title}` }, ...cat.items] }
+        }
+        return cat
+      })
+    )
+  }, [])
+
+  return {
+    categories,
+    activeTab,
+    selectedSubcategory,
+    currentCategory,
+    handleSelectTab,
+    handleSelectSubcategory,
+    setActiveTab
+  }
+}

src/renderer/src/pages/discover/index.tsx

@@ -0,0 +1,83 @@
+import { NavbarCenter, NavbarMain } from '@renderer/components/app/Navbar'
+// import { useRuntime } from '@renderer/hooks/useRuntime' // No longer needed if resourcesPath is not used
+import { Tabs as VercelTabs } from '@renderer/ui/vercel-tabs'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+
+// Import Context and the main Dialog Manager component
+import DiscoverContent from './components/DiscoverContent' // Removed DiscoverContent import
+import DiscoverSidebar from './components/DiscoverSidebar'
+import { InternalCategory, useDiscoverCategories } from './hooks/useDiscoverCategories'
+
+// Function to adapt categories for VercelTabs
+const adaptCategoriesForVercelTabs = (categories: InternalCategory[]) => {
+  return categories.map((category) => ({
+    id: category.id, // VercelTabs expects `id`
+    label: category.title // VercelTabs expects `label`
+  }))
+}
+
+export default function DiscoverPage() {
+  const { t } = useTranslation()
+  const {
+    categories,
+    activeTab,
+    selectedSubcategory,
+    currentCategory,
+    handleSelectTab,
+    handleSelectSubcategory,
+    setActiveTab
+  } = useDiscoverCategories()
+
+  // Path like /discover/:categoryIdFromUrl. categoryIdFromUrl is lowercase from URL.
+  const { categoryIdFromUrl } = useParams<{ categoryIdFromUrl: string }>()
+
+  useEffect(() => {
+    const matchedCategory = categories.find((cat) => cat.id.toLowerCase() === categoryIdFromUrl?.toLowerCase())
+    if (matchedCategory && activeTab !== matchedCategory.id) {
+      setActiveTab(matchedCategory.id)
+    }
+  }, [categoryIdFromUrl, categories, activeTab, setActiveTab])
+
+  const vercelTabsData = adaptCategoriesForVercelTabs(categories)
+
+  return (
+    <div className="h-full w-full">
+      <div className="flex h-full w-full flex-col overflow-hidden">
+        <NavbarMain className="h-auto flex-shrink-0">
+          <NavbarCenter>{t('discover.title')}</NavbarCenter>
+        </NavbarMain>
+
+        {categories.length > 0 && (
+          <div className="px-4 py-2">
+            <VercelTabs tabs={vercelTabsData} onTabChange={handleSelectTab} />
+          </div>
+        )}
+
+        <div className="flex flex-grow flex-row overflow-auto">
+          {currentCategory?.hasSidebar && (
+            <div className="w-64 flex-shrink-0 border-r">
+              <DiscoverSidebar
+                activeCategory={currentCategory}
+                selectedSubcategory={selectedSubcategory}
+                onSelectSubcategory={handleSelectSubcategory}
+              />
+            </div>
+          )}
+          {/* {!currentCategory && categories.length > 0 && (
+            <div className="w-64 flex-shrink-0 border-r p-4 text-muted-foreground">Select a category...</div>
+          )} */}
+
+          <main className="flex-grow overflow-hidden">
+            <DiscoverContent
+              activeTabId={activeTab}
+              // selectedSubcategoryId={selectedSubcategory}
+              currentCategory={currentCategory}
+            />
+          </main>
+        </div>
+      </div>
+    </div>
+  )
+}

src/renderer/src/pages/discover/types.ts

@@ -0,0 +1,7 @@
+import { Category } from '@renderer/types/cherryStore'
+
+export interface DiscoverContextType {
+  selectedSubcategory: string
+  activeTabId: string
+  currentCategory?: Category // currentCategory might be undefined initially
+}

src/renderer/src/pages/files/FilesPage.tsx

@@ -5,7 +5,7 @@ import {
   SortAscendingOutlined,
   SortDescendingOutlined
 } from '@ant-design/icons'
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { NavbarCenter, NavbarMain } from '@renderer/components/app/Navbar'
 import ListItem from '@renderer/components/ListItem'
 import TextEditPopup from '@renderer/components/Popups/TextEditPopup'
 import Logger from '@renderer/config/logger'
@@ -207,9 +207,9 @@ const FilesPage: FC = () => {
 
   return (
     <Container>
-      <Navbar>
+      <NavbarMain>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('files.title')}</NavbarCenter>
-      </Navbar>
+      </NavbarMain>
       <ContentContainer id="content-container">
         <SideNav>
           {menuItems.map((item) => (

src/renderer/src/pages/home/Chat.tsx

@@ -15,7 +15,6 @@ import styled from 'styled-components'
 
 import Inputbar from './Inputbar/Inputbar'
 import Messages from './Messages/Messages'
-import Tabs from './Tabs'
 
 interface Props {
   assistant: Assistant
@@ -38,7 +37,7 @@ const Chat: FC<Props> = (props) => {
     const showRightTopics = showTopics && topicPosition === 'right'
     const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
     const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
-    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth})`
+    return `calc(100vw - ${minusAssistantsWidth} ${minusRightTopicsWidth})`
   }, [showAssistants, showTopics, topicPosition])
 
   useHotkeys('esc', () => {
@@ -128,24 +127,12 @@ const Chat: FC<Props> = (props) => {
           {isMultiSelectMode && <MultiSelectActionPopup topic={props.activeTopic} />}
         </QuickPanelProvider>
       </Main>
-      {topicPosition === 'right' && showTopics && (
-        <Tabs
-          activeAssistant={assistant}
-          activeTopic={props.activeTopic}
-          setActiveAssistant={props.setActiveAssistant}
-          setActiveTopic={props.setActiveTopic}
-          position="right"
-        />
-      )}
     </Container>
   )
 }
 
 const Container = styled.div`
-  display: flex;
-  flex-direction: row;
   height: 100%;
-  flex: 1;
 `
 
 const Main = styled(Flex)`

src/renderer/src/pages/home/ChatNavbar.tsx

@@ -0,0 +1,167 @@
+import { Navbar } from '@renderer/components/app/Navbar'
+import { HStack } from '@renderer/components/Layout'
+import MinAppsPopover from '@renderer/components/Popups/MinAppsPopover'
+import SearchPopup from '@renderer/components/Popups/SearchPopup'
+import { isLinux, isMac, isWindows } from '@renderer/config/constant'
+import { useAssistant } from '@renderer/hooks/useAssistant'
+import { useFullscreen } from '@renderer/hooks/useFullscreen'
+import { modelGenerating } from '@renderer/hooks/useRuntime'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useShortcut } from '@renderer/hooks/useShortcuts'
+import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import { useAppDispatch } from '@renderer/store'
+import { setNarrowMode } from '@renderer/store/settings'
+import { Assistant } from '@renderer/types'
+import { Tooltip } from 'antd'
+import { t } from 'i18next'
+import { LayoutGrid, PanelLeft, PanelRight, Search } from 'lucide-react'
+import { FC, useCallback } from 'react'
+import styled from 'styled-components'
+
+import SelectModelButton from './components/SelectModelButton'
+import UpdateAppButton from './components/UpdateAppButton'
+
+interface Props {
+  activeAssistant: Assistant
+  position: 'left' | 'right'
+}
+
+const ChatNavbar: FC<Props> = ({ activeAssistant }) => {
+  const { assistant } = useAssistant(activeAssistant.id)
+  const { showAssistants, toggleShowAssistants } = useShowAssistants()
+  const isFullscreen = useFullscreen()
+  const { topicPosition, sidebarIcons, narrowMode } = useSettings()
+  const { toggleShowTopics } = useShowTopics()
+  const dispatch = useAppDispatch()
+
+  // Function to toggle assistants with cooldown
+  const handleToggleShowAssistants = useCallback(() => {
+    if (showAssistants) {
+      // When hiding sidebar, set cooldown
+      toggleShowAssistants()
+      // setTimeout(() => {
+      //   setSidebarHideCooldown(false)
+      // }, 10000) // 10 seconds cooldown
+    } else {
+      // When showing sidebar, no cooldown needed
+      toggleShowAssistants()
+    }
+  }, [showAssistants, toggleShowAssistants])
+
+  useShortcut('toggle_show_assistants', handleToggleShowAssistants)
+
+  useShortcut('toggle_show_topics', () => {
+    if (topicPosition === 'right') {
+      toggleShowTopics()
+    } else {
+      EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)
+    }
+  })
+
+  useShortcut('search_message', () => {
+    SearchPopup.show()
+  })
+
+  const handleNarrowModeToggle = async () => {
+    await modelGenerating()
+    dispatch(setNarrowMode(!narrowMode))
+  }
+
+  return (
+    <Navbar className="home-navbar">
+      <NavbarContainer $isFullscreen={isFullscreen} $showSidebar={showAssistants} className="home-navbar-right">
+        <HStack alignItems="center">
+          <NavbarIcon
+            onClick={() => toggleShowAssistants()}
+            style={{ marginRight: 8, marginLeft: isMac && !isFullscreen ? 4 : -12 }}>
+            {showAssistants ? <PanelLeft size={18} /> : <PanelRight size={18} />}
+          </NavbarIcon>
+          <SelectModelButton assistant={assistant} />
+        </HStack>
+        <HStack alignItems="center" gap={8}>
+          <UpdateAppButton />
+          {isMac && (
+            <Tooltip title={t('chat.assistant.search.placeholder')} mouseEnterDelay={0.8}>
+              <NarrowIcon onClick={() => SearchPopup.show()}>
+                <Search size={18} />
+              </NarrowIcon>
+            </Tooltip>
+          )}
+          <Tooltip title={t('navbar.expand')} mouseEnterDelay={0.8}>
+            <NarrowIcon onClick={handleNarrowModeToggle}>
+              <i className="iconfont icon-icon-adaptive-width"></i>
+            </NarrowIcon>
+          </Tooltip>
+          {sidebarIcons.visible.includes('minapp') && (
+            <MinAppsPopover>
+              <Tooltip title={t('minapp.title')} mouseEnterDelay={0.8}>
+                <NarrowIcon>
+                  <LayoutGrid size={18} />
+                </NarrowIcon>
+              </Tooltip>
+            </MinAppsPopover>
+          )}
+        </HStack>
+      </NavbarContainer>
+    </Navbar>
+  )
+}
+
+const NavbarContainer = styled.div<{ $isFullscreen: boolean; $showSidebar: boolean }>`
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: var(--navbar-height);
+  max-height: var(--navbar-height);
+  min-height: var(--navbar-height);
+  justify-content: space-between;
+  padding-left: ${({ $showSidebar }) => (isMac ? ($showSidebar ? '10px' : '75px') : '15px')};
+  font-weight: bold;
+  color: var(--color-text-1);
+  padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWindows ? '140px' : isLinux ? '120px' : '12px')};
+  -webkit-app-region: drag;
+`
+
+export const NavbarIcon = styled.div`
+  -webkit-app-region: none;
+  border-radius: 8px;
+  height: 30px;
+  padding: 0 7px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  .iconfont {
+    font-size: 18px;
+    color: var(--color-icon);
+    &.icon-a-addchat {
+      font-size: 20px;
+    }
+    &.icon-a-darkmode {
+      font-size: 20px;
+    }
+    &.icon-appstore {
+      font-size: 20px;
+    }
+  }
+  .anticon {
+    color: var(--color-icon);
+    font-size: 16px;
+  }
+  &:hover {
+    background-color: var(--color-background-mute);
+    color: var(--color-icon-white);
+  }
+`
+
+const NarrowIcon = styled(NavbarIcon)`
+  @media (max-width: 1000px) {
+    display: none;
+  }
+`
+
+export default ChatNavbar

src/renderer/src/pages/home/HomePage.tsx

@@ -1,18 +1,14 @@
 import { useAssistants } from '@renderer/hooks/useAssistant'
+import { useChat } from '@renderer/hooks/useChat'
 import { useSettings } from '@renderer/hooks/useSettings'
-import { useActiveTopic } from '@renderer/hooks/useTopic'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import NavigationService from '@renderer/services/NavigationService'
-import { Assistant } from '@renderer/types'
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
 import Chat from './Chat'
-import Navbar from './Navbar'
-import HomeTabs from './Tabs'
-
-let _activeAssistant: Assistant
+import ChatNavbar from './ChatNavbar'
 
 const HomePage: FC = () => {
   const { assistants } = useAssistants()
@@ -21,12 +17,9 @@ const HomePage: FC = () => {
   const location = useLocation()
   const state = location.state
 
-  const [activeAssistant, setActiveAssistant] = useState(state?.assistant || _activeAssistant || assistants[0])
-  const { activeTopic, setActiveTopic } = useActiveTopic(activeAssistant, state?.topic)
+  const { activeAssistant, activeTopic, setActiveAssistant, setActiveTopic } = useChat()
   const { showAssistants, showTopics, topicPosition } = useSettings()
 
-  _activeAssistant = activeAssistant
-
   useEffect(() => {
     NavigationService.setNavigate(navigate)
   }, [navigate])
@@ -61,23 +54,8 @@ const HomePage: FC = () => {
 
   return (
     <Container id="home-page">
-      <Navbar
-        activeAssistant={activeAssistant}
-        activeTopic={activeTopic}
-        setActiveTopic={setActiveTopic}
-        setActiveAssistant={setActiveAssistant}
-        position="left"
-      />
+      <ChatNavbar activeAssistant={activeAssistant} position="left" />
       <ContentContainer id="content-container">
-        {showAssistants && (
-          <HomeTabs
-            activeAssistant={activeAssistant}
-            activeTopic={activeTopic}
-            setActiveAssistant={setActiveAssistant}
-            setActiveTopic={setActiveTopic}
-            position="left"
-          />
-        )}
         <Chat
           assistant={activeAssistant}
           activeTopic={activeTopic}
@@ -90,16 +68,13 @@ const HomePage: FC = () => {
 }
 
 const Container = styled.div`
+  min-width: 0;
   display: flex;
   flex: 1;
   flex-direction: column;
-  max-width: calc(100vw - var(--sidebar-width));
 `
 
 const ContentContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: row;
   overflow: hidden;
 `
 

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -14,7 +14,7 @@ import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useKnowledgeBases } from '@renderer/hooks/useKnowledge'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import { useMessageOperations, useTopicLoading } from '@renderer/hooks/useMessageOperations'
-import { modelGenerating, useRuntime } from '@renderer/hooks/useRuntime'
+import { useRuntime } from '@renderer/hooks/useRuntime'
 import { useMessageStyle, useSettings } from '@renderer/hooks/useSettings'
 import { useShortcut, useShortcutDisplay } from '@renderer/hooks/useShortcuts'
 import { useSidebarIconShow } from '@renderer/hooks/useSidebarIcon'
@@ -52,6 +52,7 @@ import InputbarTools, { InputbarToolsRef } from './InputbarTools'
 import KnowledgeBaseInput from './KnowledgeBaseInput'
 import MentionModelsInput from './MentionModelsInput'
 import SendMessageButton from './SendMessageButton'
+import SettingButton from './SettingButton'
 import TokenCount from './TokenCount'
 
 interface Props {
@@ -405,8 +406,6 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
   }
 
   const addNewTopic = useCallback(async () => {
-    await modelGenerating()
-
     const topic = getDefaultTopic(assistant.id)
 
     await db.topics.add({ id: topic.id, messages: [] })
@@ -858,6 +857,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
                 ToolbarButton={ToolbarButton}
                 onClick={onNewContext}
               />
+              <SettingButton assistant={assistant} ToolbarButton={ToolbarButton} />
               <TranslateButton text={text} onTranslated={onTranslated} isLoading={isTranslating} />
               {loading && (
                 <Tooltip placement="top" title={t('chat.input.pause')} arrow>
@@ -912,7 +912,7 @@ const InputBarContainer = styled.div`
   border: 0.5px solid var(--color-border);
   transition: all 0.2s ease;
   position: relative;
-  margin: 14px 20px;
+  margin: 16px 16px;
   margin-top: 0;
   border-radius: 15px;
   padding-top: 6px; // 为拖动手柄留出空间

src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx

@@ -176,7 +176,7 @@ const MCPToolsButton: FC<Props> = ({ ref, setInputValue, resizeTextArea, Toolbar
     newList.push({
       label: t('settings.mcp.addServer') + '...',
       icon: <Plus />,
-      action: () => navigate('/settings/mcp')
+      action: () => navigate('/mcp-servers')
     })
 
     newList.unshift({

src/renderer/src/pages/home/Inputbar/SettingButton.tsx

@@ -0,0 +1,43 @@
+import { Assistant } from '@renderer/types'
+import { Popover } from 'antd'
+import { Settings } from 'lucide-react'
+import { FC, useState } from 'react'
+
+import SettingsTab from '../Tabs/SettingsTab'
+
+interface Props {
+  assistant: Assistant
+  ToolbarButton: any
+}
+
+const SettingButton: FC<Props> = ({ assistant, ToolbarButton }) => {
+  const [open, setOpen] = useState(false)
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  return (
+    <Popover
+      placement="topLeft"
+      content={<SettingsTab assistant={assistant} onClose={handleClose} />}
+      trigger="click"
+      open={open}
+      onOpenChange={handleOpenChange}
+      styles={{
+        body: {
+          padding: '4px 2px 4px 2px'
+        }
+      }}>
+      <ToolbarButton type="text">
+        <Settings size={18} />
+      </ToolbarButton>
+    </Popover>
+  )
+}
+
+export default SettingButton

src/renderer/src/pages/home/Messages/Message.tsx

@@ -217,7 +217,7 @@ const MessageContainer = styled.div`
   flex-direction: column;
   position: relative;
   transition: background-color 0.3s ease;
-  padding: 0 20px;
+  padding: 0 24px;
   transform: translateZ(0);
   will-change: transform;
   &.message-highlight {
@@ -257,7 +257,7 @@ const MessageFooter = styled.div`
   align-items: center;
   padding: 2px 0;
   margin-top: 2px;
-  border-top: 1px dotted var(--color-border);
+  border-top: 0.5px dotted var(--color-border);
   gap: 20px;
 `
 

src/renderer/src/pages/home/Messages/MessageGroup.tsx

@@ -168,7 +168,9 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => {
         topic,
         index: message.index,
         style: {
-          paddingTop: isGrouped && ['horizontal', 'grid'].includes(multiModelMessageStyle) ? 0 : 15
+          ...(isGrouped && ['horizontal', 'grid'].includes(multiModelMessageStyle)
+            ? { padding: 0 }
+            : { paddingTop: 15 })
         }
       }
 
@@ -202,7 +204,10 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => {
               </MessageWrapper>
             }
             trigger={gridPopoverTrigger}
-            styles={{ root: { maxWidth: '60vw', minWidth: '550px', overflowY: 'auto', zIndex: 1000 } }}>
+            styles={{
+              root: { maxWidth: '60vw', minWidth: '550px', overflowY: 'auto', zIndex: 1000 },
+              body: { padding: 2 }
+            }}>
             <div style={{ cursor: 'pointer' }}>{messageContent}</div>
           </Popover>
         )
@@ -259,7 +264,7 @@ const GroupContainer = styled.div<{ $isGrouped: boolean; $layout: MultiModelMess
   padding-top: ${({ $isGrouped, $layout }) => ($isGrouped && 'horizontal' === $layout ? '15px' : '0')};
   &.group-container.horizontal,
   &.group-container.grid {
-    padding: 0 20px;
+    padding: 0 24px;
     .message {
       padding: 0;
     }
@@ -317,10 +322,10 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
   width: 100%;
 
   &.horizontal {
-    display: inline-block;
+    height: 100%;
   }
   &.grid {
-    display: inline-block;
+    height: 100%;
   }
   &.fold {
     display: none;
@@ -333,10 +338,9 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
     if ($layout === 'horizontal' && $isGrouped) {
       return css`
         border: 0.5px solid var(--color-border);
-        padding: 10px;
+        padding: 10px 10px 0 10px;
         border-radius: 6px;
         max-height: 600px;
-        margin-bottom: 10px;
       `
     }
     return ''

src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx

@@ -104,7 +104,7 @@ const GroupMenuBar = styled.div<{ $layout: MultiModelMessageStyle }>`
   margin: 0 20px;
   padding: 6px 10px;
   border-radius: 6px;
-  margin-top: 10px;
+  margin-top: 6px;
   justify-content: space-between;
   overflow: hidden;
   border: 0.5px solid var(--color-border);

src/renderer/src/pages/home/Navbar.tsx

@@ -1,231 +0,0 @@
-import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
-import { HStack } from '@renderer/components/Layout'
-import FloatingSidebar from '@renderer/components/Popups/FloatingSidebar'
-import MinAppsPopover from '@renderer/components/Popups/MinAppsPopover'
-import SearchPopup from '@renderer/components/Popups/SearchPopup'
-import { isMac } from '@renderer/config/constant'
-import { useAssistant } from '@renderer/hooks/useAssistant'
-import { useFullscreen } from '@renderer/hooks/useFullscreen'
-import { modelGenerating } from '@renderer/hooks/useRuntime'
-import { useSettings } from '@renderer/hooks/useSettings'
-import { useShortcut } from '@renderer/hooks/useShortcuts'
-import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
-import { useAppDispatch } from '@renderer/store'
-import { setNarrowMode } from '@renderer/store/settings'
-import { Assistant, Topic } from '@renderer/types'
-import { Tooltip } from 'antd'
-import { t } from 'i18next'
-import { LayoutGrid, MessageSquareDiff, PanelLeftClose, PanelRightClose, Search } from 'lucide-react'
-import { FC, useCallback, useState } from 'react'
-import styled from 'styled-components'
-
-import SelectModelButton from './components/SelectModelButton'
-import UpdateAppButton from './components/UpdateAppButton'
-
-interface Props {
-  activeAssistant: Assistant
-  activeTopic: Topic
-  setActiveTopic: (topic: Topic) => void
-  setActiveAssistant: (assistant: Assistant) => void
-  position: 'left' | 'right'
-}
-
-const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTopic, setActiveTopic }) => {
-  const { assistant } = useAssistant(activeAssistant.id)
-  const { showAssistants, toggleShowAssistants } = useShowAssistants()
-  const isFullscreen = useFullscreen()
-  const { topicPosition, sidebarIcons, narrowMode } = useSettings()
-  const { showTopics, toggleShowTopics } = useShowTopics()
-  const dispatch = useAppDispatch()
-  const [sidebarHideCooldown, setSidebarHideCooldown] = useState(false)
-
-  // Function to toggle assistants with cooldown
-  const handleToggleShowAssistants = useCallback(() => {
-    if (showAssistants) {
-      // When hiding sidebar, set cooldown
-      toggleShowAssistants()
-      setSidebarHideCooldown(true)
-      // setTimeout(() => {
-      //   setSidebarHideCooldown(false)
-      // }, 10000) // 10 seconds cooldown
-    } else {
-      // When showing sidebar, no cooldown needed
-      toggleShowAssistants()
-    }
-  }, [showAssistants, toggleShowAssistants])
-  const handleToggleShowTopics = useCallback(() => {
-    if (showTopics) {
-      // When hiding sidebar, set cooldown
-      toggleShowTopics()
-      setSidebarHideCooldown(true)
-      // setTimeout(() => {
-      //   setSidebarHideCooldown(false)
-      // }, 10000) // 10 seconds cooldown
-    } else {
-      // When showing sidebar, no cooldown needed
-      toggleShowTopics()
-    }
-  }, [showTopics, toggleShowTopics])
-
-  useShortcut('toggle_show_assistants', handleToggleShowAssistants)
-
-  useShortcut('toggle_show_topics', () => {
-    if (topicPosition === 'right') {
-      toggleShowTopics()
-    } else {
-      EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)
-    }
-  })
-
-  useShortcut('search_message', () => {
-    SearchPopup.show()
-  })
-
-  const handleNarrowModeToggle = async () => {
-    await modelGenerating()
-    dispatch(setNarrowMode(!narrowMode))
-  }
-
-  return (
-    <Navbar className="home-navbar">
-      {showAssistants && (
-        <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: 0 }}>
-          <Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={0.8}>
-            <NavbarIcon onClick={handleToggleShowAssistants} style={{ marginLeft: isMac && !isFullscreen ? 16 : 0 }}>
-              <PanelLeftClose size={18} />
-            </NavbarIcon>
-          </Tooltip>
-          <Tooltip title={t('settings.shortcuts.new_topic')} mouseEnterDelay={0.8}>
-            <NavbarIcon onClick={() => EventEmitter.emit(EVENT_NAMES.ADD_NEW_TOPIC)} style={{ marginRight: 5 }}>
-              <MessageSquareDiff size={18} />
-            </NavbarIcon>
-          </Tooltip>
-        </NavbarLeft>
-      )}
-      <NavbarRight style={{ justifyContent: 'space-between', flex: 1 }} className="home-navbar-right">
-        <HStack alignItems="center">
-          {!showAssistants && !sidebarHideCooldown && (
-            <FloatingSidebar
-              activeAssistant={assistant}
-              setActiveAssistant={setActiveAssistant}
-              activeTopic={activeTopic}
-              setActiveTopic={setActiveTopic}
-              position={'left'}>
-              <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}>
-                <NavbarIcon
-                  onClick={() => toggleShowAssistants()}
-                  style={{ marginRight: 8, marginLeft: isMac && !isFullscreen ? 4 : -12 }}>
-                  <PanelRightClose size={18} />
-                </NavbarIcon>
-              </Tooltip>
-            </FloatingSidebar>
-          )}
-          {!showAssistants && sidebarHideCooldown && (
-            <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={0.8}>
-              <NavbarIcon
-                onClick={() => toggleShowAssistants()}
-                style={{ marginRight: 8, marginLeft: isMac && !isFullscreen ? 4 : -12 }}
-                onMouseOut={() => setSidebarHideCooldown(false)}>
-                <PanelRightClose size={18} />
-              </NavbarIcon>
-            </Tooltip>
-          )}
-          <SelectModelButton assistant={assistant} />
-        </HStack>
-        <HStack alignItems="center" gap={8}>
-          <UpdateAppButton />
-          <Tooltip title={t('chat.assistant.search.placeholder')} mouseEnterDelay={0.8}>
-            <NarrowIcon onClick={() => SearchPopup.show()}>
-              <Search size={18} />
-            </NarrowIcon>
-          </Tooltip>
-          <Tooltip title={t('navbar.expand')} mouseEnterDelay={0.8}>
-            <NarrowIcon onClick={handleNarrowModeToggle}>
-              <i className="iconfont icon-icon-adaptive-width"></i>
-            </NarrowIcon>
-          </Tooltip>
-          {sidebarIcons.visible.includes('minapp') && (
-            <MinAppsPopover>
-              <Tooltip title={t('minapp.title')} mouseEnterDelay={0.8}>
-                <NarrowIcon>
-                  <LayoutGrid size={18} />
-                </NarrowIcon>
-              </Tooltip>
-            </MinAppsPopover>
-          )}
-          {topicPosition === 'right' && !showTopics && !sidebarHideCooldown && (
-            <FloatingSidebar
-              activeAssistant={assistant}
-              setActiveAssistant={setActiveAssistant}
-              activeTopic={activeTopic}
-              setActiveTopic={setActiveTopic}
-              position={'right'}>
-              <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}>
-                <NavbarIcon onClick={() => toggleShowTopics()}>
-                  <PanelLeftClose size={18} />
-                </NavbarIcon>
-              </Tooltip>
-            </FloatingSidebar>
-          )}
-          {topicPosition === 'right' && !showTopics && sidebarHideCooldown && (
-            <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}>
-              <NavbarIcon onClick={() => toggleShowTopics()} onMouseOut={() => setSidebarHideCooldown(false)}>
-                <PanelLeftClose size={18} />
-              </NavbarIcon>
-            </Tooltip>
-          )}
-          {topicPosition === 'right' && showTopics && (
-            <Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={2}>
-              <NavbarIcon onClick={() => handleToggleShowTopics()}>
-                <PanelRightClose size={18} />
-              </NavbarIcon>
-            </Tooltip>
-          )}
-        </HStack>
-      </NavbarRight>
-    </Navbar>
-  )
-}
-
-export const NavbarIcon = styled.div`
-  -webkit-app-region: none;
-  border-radius: 8px;
-  height: 30px;
-  padding: 0 7px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  .iconfont {
-    font-size: 18px;
-    color: var(--color-icon);
-    &.icon-a-addchat {
-      font-size: 20px;
-    }
-    &.icon-a-darkmode {
-      font-size: 20px;
-    }
-    &.icon-appstore {
-      font-size: 20px;
-    }
-  }
-  .anticon {
-    color: var(--color-icon);
-    font-size: 16px;
-  }
-  &:hover {
-    background-color: var(--color-background-mute);
-    color: var(--color-icon-white);
-  }
-`
-
-const NarrowIcon = styled(NavbarIcon)`
-  @media (max-width: 1000px) {
-    display: none;
-  }
-`
-
-export default HeaderNavbar

src/renderer/src/pages/home/Tabs/AssistantsTab.tsx

@@ -6,7 +6,7 @@ import { useAssistants } from '@renderer/hooks/useAssistant'
 import { useAssistantsTabSortType } from '@renderer/hooks/useStore'
 import { useTags } from '@renderer/hooks/useTags'
 import { Assistant, AssistantsSortType } from '@renderer/types'
-import { Divider, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import { FC, useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -80,7 +80,7 @@ const Assistants: FC<AssistantsTabProps> = ({
   if (assistantsTabSortType === 'tags') {
     return (
       <Container className="assistants-tab" ref={containerRef}>
-        <div style={{ marginBottom: '8px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 4, gap: 10 }}>
           {getGroupedAssistants.map((group) => (
             <TagsContainer key={group.tag}>
               {group.tag !== t('assistants.tags.untagged') && (
@@ -95,7 +95,7 @@ const Assistants: FC<AssistantsTabProps> = ({
                       {group.tag}
                     </GroupTitleName>
                   </Tooltip>
-                  <Divider style={{ margin: '12px 0' }}></Divider>
+                  <GroupTitleDivider />
                 </GroupTitle>
               )}
               {!collapsedTags[group.tag] && (
@@ -197,23 +197,20 @@ const AssistantAddItem = styled.div`
   cursor: pointer;
 
   &:hover {
-    background-color: var(--color-background-soft);
-  }
-
-  &.active {
-    background-color: var(--color-background-soft);
-    border: 0.5px solid var(--color-border);
+    background-color: var(--color-list-item-hover);
   }
 `
 
 const GroupTitle = styled.div`
-  padding: 8px 0;
-  position: relative;
   color: var(--color-text-2);
   font-size: 12px;
   font-weight: 500;
-  margin-bottom: -8px;
   cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 24px;
 `
 
 const GroupTitleName = styled.div`
@@ -221,13 +218,18 @@ const GroupTitleName = styled.div`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  background-color: var(--color-background);
   box-sizing: border-box;
   padding: 0 4px;
   color: var(--color-text);
-  position: absolute;
-  transform: translateY(2px);
   font-size: 13px;
+  line-height: 24px;
+  margin-right: 5px;
+  display: flex;
+`
+
+const GroupTitleDivider = styled.div`
+  flex: 1;
+  border-top: 1px solid var(--color-border);
 `
 
 const AssistantName = styled.div`

src/renderer/src/pages/home/Tabs/SettingsTab.tsx

@@ -69,6 +69,7 @@ import OpenAISettingsGroup from './components/OpenAISettingsGroup'
 
 interface Props {
   assistant: Assistant
+  onClose: () => void
 }
 
 const SettingsTab: FC<Props> = (props) => {
@@ -197,7 +198,10 @@ const SettingsTab: FC<Props> = (props) => {
               type="text"
               size="small"
               icon={<Settings2 size={16} />}
-              onClick={() => AssistantSettingsPopup.show({ assistant, tab: 'model' })}
+              onClick={() => {
+                AssistantSettingsPopup.show({ assistant, tab: 'model' })
+                props.onClose()
+              }}
             />
           </HStack>
         }>
@@ -681,8 +685,10 @@ const SettingsTab: FC<Props> = (props) => {
 }
 
 const Container = styled(Scrollbar)`
+  min-width: 300px;
+  max-width: 40vw;
+  max-height: 70vh;
   display: flex;
-  flex: 1;
   flex-direction: column;
   padding: 0 8px;
   padding-right: 0;

src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx

@@ -20,11 +20,11 @@ import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
 import { getDefaultModel, getDefaultTopic } from '@renderer/services/AssistantService'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { Assistant, AssistantsSortType } from '@renderer/types'
-import { getLeadingEmoji, uuid } from '@renderer/utils'
+import { classNames, getLeadingEmoji, uuid } from '@renderer/utils'
 import { hasTopicPendingRequests } from '@renderer/utils/queue'
-import { Dropdown, MenuProps } from 'antd'
+import { Button, Dropdown, MenuProps } from 'antd'
 import { omit } from 'lodash'
-import { AlignJustify, Plus, Settings2, Tag, Tags } from 'lucide-react'
+import { AlignJustify, EllipsisVertical, Plus, Settings2, Tag, Tags } from 'lucide-react'
 import { FC, memo, startTransition, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -63,6 +63,7 @@ const AssistantItem: FC<AssistantItemProps> = ({
   const { assistants, updateAssistants } = useAssistants()
 
   const [isPending, setIsPending] = useState(false)
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
 
   useEffect(() => {
     if (isActive) {
@@ -141,7 +142,7 @@ const AssistantItem: FC<AssistantItemProps> = ({
 
   return (
     <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
-      <Container onClick={handleSwitch} className={isActive ? 'active' : ''}>
+      <Container onClick={handleSwitch} className={classNames({ active: isActive, 'is-menu-open': isMenuOpen })}>
         <AssistantNameRow className="name" title={fullAssistantName}>
           {assistantIconType === 'model' ? (
             <ModelAvatar
@@ -159,11 +160,15 @@ const AssistantItem: FC<AssistantItemProps> = ({
           )}
           <AssistantName className="text-nowrap">{assistantName}</AssistantName>
         </AssistantNameRow>
-        {isActive && (
-          <MenuButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
-            <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>
-          </MenuButton>
-        )}
+        <Dropdown menu={{ items: menuItems }} trigger={['click']} onOpenChange={setIsMenuOpen}>
+          <Button
+            className="item-menu-button"
+            type="text"
+            size="small"
+            icon={<EllipsisVertical size={16} color="var(--color-text-3)" />}
+            onClick={(e) => e.stopPropagation()}
+          />
+        </Dropdown>
       </Container>
     </Dropdown>
   )
@@ -382,6 +387,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   padding: 0 8px;
   height: 37px;
   position: relative;
@@ -389,12 +395,23 @@ const Container = styled.div`
   border: 0.5px solid transparent;
   width: calc(var(--assistants-width) - 20px);
   cursor: pointer;
+  &.is-menu-open {
+    .item-menu-button {
+      display: block;
+    }
+  }
   &:hover {
     background-color: var(--color-list-item-hover);
+    .item-menu-button {
+      display: block;
+    }
   }
   &.active {
     background-color: var(--color-list-item);
   }
+  .item-menu-button {
+    display: none;
+  }
 `
 
 const AssistantNameRow = styled.div`
@@ -410,31 +427,4 @@ const AssistantName = styled.div`
   font-size: 13px;
 `
 
-const MenuButton = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  min-width: 22px;
-  height: 22px;
-  min-height: 22px;
-  border-radius: 11px;
-  position: absolute;
-  background-color: var(--color-background);
-  right: 9px;
-  top: 6px;
-  padding: 0 5px;
-  border: 0.5px solid var(--color-border);
-`
-
-const TopicCount = styled.div`
-  color: var(--color-text);
-  font-size: 10px;
-  border-radius: 10px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-`
-
 export default memo(AssistantItem)

src/renderer/src/pages/home/Tabs/index.tsx

@@ -1,13 +1,8 @@
 import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
-import { useSettings } from '@renderer/hooks/useSettings'
-import { useShowTopics } from '@renderer/hooks/useStore'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { Assistant, Topic } from '@renderer/types'
 import { uuid } from '@renderer/utils'
-import { Segmented as AntSegmented, SegmentedProps } from 'antd'
-import { FC, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { FC } from 'react'
 import styled from 'styled-components'
 
 import Assistants from './AssistantsTab'
@@ -15,51 +10,19 @@ import Settings from './SettingsTab'
 import Topics from './TopicsTab'
 
 interface Props {
+  tab: Tab
   activeAssistant: Assistant
   activeTopic: Topic
   setActiveAssistant: (assistant: Assistant) => void
   setActiveTopic: (topic: Topic) => void
-  position: 'left' | 'right'
-  forceToSeeAllTab?: boolean
   style?: React.CSSProperties
 }
 
 type Tab = 'assistants' | 'topic' | 'settings'
 
-let _tab: any = ''
-
-const HomeTabs: FC<Props> = ({
-  activeAssistant,
-  activeTopic,
-  setActiveAssistant,
-  setActiveTopic,
-  position,
-  forceToSeeAllTab,
-  style
-}) => {
+const HomeTabs: FC<Props> = ({ tab, activeAssistant, activeTopic, setActiveAssistant, setActiveTopic, style }) => {
   const { addAssistant } = useAssistants()
-  const [tab, setTab] = useState<Tab>(position === 'left' ? _tab || 'assistants' : 'topic')
-  const { topicPosition } = useSettings()
   const { defaultAssistant } = useDefaultAssistant()
-  const { showTopics, toggleShowTopics } = useShowTopics()
-
-  const { t } = useTranslation()
-
-  const borderStyle = '0.5px solid var(--color-border)'
-  const border =
-    position === 'left' ? { borderRight: borderStyle } : { borderLeft: borderStyle, borderTopLeftRadius: 0 }
-
-  if (position === 'left' && topicPosition === 'left') {
-    _tab = tab
-  }
-
-  const showTab = !(position === 'left' && topicPosition === 'right')
-
-  const assistantTab = {
-    label: t('assistants.abbr'),
-    value: 'assistants'
-    // icon: <BotIcon size={16} />
-  }
 
   const onCreateAssistant = async () => {
     const assistant = await AddAssistantPopup.show()
@@ -72,68 +35,8 @@ const HomeTabs: FC<Props> = ({
     setActiveAssistant(assistant)
   }
 
-  useEffect(() => {
-    const unsubscribes = [
-      EventEmitter.on(EVENT_NAMES.SHOW_ASSISTANTS, (): any => {
-        showTab && setTab('assistants')
-      }),
-      EventEmitter.on(EVENT_NAMES.SHOW_TOPIC_SIDEBAR, (): any => {
-        showTab && setTab('topic')
-      }),
-      EventEmitter.on(EVENT_NAMES.SHOW_CHAT_SETTINGS, (): any => {
-        showTab && setTab('settings')
-      }),
-      EventEmitter.on(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR, () => {
-        showTab && setTab('topic')
-        if (position === 'left' && topicPosition === 'right') {
-          toggleShowTopics()
-        }
-      })
-    ]
-    return () => unsubscribes.forEach((unsub) => unsub())
-  }, [position, showTab, tab, toggleShowTopics, topicPosition])
-
-  useEffect(() => {
-    if (position === 'right' && topicPosition === 'right' && tab === 'assistants') {
-      setTab('topic')
-    }
-    if (position === 'left' && topicPosition === 'right' && forceToSeeAllTab != true && tab !== 'assistants') {
-      setTab('assistants')
-    }
-  }, [position, tab, topicPosition, forceToSeeAllTab])
-
   return (
-    <Container style={{ ...border, ...style }} className="home-tabs">
-      {(showTab || (forceToSeeAllTab == true && !showTopics)) && (
-        <>
-          <Segmented
-            value={tab}
-            style={{ borderRadius: 50 }}
-            shape="round"
-            options={
-              [
-                (position === 'left' && topicPosition === 'left') || (forceToSeeAllTab == true && position === 'left')
-                  ? assistantTab
-                  : undefined,
-                {
-                  label: t('common.topics'),
-                  value: 'topic'
-                  // icon: <MessageSquareQuote size={16} />
-                },
-                {
-                  label: t('settings.title'),
-                  value: 'settings'
-                  // icon: <SettingsIcon size={16} />
-                }
-              ].filter(Boolean) as SegmentedProps['options']
-            }
-            onChange={(value) => setTab(value as 'topic' | 'settings')}
-            block
-          />
-          <Divider />
-        </>
-      )}
-
+    <Container style={{ ...style }} className="home-tabs">
       <TabContent className="home-tabs-content">
         {tab === 'assistants' && (
           <Assistants
@@ -154,6 +57,7 @@ const HomeTabs: FC<Props> = ({
 
 const Container = styled.div`
   display: flex;
+  flex: 1;
   flex-direction: column;
   max-width: var(--assistants-width);
   min-width: var(--assistants-width);
@@ -173,68 +77,4 @@ const TabContent = styled.div`
   overflow-x: hidden;
 `
 
-const Divider = styled.div`
-  border-top: 0.5px solid var(--color-border);
-  margin-top: 10px;
-  margin-left: 10px;
-  margin-right: 10px;
-`
-
-const Segmented = styled(AntSegmented)`
-  font-family: var(--font-family);
-
-  &.ant-segmented {
-    background-color: transparent;
-    margin: 0 10px;
-    margin-top: 10px;
-    padding: 0;
-  }
-  .ant-segmented-item {
-    overflow: hidden;
-    transition: none !important;
-    height: 34px;
-    line-height: 34px;
-    background-color: transparent;
-    user-select: none;
-    border-radius: var(--list-item-border-radius);
-    box-shadow: none;
-  }
-  .ant-segmented-item-selected,
-  .ant-segmented-item-selected:active {
-    transition: none !important;
-    background-color: var(--color-list-item);
-  }
-  .ant-segmented-item-label {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    font-size: 13px;
-    height: 100%;
-  }
-  .ant-segmented-item-label[aria-selected='true'] {
-    color: var(--color-text);
-  }
-  .icon-business-smart-assistant {
-    margin-right: -2px;
-  }
-  .ant-segmented-thumb {
-    transition: none !important;
-    background-color: var(--color-list-item);
-    border-radius: var(--list-item-border-radius);
-    box-shadow: none;
-    &:hover {
-      background-color: transparent;
-    }
-  }
-  .ant-segmented-item-label,
-  .ant-segmented-item-icon {
-    display: flex;
-    align-items: center;
-  }
-  /* These styles ensure the same appearance as before */
-  border-radius: 0;
-  box-shadow: none;
-`
-
 export default HomeTabs

src/renderer/src/pages/knowledge/KnowledgeContent.tsx

@@ -1,4 +1,5 @@
 import { CopyOutlined, DeleteOutlined, EditOutlined, RedoOutlined } from '@ant-design/icons'
+import { NavbarIcon } from '@renderer/components/app/MainNavbar'
 import CustomTag from '@renderer/components/CustomTag'
 import Ellipsis from '@renderer/components/Ellipsis'
 import { HStack } from '@renderer/components/Layout'
@@ -22,7 +23,6 @@ import styled from 'styled-components'
 
 import CustomCollapse from '../../components/CustomCollapse'
 import FileItem from '../files/FileItem'
-import { NavbarIcon } from '../home/Navbar'
 import KnowledgeSearchPopup from './components/KnowledgeSearchPopup'
 import KnowledgeSettingsPopup from './components/KnowledgeSettingsPopup'
 import StatusIcon from './components/StatusIcon'

src/renderer/src/pages/knowledge/KnowledgePage.tsx

@@ -1,5 +1,5 @@
 import { DeleteOutlined, EditOutlined, SettingOutlined } from '@ant-design/icons'
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { NavbarCenter, NavbarMain } from '@renderer/components/app/Navbar'
 import DragableList from '@renderer/components/DragableList'
 import ListItem from '@renderer/components/ListItem'
 import PromptPopup from '@renderer/components/Popups/PromptPopup'
@@ -92,9 +92,9 @@ const KnowledgePage: FC = () => {
 
   return (
     <Container>
-      <Navbar>
+      <NavbarMain>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('knowledge.title')}</NavbarCenter>
-      </Navbar>
+      </NavbarMain>
       <ContentContainer id="content-container">
         <SideNav>
           <ScrollContainer>

src/renderer/src/pages/mcp-servers/InstallNpxUv.tsx

@@ -1,5 +1,6 @@
 import { CheckCircleOutlined, QuestionCircleOutlined, WarningOutlined } from '@ant-design/icons'
 import { Center, VStack } from '@renderer/components/Layout'
+import { SettingDescription, SettingRow, SettingSubtitle } from '@renderer/pages/settings'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setIsBunInstalled, setIsUvInstalled } from '@renderer/store/mcp'
 import { Alert, Button } from 'antd'
@@ -8,8 +9,6 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router'
 import styled from 'styled-components'
 
-import { SettingDescription, SettingRow, SettingSubtitle } from '..'
-
 interface Props {
   mini?: boolean
 }
@@ -82,7 +81,7 @@ const InstallNpxUv: FC<Props> = ({ mini = false }) => {
         icon={installed ? <CheckCircleOutlined /> : <WarningOutlined />}
         className="nodrag"
         color={installed ? 'green' : 'danger'}
-        onClick={() => navigate('/settings/mcp/mcp-install')}
+        onClick={() => navigate('/mcp-servers/mcp-install')}
       />
     )
   }

src/renderer/src/pages/mcp-servers/McpServersList.tsx

@@ -3,6 +3,7 @@ import { nanoid } from '@reduxjs/toolkit'
 import DragableList from '@renderer/components/DragableList'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
+import { SettingTitle } from '@renderer/pages/settings'
 import { MCPServer } from '@renderer/types'
 import { formatMcpError } from '@renderer/utils/error'
 import { Button, Dropdown, Empty, Switch, Tag } from 'antd'
@@ -12,7 +13,6 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router'
 import styled from 'styled-components'
 
-import { SettingTitle } from '..'
 import AddMcpServerModal from './AddMcpServerModal'
 import EditMcpJsonPopup from './EditMcpJsonPopup'
 import SyncServersPopup from './SyncServersPopup'
@@ -36,7 +36,7 @@ const McpServersList: FC = () => {
       isActive: false
     }
     addMCPServer(newServer)
-    navigate(`/settings/mcp/settings`, { state: { server: newServer } })
+    navigate(`/mcp-servers/settings`, { state: { server: newServer } })
     window.message.success({ content: t('settings.mcp.addSuccess'), key: 'mcp-list' })
   }, [addMCPServer, navigate, t])
 
@@ -50,7 +50,7 @@ const McpServersList: FC = () => {
       setIsAddModalVisible(false)
       window.message.success({ content: t('settings.mcp.addSuccess'), key: 'mcp-quick-add' })
       // Optionally navigate to the new server's settings page
-      // navigate(`/settings/mcp/settings`, { state: { server } })
+      // navigate(`/mcp-servers/settings`, { state: { server } })
     },
     [addMCPServer, t]
   )
@@ -119,7 +119,7 @@ const McpServersList: FC = () => {
       </ListHeader>
       <DragableList style={{ width: '100%' }} list={mcpServers} onUpdate={updateMcpServers}>
         {(server: MCPServer) => (
-          <ServerCard key={server.id} onClick={() => navigate(`/settings/mcp/settings`, { state: { server } })}>
+          <ServerCard key={server.id} onClick={() => navigate(`/mcp-servers/settings`, { state: { server } })}>
             <ServerHeader>
               <ServerName>
                 {server.logoUrl && <ServerLogo src={server.logoUrl} alt={`${server.name} logo`} />}
@@ -148,7 +148,7 @@ const McpServersList: FC = () => {
                 <Button
                   icon={<Settings2 size={16} />}
                   type="text"
-                  onClick={() => navigate(`/settings/mcp/settings`, { state: { server } })}
+                  onClick={() => navigate(`/mcp-servers/settings`, { state: { server } })}
                 />
               </StatusIndicator>
             </ServerHeader>

src/renderer/src/pages/mcp-servers/McpSettings.tsx

@@ -1,7 +1,8 @@
 import { DeleteOutlined, SaveOutlined } from '@ant-design/icons'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMCPServer, useMCPServers } from '@renderer/hooks/useMCPServers'
-import MCPDescription from '@renderer/pages/settings/MCPSettings/McpDescription'
+import MCPDescription from '@renderer/pages/mcp-servers/McpDescription'
+import { SettingContainer, SettingDivider, SettingGroup, SettingTitle } from '@renderer/pages/settings'
 import { MCPPrompt, MCPResource, MCPServer, MCPTool } from '@renderer/types'
 import { formatMcpError } from '@renderer/utils/error'
 import { Button, Flex, Form, Input, Radio, Select, Switch, Tabs } from 'antd'
@@ -12,7 +13,6 @@ import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router'
 import styled from 'styled-components'
 
-import { SettingContainer, SettingDivider, SettingGroup, SettingTitle } from '..'
 import MCPPromptsSection from './McpPrompt'
 import MCPResourcesSection from './McpResource'
 import MCPToolsSection from './McpTool'
@@ -319,7 +319,7 @@ const McpSettings: React.FC = () => {
             await window.api.mcp.removeServer(server)
             deleteMCPServer(server.id)
             window.message.success({ content: t('settings.mcp.deleteSuccess'), key: 'mcp-list' })
-            navigate('/settings/mcp')
+            navigate('/mcp-servers')
           }
         })
       } catch (error: any) {
@@ -608,7 +608,7 @@ const McpSettings: React.FC = () => {
   }
 
   return (
-    <SettingContainer theme={theme} style={{ width: '100%', paddingTop: 55, backgroundColor: 'transparent' }}>
+    <SettingContainer theme={theme} style={{ width: '100%', paddingTop: 20, backgroundColor: 'transparent' }}>
       <SettingGroup style={{ marginBottom: 0, borderRadius: 'var(--list-item-border-radius)' }}>
         <SettingTitle>
           <Flex justify="space-between" align="center" gap={5} style={{ marginRight: 10 }}>

src/renderer/src/pages/mcp-servers/McpSettingsNavbar.tsx

@@ -1,7 +1,4 @@
-import { NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
-import { isLinux, isWindows } from '@renderer/config/constant'
-import { useFullscreen } from '@renderer/hooks/useFullscreen'
 import { Button, Dropdown, Menu, type MenuProps } from 'antd'
 import { ChevronDown, Search } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
@@ -74,29 +71,27 @@ export const McpSettingsNavbar = () => {
   }))
 
   return (
-    <NavbarRight style={{ paddingRight: useFullscreen() ? '12px' : isWindows ? 150 : isLinux ? 120 : 12 }}>
-      <HStack alignItems="center" gap={5}>
+    <HStack alignItems="center" gap={5}>
+      <Button
+        size="small"
+        type="text"
+        onClick={() => navigate('/mcp-servers/npx-search')}
+        icon={<Search size={14} />}
+        className="nodrag"
+        style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
+        {t('settings.mcp.searchNpx')}
+      </Button>
+      <Dropdown menu={{ items: resourceMenuItems }} trigger={['click']}>
         <Button
           size="small"
           type="text"
-          onClick={() => navigate('/settings/mcp/npx-search')}
-          icon={<Search size={14} />}
           className="nodrag"
-          style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
-          {t('settings.mcp.searchNpx')}
+          style={{ fontSize: 13, height: 28, borderRadius: 20, display: 'flex', alignItems: 'center' }}>
+          {t('settings.mcp.findMore')}
+          <ChevronDown size={16} />
         </Button>
-        <Dropdown menu={{ items: resourceMenuItems }} trigger={['click']}>
-          <Button
-            size="small"
-            type="text"
-            className="nodrag"
-            style={{ fontSize: 13, height: 28, borderRadius: 20, display: 'flex', alignItems: 'center' }}>
-            {t('settings.mcp.findMore')}
-            <ChevronDown size={16} />
-          </Button>
-        </Dropdown>
-        <InstallNpxUv mini />
-      </HStack>
-    </NavbarRight>
+      </Dropdown>
+      <InstallNpxUv mini />
+    </HStack>
   )
 }

src/renderer/src/pages/mcp-servers/index.tsx

@@ -1,35 +1,46 @@
 import { ArrowLeftOutlined } from '@ant-design/icons'
+import { NavbarCenter, NavbarMain } from '@renderer/components/app/Navbar'
+import { HStack } from '@renderer/components/Layout'
 import { useTheme } from '@renderer/context/ThemeProvider'
+import { SettingContainer } from '@renderer/pages/settings'
 import { Button } from 'antd'
 import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Route, Routes, useLocation } from 'react-router'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { SettingContainer } from '..'
 import InstallNpxUv from './InstallNpxUv'
 import McpServersList from './McpServersList'
 import McpSettings from './McpSettings'
+import { McpSettingsNavbar } from './McpSettingsNavbar'
 import NpxSearch from './NpxSearch'
 
-const MCPSettings: FC = () => {
+const McpServersPage: FC = () => {
   const { theme } = useTheme()
+  const { t } = useTranslation()
 
   const location = useLocation()
   const pathname = location.pathname
 
-  const isHome = pathname === '/settings/mcp'
+  const isHome = pathname === '/mcp-servers'
 
   return (
-    <SettingContainer theme={theme} style={{ padding: 0, position: 'relative' }}>
-      {!isHome && (
-        <BackButtonContainer>
-          <Link to="/settings/mcp">
-            <Button type="default" icon={<ArrowLeftOutlined />} shape="circle" />
-          </Link>
-        </BackButtonContainer>
-      )}
-      <MainContainer>
+    <Container theme={theme} style={{ padding: 0, position: 'relative' }}>
+      <NavbarMain>
+        <NavbarCenter style={{ borderRight: 'none' }}>
+          <HStack alignItems="center" gap={10}>
+            {t('common.mcp')}
+            {!isHome && (
+              <Link to="/mcp-servers">
+                <Button type="default" icon={<ArrowLeftOutlined />} shape="circle" size="small" className="nodrag" />
+              </Link>
+            )}
+          </HStack>
+        </NavbarCenter>
+        {pathname.includes('/mcp-servers') && <McpSettingsNavbar />}
+      </NavbarMain>
+      <MainContainer id="content-container">
         <Routes>
           <Route path="/" element={<McpServersList />} />
           <Route path="settings" element={<McpSettings />} />
@@ -51,20 +62,14 @@ const MCPSettings: FC = () => {
           />
         </Routes>
       </MainContainer>
-    </SettingContainer>
+    </Container>
   )
 }
 
-const BackButtonContainer = styled.div`
+const Container = styled.div`
   display: flex;
-  align-items: center;
-  padding: 10px 20px;
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
+  flex-direction: column;
+  flex: 1;
 `
 
 const MainContainer = styled.div`
@@ -73,4 +78,4 @@ const MainContainer = styled.div`
   width: 100%;
 `
 
-export default MCPSettings
+export default McpServersPage

src/renderer/src/pages/paintings/AihubmixPage.tsx

@@ -1,6 +1,6 @@
 import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
 import IcImageUp from '@renderer/assets/images/paintings/ic_ImageUp.svg'
-import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
+import { NavbarCenter, NavbarMain, NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
 import Scrollbar from '@renderer/components/Scrollbar'
 import TranslateButton from '@renderer/components/TranslateButton'
@@ -785,7 +785,7 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
 
   return (
     <Container>
-      <Navbar>
+      <NavbarMain>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
@@ -794,7 +794,7 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
             </Button>
           </NavbarRight>
         )}
-      </Navbar>
+      </NavbarMain>
       <ContentContainer id="content-container">
         <LeftContainer>
           <ProviderTitleContainer>

src/renderer/src/pages/paintings/DmxapiPage.tsx

@@ -1,6 +1,6 @@
 import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
 import DMXAPIToImg from '@renderer/assets/images/providers/DMXAPI-to-img.webp'
-import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
+import { NavbarCenter, NavbarMain, NavbarRight } from '@renderer/components/app/Navbar'
 import { VStack } from '@renderer/components/Layout'
 import { HStack } from '@renderer/components/Layout'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -645,7 +645,7 @@ const DmxapiPage: FC<{ Options: string[] }> = ({ Options }) => {
 
   return (
     <Container>
-      <Navbar>
+      <NavbarMain>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
@@ -658,7 +658,7 @@ const DmxapiPage: FC<{ Options: string[] }> = ({ Options }) => {
             </Button>
           </NavbarRight>
         )}
-      </Navbar>
+      </NavbarMain>
       <ContentContainer id="content-container">
         <LeftContainer>
           <ProviderTitleContainer>

src/renderer/src/pages/paintings/SiliconPage.tsx

@@ -5,7 +5,7 @@ import ImageSize3_2 from '@renderer/assets/images/paintings/image-size-3-2.svg'
 import ImageSize3_4 from '@renderer/assets/images/paintings/image-size-3-4.svg'
 import ImageSize9_16 from '@renderer/assets/images/paintings/image-size-9-16.svg'
 import ImageSize16_9 from '@renderer/assets/images/paintings/image-size-16-9.svg'
-import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
+import { NavbarCenter, NavbarMain, NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack, VStack } from '@renderer/components/Layout'
 import Scrollbar from '@renderer/components/Scrollbar'
 import TranslateButton from '@renderer/components/TranslateButton'
@@ -354,7 +354,7 @@ const SiliconPage: FC<{ Options: string[] }> = ({ Options }) => {
 
   return (
     <Container>
-      <Navbar>
+      <NavbarMain>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
@@ -367,7 +367,7 @@ const SiliconPage: FC<{ Options: string[] }> = ({ Options }) => {
             </Button>
           </NavbarRight>
         )}
-      </Navbar>
+      </NavbarMain>
       <ContentContainer id="content-container">
         <LeftContainer>
           <SettingTitle style={{ marginBottom: 5 }}>{t('common.provider')}</SettingTitle>

src/renderer/src/pages/paintings/TokenFluxPage.tsx

@@ -1,5 +1,5 @@
 import { PlusOutlined } from '@ant-design/icons'
-import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
+import { NavbarCenter, NavbarMain, NavbarRight } from '@renderer/components/app/Navbar'
 import Scrollbar from '@renderer/components/Scrollbar'
 import TranslateButton from '@renderer/components/TranslateButton'
 import { isMac } from '@renderer/config/constant'
@@ -367,7 +367,7 @@ const TokenFluxPage: FC<{ Options: string[] }> = ({ Options }) => {
 
   return (
     <Container>
-      <Navbar>
+      <NavbarMain>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
@@ -376,7 +376,7 @@ const TokenFluxPage: FC<{ Options: string[] }> = ({ Options }) => {
             </Button>
           </NavbarRight>
         )}
-      </Navbar>
+      </NavbarMain>
       <ContentContainer id="content-container">
         <LeftContainer>
           {/* Provider Section */}

src/renderer/src/pages/settings/AssistantSettings/index.tsx

@@ -80,7 +80,7 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ resolve, tab, ...prop
     <StyledModal
       open={open}
       onOk={onOk}
-      onClose={onCancel}
+      // onClose={onCancel}
       onCancel={onCancel}
       afterClose={afterClose}
       footer={null}

src/renderer/src/pages/settings/SettingsPage.tsx

@@ -1,4 +1,4 @@
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { NavbarCenter, NavbarMain } from '@renderer/components/app/Navbar'
 import ModelSettings from '@renderer/pages/settings/ModelSettings/ModelSettings'
 import {
   Cloud,
@@ -10,11 +10,9 @@ import {
   Package,
   Rocket,
   Settings2,
-  SquareTerminal,
   TextCursorInput,
   Zap
 } from 'lucide-react'
-// 导入useAppSelector
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, Route, Routes, useLocation } from 'react-router-dom'
@@ -24,8 +22,6 @@ import AboutSettings from './AboutSettings'
 import DataSettings from './DataSettings/DataSettings'
 import DisplaySettings from './DisplaySettings/DisplaySettings'
 import GeneralSettings from './GeneralSettings'
-import MCPSettings from './MCPSettings'
-import { McpSettingsNavbar } from './MCPSettings/McpSettingsNavbar'
 import ProvidersList from './ProviderSettings'
 import QuickAssistantSettings from './QuickAssistantSettings'
 import QuickPhraseSettings from './QuickPhraseSettings'
@@ -41,10 +37,9 @@ const SettingsPage: FC = () => {
 
   return (
     <Container>
-      <Navbar>
+      <NavbarMain>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('settings.title')}</NavbarCenter>
-        {pathname.includes('/settings/mcp') && <McpSettingsNavbar />}
-      </Navbar>
+      </NavbarMain>
       <ContentContainer id="content-container">
         <SettingMenus>
           <MenuItemLink to="/settings/provider">
@@ -65,12 +60,6 @@ const SettingsPage: FC = () => {
               {t('settings.websearch.title')}
             </MenuItem>
           </MenuItemLink>
-          <MenuItemLink to="/settings/mcp">
-            <MenuItem className={isRoute('/settings/mcp')}>
-              <SquareTerminal size={18} />
-              {t('settings.mcp.title')}
-            </MenuItem>
-          </MenuItemLink>
           <MenuItemLink to="/settings/general">
             <MenuItem className={isRoute('/settings/general')}>
               <Settings2 size={18} />
@@ -125,7 +114,6 @@ const SettingsPage: FC = () => {
             <Route path="provider" element={<ProvidersList />} />
             <Route path="model" element={<ModelSettings />} />
             <Route path="web-search" element={<WebSearchSettings />} />
-            <Route path="mcp/*" element={<MCPSettings />} />
             <Route path="general" element={<GeneralSettings />} />
             <Route path="display" element={<DisplaySettings />} />
             <Route path="shortcut" element={<ShortcutSettings />} />

src/renderer/src/pages/translate/TranslatePage.tsx

@@ -1,5 +1,5 @@
 import { CheckOutlined, DeleteOutlined, HistoryOutlined, SendOutlined } from '@ant-design/icons'
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { NavbarCenter, NavbarMain } from '@renderer/components/app/Navbar'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import { HStack } from '@renderer/components/Layout'
 import { isEmbeddingModel } from '@renderer/config/models'
@@ -431,8 +431,8 @@ const TranslatePage: FC = () => {
 
   return (
     <Container id="translate-page">
-      <Navbar>
-        <NavbarCenter style={{ borderRight: 'none', gap: 10 }}>
+      <NavbarMain>
+        <NavbarCenter>
           {t('translate.title')}
           <Button
             className="nodrag"
@@ -443,7 +443,7 @@ const TranslatePage: FC = () => {
             onClick={() => setHistoryDrawerVisible(!historyDrawerVisible)}
           />
         </NavbarCenter>
-      </Navbar>
+      </NavbarMain>
       <ContentContainer id="content-container" ref={contentContainerRef} $historyDrawerVisible={historyDrawerVisible}>
         <HistoryContainner $historyDrawerVisible={historyDrawerVisible}>
           <OperationBar>
@@ -606,7 +606,7 @@ const InputContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  border: 1px solid var(--color-border-soft);
+  border: 0.5px solid var(--color-border);
   border-radius: 10px;
   padding-bottom: 5px;
   padding-right: 2px;
@@ -675,7 +675,7 @@ const HistoryContainner = styled.div<{ $historyDrawerVisible: boolean }>`
   transition:
     width 0.2s,
     opacity 0.2s;
-  border: 1px solid var(--color-border-soft);
+  border: 0.5px solid var(--color-border);
   border-radius: 10px;
   margin-right: 15px;
   display: flex;

src/renderer/src/store/index.ts

@@ -50,7 +50,7 @@ const persistedReducer = persistReducer(
   {
     key: 'cherry-studio',
     storage,
-    version: 111,
+    version: 112,
     blacklist: ['runtime', 'messages', 'messageBlocks'],
     migrate
   },

src/renderer/src/store/migrate.ts

@@ -1512,6 +1512,27 @@ const migrateConfig = {
     } catch (error) {
       return state
     }
+  },
+  '112': (state: RootState) => {
+    try {
+      const visibleIcons = state.settings.sidebarIcons.visible
+      if (visibleIcons.includes('discover')) {
+        return state
+      }
+      const filteredIcons = visibleIcons.filter((icon) => icon !== 'agents' && icon !== 'minapp')
+      return {
+        ...state,
+        settings: {
+          ...state.settings,
+          sidebarIcons: {
+            ...state.settings.sidebarIcons,
+            visible: [...filteredIcons, 'discover']
+          }
+        }
+      }
+    } catch (error) {
+      return state
+    }
   }
 }
 

src/renderer/src/store/runtime.ts

@@ -1,12 +1,13 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { AppLogo, UserAvatar } from '@renderer/config/env'
-import type { MinAppType, Topic } from '@renderer/types'
+import type { Assistant, MinAppType, Topic } from '@renderer/types'
 import type { UpdateInfo } from 'builder-util-runtime'
 
 export interface ChatState {
   isMultiSelectMode: boolean
   selectedMessageIds: string[]
   activeTopic: Topic | null
+  activeAssistant: Assistant | null
 }
 
 export interface UpdateState {
@@ -65,7 +66,8 @@ const initialState: RuntimeState = {
   chat: {
     isMultiSelectMode: false,
     selectedMessageIds: [],
-    activeTopic: null
+    activeTopic: null,
+    activeAssistant: null
   }
 }
 
@@ -118,6 +120,9 @@ const runtimeSlice = createSlice({
     },
     setActiveTopic: (state, action: PayloadAction<Topic>) => {
       state.chat.activeTopic = action.payload
+    },
+    setActiveAssistant: (state, action: PayloadAction<Assistant>) => {
+      state.chat.activeAssistant = action.payload
     }
   }
 })
@@ -137,7 +142,8 @@ export const {
   // Chat related actions
   toggleMultiSelectMode,
   setSelectedMessageIds,
-  setActiveTopic
+  setActiveTopic,
+  setActiveAssistant
 } = runtimeSlice.actions
 
 export default runtimeSlice.reducer

src/renderer/src/store/settings.ts

@@ -16,7 +16,15 @@ import { WebDAVSyncState } from './backup'
 
 export type SendMessageShortcut = 'Enter' | 'Shift+Enter' | 'Ctrl+Enter' | 'Command+Enter'
 
-export type SidebarIcon = 'assistants' | 'agents' | 'paintings' | 'translate' | 'minapp' | 'knowledge' | 'files'
+export type SidebarIcon =
+  | 'assistants'
+  | 'agents'
+  | 'paintings'
+  | 'translate'
+  | 'minapp'
+  | 'knowledge'
+  | 'files'
+  | 'discover'
 
 export const DEFAULT_SIDEBAR_ICONS: SidebarIcon[] = [
   'assistants',
@@ -25,7 +33,8 @@ export const DEFAULT_SIDEBAR_ICONS: SidebarIcon[] = [
   'translate',
   'minapp',
   'knowledge',
-  'files'
+  'files',
+  'discover'
 ]
 
 export interface NutstoreSyncRuntime extends WebDAVSyncState {}

src/renderer/src/types/cherryStore.ts

@@ -0,0 +1,52 @@
+export enum CherryStoreType {
+  ASSISTANT = 'Assistant',
+  MINI_APP = 'Mini-App',
+  KNOWLEDGE = 'Knowledge',
+  MCP_SERVER = 'MCP-Server',
+  MODEL_PROVIDER = 'Model-Provider',
+  AGENT = 'Agent'
+}
+export interface CherryStoreBaseItem {
+  id: string
+  title: string
+  description: string
+  categoryId: string
+  subcategoryId: string
+  author: string
+  image: string
+  tags: string[]
+  // rating: number
+  // downloads: string
+  // featured: boolean
+  // requirements: string[]
+}
+
+export interface SubCategoryItem {
+  id: string
+  name: string
+  count?: number // count 是可选的，因为并非所有二级分类都有
+  isActive?: boolean
+}
+
+export interface Category {
+  id: CherryStoreType
+  title: string
+  items: SubCategoryItem[]
+}
+
+export interface AssistantItem extends CherryStoreBaseItem {
+  type: CherryStoreType.ASSISTANT
+  icon?: string
+  prompt?: string
+}
+
+export interface MiniAppItem extends CherryStoreBaseItem {
+  type: CherryStoreType.MINI_APP
+  url: string
+  bodered?: boolean
+  style?: {
+    padding?: number
+  }
+}
+
+export type CherryStoreItem = AssistantItem | MiniAppItem

src/renderer/src/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@renderer/utils/index"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

src/renderer/src/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@renderer/utils/index"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/renderer/src/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@renderer/utils/index"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/renderer/src/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@renderer/utils/index"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/renderer/src/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/renderer/src/ui/dialog.tsx

@@ -0,0 +1,133 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@renderer/utils/index"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/renderer/src/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@renderer/utils/index"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/renderer/src/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@renderer/utils/index"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/renderer/src/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@renderer/utils/index"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/renderer/src/ui/sheet.tsx

@@ -0,0 +1,137 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@renderer/utils/index"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/renderer/src/ui/sidebar.tsx

@@ -0,0 +1,724 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@renderer/hooks/use-mobile"
+import { cn } from "@renderer/utils/index"
+import { Button } from "@renderer/ui/button"
+import { Input } from "@renderer/ui/input"
+import { Separator } from "@renderer/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@renderer/ui/sheet"
+import { Skeleton } from "@renderer/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@renderer/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

src/renderer/src/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@renderer/utils/index"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/renderer/src/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/renderer/src/ui/tabs.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@renderer/utils/index"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/renderer/src/ui/third-party/BlurFade.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { AnimatePresence, motion, MotionProps, useInView, UseInViewOptions, Variants } from 'motion/react'
+import { useRef } from 'react'
+
+type MarginType = UseInViewOptions['margin']
+
+interface BlurFadeProps extends MotionProps {
+  children: React.ReactNode
+  className?: string
+  variant?: {
+    hidden: { y: number }
+    visible: { y: number }
+  }
+  duration?: number
+  delay?: number
+  offset?: number
+  direction?: 'up' | 'down' | 'left' | 'right'
+  inView?: boolean
+  inViewMargin?: MarginType
+  blur?: string
+}
+
+export function BlurFade({
+  children,
+  className,
+  variant,
+  duration = 0.4,
+  delay = 0,
+  offset = 6,
+  direction = 'down',
+  inView = false,
+  inViewMargin = '-50px',
+  blur = '6px',
+  ...props
+}: BlurFadeProps) {
+  const ref = useRef(null)
+  const inViewResult = useInView(ref, { once: true, margin: inViewMargin })
+  const isInView = !inView || inViewResult
+  const defaultVariants: Variants = {
+    hidden: {
+      [direction === 'left' || direction === 'right' ? 'x' : 'y']:
+        direction === 'right' || direction === 'down' ? -offset : offset,
+      opacity: 0,
+      filter: `blur(${blur})`
+    },
+    visible: {
+      [direction === 'left' || direction === 'right' ? 'x' : 'y']: 0,
+      opacity: 1,
+      filter: `blur(0px)`
+    }
+  }
+  const combinedVariants = variant || defaultVariants
+  return (
+    <AnimatePresence>
+      <motion.div
+        ref={ref}
+        initial="hidden"
+        animate={isInView ? 'visible' : 'hidden'}
+        exit="hidden"
+        variants={combinedVariants}
+        transition={{
+          delay: 0.04 + delay,
+          duration,
+          ease: 'easeOut'
+        }}
+        className={className}
+        {...props}>
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  )
+}

src/renderer/src/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@renderer/utils/index"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/renderer/src/ui/vercel-tabs.tsx

@@ -0,0 +1,115 @@
+import { cn } from '@renderer/utils'
+import * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
+
+interface Tab {
+  id: string
+  label: string
+}
+
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  tabs: Tab[]
+  activeTab?: string
+  onTabChange?: (tabId: string) => void
+}
+
+const Tabs = ({
+  ref,
+  className,
+  tabs,
+  activeTab: _,
+  onTabChange,
+  ...props
+}: TabsProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [hoverStyle, setHoverStyle] = useState({})
+  const [activeStyle, setActiveStyle] = useState({ left: '0px', width: '0px' })
+  const tabRefs = useRef<(HTMLDivElement | null)[]>([])
+
+  useEffect(() => {
+    if (hoveredIndex !== null) {
+      const hoveredElement = tabRefs.current[hoveredIndex]
+      if (hoveredElement) {
+        const { offsetLeft, offsetWidth } = hoveredElement
+        setHoverStyle({
+          left: `${offsetLeft}px`,
+          width: `${offsetWidth}px`
+        })
+      }
+    }
+  }, [hoveredIndex])
+
+  useEffect(() => {
+    const activeElement = tabRefs.current[activeIndex]
+    if (activeElement) {
+      const { offsetLeft, offsetWidth } = activeElement
+      setActiveStyle({
+        left: `${offsetLeft}px`,
+        width: `${offsetWidth}px`
+      })
+    }
+  }, [activeIndex])
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      const firstElement = tabRefs.current[0]
+      if (firstElement) {
+        const { offsetLeft, offsetWidth } = firstElement
+        setActiveStyle({
+          left: `${offsetLeft}px`,
+          width: `${offsetWidth}px`
+        })
+      }
+    })
+  }, [])
+
+  return (
+    <div ref={ref} className={cn('relative', className)} {...props}>
+      <div className="relative">
+        {/* Hover Highlight */}
+        <div
+          className="absolute flex h-[30px] items-center rounded-[6px] bg-[#0e0f1114] transition-all duration-300 ease-out dark:bg-[#ffffff1a]"
+          style={{
+            ...hoverStyle,
+            opacity: hoveredIndex !== null ? 1 : 0
+          }}
+        />
+
+        {/* Active Indicator */}
+        <div
+          className="absolute bottom-[-6px] h-[2px] bg-[#0e0f11] transition-all duration-300 ease-out dark:bg-white"
+          style={activeStyle}
+        />
+
+        {/* Tabs */}
+        <div className="relative flex items-center space-x-[6px]">
+          {tabs.map((tab, index) => (
+            <div
+              key={tab.id}
+              ref={(el) => {
+                tabRefs.current[index] = el
+              }}
+              className={cn(
+                'h-[30px] cursor-pointer px-3 py-2 transition-colors duration-300',
+                index === activeIndex ? 'text-[#0e0e10] dark:text-white' : 'text-[#0e0f1199] dark:text-[#ffffff99]'
+              )}
+              onMouseEnter={() => setHoveredIndex(index)}
+              onMouseLeave={() => setHoveredIndex(null)}
+              onClick={() => {
+                setActiveIndex(index)
+                onTabChange?.(tab.id)
+              }}>
+              <div className="flex h-full items-center justify-center text-sm leading-5 font-medium whitespace-nowrap">
+                {tab.label}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+Tabs.displayName = 'Tabs'
+
+export { Tabs }