style(sidebar): improve mobile responsive layout for multi-level sidebar (#172)

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'),

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>

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>

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,
 )
 

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"

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>

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') }}