From ba918dc8b92d56b163d25750ceee2c00c87a0d36 Mon Sep 17 00:00:00 2001
From: Quincy <69751197+dqygit@users.noreply.github.com>
Date: Tue, 3 Mar 2026 16:01:54 +0800
Subject: [PATCH] style(sidebar): improve mobile responsive layout for
 multi-level sidebar (#172)

---
 .../web/src/components/create-model/index.vue |  2 +-
 .../ToggleSide.vue                            | 13 +++
 .../master-detail-sidebar-layout/index.vue    | 11 ++-
 packages/web/src/main.ts                      | 99 ++-----------------
 packages/web/src/pages/bots/index.vue         |  8 +-
 .../src/pages/chat/components/chat-area.vue   | 29 +++---
 packages/web/src/pages/usage/index.vue        |  2 +-
 7 files changed, 48 insertions(+), 116 deletions(-)
 create mode 100644 packages/web/src/components/master-detail-sidebar-layout/ToggleSide.vue

diff --git a/packages/web/src/components/create-model/index.vue b/packages/web/src/components/create-model/index.vue
index b716eedf..27d7a383 100644
--- a/packages/web/src/components/create-model/index.vue
+++ b/packages/web/src/components/create-model/index.vue
@@ -365,7 +365,7 @@ async function addModel() {
         }
         return updateModelByLegacyModelID({ modelId: fallback!.model_id, data: payload as any })
       }
-      return createModel(payload as any)
+      return createModel(payload)
     },
     {
       fallbackMessage: t('common.saveFailed'),
diff --git a/packages/web/src/components/master-detail-sidebar-layout/ToggleSide.vue b/packages/web/src/components/master-detail-sidebar-layout/ToggleSide.vue
new file mode 100644
index 00000000..72df5d3a
--- /dev/null
+++ b/packages/web/src/components/master-detail-sidebar-layout/ToggleSide.vue
@@ -0,0 +1,13 @@
+<template>
+  <FontAwesomeIcon
+    :icon="['fas', 'bars']"
+    :class="`m-auto ${isMobile?'':'hidden!'}`"
+    @click="toggleSidebar"
+  />
+</template>
+<script setup lang="ts">
+import { useSidebar } from '@memoh/ui'
+
+const { toggleSidebar, isMobile } = useSidebar()
+
+</script>
diff --git a/packages/web/src/components/master-detail-sidebar-layout/index.vue b/packages/web/src/components/master-detail-sidebar-layout/index.vue
index 34a9baee..81a2668d 100644
--- a/packages/web/src/components/master-detail-sidebar-layout/index.vue
+++ b/packages/web/src/components/master-detail-sidebar-layout/index.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="w-full mx-auto">
     <div class="model-select">
-      <SidebarProvider
-        :open="true"
-        class="min-h-[initial]! flex **:data-[sidebar=sidebar]:bg-transparent absolute inset-0"
+      <SidebarProvider   
+        class="min-h-[initial]! flex **:data-[sidebar=sidebar]:bg-transparent absolute inset-0"   
       >
         <Sidebar class="h-full relative top-0">
           <SidebarHeader>
@@ -19,6 +18,9 @@
         <section class="flex-1 min-w-0 h-full">
           <slot name="detail" />
         </section>
+        <div class="fixed right-4 top-0 h-12 flex z-1000">        
+          <ToggleSide />
+        </div>
       </SidebarProvider>
     </div>
   </div>
@@ -30,6 +32,7 @@ import {
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  SidebarProvider,
+  SidebarProvider
 } from '@memoh/ui'
+import ToggleSide from './ToggleSide.vue'
 </script>
diff --git a/packages/web/src/main.ts b/packages/web/src/main.ts
index 32478de9..b27ab34a 100644
--- a/packages/web/src/main.ts
+++ b/packages/web/src/main.ts
@@ -17,104 +17,19 @@ import 'katex/dist/katex.min.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
-  faGear,
-  faPaperPlane,
-  faRobot,
-  faMagnifyingGlass,
-  faPlus,
-  faSpinner,
-  faCubes,
-  faPenToSquare,
-  faCheck,
-  faEye,
-  faEyeSlash,
-  faChevronLeft,
-  faChevronRight,
-  faChevronDown,
-  faEllipsisVertical,
-  faNetworkWired,
-  faPlug,
-  faUser,
-  faArrowLeft,
-  faCommentDots,
-  faHashtag,
-  faGlobe,
-  faBuilding,
-  faBell,
-  faRotate,
-  faFileLines,
-  faBrain,
-  faCopy,
-  faCompress,
-  faPaperclip,
-  faXmark,
-  faImage,
-  faFile,
-  faMusic,
-  faVideo,
-  faBolt,
-  faEnvelope,
-  faChartLine,
-  faFolderOpen,
+  fas
 } from '@fortawesome/free-solid-svg-icons'
+
 import {
-  faRectangleList,
-  faTrashCan,
-  faComments,
-  faComment,
+  far
 } from '@fortawesome/free-regular-svg-icons'
