feat(toolbar): support recursive file listing

src/lang/en/home.json

@@ -92,6 +92,9 @@
     "recursive_move_directory-tips": "Are you sure you want to move all files in the current folder and its subfolders to the specified folder?",
     "remove_empty_directory": "Remove Empty Folder",
     "remove_empty_directory-tips": "Are you sure to delete all its empty subfolders?",
+    "recurse_list": "Recursive List",
+    "recurse_list_interval": "Interval (seconds)",
+    "recurse_list_refresh": "Refresh",
     "batch_rename": "Batch Rename",
     "regex_rename": "Regex Rename",
     "sequential_renaming": "Sequential Rename",

src/pages/home/toolbar/RecurseList.tsx

@@ -0,0 +1,120 @@
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  HStack,
+  IconButton,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Switch as HopeSwitch,
+  createDisclosure,
+} from "@hope-ui/solid"
+import { useFetch, usePath, useRouter, useT } from "~/hooks"
+import { bus, fsRecurseList, handleRespWithNotifySuccess } from "~/utils"
+import { createSignal, onCleanup } from "solid-js"
+import { FaSolidMinus, FaSolidPlus } from "solid-icons/fa"
+
+export const RecurseList = () => {
+  const { isOpen, onOpen, onClose } = createDisclosure()
+  const { pathname } = useRouter()
+  const [loading, ok] = useFetch(fsRecurseList)
+  const { refresh } = usePath()
+  const [intervalSec, setIntervalSec] = createSignal(3)
+  const [refreshEnabled, setRefreshEnabled] = createSignal(false)
+  const t = useT()
+
+  const handler = (name: string) => {
+    if (name === "recurseList") {
+      setIntervalSec(3)
+      setRefreshEnabled(false)
+      onOpen()
+    }
+  }
+  bus.on("tool", handler)
+  onCleanup(() => {
+    bus.off("tool", handler)
+  })
+
+  const handleSubmit = async () => {
+    const resp = await ok(pathname(), refreshEnabled(), intervalSec())
+    handleRespWithNotifySuccess(resp, () => {
+      refresh()
+      onClose()
+    })
+  }
+
+  return (
+    <Modal
+      blockScrollOnMount={false}
+      opened={isOpen()}
+      onClose={onClose}
+      size={{
+        "@initial": "xs",
+        "@md": "md",
+      }}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{t("home.toolbar.recurse_list")}</ModalHeader>
+        <ModalBody>
+          <FormControl mb="$4">
+            <FormLabel>{t("home.toolbar.recurse_list_interval")}</FormLabel>
+            <HStack>
+              <IconButton
+                aria-label="decrease"
+                icon={<FaSolidMinus />}
+                onClick={() => {
+                  setIntervalSec((prev) => Math.max(0, prev - 1))
+                }}
+              />
+              <Input
+                type="number"
+                value={intervalSec()}
+                onInput={(e) => {
+                  const value = parseInt(e.currentTarget.value) || 0
+                  setIntervalSec(Math.max(0, value))
+                }}
+                style={{
+                  "-moz-appearance": "textfield",
+                  "::-webkit-inner-spin-button": { display: "none" },
+                  "::-webkit-outer-spin-button": { display: "none" },
+                }}
+                class="hide-spin"
+                textAlign="center"
+              />
+              <IconButton
+                aria-label="increase"
+                icon={<FaSolidPlus />}
+                onClick={() => {
+                  setIntervalSec((prev) => prev + 1)
+                }}
+              />
+            </HStack>
+          </FormControl>
+          <FormControl>
+            <FormLabel>{t("home.toolbar.recurse_list_refresh")}</FormLabel>
+            <HopeSwitch
+              checked={refreshEnabled()}
+              onChange={(e: { currentTarget: HTMLInputElement }) => {
+                setRefreshEnabled(e.currentTarget.checked)
+              }}
+            />
+          </FormControl>
+        </ModalBody>
+        <ModalFooter display="flex" gap="$2">
+          <Button onClick={onClose} colorScheme="neutral">
+            {t("global.cancel")}
+          </Button>
+          <Button loading={loading()} onClick={handleSubmit}>
+            {t("global.confirm")}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

src/pages/home/toolbar/Right.tsx

@@ -101,6 +101,13 @@ export const Right = () => {
                   bus.emit("tool", "removeEmptyDirectory")
                 }}
               />
+              <RightIcon
+                as={operations.recurse_list.icon}
+                tips="recurse_list"
+                onClick={() => {
+                  bus.emit("tool", "recurseList")
+                }}
+              />
               <RightIcon
                 as={operations.batch_rename.icon}
                 tips="batch_rename"

src/pages/home/toolbar/Toolbar.tsx

@@ -17,6 +17,7 @@ import { LocalSettings } from "./LocalSettings"
 import { BackTop } from "./BackTop"
 import { Decompress } from "./Decompress"
 import { Share } from "./Share"
+import { RecurseList } from "~/pages/home/toolbar/RecurseList"
 
 const Upload = lazy(() => import("../uploads/Upload"))
 
@@ -33,6 +34,7 @@ export const Modal = () => {
       <Share />
       <RecursiveMove />
       <RemoveEmptyDirectory />
+      <RecurseList />
       <BatchRename />
       <OfflineDownload />
       <PackageDownloadModal />

src/pages/home/toolbar/operations.ts

@@ -8,6 +8,7 @@ import { CgFileAdd, CgFolderAdd, CgFolderRemove } from "solid-icons/cg"
 import { AiOutlineCloudDownload } from "solid-icons/ai"
 import { ImMoveUp } from "solid-icons/im"
 import { BiRegularRename } from "solid-icons/bi"
+import { BiRegularSitemap } from "solid-icons/bi"
 
 export interface Operations {
   [key: string]: {
@@ -31,6 +32,7 @@ export const operations: Operations = {
   cancel_select: { icon: TiDeleteOutline },
   download: { icon: AiOutlineCloudDownload, color: "$primary9" },
   share: { icon: CgShare, color: "$primary9" },
+  recurse_list: { icon: BiRegularSitemap, p: true },
 }
 // interface Operation {
 //   label: string;

src/utils/api.ts

@@ -281,3 +281,11 @@ export const updateIndex = async (paths = [], max_depth = -1): PEmptyResp => {
     max_depth,
   })
 }
+
+export const fsRecurseList = (
+  path: string,
+  refresh: boolean,
+  interval_sec: number,
+): PEmptyResp => {
+  return r.post("/fs/recurse_list", { path, refresh, interval_sec })
+}