feat(style): add driver icons and disk usage (#212)

* feat(style): add driver icons and disk usage

* fix: wrong unit

* chore

* feat(style): add disk usage on the manage page

Author: KirCute

src/lang/en/settings.json

@@ -27,6 +27,7 @@
   "ftp_tls_private_key_path": "Ftp tls private key path",
   "ftp_tls_public_cert_path": "Ftp tls public cert path",
   "hide_files": "Hide files",
+  "hide_storage_details": "Hide storage details",
   "home_container": "Home container",
   "home_containers": {
     "hope_container": "Hope container",

src/lang/en/storages.json

@@ -5,6 +5,7 @@
     "driver": "Driver",
     "order": "Order",
     "order-tips": "Use to sort",
+    "usage": "Usage",
     "status": "Status",
     "remark": "Remark",
     "cache_expiration": "Cache Expiration",

src/pages/home/folder/ListItem.tsx

@@ -1,4 +1,11 @@
-import { HStack, Icon, Text } from "@hope-ui/solid"
+import {
+  HStack,
+  Icon,
+  Progress,
+  ProgressIndicator,
+  ProgressLabel,
+  Text,
+} from "@hope-ui/solid"
 import { Motion } from "solid-motionone"
 import { useContextMenu } from "solid-contextmenu"
 import { batch, Show } from "solid-js"
@@ -11,8 +18,17 @@ import {
   OrderBy,
   selectIndex,
 } from "~/store"
-import { ObjType, StoreObj } from "~/types"
-import { bus, formatDate, getFileSize, hoverColor } from "~/utils"
+import { MountDetails, ObjType, StoreObj } from "~/types"
+import {
+  bus,
+  formatDate,
+  getFileSize,
+  hoverColor,
+  showDiskUsage,
+  usedPercentage,
+  toReadableUsage,
+  nearlyFull,
+} from "~/utils"
 import { getIconByObj } from "~/utils/icon"
 import { ItemCheckbox, useSelectWithMouse } from "./helper"
 
@@ -145,9 +161,37 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
             {props.obj.name}
           </Text>
         </HStack>
-        <Text class="size" w={cols[1].w} textAlign={cols[1].textAlign as any}>
-          {getFileSize(props.obj.size)}
-        </Text>
+        <Show
+          fallback={
+            <Text
+              class="size"
+              w={cols[1].w}
+              textAlign={cols[1].textAlign as any}
+            >
+              {getFileSize(props.obj.size)}
+            </Text>
+          }
+          when={showDiskUsage(props.obj.mount_details)}
+        >
+          <Progress
+            w={cols[1].w}
+            class="disk-usage-percentage"
+            trackColor="$info3"
+            rounded="$full"
+            size="md"
+            value={usedPercentage(props.obj.mount_details!)}
+          >
+            <ProgressIndicator
+              color={
+                nearlyFull(props.obj.mount_details!) ? "$danger6" : "$info6"
+              }
+              rounded="$md"
+            />
+            <ProgressLabel class="disk-usage-text">
+              {toReadableUsage(props.obj.mount_details!)}
+            </ProgressLabel>
+          </Progress>
+        </Show>
         <Text
           class="modified"
           display={{ "@initial": "none", "@md": "inline" }}

src/pages/manage/storages/Storage.tsx

@@ -8,11 +8,24 @@ import {
   Tr,
   useColorModeValue,
   VStack,
+  Progress,
+  ProgressIndicator,
+  ProgressLabel,
 } from "@hope-ui/solid"
+import { Show } from "solid-js"
 import { useFetch, useRouter, useT } from "~/hooks"
 import { getMainColor } from "~/store"
-import { PEmptyResp, Storage } from "~/types"
-import { handleResp, handleRespWithNotifySuccess, notify, r } from "~/utils"
+import { MountDetails, PEmptyResp, Storage } from "~/types"
+import {
+  handleResp,
+  handleRespWithNotifySuccess,
+  notify,
+  r,
+  showDiskUsage,
+  usedPercentage,
+  toReadableUsage,
+  nearlyFull,
+} from "~/utils"
 import { DeletePopover } from "../common/DeletePopover"
 
 interface StorageProps {
@@ -70,6 +83,28 @@ function StorageOp(props: StorageProps) {
   )
 }
 
+function StorageUsage(props: { details: MountDetails | undefined }) {
+  return (
+    <Show when={props.details}>
+      <Progress
+        class="disk-usage-percentage"
+        trackColor="$info3"
+        rounded="$full"
+        size="md"
+        value={usedPercentage(props.details!)}
+      >
+        <ProgressIndicator
+          color={nearlyFull(props.details!) ? "$danger6" : "$info6"}
+          rounded="$md"
+        />
+        <ProgressLabel class="disk-usage-text">
+          {toReadableUsage(props.details!)}
+        </ProgressLabel>
+      </Progress>
+    </Show>
+  )
+}
+
 export function StorageGridItem(props: StorageProps) {
   const t = useT()
   return (
@@ -97,6 +132,15 @@ export function StorageGridItem(props: StorageProps) {
         <Badge colorScheme="info">
           {t(`drivers.drivers.${props.storage.driver}`)}
         </Badge>
+        <Show when={props.storage.mount_details}>
+          <Badge
+            colorScheme={
+              nearlyFull(props.storage.mount_details!) ? "danger" : "success"
+            }
+          >
+            {toReadableUsage(props.storage.mount_details!)}
+          </Badge>
+        </Show>
       </HStack>
       <HStack>
         <Text>{t("storages.common.status")}:&nbsp;</Text>
@@ -125,6 +169,9 @@ export function StorageListItem(props: StorageProps) {
       <Td>{props.storage.mount_path}</Td>
       <Td>{t(`drivers.drivers.${props.storage.driver}`)}</Td>
       <Td>{props.storage.order}</Td>
+      <Td>
+        <StorageUsage details={props.storage.mount_details} />
+      </Td>
       <Td>
         {t(
           `storages.table_fields.status.${props.storage.status}`,

src/pages/manage/storages/Storages.tsx

@@ -162,7 +162,14 @@ const Storages = () => {
               <Thead>
                 <Tr>
                   <For
-                    each={["mount_path", "driver", "order", "status", "remark"]}
+                    each={[
+                      "mount_path",
+                      "driver",
+                      "order",
+                      "usage",
+                      "status",
+                      "remark",
+                    ]}
                   >
                     {(title) => <Th>{t(`storages.common.${title}`)}</Th>}
                   </For>

src/pages/manage/tasks/Task.tsx

@@ -143,20 +143,14 @@ export const Task = (props: TaskAttribute & TasksProps & TaskLocalSetter) => {
   let speedText = "-"
   const parseSpeedText = (timeDelta: number, lengthDelta: number) => {
     let delta = lengthDelta / timeDelta
-    let unit = "bytes/s"
-    if (delta > 1024) {
-      delta /= 1024
-      unit = "KB/s"
+    const units = ["B/s", "KB/s", "MB/s", "GB/s", "TB/s"]
+    const k = 1000
+    let unit_i = 0
+    while (unit_i < units.length - 1 && delta >= k) {
+      delta /= k
+      unit_i++
     }
-    if (delta > 1024) {
-      delta /= 1024
-      unit = "MB/s"
-    }
-    if (delta > 1024) {
-      delta /= 1024
-      unit = "GB/s"
-    }
-    return `${delta.toFixed(2)} ${unit}`
+    return `${delta.toFixed(2)} ${units[unit_i]}`
   }
   if (props.done) {
     if (

src/types/obj.ts

@@ -20,6 +20,7 @@ export interface Obj {
   thumb: string
   type: ObjType
   path: string
+  mount_details?: MountDetails
 }
 
 export type StoreObj = Obj & {
@@ -48,4 +49,10 @@ export type ArchiveMeta = {
   sign: string
 }
 
+export type MountDetails = {
+  total_space?: number
+  free_space?: number
+  driver_name: string
+}
+
 export type ArchiveList = PageResp<Obj>

src/types/storage.ts

@@ -1,3 +1,5 @@
+import { MountDetails } from "./obj"
+
 export enum OrderBy {
   Name = "name",
   Size = "size",
@@ -38,6 +40,7 @@ export interface Storage {
   web_proxy: boolean
   webdav_policy: WebdavPolicy
   disabled: boolean
+  mount_details?: MountDetails
 }
 
 export type Addition = Record<string, string | boolean | number>

src/utils/icon.ts

@@ -12,6 +12,7 @@ import {
   BsWindows,
   BsFileEarmarkZipFill,
   BsMarkdownFill,
+  BsDeviceHddFill,
 } from "solid-icons/bs"
 import {
   FaSolidDatabase,
@@ -20,7 +21,7 @@ import {
   FaSolidLink,
 } from "solid-icons/fa"
 import { IoFolder } from "solid-icons/io"
-import { ImAndroid } from "solid-icons/im"
+import { ImAndroid, ImGoogleDrive, ImOnedrive } from "solid-icons/im"
 import { Obj, ObjType } from "~/types"
 import { ext } from "./path"
 import {
@@ -29,6 +30,8 @@ import {
 } from "~/components"
 import { SiAsciinema } from "solid-icons/si"
 import { isArchive } from "~/store/archive"
+import { AiFillGithub } from "solid-icons/ai"
+import { RiLogosNeteaseCloudMusicFill } from "solid-icons/ri"
 
 const iconMap = {
   "dmg,ipa,plist,tipa": BsApple,
@@ -89,6 +92,31 @@ export const getIconByTypeAndName = (type: number, name: string) => {
   }
 }
 
-export const getIconByObj = (obj: Pick<Obj, "type" | "name">) => {
+export const getIconByDriver = (driverName: string) => {
+  switch (driverName) {
+    case "Local":
+      return BsDeviceHddFill
+    case "GitHub API":
+    case "GitHub Releases":
+      return AiFillGithub
+    case "GoogleDrive":
+      return ImGoogleDrive
+    case "NeteaseMusic":
+      return RiLogosNeteaseCloudMusicFill
+    case "Onedrive":
+    case "OnedriveApp":
+    case "Onedrive Sharelink":
+      return ImOnedrive
+    default:
+      return IoFolder
+  }
+}
+
+export const getIconByObj = (
+  obj: Pick<Obj, "type" | "name" | "mount_details">,
+) => {
+  if (obj.mount_details) {
+    return getIconByDriver(obj.mount_details.driver_name)
+  }
   return getIconByTypeAndName(obj.type, obj.name)
 }

src/utils/index.ts

@@ -12,3 +12,4 @@ export * from "./api"
 export * from "./hash"
 export * from "./compatibility"
 export * from "./share"
+export * from "./storage"