zebflow 0.7.9

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

import { createContext, useContext, useEffect, useRef, useState } from "zeb";
import FileSearchDialog from "@/pages/project-studio/components/file-search-dialog";
import type { FileItem } from "@/pages/project-studio/components/file-search-dialog";
import { registerShortcut } from "@/pages/project-studio/components/keyboard-shortcuts";

export interface FileSearchOpenOpts {
  scope?: "pages" | "all";
  onSelect?: (relPath: string) => void;
}

interface FileSearchContextValue {
  openFileSearch: (opts?: FileSearchOpenOpts) => void;
}

const FileSearchContext = createContext(null as FileSearchContextValue | null);

export function FileSearchProvider({ children, owner, project }) {
  const [open, setOpen] = useState(false);
  const [opts, setOpts] = useState<FileSearchOpenOpts>({});
  const [items, setItems] = useState<FileItem[]>([]);

  // Stable ref to the open handler so shortcuts can reference it after registration
  const handleOpenRef = useRef<(o?: FileSearchOpenOpts) => void>(null);

  async function loadItems() {
    if (!owner || !project) return;
    try {
      const [tmplResp, plResp] = await Promise.all([
        fetch(`/api/projects/${owner}/${project}/templates/workspace`),
        fetch(`/api/projects/${owner}/${project}/pipelines?recursive=true`),
      ]);
      const tmplData = tmplResp.ok ? await tmplResp.json() : {};
      const plData = plResp.ok ? await plResp.json() : {};

      const templateItems: FileItem[] = (Array.isArray(tmplData?.items) ? tmplData.items : [])
        .filter((item: any) => item?.kind !== "folder" && !!item?.rel_path)
        .map((item: any) => ({
          rel_path: String(item.rel_path),
          name: String(item.name || item.rel_path),
        }));

      const pipelineItems: FileItem[] = (Array.isArray(plData?.items) ? plData.items : [])
        .filter((item: any) => !!item?.meta?.file_rel_path)
        .map((item: any) => ({
          rel_path: String(item.meta.file_rel_path),
          name: String(item.meta.name || item.meta.file_rel_path),
        }));

      setItems([...templateItems, ...pipelineItems]);
    } catch {
      // ignore
    }
  }

  function handleOpen(o: FileSearchOpenOpts = {}) {
    setOpts(o);
    setOpen(true);
    loadItems();
  }

  // Keep ref up to date so the shortcut action always calls the latest version
  handleOpenRef.current = handleOpen;

  // Register Cmd+K / Ctrl+K — once, via stable ref
  useEffect(() => {
    registerShortcut({
      key: "k",
      meta: true,
      description: "Open file search",
      action: () => handleOpenRef.current?.(),
    });
    registerShortcut({
      key: "k",
      ctrl: true,
      description: "Open file search",
      action: () => handleOpenRef.current?.(),
    });
  }, []);

  const value: FileSearchContextValue = { openFileSearch: handleOpen };

  return (
    <FileSearchContext.Provider value={value}>
      {children}
      <FileSearchDialog
        open={open}
        onClose={() => setOpen(false)}
        onSelect={(relPath) => { opts.onSelect?.(relPath); setOpen(false); }}
        owner={owner}
        project={project}
        scope={opts.scope}
        items={items}
      />
    </FileSearchContext.Provider>
  );
}

export function useFileSearch(): FileSearchContextValue {
  const ctx = useContext(FileSearchContext);
  if (!ctx) throw new Error("useFileSearch must be used inside FileSearchProvider");
  return ctx;
}

/** Returns null when not inside FileSearchProvider — use for optional integration. */
export function useFileSearchOptional(): FileSearchContextValue | null {
  return useContext(FileSearchContext);
}