-import { faSlack, faBrave, faGoogle, faMicrosoft, faYandex } from '@fortawesome/free-brands-svg-icons'
+import { fab } from '@fortawesome/free-brands-svg-icons'
 import { customSearchIcons } from './components/search-provider-logo/custom-icons'
 
 library.add(
-  faGear,
-  faPaperPlane,
-  faRobot,
-  faMagnifyingGlass,
-  faPlus,
-  faSpinner,
-  faCubes,
-  faPenToSquare,
-  faCheck,
-  faEye,
-  faEyeSlash,
-  faChevronLeft,
-  faChevronRight,
-  faChevronDown,
-  faEllipsisVertical,
-  faNetworkWired,
-  faPlug,
-  faUser,
-  faArrowLeft,
-  faCommentDots,
-  faHashtag,
-  faGlobe,
-  faBuilding,
-  faBell,
-  faRotate,
-  faFileLines,
-  faBrain,
-  faCopy,
-  faCompress,
-  faPaperclip,
-  faXmark,
-  faImage,
-  faFile,
-  faMusic,
-  faVideo,
-  faBolt,
-  faRectangleList,
-  faTrashCan,
-  faComments,
-  faComment,
-  faSlack,
-  faBrave,
-  faGoogle,
-  faMicrosoft,
-  faEnvelope,
-  faChartLine,
-  faFolderOpen,
-  faYandex,
+  far,
+  fab,
+  fas,
   ...customSearchIcons,
 )
 
diff --git a/packages/web/src/pages/bots/index.vue b/packages/web/src/pages/bots/index.vue
index bfa63687..092c59c3 100644
--- a/packages/web/src/pages/bots/index.vue
+++ b/packages/web/src/pages/bots/index.vue
@@ -1,11 +1,11 @@
 <template>
   <section class="p-4  mx-auto">
     <!-- Header: search + create -->
-    <div class="flex items-center justify-between mb-6">
-      <h2 class="text-xl font-semibold tracking-tight">
+    <div class="flex items-center justify-between mb-6 flex-wrap">
+      <h2 class="text-xl font-semibold tracking-tight max-md:hidden">
         {{ $t('bots.title') }}
       </h2>
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-3 ">
         <div class="relative">
           <FontAwesomeIcon
             :icon="['fas', 'magnifying-glass']"
@@ -25,7 +25,7 @@
     <div
       v-if="filteredBots.length > 0"
       class="grid gap-4"
-      style="grid-template-columns:repeat(auto-fill,minmax(300px,calc(25% - 1em)))!important"
+      style="grid-template-columns:repeat(auto-fill,minmax(400px,calc(25% - 1em)))!important"
     >
       <BotCard
         v-for="bot in filteredBots"
diff --git a/packages/web/src/pages/chat/components/chat-area.vue b/packages/web/src/pages/chat/components/chat-area.vue
index 4a1d84f6..c684befb 100644
--- a/packages/web/src/pages/chat/components/chat-area.vue
+++ b/packages/web/src/pages/chat/components/chat-area.vue
@@ -103,9 +103,10 @@
             <InputGroup>
               <InputGroupTextarea
                 v-model="inputText"
-                class="pr-24 max-h-15 resize-none"
+                class=" max-h-15 resize-none break-all!"
                 :placeholder="activeChatReadOnly ? $t('chat.readonlyHint') : $t('chat.inputPlaceholder')"
                 :disabled="!currentBotId || activeChatReadOnly"
+                style="scrollbar-width: none;"
                 @keydown.enter.exact="handleKeydown"
                 @paste="handlePaste"
               />
@@ -127,6 +128,19 @@
                     class="size-3.5"
                   />
                 </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  :disabled="!currentBotId"
+                  :aria-label="$t('chat.files')"
+                  @click="fileManagerOpen = true"
+                >
+                  <FontAwesomeIcon
+                    :icon="['fas', 'folder-open']"
+                    class="size-3.5"
+                  />
+                </Button>
                 <Button
                   v-if="!streaming"
                   type="button"
@@ -153,19 +167,6 @@
                     class="size-3.5 animate-spin"
                   />
                 </Button>
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="ghost"
-                  :disabled="!currentBotId"
-                  :aria-label="$t('chat.files')"
-                  @click="fileManagerOpen = true"
-                >
-                  <FontAwesomeIcon
-                    :icon="['fas', 'folder-open']"
-                    class="size-3.5"
-                  />
-                </Button>
               </InputGroupAddon>
             </InputGroup>
           </section>
diff --git a/packages/web/src/pages/usage/index.vue b/packages/web/src/pages/usage/index.vue
index 1d1acb63..38660318 100644
--- a/packages/web/src/pages/usage/index.vue
+++ b/packages/web/src/pages/usage/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-6 space-y-6 max-w-7xl mx-auto">
+  <div class="p-6 space-y-6  mx-auto">
     <div class="flex items-center justify-between">
       <h1 class="text-2xl font-semibold tracking-tight">
         {{ $t('usage.title') }}