@schlessera/brain-ui-react 0.5.1 → 0.6.1

package/src/components/quick-actions/add-modal.tsx

@@ -0,0 +1,231 @@
+import { useState, useEffect, useRef } from "react";
+import { Loader2, CheckCircle2, XCircle } from "lucide-react";
+import { SlidePanel } from "../layout/slide-panel.js";
+import { Kbd } from "../layout/kbd.js";
+import { api } from "../../lib/api-client.js";
+
+type State = "editing" | "saving" | "saved" | "error";
+
+/** Split the tags field on commas; empties dropped so "a,,b," is clean. */
+function parseTags(raw: string): string[] {
+  return raw
+    .split(",")
+    .map((t) => t.trim())
+    .filter(Boolean);
+}
+
+export function AddPanel({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const [content, setContent] = useState("");
+  const [title, setTitle] = useState("");
+  const [type, setType] = useState("");
+  const [tags, setTags] = useState("");
+  const [state, setState] = useState<State>("editing");
+  const [error, setError] = useState("");
+  // Types already in the brain, offered as completions — `brain add` accepts
+  // any string, so this is a hint list, not a closed set.
+  const [knownTypes, setKnownTypes] = useState<string[]>([]);
+
+  const contentRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setContent("");
+    setTitle("");
+    setType("");
+    setTags("");
+    setError("");
+    setState("editing");
+
+    const t = setTimeout(() => contentRef.current?.focus(), 120);
+
+    let cancelled = false;
+    api
+      .brainStats()
+      .then((s) => {
+        if (!cancelled) setKnownTypes(Object.keys(s.byType).sort());
+      })
+      .catch(() => {
+        // Completions are a nicety; a failed stats call must not block adding.
+      });
+
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [open]);
+
+  async function handleSave() {
+    const body = content.trim();
+    if (!body || state === "saving") return;
+
+    setState("saving");
+    setError("");
+    try {
+      await api.brainAdd(body, {
+        type: type.trim() || undefined,
+        title: title.trim() || undefined,
+        tags: parseTags(tags).length ? parseTags(tags) : undefined,
+      });
+      setState("saved");
+    } catch (err: any) {
+      setError(err?.message || "Add failed");
+      setState("error");
+    }
+  }
+
+  function handleAddAnother() {
+    setContent("");
+    setTitle("");
+    setType("");
+    setTags("");
+    setState("editing");
+    setTimeout(() => contentRef.current?.focus(), 0);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    // Cmd/Ctrl+Enter saves from anywhere in the form.
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      void handleSave();
+    }
+  }
+
+  const saving = state === "saving";
+  const canSave = content.trim().length > 0 && !saving;
+
+  return (
+    <SlidePanel open={open} onClose={onClose} title="Add to brain" wide>
+      <div className="flex h-full flex-col" onKeyDown={handleKeyDown}>
+        {state === "saved" ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-4 px-8 text-center">
+            <CheckCircle2 className="h-8 w-8 text-primary" />
+            <p className="text-sm text-foreground">Added to your brain.</p>
+            <p className="text-xs text-muted-foreground">
+              Run a sync to index and push it.
+            </p>
+            <div className="flex gap-2">
+              <button
+                onClick={handleAddAnother}
+                className="rounded-lg bg-surface-raised px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
+              >
+                Add another
+              </button>
+              <button
+                onClick={onClose}
+                className="rounded-lg bg-primary px-4 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="flex-1 space-y-4 overflow-y-auto p-5">
+              <Field label="Note">
+                <textarea
+                  ref={contentRef}
+                  value={content}
+                  onChange={(e) => setContent(e.target.value)}
+                  rows={8}
+                  placeholder="What do you want to remember?"
+                  className="w-full resize-y rounded-lg border border-border bg-surface-raised px-3 py-2 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/40"
+                />
+              </Field>
+
+              <Field label="Title" hint="optional, derived from the note if empty">
+                <input
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  className="w-full rounded-lg border border-border bg-surface-raised px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-primary/40"
+                />
+              </Field>
+
+              <div className="grid grid-cols-2 gap-3">
+                <Field label="Type" hint="optional">
+                  <input
+                    value={type}
+                    onChange={(e) => setType(e.target.value)}
+                    list="brain-add-types"
+                    placeholder="note"
+                    className="w-full rounded-lg border border-border bg-surface-raised px-3 py-2 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/40"
+                  />
+                  <datalist id="brain-add-types">
+                    {knownTypes.map((t) => (
+                      <option key={t} value={t} />
+                    ))}
+                  </datalist>
+                </Field>
+
+                <Field label="Tags" hint="comma-separated">
+                  <input
+                    value={tags}
+                    onChange={(e) => setTags(e.target.value)}
+                    placeholder="idea, reading"
+                    className="w-full rounded-lg border border-border bg-surface-raised px-3 py-2 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/40"
+                  />
+                </Field>
+              </div>
+
+              {state === "error" && (
+                <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2">
+                  <XCircle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-destructive" />
+                  <span className="text-xs text-destructive">{error}</span>
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center justify-between border-t border-border px-5 py-3">
+              <span className="text-[11px] text-muted-foreground">
+                <Kbd>Ctrl</Kbd>/<Kbd>Cmd</Kbd> + <Kbd>↵</Kbd> to save
+              </span>
+              <div className="flex gap-2">
+                <button
+                  onClick={onClose}
+                  className="rounded-lg bg-surface-raised px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleSave}
+                  disabled={!canSave}
+                  className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40"
+                >
+                  {saving && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+                  {saving ? "Saving..." : "Add"}
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </SlidePanel>
+  );
+}
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <label className="block space-y-1.5">
+      <span className="text-xs font-medium text-foreground">
+        {label}
+        {hint && (
+          <span className="font-normal text-muted-foreground"> — {hint}</span>
+        )}
+      </span>
+      {children}
+    </label>
+  );
+}

package/src/components/quick-actions/search-modal.tsx

@@ -0,0 +1,285 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Loader2, Search, X, AlertTriangle } from "lucide-react";
+import { SlidePanel } from "../layout/slide-panel.js";
+import { Kbd } from "../layout/kbd.js";
+import { useFileStore } from "../../stores/file-store.js";
+import { useUIStore } from "../../stores/ui-store.js";
+import { api, type BrainSearchHit } from "../../lib/api-client.js";
+import { parseSnippet } from "../../lib/search-snippet.js";
+import { cn } from "../../lib/utils.js";
+
+/** Wait this long after the last keystroke before hitting the CLI. */
+const DEBOUNCE_MS = 250;
+const MIN_QUERY = 2;
+const LIMIT = 25;
+
+type State = "idle" | "loading" | "done" | "error";
+
+export function SearchPanel({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [state, setState] = useState<State>("idle");
+  const [results, setResults] = useState<BrainSearchHit[]>([]);
+  const [warnings, setWarnings] = useState<string[]>([]);
+  const [error, setError] = useState("");
+  const [selected, setSelected] = useState(0);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const controllerRef = useRef<AbortController | null>(null);
+
+  const openFile = useFileStore((s) => s.openFile);
+  const setFilePanelOpen = useUIStore((s) => s.setFilePanelOpen);
+
+  const trimmed = query.trim();
+
+  const runSearch = useCallback(async (q: string) => {
+    controllerRef.current?.abort();
+    const controller = new AbortController();
+    controllerRef.current = controller;
+
+    setState("loading");
+    try {
+      const res = await api.brainSearch(q, {
+        limit: LIMIT,
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted) return;
+      setResults(res.results);
+      setWarnings(res.warnings ?? []);
+      setSelected(0);
+      setState("done");
+    } catch (err: any) {
+      // A superseded request is not a failure — the newer one owns the state.
+      if (err?.name === "AbortError" || controller.signal.aborted) return;
+      setError(err?.message || "Search failed");
+      setResults([]);
+      setState("error");
+    } finally {
+      if (controllerRef.current === controller) controllerRef.current = null;
+    }
+  }, []);
+
+  // Fresh panel every time it opens: stale results from a previous query would
+  // otherwise flash before the first search lands.
+  useEffect(() => {
+    if (!open) {
+      controllerRef.current?.abort();
+      controllerRef.current = null;
+      return;
+    }
+    setQuery("");
+    setResults([]);
+    setWarnings([]);
+    setError("");
+    setState("idle");
+    setSelected(0);
+    // Focus after the slide-in starts; focusing mid-transform fights the
+    // mobile keyboard on some browsers.
+    const t = setTimeout(() => inputRef.current?.focus(), 120);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  // Debounced search on typing.
+  useEffect(() => {
+    if (!open) return;
+    if (trimmed.length < MIN_QUERY) {
+      controllerRef.current?.abort();
+      controllerRef.current = null;
+      setResults([]);
+      setWarnings([]);
+      setState("idle");
+      return;
+    }
+    const t = setTimeout(() => void runSearch(trimmed), DEBOUNCE_MS);
+    return () => clearTimeout(t);
+  }, [open, trimmed, runSearch]);
+
+  function handleOpenResult(hit: BrainSearchHit) {
+    // The file panel takes the same right-hand slot, so hand the screen over
+    // rather than stacking two sheets.
+    onClose();
+    setFilePanelOpen(true);
+    void openFile(hit.path);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      if (results.length === 0) return;
+      e.preventDefault();
+      const delta = e.key === "ArrowDown" ? 1 : -1;
+      const next = (selected + delta + results.length) % results.length;
+      setSelected(next);
+      listRef.current
+        ?.querySelectorAll("[data-result]")
+        [next]?.scrollIntoView({ block: "nearest" });
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const hit = results[selected];
+      if (hit) handleOpenResult(hit);
+      // Enter with nothing selected jumps the debounce.
+      else if (trimmed.length >= MIN_QUERY) void runSearch(trimmed);
+    }
+  }
+
+  return (
+    <SlidePanel open={open} onClose={onClose} title="Search" wide>
+      <div className="flex h-full flex-col">
+        {/* Query field */}
+        <div className="border-b border-border px-5 py-3">
+          <div className="flex items-center gap-2 rounded-lg border border-border bg-surface-raised px-3 py-2 focus-within:border-primary/40">
+            <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search your brain..."
+              className="min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+              autoComplete="off"
+              autoCorrect="off"
+              spellCheck={false}
+            />
+            {state === "loading" && (
+              <Loader2 className="h-4 w-4 shrink-0 animate-spin text-primary" />
+            )}
+            {query && state !== "loading" && (
+              <button
+                onClick={() => {
+                  setQuery("");
+                  inputRef.current?.focus();
+                }}
+                className="shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground"
+                title="Clear"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Degraded-mode notices from the CLI (e.g. FTS-only, no vectors) */}
+        {warnings.length > 0 && (
+          <div className="flex items-start gap-2 border-b border-border bg-surface-raised/40 px-5 py-2">
+            <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+            <div className="text-[11px] leading-relaxed text-muted-foreground">
+              {warnings.map((w, i) => (
+                <div key={i}>{w}</div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Results */}
+        <div ref={listRef} className="flex-1 overflow-y-auto">
+          {state === "error" ? (
+            <Placeholder>{error}</Placeholder>
+          ) : trimmed.length < MIN_QUERY ? (
+            <Placeholder>
+              <span>
+                Type at least {MIN_QUERY} characters. <Kbd>↑</Kbd> <Kbd>↓</Kbd> to
+                pick, <Kbd>↵</Kbd> to open.
+              </span>
+            </Placeholder>
+          ) : state === "done" && results.length === 0 ? (
+            <Placeholder>No results for “{trimmed}”.</Placeholder>
+          ) : (
+            <div className="divide-y divide-border/40">
+              {results.map((hit, i) => (
+                <ResultRow
+                  key={hit.path}
+                  hit={hit}
+                  active={i === selected}
+                  onMouseEnter={() => setSelected(i)}
+                  onClick={() => handleOpenResult(hit)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between border-t border-border px-5 py-3">
+          <span className="text-[11px] text-muted-foreground">
+            {state === "done" && results.length > 0
+              ? `${results.length}${results.length === LIMIT ? "+" : ""} result${results.length === 1 ? "" : "s"}`
+              : ""}
+          </span>
+          <button
+            onClick={onClose}
+            className="rounded-lg bg-surface-raised px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </SlidePanel>
+  );
+}
+
+function ResultRow({
+  hit,
+  active,
+  onClick,
+  onMouseEnter,
+}: {
+  hit: BrainSearchHit;
+  active: boolean;
+  onClick: () => void;
+  onMouseEnter: () => void;
+}) {
+  return (
+    <button
+      data-result
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      title={hit.path}
+      className={cn(
+        "flex w-full flex-col gap-1 px-5 py-3 text-left transition-colors",
+        active ? "bg-surface-raised" : "hover:bg-surface-raised/60"
+      )}
+    >
+      <div className="flex items-baseline gap-2">
+        {hit.type && (
+          <span className="shrink-0 rounded bg-surface-overlay px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
+            {hit.type}
+          </span>
+        )}
+        <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
+          {hit.title || hit.path}
+        </span>
+      </div>
+      {hit.snippet && (
+        <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+          {parseSnippet(hit.snippet).map((seg, i) =>
+            seg.hit ? (
+              <span key={i} className="text-foreground">
+                {seg.text}
+              </span>
+            ) : (
+              <span key={i}>{seg.text}</span>
+            )
+          )}
+        </p>
+      )}
+      <span className="truncate font-mono text-[10px] text-muted-foreground/60">
+        {hit.path}
+      </span>
+    </button>
+  );
+}
+
+function Placeholder({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-32 items-center justify-center px-8 text-center text-xs text-muted-foreground">
+      {children}
+    </div>
+  );
+}

package/src/lib/api-client.ts

@@ -15,6 +15,26 @@ import type {
   PublicKeyCredentialRequestOptionsJSON,
 } from "@simplewebauthn/browser";
 
+/**
+ * One hit from `brain search`. `snippet` carries the CLI's FTS highlight
+ * markers (`>>>term<<<`) — render it through `renderSnippet()` in the search
+ * panel rather than printing it raw.
+ */
+export interface BrainSearchHit {
+  path: string;
+  title: string;
+  type: string;
+  relevance: string;
+  score: number;
+  snippet: string;
+}
+
+export interface BrainSearchResponse {
+  results: BrainSearchHit[];
+  /** Degraded-mode notices, e.g. vector search unavailable so results are FTS-only. */
+  warnings: string[];
+}
+
 /** Backend id + capability flags the client renders behavior from. */
 export interface BackendInfo {
   id: string;
@@ -58,12 +78,26 @@ export const api = {
       activeSession: boolean;
     }>("/status"),
 
-  brainSearch: (q: string, opts?: { type?: string; limit?: number }) =>
-    fetchJson<{
-      results: Array<{ path: string; title: string; snippet: string; score: number }>;
-      warnings: string[];
-    }>(
-      `/brain/search?q=${encodeURIComponent(q)}${opts?.type ? `&type=${opts.type}` : ""}${opts?.limit ? `&limit=${opts.limit}` : ""}`
+  brainSearch: (
+    q: string,
+    opts?: {
+      type?: string;
+      tag?: string;
+      limit?: number;
+      mode?: "fts" | "vector" | "hybrid";
+      signal?: AbortSignal;
+    }
+  ) =>
+    // Built with encodeURIComponent rather than URLSearchParams: the latter
+    // form-encodes spaces as "+", which not every query parser turns back into
+    // a space. %20 is unambiguous.
+    fetchJson<BrainSearchResponse>(
+      `/brain/search?q=${encodeURIComponent(q)}` +
+        (opts?.type ? `&type=${encodeURIComponent(opts.type)}` : "") +
+        (opts?.tag ? `&tag=${encodeURIComponent(opts.tag)}` : "") +
+        (opts?.limit ? `&limit=${opts.limit}` : "") +
+        (opts?.mode ? `&mode=${opts.mode}` : ""),
+      { signal: opts?.signal }
     ),
 
   brainBriefing: () =>

package/src/lib/search-snippet.ts

@@ -0,0 +1,64 @@
+import { stripMarkdown } from "./strip-markdown.js";
+
+/**
+ * `brain search` returns FTS snippets with the matched terms wrapped in
+ * `>>>` / `<<<` markers (sqlite's snippet() delimiters, chosen by the CLI so
+ * they survive JSON without colliding with markdown). Vector hits come back
+ * unmarked, as a raw slice of chunk text — headings, emphasis, blank lines and
+ * all. Split a snippet into plain and matched segments, with the markdown
+ * syntax stripped and the whitespace collapsed, so a result row is one legible
+ * line with its hits highlighted.
+ */
+export interface SnippetSegment {
+  text: string;
+  hit: boolean;
+}
+
+const OPEN = ">>>";
+const CLOSE = "<<<";
+// Control characters stand in for the markers while stripMarkdown runs: a
+// snippet starting with ">>>" would otherwise lose a ">" to the blockquote
+// rule, and emphasis spanning a highlight (`**a >>>b<<<**`) has to be
+// unwrapped as one string, not per segment.
+const OPEN_MARK = "\u0001";
+const CLOSE_MARK = "\u0002";
+
+export function parseSnippet(snippet: string): SnippetSegment[] {
+  const cleaned = stripMarkdown(
+    snippet.split(OPEN).join(OPEN_MARK).split(CLOSE).join(CLOSE_MARK)
+  )
+    .replace(/\s+/g, " ")
+    .trim();
+
+  const segments: SnippetSegment[] = [];
+  let rest = cleaned;
+
+  while (rest.length > 0) {
+    const start = rest.indexOf(OPEN_MARK);
+    if (start === -1) break;
+
+    const end = rest.indexOf(CLOSE_MARK, start + 1);
+    // An unclosed marker means the snippet was clipped mid-highlight; keep the
+    // remainder as plain text rather than dropping it.
+    if (end === -1) break;
+
+    if (start > 0) push(segments, rest.slice(0, start), false);
+    push(segments, rest.slice(start + 1, end), true);
+    rest = rest.slice(end + 1);
+  }
+
+  push(segments, rest, false);
+  return segments;
+}
+
+function push(segments: SnippetSegment[], text: string, hit: boolean): void {
+  // Any stray marker left by a clipped snippet is noise, not content —
+  // squeeze the gap it leaves behind so the row reads as one sentence.
+  const clean = text
+    .split(OPEN_MARK)
+    .join("")
+    .split(CLOSE_MARK)
+    .join("")
+    .replace(/ {2,}/g, " ");
+  if (clean) segments.push({ text: clean, hit });
+}

package/src/stores/ui-store.ts

@@ -7,17 +7,23 @@ interface UIState {
   sessionPanelOpen: boolean;
   syncPanelOpen: boolean;
   whatsupPanelOpen: boolean;
+  searchPanelOpen: boolean;
+  addPanelOpen: boolean;
   filePanelOpen: boolean;
   settingsPanelOpen: boolean;
   settingsTab: SettingsTab;
   toggleSessionPanel: () => void;
   toggleSyncPanel: () => void;
   toggleWhatsupPanel: () => void;
+  toggleSearchPanel: () => void;
+  toggleAddPanel: () => void;
   toggleFilePanel: () => void;
   toggleSettingsPanel: () => void;
   closeAllPanels: () => void;
   setSyncPanelOpen: (open: boolean) => void;
   setWhatsupPanelOpen: (open: boolean) => void;
+  setSearchPanelOpen: (open: boolean) => void;
+  setAddPanelOpen: (open: boolean) => void;
   setSessionPanelOpen: (open: boolean) => void;
   setFilePanelOpen: (open: boolean) => void;
   setSettingsPanelOpen: (open: boolean) => void;
@@ -30,6 +36,8 @@ const CLOSED = {
   sessionPanelOpen: false,
   syncPanelOpen: false,
   whatsupPanelOpen: false,
+  searchPanelOpen: false,
+  addPanelOpen: false,
   filePanelOpen: false,
   settingsPanelOpen: false,
 };
@@ -43,6 +51,10 @@ export const useUIStore = create<UIState>((set) => ({
     set((s) => ({ ...CLOSED, syncPanelOpen: !s.syncPanelOpen })),
   toggleWhatsupPanel: () =>
     set((s) => ({ ...CLOSED, whatsupPanelOpen: !s.whatsupPanelOpen })),
+  toggleSearchPanel: () =>
+    set((s) => ({ ...CLOSED, searchPanelOpen: !s.searchPanelOpen })),
+  toggleAddPanel: () =>
+    set((s) => ({ ...CLOSED, addPanelOpen: !s.addPanelOpen })),
   toggleFilePanel: () =>
     set((s) => ({ ...CLOSED, filePanelOpen: !s.filePanelOpen })),
   toggleSettingsPanel: () =>
@@ -50,6 +62,8 @@ export const useUIStore = create<UIState>((set) => ({
   closeAllPanels: () => set({ ...CLOSED }),
   setSyncPanelOpen: (open) => set({ syncPanelOpen: open }),
   setWhatsupPanelOpen: (open) => set({ whatsupPanelOpen: open }),
+  setSearchPanelOpen: (open) => set({ searchPanelOpen: open }),
+  setAddPanelOpen: (open) => set({ addPanelOpen: open }),
   setSessionPanelOpen: (open) => set({ sessionPanelOpen: open }),
   setFilePanelOpen: (open) => set({ filePanelOpen: open }),
   setSettingsPanelOpen: (open) => set({ settingsPanelOpen: open }),