Optimize filesystem and find page performance

- Memoize FileItem and FileSystem components
- Use useMemo for tree building
- Replace use-debounce with native setTimeout debouncing

src/app/os/find/page.tsx

@@ -2,7 +2,6 @@
 
 import { useState, useEffect, useMemo } from "react";
 import { redirect, useSearchParams } from "next/navigation";
-import { useDebounce } from "use-debounce";
 import { Search, X } from "lucide-react";
 
 import { Input } from "@/components/ui/input";
@@ -30,9 +29,16 @@ export default function FindByKey() {
   const [loading, setLoading] = useState(true);
   const [paths, setPaths] = useState<string[]>([]);
   const [keyword, setKeyword] = useState("");
+  const [debouncedKeyword, setDebouncedKeyword] = useState("");
   const [expandAll, setExpandAll] = useState<boolean | null>(null);
 
-  const [debouncedKeyword] = useDebounce(keyword, 200);
+  // Debounce keyword with 300ms delay
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedKeyword(keyword);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [keyword]);
 
   useEffect(() => {
     async function fetchPaths() {

src/components/filesystem.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, memo, useMemo } from "react";
 import {
   Collapsible,
   CollapsibleContent,
@@ -31,7 +31,7 @@ function getMaxDepth(item: TreeWithFullPath, current = 0): number {
   return max;
 }
 
-function FileItem({
+const FileItem = memo(function FileItem({
   name,
   fullPath,
   os,
@@ -52,7 +52,7 @@ function FileItem({
       </Link>
     </div>
   );
-}
+});
 
 function Tree({
   item,
@@ -154,7 +154,7 @@ function TreeFolder({
   );
 }
 
-export default function FileSystem({
+const FileSystem = memo(function FileSystem({
   list,
   os,
   expandAll = null,
@@ -163,10 +163,12 @@ export default function FileSystem({
   os: string;
   expandAll?: boolean | null;
 }) {
-  const tree = filesToTree(list);
+  const tree = useMemo(() => filesToTree(list), [list]);
   return (
     <div>
       <Tree item={tree} os={os} depth={0} expandAll={expandAll} />
     </div>
   );
-}
+});
+
+export default FileSystem;