fix: manage hidden groups and other minor style

README.md

@@ -1,18 +1,20 @@
-# zashboard README
+# zashboard
 
-## 🌐 **Online**
+<img src="pc.png" height="350">   <img src="mobile.png" height="350">
+
+## **Online**
 You can access the online zashboard at the following link:
 - [Online zashboard](http://board.zash.run.place)
 
-## 📥 **Download**
+## **Download**
 For **Mihomo** users:
 The **Upgrade Dashboard** function utilizes the API from Mihomo core. Ensure you set the [configuration URL](https://wiki.metacubex.one/config/general/#_9) to the zashboard's URL.
 
 You can download the zashboard files here:
 - [dist.zip (7.64MB)](https://github.com/Zephyruso/zashboard/releases/latest/download/dist.zip) – Includes better font-loading experience.
 - [dist-cdn-fonts.zip (1.27MB)](https://github.com/Zephyruso/zashboard/releases/latest/download/dist-cdn-fonts.zip) – Optimized for devices with limited storage.
 
-## 🐳 **Docker Setup**
+## **Docker Setup**
 To run zashboard via Docker, use the following command:
 
 ```

src/components/common/DialogWrapper.vue

@@ -4,13 +4,15 @@
     class="modal"
     @close="isOpen = false"
   >
-    <div class="modal-box relative max-h-[90vh] overflow-hidden p-0 max-md:max-h-[70vh]">
+    <div class="modal-box relative max-h-[90dvh] overflow-hidden p-0 max-md:max-h-[70dvh]">
       <form method="dialog">
         <button class="btn btn-circle btn-ghost btn-xs absolute right-1 top-1 z-10 outline-none">
           <XMarkIcon class="h-4 w-4" />
         </button>
       </form>
-      <div :class="['max-h-[90vh] overflow-y-auto max-md:max-h-[70vh]', noPadding ? 'p-0' : 'p-4']">
+      <div
+        :class="['max-h-[90dvh] overflow-y-auto max-md:max-h-[70dvh]', noPadding ? 'p-0' : 'p-4']"
+      >
         <slot></slot>
       </div>
     </div>

src/components/connections/ConnectionDetails.vue

@@ -3,7 +3,7 @@
     v-model="connectionDetailModalShow"
     :no-padding="true"
   >
-    <div class="flex h-full max-h-[69vh] flex-col overflow-hidden py-4 md:max-h-[89vh]">
+    <div class="flex h-full max-h-[69dvh] flex-col overflow-hidden py-4 md:max-h-[89dvh]">
       <VueJsonPretty
         :data="infoConn"
         class="overflow-y-auto px-4"

src/components/connections/ConnectionTable.vue

@@ -112,19 +112,21 @@
             >
               <template v-if="cell.column.getIsGrouped()">
                 <template v-if="rows[virtualRow.index].getCanExpand()">
-                  <MagnifyingGlassMinusIcon
-                    v-if="rows[virtualRow.index].getIsExpanded()"
-                    class="-mt-1 mr-1 inline-block h-4 w-4"
-                  />
-                  <MagnifyingGlassPlusIcon
-                    v-else
-                    class="-mt-1 mr-1 inline-block h-4 w-4"
-                  />
-                  <FlexRender
-                    :render="cell.column.columnDef.cell"
-                    :props="cell.getContext()"
-                  />
-                  <span> ({{ rows[virtualRow.index].subRows.length }}) </span>
+                  <div class="flex items-center">
+                    <MagnifyingGlassMinusIcon
+                      v-if="rows[virtualRow.index].getIsExpanded()"
+                      class="mr-1 inline-block h-4 w-4"
+                    />
+                    <MagnifyingGlassPlusIcon
+                      v-else
+                      class="mr-1 inline-block h-4 w-4"
+                    />
+                    <FlexRender
+                      :render="cell.column.columnDef.cell"
+                      :props="cell.getContext()"
+                    />
+                    <span class="ml-1"> ({{ rows[virtualRow.index].subRows.length }}) </span>
+                  </div>
                 </template>
               </template>
               <FlexRender

src/components/proxies/ProxyGroupForMobile.vue

@@ -13,10 +13,13 @@
       class="card overflow-hidden will-change-[height,width,transform]"
       :class="[
         activeMode ? `fixed z-50` : 'absolute left-0 top-0 h-auto w-full',
-        modalMode && 'max-h-[50vh] w-[96vw]',
         transitionAll && 'transition-all duration-200',
       ]"
       :style="[
+        modalMode && {
+          'max-height': '50dvh',
+          width: 'calc(100vw - 1rem)',
+        },
         activeMode && {
           '--tw-bg-opacity': 1,
         },
@@ -44,7 +47,7 @@
           {{ proxyGroup.now }}
         </div>
 
-        <div class="flex h-4 justify-between gap-1">
+        <div class="flex h-4 items-center justify-between gap-1">
           <span class="text-xs text-base-content/60">
             {{ proxyGroup.type }} ({{ proxiesCount }})
           </span>
@@ -62,6 +65,7 @@
               class="h-3 w-3"
             />
           </button>
+          <div class="flex-1"></div>
           <LatencyTag
             :class="twMerge('z-10 bg-base-200/40 hover:shadow')"
             :loading="isLatencyTesting"

src/store/settings.ts

@@ -16,7 +16,7 @@ import type { SourceIPLabel } from '@/types'
 import { useStorage } from '@vueuse/core'
 import { isEmpty } from 'lodash'
 import { v4 as uuid } from 'uuid'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 // global
 export const theme = useStorage<string>('config/theme', 'default')
@@ -84,7 +84,7 @@ export const minProxyCardWidth = useStorage<number>(
   'config/min-proxy-card-width',
   getMinCardWidth(proxyCardSize.value),
 )
-export const manageHiddenGroup = ref(false)
+export const manageHiddenGroup = useStorage('config/manage-hidden-group-mode', false)
 
 export const displayGlobalByMode = useStorage('config/display-global-by-mode', true)
 export const iconSize = useStorage('config/icon-size', 14)