feat(folder): move the count msg to bottom and add options (#128)

* feat(home): move the count msg to bottom and add options

* refactor(home): improve count message functionality

* refactor(obj): optimize code

* style(folder): update count message style

Author: xrgzs

src/lang/en/home.json

@@ -168,6 +168,11 @@
       "none": "None",
       "visible": "Visible"
     },
+    "show_count_msg": "Show file count message",
+    "show_count_msg_options": {
+      "none": "None",
+      "visible": "Visible"
+    },
     "list_item_filename_overflow": "List item filename overflow",
     "list_item_filename_overflow_options": {
       "ellipsis": "Ellipsis",

src/pages/home/folder/Grid.tsx

@@ -1,8 +1,8 @@
 import { Box, Grid, Text } from "@hope-ui/solid"
-import { For } from "solid-js"
+import { For, Show } from "solid-js"
 import { GridItem } from "./GridItem"
 import "lightgallery/css/lightgallery-bundle.css"
-import { countMsg, local, objStore } from "~/store"
+import { smartCountMsg, local, objStore } from "~/store"
 import { useSelectWithMouse } from "./helper"
 
 const GridLayout = () => {
@@ -11,9 +11,13 @@ const GridLayout = () => {
   registerSelectContainer()
   return (
     <>
-      <Box w="100%" textAlign="left" pl="$2">
-        <Text>{countMsg()}</Text>
-      </Box>
+      <Show when={local["show_count_msg"] === "visible"}>
+        <Box w="100%" textAlign="left" pl="$2">
+          <Text size="sm" color="$neutral11">
+            {smartCountMsg()}
+          </Text>
+        </Box>
+      </Show>
       <Grid
         oncapture:contextmenu={captureContentMenu}
         class="viselect-container"

src/pages/home/folder/Images.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Grid, Heading, Text, VStack } from "@hope-ui/solid"
 import { For, Show, createMemo } from "solid-js"
 import { ImageItem } from "./ImageItem"
-import { countMsg, local, objStore } from "~/store"
+import { smartCountMsg, local, objStore } from "~/store"
 import { GridItem } from "./GridItem"
 import { ObjType, StoreObj } from "~/types"
 import { useT } from "~/hooks"
@@ -33,9 +33,13 @@ 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_count_msg"] === "visible"}>
+        <Box w="100%" textAlign="left" pl="$2">
+          <Text size="sm" color="$neutral11">
+            {smartCountMsg(ObjType.IMAGE)}
+          </Text>
+        </Box>
+      </Show>
       <Show when={local["show_folder_in_image_view"] === "top"}>
         {folders()}
       </Show>

src/pages/home/folder/List.tsx

@@ -13,8 +13,10 @@ import {
   checkboxOpen,
   countMsg,
   isIndeterminate,
+  local,
   objStore,
   selectAll,
+  selectedMsg,
   sortObjs,
 } from "~/store"
 import { OrderBy } from "~/store"
@@ -66,8 +68,11 @@ export const ListTitle = (props: {
             }}
           />
         </Show>
-        <Text {...itemProps(cols[0])}>{t(`home.obj.${cols[0].name}`)}</Text>
-        <Text {...itemProps(cols[0])}>{countMsg()}</Text>
+        {selectedMsg() ? (
+          <Text {...itemProps(cols[0])}>{selectedMsg()}</Text>
+        ) : (
+          <Text {...itemProps(cols[0])}>{t(`home.obj.${cols[0].name}`)}</Text>
+        )}
       </HStack>
       <Text w={cols[1].w} {...itemProps(cols[1])}>
         {t(`home.obj.${cols[1].name}`)}
@@ -112,6 +117,11 @@ const ListLayout = () => {
           return <ListItem obj={obj} index={i()} />
         }}
       </For>
+      <Show when={local["show_count_msg"] === "visible"}>
+        <Text size="sm" color="$neutral11">
+          {countMsg()}
+        </Text>
+      </Show>
     </VStack>
   )
 }

src/store/local_settings.ts

@@ -36,6 +36,12 @@ export const initialLocalSettings = [
     type: "select",
     options: ["none", "visible"],
   },
+  {
+    key: "show_count_msg",
+    default: "none",
+    type: "select",
+    options: ["none", "visible"],
+  },
   {
     key: "position_of_header_navbar",
     default: "static",

src/store/obj.ts

@@ -224,22 +224,22 @@ export const setPassword = (password: string) => {
   cookieStorage.setItem("browser-password", password)
 }
 
-export const countMsg = (filterType?: ObjType) => {
+const getCountStr = (
+  objs: StoreObj[],
+  prefix: string,
+  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)
   }
 
+  if (objs.length === 0) return ""
+
   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 vars = { folders: folders.toString(), files: files.toString() }
   const key =
     folders && files
       ? `${prefix}`
@@ -250,3 +250,22 @@ export const countMsg = (filterType?: ObjType) => {
           : ""
   return key ? t(`home.obj.count.${key}`, vars) : ""
 }
+
+export const countMsg = (filterType?: ObjType) =>
+  getCountStr(objStore.objs, "count", filterType)
+
+export const selectedMsg = (filterType?: ObjType) => {
+  const selectedList = selectedObjs()
+  const isSelected = selectedList.length > 0
+
+  return isSelected ? getCountStr(selectedList, "selected", filterType) : ""
+}
+
+export const smartCountMsg = (filterType?: ObjType) => {
+  const selectedList = selectedObjs()
+  const isSelected = selectedList.length > 0
+
+  return isSelected
+    ? getCountStr(selectedList, "selected", filterType)
+    : countMsg(filterType)
+}