File Search

1"use client";
2 
3import type { SearchMatch, StoredFile } from "files-sdk";
4import type { UseFilesResult } from "files-sdk/react";
5import { FileIcon, Loader2Icon, SearchIcon } from "lucide-react";
6import { useCallback, useId, useRef, useState } from "react";
7 
8import { Button } from "@/components/ui/button";
9import { Input } from "@/components/ui/input";
10import { cn } from "@/lib/utils";
11 
12export interface FileSearchProps {
13  /** A `useFiles()` instance — matches are streamed through `search()`. */
14  files: UseFilesResult;
15  /** Limit the search to keys under this prefix. */
16  prefix?: string;
17  /** Match mode shown first. Default `"substring"`. */
18  defaultMatch?: SearchMatch;
19  /** Cap on results collected per search. Default `100`. */
20  maxResults?: number;
21  /** Called when a result row is clicked. */
22  onSelect?: (file: StoredFile) => void;
23  className?: string;
24}
25 
26const MATCH_MODES: SearchMatch[] = ["substring", "glob", "regex", "exact"];
27 
28const formatBytes = (bytes: number): string => {
29  if (bytes === 0) {
30    return "0 B";
31  }
32  const units = ["B", "KB", "MB", "GB", "TB"];
33  const exponent = Math.min(
34    Math.floor(Math.log(bytes) / Math.log(1024)),
35    units.length - 1
36  );
37  return `${(bytes / 1024 ** exponent).toFixed(exponent === 0 ? 0 : 1)} ${units[exponent]}`;
38};
39 
40/**
41 * A search box for a `useFiles()` instance. Streams `search()` results into a
42 * list and lets you switch match mode (substring, glob, regex, exact) and toggle
43 * case sensitivity. The previous search is aborted when a new one starts.
44 */
45export const FileSearch = ({
46  files,
47  prefix,
48  defaultMatch = "substring",
49  maxResults = 100,
50  onSelect,
51  className,
52}: FileSearchProps) => {
53  const [query, setQuery] = useState("");
54  const [match, setMatch] = useState<SearchMatch>(defaultMatch);
55  const [caseInsensitive, setCaseInsensitive] = useState(true);
56  const [results, setResults] = useState<StoredFile[]>([]);
57  const [isSearching, setIsSearching] = useState(false);
58  const [hasSearched, setHasSearched] = useState(false);
59 
60  const filesRef = useRef(files);
61  filesRef.current = files;
62  // A per-search controller so a new query cancels the in-flight generator.
63  const controllerRef = useRef<AbortController>(null);
64  const caseId = useId();
65 
66  const run = useCallback(
67    async (event: React.FormEvent) => {
68      event.preventDefault();
69      if (!query.trim()) {
70        return;
71      }
72      controllerRef.current?.abort();
73      const controller = new AbortController();
74// … truncated