From 6f7056e5ffc7563032bf6c09ac869e26c1e79851 Mon Sep 17 00:00:00 2001
From: liuycy <liuycy@yeah.net>
Date: Sun, 10 Mar 2024 20:39:01 +0800
Subject: [PATCH] fix: hide matched files/folders in sidebar (#155)

* fix: hide matched files/folders in sidebar

* fix: show matched folder while access by url
---
 src/components/FolderTree.tsx | 126 +++++++++++++++++++---------------
 src/hooks/useUtil.ts          |   9 +++
 src/pages/home/Sidebar.tsx    |   1 +
 3 files changed, 80 insertions(+), 56 deletions(-)

diff --git a/src/components/FolderTree.tsx b/src/components/FolderTree.tsx
index 2d6c734ae..0861e1ac5 100644
--- a/src/components/FolderTree.tsx
+++ b/src/components/FolderTree.tsx
@@ -28,7 +28,7 @@ import {
   createEffect,
   on,
 } from "solid-js"
-import { useFetch, useT } from "~/hooks"
+import { useFetch, useT, useUtil } from "~/hooks"
 import { getMainColor, password } from "~/store"
 import { Obj } from "~/types"
 import {
@@ -49,6 +49,7 @@ export interface FolderTreeProps {
   autoOpen?: boolean
   handle?: (handler: FolderTreeHandler) => void
   showEmptyIcon?: boolean
+  showHiddenFolder?: boolean
 }
 interface FolderTreeContext extends Omit<FolderTreeProps, "handle"> {
   value: Accessor<string>
@@ -69,6 +70,7 @@ export const FolderTree = (props: FolderTreeProps) => {
           autoOpen: props.autoOpen ?? false,
           forceRoot: props.forceRoot ?? false,
           showEmptyIcon: props.showEmptyIcon ?? false,
+          showHiddenFolder: props.showHiddenFolder ?? true,
         }}
       >
         <FolderTreeNode path="/" />
@@ -78,9 +80,16 @@ export const FolderTree = (props: FolderTreeProps) => {
 }
 
 const FolderTreeNode = (props: { path: string }) => {
+  const { isHidePath } = useUtil()
   const [children, setChildren] = createSignal<Obj[]>()
-  const { value, onChange, forceRoot, autoOpen, showEmptyIcon } =
-    useContext(context)!
+  const {
+    value,
+    onChange,
+    forceRoot,
+    autoOpen,
+    showEmptyIcon,
+    showHiddenFolder,
+  } = useContext(context)!
   const emptyIconVisible = () =>
     Boolean(showEmptyIcon && children() !== undefined && !children()?.length)
   const [loading, fetchDirs] = useFetch(() =>
@@ -103,71 +112,76 @@ const FolderTreeNode = (props: { path: string }) => {
   }
   const { isOpen, onToggle } = createDisclosure()
   const active = () => value() === props.path
+  const isMatchedFolder = createMatcher(props.path)
   const checkIfShouldOpen = async (pathname: string) => {
     if (!autoOpen) return
-    if (createMatcher(props.path)(pathname)) {
+    if (isMatchedFolder(pathname)) {
       if (!isOpen()) onToggle()
       if (!isLoaded) load()
     }
   }
   createEffect(on(value, checkIfShouldOpen))
+  const isHiddenFolder = () =>
+    isHidePath(props.path) && !isMatchedFolder(value())
   return (
-    <Box>
-      <HStack spacing="$2">
-        <Show
-          when={!loading()}
-          fallback={<Spinner size="sm" color={getMainColor()} />}
-        >
+    <Show when={showHiddenFolder || !isHiddenFolder()}>
+      <Box>
+        <HStack spacing="$2">
           <Show
-            when={!emptyIconVisible()}
-            fallback={<Icon color={getMainColor()} as={BiSolidFolderOpen} />}
+            when={!loading()}
+            fallback={<Spinner size="sm" color={getMainColor()} />}
           >
-            <Icon
-              color={getMainColor()}
-              as={BiSolidRightArrow}
-              transform={isOpen() ? "rotate(90deg)" : "none"}
-              transition="transform 0.2s"
-              cursor="pointer"
-              onClick={() => {
-                onToggle()
-                if (isOpen()) {
-                  load()
-                }
-              }}
-            />
+            <Show
+              when={!emptyIconVisible()}
+              fallback={<Icon color={getMainColor()} as={BiSolidFolderOpen} />}
+            >
+              <Icon
+                color={getMainColor()}
+                as={BiSolidRightArrow}
+                transform={isOpen() ? "rotate(90deg)" : "none"}
+                transition="transform 0.2s"
+                cursor="pointer"
+                onClick={() => {
+                  onToggle()
+                  if (isOpen()) {
+                    load()
+                  }
+                }}
+              />
+            </Show>
           </Show>
+          <Text
+            css={{
+              // textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+            // overflow="hidden"
+            fontSize="$md"
+            cursor="pointer"
+            px="$1"
+            rounded="$md"
+            bgColor={active() ? "$info8" : "transparent"}
+            _hover={{
+              bgColor: active() ? "$info8" : hoverColor(),
+            }}
+            onClick={() => {
+              onChange(props.path)
+            }}
+          >
+            {props.path === "/" ? "root" : pathBase(props.path)}
+          </Text>
+        </HStack>
+        <Show when={isOpen()}>
+          <VStack mt="$1" pl="$4" alignItems="start" spacing="$1">
+            <For each={children()}>
+              {(item) => (
+                <FolderTreeNode path={pathJoin(props.path, item.name)} />
+              )}
+            </For>
+          </VStack>
         </Show>
-        <Text
-          css={{
-            // textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-          }}
-          // overflow="hidden"
-          fontSize="$md"
-          cursor="pointer"
-          px="$1"
-          rounded="$md"
-          bgColor={active() ? "$info8" : "transparent"}
-          _hover={{
-            bgColor: active() ? "$info8" : hoverColor(),
-          }}
-          onClick={() => {
-            onChange(props.path)
-          }}
-        >
-          {props.path === "/" ? "root" : pathBase(props.path)}
-        </Text>
-      </HStack>
-      <Show when={isOpen()}>
-        <VStack mt="$1" pl="$4" alignItems="start" spacing="$1">
-          <For each={children()}>
-            {(item) => (
-              <FolderTreeNode path={pathJoin(props.path, item.name)} />
-            )}
-          </For>
-        </VStack>
-      </Show>
-    </Box>
+      </Box>
+    </Show>
   )
 }
 
diff --git a/src/hooks/useUtil.ts b/src/hooks/useUtil.ts
index d3fb62db1..86d15e71a 100644
--- a/src/hooks/useUtil.ts
+++ b/src/hooks/useUtil.ts
@@ -22,6 +22,15 @@ export const useUtil = () => {
       }
       return false
     },
+    isHidePath: (path: string) => {
+      const hideFiles = getHideFiles()
+      for (const reg of hideFiles) {
+        if (reg.test(path)) {
+          return true
+        }
+      }
+      return false
+    },
   }
 }
 
diff --git a/src/pages/home/Sidebar.tsx b/src/pages/home/Sidebar.tsx
index 60fa1d81b..29de0f74d 100644
--- a/src/pages/home/Sidebar.tsx
+++ b/src/pages/home/Sidebar.tsx
@@ -91,6 +91,7 @@ function SidebarPannel() {
       <FolderTree
         autoOpen
         showEmptyIcon
+        showHiddenFolder={false}
         onChange={(path) => to(path)}
         handle={(handler) => setFolderTreeHandler(handler)}
       />