feat: add dynamic message for selected and total object counts (#38)

Author: Seven66677731

src/lang/en/home.json

@@ -2,7 +2,15 @@
   "obj": {
     "name": "Name",
     "size": "Size",
-    "modified": "Modified"
+    "modified": "Modified",
+    "count": {
+      "count": "{{folders}} folders, {{files}} files in total",
+      "count_folders": "{{folders}} folders in total",
+      "count_files": "{{files}} files in total",
+      "selected": "{{folders}} folders, {{files}} files selected",
+      "selected_folders": "{{folders}} folders selected",
+      "selected_files": "{{files}} files selected"
+    }
   },
   "preview": {
     "download": "Download",

src/pages/home/folder/Grid.tsx

@@ -1,30 +1,35 @@
-import { Grid } from "@hope-ui/solid"
+import { Box, Grid, Text } from "@hope-ui/solid"
 import { For } from "solid-js"
 import { GridItem } from "./GridItem"
 import "lightgallery/css/lightgallery-bundle.css"
-import { local, objStore } from "~/store"
+import { countMsg, local, objStore } from "~/store"
 import { useSelectWithMouse } from "./helper"
 
 const GridLayout = () => {
   const { isMouseSupported, registerSelectContainer, captureContentMenu } =
     useSelectWithMouse()
   registerSelectContainer()
   return (
-    <Grid
-      oncapture:contextmenu={captureContentMenu}
-      class="viselect-container"
-      w="$full"
-      gap="$1"
-      templateColumns={`repeat(auto-fill, minmax(${
-        parseInt(local["grid_item_size"]) + 20
-      }px,1fr))`}
-    >
-      <For each={objStore.objs}>
-        {(obj, i) => {
-          return <GridItem obj={obj} index={i()} />
-        }}
-      </For>
-    </Grid>
+    <>
+      <Box w="100%" textAlign="left" pl="$2">
+        <Text>{countMsg()}</Text>
+      </Box>
+      <Grid
+        oncapture:contextmenu={captureContentMenu}
+        class="viselect-container"
+        w="$full"
+        gap="$1"
+        templateColumns={`repeat(auto-fill, minmax(${
+          parseInt(local["grid_item_size"]) + 20
+        }px,1fr))`}
+      >
+        <For each={objStore.objs}>
+          {(obj, i) => {
+            return <GridItem obj={obj} index={i()} />
+          }}
+        </For>
+      </Grid>
+    </>
   )
 }
 

src/pages/home/folder/Images.tsx

@@ -1,9 +1,9 @@
-import { Flex, Grid, Heading, VStack } from "@hope-ui/solid"
+import { Box, Flex, Grid, Heading, Text, VStack } from "@hope-ui/solid"
 import { For, Show, createMemo } from "solid-js"
 import { ImageItem } from "./ImageItem"
-import { local, objStore } from "~/store"
+import { countMsg, local, objStore } from "~/store"
 import { GridItem } from "./GridItem"
-import { StoreObj } from "~/types"
+import { ObjType, StoreObj } from "~/types"
 import { useT } from "~/hooks"
 import { useSelectWithMouse } from "./helper"
 
@@ -33,6 +33,9 @@ const ImageLayout = (props: { images: StoreObj[] }) => {
       spacing="$2"
       w="$full"
     >
+      <Box w="100%" textAlign="left" pl="$2">
+        <Text>{countMsg(ObjType.IMAGE)}</Text>
+      </Box>
       <Show when={local["show_folder_in_image_view"] === "top"}>
         {folders()}
       </Show>

src/pages/home/folder/List.tsx

@@ -1,9 +1,17 @@
 import { HStack, VStack, Text } from "@hope-ui/solid"
-import { batch, createEffect, createSignal, For, Show } from "solid-js"
+import {
+  batch,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  Show,
+} from "solid-js"
 import { useT } from "~/hooks"
 import {
   allChecked,
   checkboxOpen,
+  countMsg,
   isIndeterminate,
   objStore,
   selectAll,
@@ -26,6 +34,7 @@ export const ListTitle = (props: {
       props.sortCallback(orderBy()!, reverse())
     }
   })
+
   const itemProps = (col: Col) => {
     return {
       fontWeight: "bold",
@@ -58,6 +67,7 @@ export const ListTitle = (props: {
           />
         </Show>
         <Text {...itemProps(cols[0])}>{t(`home.obj.${cols[0].name}`)}</Text>
+        <Text {...itemProps(cols[0])}>{countMsg()}</Text>
       </HStack>
       <Text w={cols[1].w} {...itemProps(cols[1])}>
         {t(`home.obj.${cols[1].name}`)}

src/store/obj.ts

@@ -2,10 +2,11 @@ import naturalSort from "typescript-natural-sort"
 import { cookieStorage, createStorageSignal } from "@solid-primitives/storage"
 import { createMemo, createSignal } from "solid-js"
 import { createStore, produce } from "solid-js/store"
-import { Obj, StoreObj } from "~/types"
+import { Obj, ObjType, StoreObj } from "~/types"
 import { bus, log } from "~/utils"
 import { keyPressed } from "./key-event"
 import { local } from "./local_settings"
+import { useT } from "~/hooks"
 
 export enum State {
   Initial, // Initial state
@@ -222,3 +223,30 @@ export const setPassword = (password: string) => {
   _setPassword(password)
   cookieStorage.setItem("browser-password", password)
 }
+
+export const countMsg = (filterType?: ObjType) => {
+  const t = useT()
+  const selectedList = selectedObjs()
+  const isSelected = selectedList.length > 0
+  let objs = isSelected ? selectedList : objStore.objs
+
+  if (filterType) {
+    objs = objs.filter((obj) => obj.is_dir || obj.type === filterType)
+  }
+
+  const folders = objs.filter((o) => o.is_dir).length
+  const files = objs.length - folders
+
+  const vars = { folders: `${folders}`, files: `${files}` }
+  const prefix = isSelected ? "selected" : "count"
+
+  const key =
+    folders && files
+      ? `${prefix}`
+      : folders
+        ? `${prefix}_folders`
+        : files
+          ? `${prefix}_files`
+          : ""
+  return key ? t(`home.obj.count.${key}`, vars) : ""
+}