windowpp 0.1.2 → 0.1.3

package/templates/example/frontend/src/components/FileSearch.tsx

@@ -0,0 +1,936 @@
+import {
+  Show,
+  For,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  untrack,
+} from 'solid-js';
+import { filesystem } from '../API';
+import { InfiniteScrollList } from './InfiniteScrollList';
+import type {
+  ApplicationEntry,
+  FileStat,
+  SearchStreamHandle,
+  SearchStreamSummary,
+} from '../API';
+
+export type SearchPreset = {
+  label: string;
+  path?: string;
+  note: string;
+  roots?: string[];
+};
+
+export type SearchMode = 'all' | 'custom';
+
+export interface FileSearchProps {
+  isOpen: () => boolean;
+  onClose: () => void;
+  availableRoots: () => string[];
+  searchPresets?: () => SearchPreset[];
+  onResultClick?: (result: FileSearchResult) => void;
+  class?: string;
+}
+
+export type FileSearchResult =
+  | {
+    kind: 'path';
+    path: string;
+  }
+  | {
+    kind: 'application';
+    application: ApplicationEntry;
+  };
+
+type RankedSearchResult = {
+  item: FileSearchResult;
+  score: number;
+};
+
+type PersistedSearchSession = {
+  version: 1;
+  savedAt: number;
+  query: string;
+  includeFiles: boolean;
+  includeFolders: boolean;
+  includeApps: boolean;
+  searchStatus: string;
+  results: string[];
+  resultStats: Record<string, FileStat>;
+  searchSummary: SearchStreamSummary | null;
+};
+
+const SEARCH_SESSION_STORAGE_KEY = 'windowpp:file-search-session';
+const SEARCH_SESSION_MAX_RESULTS = 200;
+const SEARCH_SESSION_MAX_AGE_MS = 1000 * 60 * 60 * 12;
+
+function loadPersistedSearchSession(): PersistedSearchSession | null {
+  try {
+    const raw = window.localStorage.getItem(SEARCH_SESSION_STORAGE_KEY);
+    if (!raw) return null;
+
+    const parsed = JSON.parse(raw) as Partial<PersistedSearchSession>;
+    if (parsed.version !== 1 || typeof parsed.savedAt !== 'number') {
+      return null;
+    }
+
+    if (Date.now() - parsed.savedAt > SEARCH_SESSION_MAX_AGE_MS) {
+      window.localStorage.removeItem(SEARCH_SESSION_STORAGE_KEY);
+      return null;
+    }
+
+    return {
+      version: 1,
+      savedAt: parsed.savedAt,
+      query: typeof parsed.query === 'string' ? parsed.query : '',
+      includeFiles: parsed.includeFiles ?? true,
+      includeFolders: parsed.includeFolders ?? false,
+      includeApps: parsed.includeApps ?? true,
+      searchStatus: typeof parsed.searchStatus === 'string' ? parsed.searchStatus : 'Type to search the whole system',
+      results: Array.isArray(parsed.results) ? parsed.results.filter((value): value is string => typeof value === 'string') : [],
+      resultStats: parsed.resultStats && typeof parsed.resultStats === 'object' ? parsed.resultStats : {},
+      searchSummary: parsed.searchSummary ?? null,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function persistSearchSession(session: PersistedSearchSession) {
+  try {
+    window.localStorage.setItem(SEARCH_SESSION_STORAGE_KEY, JSON.stringify(session));
+  } catch {
+    // Ignore storage failures.
+  }
+}
+
+function FileTypeIcon(props: { class?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class={props.class ?? 'h-4 w-4'} aria-hidden="true">
+      <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
+      <path d="M14 3v5h5" />
+      <path d="M9 15h6" />
+      <path d="M9 11h2" />
+    </svg>
+  );
+}
+
+function FolderTypeIcon(props: { class?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class={props.class ?? 'h-4 w-4'} aria-hidden="true">
+      <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+    </svg>
+  );
+}
+
+function AppTypeIcon(props: { class?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class={props.class ?? 'h-4 w-4'} aria-hidden="true">
+      <rect x="4" y="4" width="16" height="16" rx="3" />
+      <path d="M9 4v16" />
+      <path d="M15 4v16" />
+      <path d="M4 9h16" />
+      <path d="M4 15h16" />
+    </svg>
+  );
+}
+
+function SearchToggleButton(props: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+  children: any;
+}) {
+  return (
+    <button
+      type="button"
+      title={props.label}
+      aria-label={props.label}
+      class={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border transition-colors ${props.active ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-900'}`}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+function normalizePath(path: string): string {
+  return path.replace(/\\/g, '/').replace(/\/+/g, '/');
+}
+
+function basename(path: string): string {
+  const trimmed = path.replace(/[\\/]+$/, '');
+  const segments = trimmed.split(/[\\/]/);
+  return segments[segments.length - 1] || trimmed;
+}
+
+function displayRelativePath(root: string, fullPath: string): string {
+  const normalizedRoot = normalizePath(root).replace(/\/+$/, '');
+  const normalizedPath = normalizePath(fullPath);
+  if (!normalizedRoot) return normalizedPath;
+  const rootWithSlash = `${normalizedRoot}/`;
+  if (normalizedPath === normalizedRoot) return '.';
+  if (normalizedPath.startsWith(rootWithSlash)) {
+    return normalizedPath.slice(rootWithSlash.length);
+  }
+  return normalizedPath;
+}
+
+function queryToPattern(query: string): string {
+  const trimmed = query.trim();
+  if (!trimmed) return '*';
+  if (/[*?[\]]/.test(trimmed)) return trimmed;
+  return `*${trimmed}*`;
+}
+
+function isGlobQuery(query: string): boolean {
+  return /[*?[\]]/.test(query);
+}
+
+function splitNameParts(name: string) {
+  const lastDot = name.lastIndexOf('.');
+  if (lastDot <= 0 || lastDot === name.length - 1) {
+    return { stem: name, extension: '' };
+  }
+
+  return {
+    stem: name.slice(0, lastDot),
+    extension: name.slice(lastDot + 1),
+  };
+}
+
+function fuzzySubsequenceScore(text: string, query: string): number {
+  let score = 0;
+  let queryIndex = 0;
+  let consecutive = 0;
+
+  for (let index = 0; index < text.length && queryIndex < query.length; index += 1) {
+    if (text[index] !== query[queryIndex]) {
+      consecutive = 0;
+      continue;
+    }
+
+    score += 8;
+    if (index === queryIndex) score += 10;
+    if (consecutive > 0) score += 6 * consecutive;
+
+    consecutive += 1;
+    queryIndex += 1;
+  }
+
+  if (queryIndex !== query.length) {
+    return -1000;
+  }
+
+  return score - Math.max(0, text.length - query.length);
+}
+
+function rankSearchResult(path: string, query: string, isDirectory: boolean): number {
+  const trimmedQuery = query.trim().toLowerCase();
+  if (!trimmedQuery) return 0;
+
+  const name = basename(path).toLowerCase();
+  const { stem, extension } = splitNameParts(name);
+  const normalizedExtensionQuery = trimmedQuery.startsWith('.') ? trimmedQuery.slice(1) : trimmedQuery;
+
+  let score = 0;
+
+  if (name === trimmedQuery) score += 2000;
+  if (stem === trimmedQuery) score += 1800;
+  if (name.startsWith(trimmedQuery)) score += 1400;
+  if (stem.startsWith(trimmedQuery)) score += 1300;
+
+  const nameMatchIndex = name.indexOf(trimmedQuery);
+  if (nameMatchIndex >= 0) score += 1100 - Math.min(nameMatchIndex * 20, 400);
+
+  const stemMatchIndex = stem.indexOf(trimmedQuery);
+  if (stemMatchIndex >= 0) score += 950 - Math.min(stemMatchIndex * 20, 300);
+
+  if (!isDirectory && extension) {
+    if (extension === normalizedExtensionQuery) score += 900;
+    if (extension.startsWith(normalizedExtensionQuery)) score += 500;
+  }
+
+  score += fuzzySubsequenceScore(name, trimmedQuery);
+  score += fuzzySubsequenceScore(stem, trimmedQuery) + 50;
+
+  if (isDirectory) score += 40;
+
+  return score;
+}
+
+function globToRegExp(pattern: string): RegExp {
+  const escaped = pattern
+    .replace(/[.+^${}()|\\]/g, '\\$&')
+    .replace(/\*/g, '.*')
+    .replace(/\?/g, '.');
+  return new RegExp(`^${escaped}$`, 'i');
+}
+
+function rankApplicationResult(app: ApplicationEntry, query: string): number {
+  const trimmedQuery = query.trim().toLowerCase();
+  if (!trimmedQuery) return 0;
+
+  const name = app.name.toLowerCase();
+  let score = 0;
+  if (name === trimmedQuery) score += 2400;
+  if (name.startsWith(trimmedQuery)) score += 1500;
+
+  const nameIndex = name.indexOf(trimmedQuery);
+  if (nameIndex >= 0) score += 1200 - Math.min(nameIndex * 20, 400);
+
+  score += fuzzySubsequenceScore(name, trimmedQuery) + 100;
+  return score;
+}
+
+export function FileSearch(props: FileSearchProps) {
+  const persistedSession = loadPersistedSearchSession();
+  const [searchQuery, setSearchQuery] = createSignal(persistedSession?.query ?? '');
+  const [includeFiles, setIncludeFiles] = createSignal(persistedSession?.includeFiles ?? true);
+  const [includeFolders, setIncludeFolders] = createSignal(persistedSession?.includeFolders ?? false);
+  const [includeApps, setIncludeApps] = createSignal(persistedSession?.includeApps ?? true);
+  const [searching, setSearching] = createSignal(false);
+  const [searchStatus, setSearchStatus] = createSignal(persistedSession?.searchStatus ?? 'Type to search the whole system');
+  const [searchSummary, setSearchSummary] = createSignal<SearchStreamSummary | null>(persistedSession?.searchSummary ?? null);
+  const [searchResults, setSearchResults] = createSignal<string[]>(persistedSession?.results ?? []);
+  const [resultStats, setResultStats] = createSignal<Record<string, FileStat>>(persistedSession?.resultStats ?? {});
+  const [visibleVirtualResults, setVisibleVirtualResults] = createSignal<RankedSearchResult[]>([]);
+  const [installedApps, setInstalledApps] = createSignal<ApplicationEntry[]>([]);
+  const [appsLoaded, setAppsLoaded] = createSignal(false);
+  const [appsLoading, setAppsLoading] = createSignal(false);
+
+  let searchInputRef: HTMLInputElement | undefined;
+  let searchToken = 0;
+  let activeSearchHandle: SearchStreamHandle | null = null;
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  let flushResultsFrame: number | null = null;
+  let persistSessionTimer: ReturnType<typeof setTimeout> | null = null;
+  let activeSearchFingerprint = '';
+  let lastSettledSearchFingerprint = '';
+  let lastIssuedQuery = persistedSession?.query.trim() ?? '';
+  let lastIssuedScopeKey = '';
+  const pendingStats = new Set<string>();
+  const seenSearchResults = new Set<string>();
+  const queuedSearchResults: string[] = [];
+  let scoreCacheQuery = '';
+  const scoreCache = new Map<string, number>();
+
+  const resetScoreCache = () => {
+    scoreCacheQuery = '';
+    scoreCache.clear();
+  };
+
+  for (const path of searchResults()) {
+    seenSearchResults.add(path);
+  }
+
+  const scopeKeyFor = (roots: string[]) => JSON.stringify({
+    roots: roots.map((root) => normalizePath(root)),
+    includeFiles: includeFiles(),
+    includeFolders: includeFolders(),
+    includeApps: includeApps(),
+  });
+
+  const fingerprintFor = (query: string, roots: string[]) => JSON.stringify({
+    query,
+    scope: scopeKeyFor(roots),
+  });
+
+  const pruneStatsToResults = (paths: string[]) => {
+    const allowed = new Set(paths);
+    setResultStats((current) => {
+      const next: Record<string, FileStat> = {};
+      for (const [path, stat] of Object.entries(current)) {
+        if (allowed.has(path)) {
+          next[path] = stat;
+        }
+      }
+      return next;
+    });
+  };
+
+  const matchesRefinedQuery = (path: string, query: string) => {
+    const name = basename(path).toLowerCase();
+    const trimmed = query.trim().toLowerCase();
+    if (!trimmed) return true;
+    if (isGlobQuery(trimmed)) {
+      return globToRegExp(trimmed).test(name);
+    }
+    return name.includes(trimmed);
+  };
+
+  const seedRefinedResults = (query: string, roots: string[]) => {
+    const nextScopeKey = scopeKeyFor(roots);
+    const canKeepCurrentResults =
+      searchResults().length > 0
+      && query === lastIssuedQuery
+      && (lastIssuedScopeKey.length === 0 || nextScopeKey === lastIssuedScopeKey);
+
+    if (canKeepCurrentResults) {
+      seenSearchResults.clear();
+      for (const path of searchResults()) {
+        seenSearchResults.add(path);
+      }
+      queuedSearchResults.splice(0, queuedSearchResults.length);
+      pruneStatsToResults(searchResults());
+      return;
+    }
+
+    const canReuse =
+      !isGlobQuery(query)
+      && !isGlobQuery(lastIssuedQuery)
+      && lastIssuedQuery.length > 0
+      && query.startsWith(lastIssuedQuery)
+      && nextScopeKey === lastIssuedScopeKey
+      && searchResults().length > 0;
+
+    if (!canReuse) {
+      seenSearchResults.clear();
+      queuedSearchResults.splice(0, queuedSearchResults.length);
+      setSearchResults([]);
+      setResultStats({});
+      return;
+    }
+
+    const filtered = searchResults().filter((path) => matchesRefinedQuery(path, query));
+    seenSearchResults.clear();
+    for (const path of filtered) {
+      seenSearchResults.add(path);
+    }
+    queuedSearchResults.splice(0, queuedSearchResults.length);
+    setSearchResults(filtered);
+    pruneStatsToResults(filtered);
+  };
+
+  const schedulePersistedSessionWrite = () => {
+    if (persistSessionTimer) {
+      clearTimeout(persistSessionTimer);
+    }
+
+    persistSessionTimer = setTimeout(() => {
+      persistSessionTimer = null;
+      const persistedResults = searchResults().slice(0, SEARCH_SESSION_MAX_RESULTS);
+      const persistedStats: Record<string, FileStat> = {};
+      const stats = resultStats();
+      for (const path of persistedResults) {
+        if (stats[path]) {
+          persistedStats[path] = stats[path];
+        }
+      }
+
+      persistSearchSession({
+        version: 1,
+        savedAt: Date.now(),
+        query: searchQuery(),
+        includeFiles: includeFiles(),
+        includeFolders: includeFolders(),
+        includeApps: includeApps(),
+        searchStatus: searchStatus(),
+        results: persistedResults,
+        resultStats: persistedStats,
+        searchSummary: searchSummary(),
+      });
+    }, 120);
+  };
+
+  const flushQueuedResults = () => {
+    flushResultsFrame = null;
+    if (queuedSearchResults.length === 0) return;
+
+    const freshResults = queuedSearchResults.splice(0, queuedSearchResults.length);
+    untrack(() => {
+      setSearchResults(current => [...current, ...freshResults]);
+    });
+  };
+
+  const enqueueBatch = (batch: string[]) => {
+    let appended = false;
+    for (const path of batch) {
+      if (seenSearchResults.has(path)) continue;
+      seenSearchResults.add(path);
+      queuedSearchResults.push(path);
+      appended = true;
+    }
+
+    if (!appended || flushResultsFrame !== null) return;
+    flushResultsFrame = requestAnimationFrame(() => {
+      flushQueuedResults();
+    });
+  };
+
+  const cancelActiveSearch = (clearDebounce = true) => {
+    if (clearDebounce && debounceTimer) {
+      clearTimeout(debounceTimer);
+      debounceTimer = null;
+    }
+    if (flushResultsFrame !== null) {
+      cancelAnimationFrame(flushResultsFrame);
+      flushResultsFrame = null;
+    }
+    if (activeSearchHandle) {
+      void activeSearchHandle.cancel();
+      activeSearchHandle = null;
+    }
+    activeSearchFingerprint = '';
+  };
+
+  const resetSearchState = (status = 'Type to search the whole system') => {
+    seenSearchResults.clear();
+    queuedSearchResults.splice(0, queuedSearchResults.length);
+    resetScoreCache();
+    setSearching(false);
+    setSearchResults([]);
+    setSearchSummary(null);
+    setSearchStatus(status);
+  };
+
+  const currentQuery = () => searchQuery().trim();
+
+  const matchingApps = createMemo(() => {
+    if (!includeApps()) return [] as ApplicationEntry[];
+
+    const query = currentQuery();
+    if (!query) return [] as ApplicationEntry[];
+
+    if (isGlobQuery(query)) {
+      const matcher = globToRegExp(query);
+      return installedApps().filter((app) => matcher.test(app.name));
+    }
+
+    return installedApps().filter((app) => rankApplicationResult(app, query) > 0);
+  });
+
+  const rankedResults = createMemo(() => {
+    const query = currentQuery();
+    const isGlob = isGlobQuery(query);
+    const stats = resultStats();
+    const combined: RankedSearchResult[] = [];
+
+    if (query !== scoreCacheQuery) {
+      scoreCacheQuery = query;
+      scoreCache.clear();
+    }
+
+    for (const path of searchResults()) {
+      const stat = stats[path];
+      if (!includeFiles() && !includeFolders()) {
+        continue;
+      }
+      if (stat) {
+        if (stat.isDir && !includeFolders()) continue;
+        if (!stat.isDir && !includeFiles()) continue;
+      } else if (!includeFiles() || !includeFolders()) {
+        continue;
+      }
+
+      const scoreKey = `${path}:${stat?.isDir ? 'dir' : 'file'}`;
+      let score = 0;
+      if (!isGlob) {
+        const cachedScore = scoreCache.get(scoreKey);
+        if (cachedScore !== undefined) {
+          score = cachedScore;
+        } else {
+          score = rankSearchResult(path, query, stat?.isDir ?? false);
+          scoreCache.set(scoreKey, score);
+        }
+      }
+
+      combined.push({
+        item: { kind: 'path', path },
+        score,
+      });
+    }
+
+    for (const app of matchingApps()) {
+      combined.push({
+        item: { kind: 'application', application: app },
+        score: isGlob ? 0 : rankApplicationResult(app, query),
+      });
+    }
+
+    return combined.sort((left, right) => {
+      if (!isGlob && left.score !== right.score) {
+        return right.score - left.score;
+      }
+
+      const leftName = left.item.kind === 'application' ? left.item.application.name : left.item.path;
+      const rightName = right.item.kind === 'application' ? right.item.application.name : right.item.path;
+
+      return leftName.localeCompare(rightName);
+    });
+  });
+
+  createEffect(() => {
+    if (!props.isOpen() || appsLoaded() || appsLoading()) return;
+
+    setAppsLoading(true);
+    void filesystem.listApplications()
+      .then((apps) => {
+        setInstalledApps(apps);
+        setAppsLoaded(true);
+      })
+      .catch(() => {
+        setInstalledApps([]);
+        setAppsLoaded(true);
+      })
+      .finally(() => {
+        setAppsLoading(false);
+      });
+  });
+
+  createEffect(() => {
+    if (props.isOpen()) {
+      requestAnimationFrame(() => searchInputRef?.focus());
+    }
+  });
+
+  createEffect(() => {
+    searchQuery();
+    includeFiles();
+    includeFolders();
+    includeApps();
+    searchStatus();
+    searchSummary();
+    searchResults();
+    resultStats();
+    schedulePersistedSessionWrite();
+  });
+
+  createEffect(() => {
+    rankedResults();
+    setVisibleVirtualResults([]);
+  });
+
+  onCleanup(() => {
+    cancelActiveSearch();
+    if (persistSessionTimer) {
+      clearTimeout(persistSessionTimer);
+      persistSessionTimer = null;
+    }
+  });
+
+  const scheduleSearch = () => {
+    const requestId = ++searchToken;
+    const trimmedQuery = searchQuery().trim();
+    const roots = props.availableRoots();
+    const nextFingerprint = fingerprintFor(trimmedQuery, roots);
+    const nextScopeKey = scopeKeyFor(roots);
+
+    if (trimmedQuery && (nextFingerprint === activeSearchFingerprint || nextFingerprint === lastSettledSearchFingerprint)) {
+      return;
+    }
+
+    cancelActiveSearch();
+
+    debounceTimer = setTimeout(async () => {
+      debounceTimer = null;
+
+      if (requestId !== searchToken) return;
+
+      if (!trimmedQuery) {
+        resetSearchState();
+        return;
+      }
+
+      if (!includeFiles() && !includeFolders() && !includeApps()) {
+        setSearchResults([]);
+        setResultStats({});
+        setSearchSummary(null);
+        setSearching(false);
+        setSearchStatus('Enable at least one search type');
+        return;
+      }
+
+      const pattern = queryToPattern(trimmedQuery);
+
+      if (roots.length === 0 && !includeApps()) {
+        setSearchResults([]);
+        setResultStats({});
+        setSearchSummary(null);
+        setSearching(false);
+        setSearchStatus('No search roots available');
+        return;
+      }
+
+      seedRefinedResults(trimmedQuery, roots);
+      setSearchSummary(null);
+      resetScoreCache();
+      setSearching(roots.length > 0 && (includeFiles() || includeFolders()));
+      setSearchStatus(`Searching for ${trimmedQuery}`);
+      lastIssuedQuery = trimmedQuery;
+      lastIssuedScopeKey = nextScopeKey;
+      activeSearchFingerprint = nextFingerprint;
+      lastSettledSearchFingerprint = '';
+
+      if (roots.length === 0) {
+        activeSearchFingerprint = '';
+        lastSettledSearchFingerprint = nextFingerprint;
+        return;
+      }
+
+      try {
+        activeSearchHandle = await filesystem.searchFilesStream(roots, {
+          pattern,
+          recursive: true,
+          includeHidden: false,
+          includeDirectories: includeFolders(),
+          maxResults: 0,
+        }, {
+          onBatch: (batch) => {
+            if (requestId !== searchToken) return;
+            enqueueBatch(batch);
+          },
+          onDone: (summary) => {
+            if (requestId !== searchToken) return;
+
+            activeSearchHandle = null;
+            activeSearchFingerprint = '';
+            lastSettledSearchFingerprint = nextFingerprint;
+            flushQueuedResults();
+            setSearching(false);
+
+            setSearchSummary(summary);
+
+            if (summary.error) {
+              setSearchStatus(`Error: ${summary.error}`);
+              return;
+            }
+
+            if (summary.cancelled) {
+              if (requestId === searchToken) {
+                setSearchStatus('Cancelled');
+              }
+              return;
+            }
+
+            if (summary.matchedEntries === 0) {
+              setSearchStatus(matchingApps().length > 0 ? `${matchingApps().length} app matches` : `No matches for ${trimmedQuery}`);
+            } else {
+              const total = summary.matchedEntries + matchingApps().length;
+              setSearchStatus(`${total} matches`);
+            }
+          },
+        });
+
+        if (requestId !== searchToken && activeSearchHandle) {
+          void activeSearchHandle.cancel();
+          activeSearchHandle = null;
+          activeSearchFingerprint = '';
+        }
+      } catch (error) {
+        if (requestId !== searchToken) return;
+
+        setSearchResults([]);
+        setSearchSummary(null);
+        setSearchStatus(error instanceof Error ? error.message : 'Failed');
+        activeSearchHandle = null;
+        activeSearchFingerprint = '';
+      }
+    }, 35);
+  };
+
+  createEffect(() => {
+    if (!props.isOpen()) return;
+    searchQuery();
+    includeFiles();
+    includeFolders();
+    includeApps();
+    props.availableRoots();
+    scheduleSearch();
+  });
+
+  createEffect(() => {
+    const stats = resultStats();
+    for (const result of visibleVirtualResults()) {
+      if (result.item.kind !== 'path') continue;
+      const path = result.item.path;
+      if (stats[path] || pendingStats.has(path)) continue;
+
+      pendingStats.add(path);
+      void filesystem.stat(path)
+        .then((stat) => {
+          setResultStats((current) => {
+            if (current[path]) return current;
+            return { ...current, [path]: stat };
+          });
+        })
+        .finally(() => {
+          pendingStats.delete(path);
+        });
+    }
+  });
+
+  const resultCount = () => rankedResults().length;
+  const labelForResult = (result: FileSearchResult) => {
+    if (result.kind === 'application') return 'App';
+
+    const path = result.path;
+    const stat = resultStats()[path];
+    if (stat?.isDir) return 'Folder';
+
+    const extension = splitNameParts(basename(path)).extension;
+    return extension ? `${extension.toUpperCase()} file` : 'File';
+  };
+
+  const nameForResult = (result: FileSearchResult) => {
+    return result.kind === 'application' ? result.application.name : basename(result.path);
+  };
+
+  const pathForResult = (result: FileSearchResult) => {
+    return result.kind === 'application' ? result.application.path : displayRelativePath('', result.path);
+  };
+
+  const iconForResult = (result: FileSearchResult) => {
+    if (result.kind === 'application') {
+      return <AppTypeIcon class="h-4 w-4" />;
+    }
+
+    const stat = resultStats()[result.path];
+    if (stat?.isDir) {
+      return <FolderTypeIcon class="h-4 w-4" />;
+    }
+
+    return <FileTypeIcon class="h-4 w-4" />;
+  };
+
+  return (
+    <Show when={props.isOpen()}>
+      <div class={`fixed inset-0 z-40 flex items-start justify-center bg-slate-950/40 px-4 py-12 backdrop-blur-sm ${props.class ?? ''}`} onClick={props.onClose}>
+        <div class="w-full max-w-4xl overflow-hidden rounded-3xl border border-white/60 bg-white shadow-2xl shadow-slate-950/30" onClick={(e) => e.stopPropagation()}>
+          <div class="flex h-128 flex-col">
+            <div class="border-b border-slate-100 px-4 py-4">
+              <div class="flex items-center gap-3">
+                <input
+                  class="min-w-0 flex-1 rounded-2xl border border-slate-200 px-4 py-3 text-sm text-slate-800 outline-none transition-colors focus:border-slate-400"
+                  ref={searchInputRef}
+                  value={searchQuery()}
+                  onInput={(e) => setSearchQuery(e.currentTarget.value)}
+                  placeholder="Type a filename or pattern like *.ts or *config*"
+                />
+                <div class="flex items-center gap-2">
+                  <SearchToggleButton active={includeFiles()} label="Toggle files" onClick={() => setIncludeFiles((value) => !value)}>
+                    <FileTypeIcon class="h-4 w-4" />
+                  </SearchToggleButton>
+                  <SearchToggleButton active={includeFolders()} label="Toggle folders" onClick={() => setIncludeFolders((value) => !value)}>
+                    <FolderTypeIcon class="h-4 w-4" />
+                  </SearchToggleButton>
+                  <SearchToggleButton active={includeApps()} label="Toggle applications" onClick={() => setIncludeApps((value) => !value)}>
+                    <AppTypeIcon class="h-4 w-4" />
+                  </SearchToggleButton>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex min-h-0 flex-1 flex-col">
+              <div class="flex-1 overflow-y-auto px-2 py-1">
+                <Show when={resultCount() > 0} fallback={
+                  <div class="flex h-full items-center justify-center text-slate-400 text-sm">
+                    {searching() ? (
+                      <div class="flex items-center gap-2">
+                        <span class="animate-spin inline-block">⏳</span>
+                        <span>Searching...</span>
+                      </div>
+                    ) : (
+                      <div class="text-center">
+                        <div>{searchStatus()}</div>
+                      </div>
+                    )}
+                  </div>
+                }>
+                  <InfiniteScrollList
+                    items={rankedResults}
+                    hasMore={() => false}
+                    onLoadMore={() => {}}
+                    isLoading={searching}
+                    itemHeight={62}
+                    overscan={10}
+                    class="h-full"
+                    endOfListMessage={`${resultCount()} results`}
+                    onVisibleRangeChange={({ items }) => setVisibleVirtualResults([...items])}
+                  >
+                    {(result, index) => (
+                      <div class="cursor-pointer border-b border-slate-100 px-3 py-2.5 transition-colors hover:bg-slate-50" onClick={() => props.onResultClick?.(result.item)}>
+                        <div class="flex items-center gap-3">
+                          <span class="w-5 shrink-0 text-right font-mono text-xs text-slate-400">
+                            {untrack(() => index()) + 1}
+                          </span>
+                          <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-600">
+                            {iconForResult(result.item)}
+                          </span>
+                          <span class="truncate font-medium text-slate-800 flex-1 min-w-0">
+                            {nameForResult(result.item)}
+                          </span>
+                          <span class="shrink-0 rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-medium text-slate-600">
+                            {labelForResult(result.item)}
+                          </span>
+                        </div>
+                        <div class="pl-8 pt-1 font-mono text-xs text-slate-500">
+                          {pathForResult(result.item)}
+                        </div>
+                      </div>
+                    )}
+                  </InfiniteScrollList>
+                </Show>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Show>
+  );
+}
+
+export interface FileSearchButtonProps {
+  onClick?: () => void;
+  label?: string;
+  class?: string;
+}
+
+export function FileSearchButton(props: FileSearchButtonProps) {
+  const shortcutLabel = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) ? 'Cmd+K' : 'Ctrl+K';
+
+  return (
+    <button class={`fixed right-4 top-4 z-30 flex items-center gap-2 rounded-full border border-slate-200 bg-white/90 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm backdrop-blur hover:border-slate-300 hover:text-slate-900 transition-all ${props.class ?? ''}`} onClick={props.onClick} type="button">
+      <span>{props.label ?? 'Search'}</span>
+      <kbd class="rounded bg-slate-100 px-1.5 py-0.5 text-xs font-mono text-slate-500">
+        {shortcutLabel}
+      </kbd>
+    </button>
+  );
+}
+
+export interface PresetsPanelProps {
+  presets: () => SearchPreset[];
+  onPresetClick: (preset: SearchPreset) => void;
+  class?: string;
+}
+
+export function PresetsPanel(props: PresetsPanelProps) {
+  return (
+    <div class={`rounded-2xl border border-slate-800 bg-slate-900 p-5 text-slate-100 shadow-xl ${props.class ?? ''}`}>
+      <div class="mb-3 flex items-center justify-between">
+        <h3 class="font-semibold">Quick Access</h3>
+        <span class="text-xs bg-white/10 px-2 py-0.5 rounded font-mono">LIVE</span>
+      </div>
+      <div class="space-y-2">
+        <For each={props.presets()}>
+          {(preset) => (
+            <button class="w-full flex items-center justify-between px-3 py-2 text-left text-sm rounded-lg border border-slate-200 hover:border-slate-300 bg-slate-50 hover:bg-slate-100 transition-all" onClick={() => props.onPresetClick(preset)} type="button">
+              <span class="font-medium">{preset.label}</span>
+              <span class="text-xs font-mono opacity-70">{preset.path ?? preset.roots?.length ?? ''}</span>
+            </button>
+          )}
+        </For>
+      </div>
+      <div class="mt-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-slate-300">
+        <div class="font-semibold">Tips</div>
+        <ul class="mt-2 space-y-1 text-xs">
+          <li>Search updates as you type</li>
+          <li>Use glob: *.ts, *config*</li>
+        </ul>
+      </div>
+    </div>
+  );
+}