enhancement: all platform layout (#5119)

* enhancement: conditional layout leftpanel for windows

* chore: calculate height leftpanel windows

* chore: enhance calc left panel height

* enhancement minor ui

* Update web-app/src/routes/settings/hardware.tsx

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

---------

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

src-tauri/tauri.conf.json

@@ -29,7 +29,7 @@
         "decorations": true,
         "titleBarStyle": "Overlay",
         "windowEffects": {
-          "effects": ["fullScreenUI", "mica", "blur", "acrylic"],
+          "effects": ["fullScreenUI", "mica", "tabbed", "blur", "acrylic"],
           "state": "active",
           "radius": 8
         }
@@ -50,9 +50,7 @@
         "enable": true,
         "scope": {
           "requireLiteralLeadingDot": false,
-          "allow": [
+          "allow": ["**/*"]
-            "**/*"
-          ]
         }
       }
     }
@@ -74,13 +72,7 @@
   },
   "bundle": {
     "active": true,
-    "targets": [
+    "targets": ["nsis", "app", "dmg", "deb", "appimage"],
-      "nsis",
-      "app",
-      "dmg",
-      "deb",
-      "appimage"
-    ],
     "createUpdaterArtifacts": false,
     "icon": [
       "icons/32x32.png",

web-app/src/containers/LeftPanel.tsx

@@ -102,7 +102,7 @@ const LeftPanel = () => {
           : 'w-0 absolute -top-100 -left-100 visibility-hidden'
       )}
     >
-      <div className="relative h-8">
+      <div className="relative h-10">
         <button
           className="absolute top-1/2 right-0 -translate-y-1/2 z-20"
           onClick={() => setLeftPanel(!open)}
@@ -111,11 +111,8 @@ const LeftPanel = () => {
             <IconLayoutSidebar size={18} className="text-left-panel-fg" />
           </div>
         </button>
-      </div>
+        {!IS_MACOS && (
-
+          <div className="relative top-1.5 mb-4 mx-1 mt-1 w-[calc(100%-32px)] z-50">
-      <div className="flex flex-col justify-between h-[calc(100%-32px)] mt-0">
-        <div className="flex flex-col justify-between h-full">
-          <div className="relative mb-4 mx-1 mt-2">
             <IconSearch className="absolute size-4 top-1/2 left-2 -translate-y-1/2 text-left-panel-fg/50" />
             <input
               type="text"
@@ -133,6 +130,31 @@ const LeftPanel = () => {
               </button>
             )}
           </div>
+        )}
+      </div>
+
+      <div className="flex flex-col justify-between h-[calc(100%-42px)] mt-0">
+        <div className="flex flex-col justify-between h-full">
+          {IS_MACOS && (
+            <div className="relative mb-4 mx-1 mt-1">
+              <IconSearch className="absolute size-4 top-1/2 left-2 -translate-y-1/2 text-left-panel-fg/50" />
+              <input
+                type="text"
+                placeholder={t('common.search')}
+                className="w-full pl-7 pr-8 py-1 bg-left-panel-fg/10 rounded text-left-panel-fg focus:outline-none focus:ring-1 focus:ring-left-panel-fg/10"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+              {searchTerm && (
+                <button
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-left-panel-fg/70 hover:text-left-panel-fg"
+                  onClick={() => setSearchTerm('')}
+                >
+                  <IconX size={14} />
+                </button>
+              )}
+            </div>
+          )}
           <div className="flex flex-col w-full h-full overflow-hidden">
             <div className="h-full overflow-y-auto overflow-x-hidden">
               {favoritedThreads.length > 0 && (

web-app/src/routes/settings/hardware.tsx

@@ -268,8 +268,9 @@ function Hardware() {
               {hardwareData.cpu?.instructions.join(', ').length > 0 && (
                 <CardItem
                   title="Instructions"
+                  column={hardwareData.cpu?.instructions.length > 6}
                   actions={
-                    <span className="text-main-view-fg/80">
+                    <span className="text-main-view-fg/80 break-words">
                       {hardwareData.cpu?.instructions?.join(', ')}
                     </span>
                   }
@@ -315,7 +316,8 @@ function Hardware() {
                   <div className="flex items-center gap-2">
                     <Progress
                       value={
-                        ((hardwareData.ram?.total - hardwareData.ram?.available) /
+                        ((hardwareData.ram?.total -
+                          hardwareData.ram?.available) /
                           hardwareData.ram?.total) *
                         100
                       }
@@ -323,7 +325,8 @@ function Hardware() {
                     />
                     <span className="text-main-view-fg/80">
                       {(
-                        ((hardwareData.ram?.total - hardwareData.ram?.available) /
+                        ((hardwareData.ram?.total -
+                          hardwareData.ram?.available) /
                           hardwareData.ram?.total) *
                         100
                       ).toFixed(2)}

web-app/src/routes/system-monitor.tsx

@@ -206,7 +206,9 @@ function SystemMonitor() {
                     <span className="font-semibold text-main-view-fg">
                       {gpu.name}
                     </span>
-                    <div className="bg-green-500/20">Active</div>
+                    <div className="bg-green-500/20 px-2 py-1 rounded-sm">
+                      Active
+                    </div>
                   </div>
                   <div className="flex flex-col gap-2 mt-3">
                     <div className="flex justify-between items-center">
@@ -238,18 +240,7 @@ function SystemMonitor() {
                           ((gpu.total_vram - gpu.free_vram) / gpu.total_vram) *
                           100
                         }
-                        className={`h-2 w-full ${
+                        className="h-2 w-full"
-                          ((gpu.total_vram - gpu.free_vram) / gpu.total_vram) *
-                            100 >
-                          80
-                            ? 'bg-red-500/30'
-                            : ((gpu.total_vram - gpu.free_vram) /
-                                  gpu.total_vram) *
-                                  100 >
-                                50
-                              ? 'bg-yellow-500/30'
-                              : 'bg-green-500/30'
-                        }`}
                       />
                     </div>
                   </div>