@pinkpixel/memi 0.0.0-stage → 1.0.0

package/ui/js/sidebar.js

@@ -0,0 +1,85 @@
+import { $, clear, h } from "./dom.js";
+import { state } from "./state.js";
+
+function navItem(key, label, count, current, onclick, extra) {
+  return h(
+    "li",
+    {},
+    h(
+      "button",
+      { class: "nav-item", type: "button", "data-key": key, "aria-current": current ? "true" : undefined, onclick },
+      h("span", { class: "label" }, label),
+      extra,
+      count == null ? null : h("span", { class: "count" }, String(count)),
+    ),
+  );
+}
+
+const group = (title, ...children) => h("section", { class: "group" }, h("h2", { class: "group-title" }, title), ...children);
+
+/** Rebuilds the filter list from the latest status. `onChange` runs after a filter is picked. */
+export function renderSidebar(onChange) {
+  const status = state.status;
+  if (!status) return;
+  const { scope } = state;
+  const projectTotal = status.projects.reduce((sum, p) => sum + p.count, 0);
+  const pick = (patch) => () => {
+    Object.assign(state, patch);
+    onChange();
+  };
+
+  const scopes = h(
+    "ul",
+    { class: "nav" },
+    navItem("scope-all", "All", status.total, scope.kind === "all", pick({ scope: { kind: "all", project: null } })),
+    navItem("scope-global", "Global", status.total - projectTotal, scope.kind === "global", pick({ scope: { kind: "global", project: null } })),
+    ...status.projects.map((p) =>
+      navItem(
+        `scope-p-${p.project}`,
+        p.project,
+        p.count,
+        scope.kind === "project" && scope.project === p.project,
+        pick({ scope: { kind: "project", project: p.project } }),
+        p.project === status.currentProject ? h("span", { class: "here", title: "The project this was started in" }, "here") : null,
+      ),
+    ),
+  );
+
+  // Empty built-in categories are hidden to keep the list short, unless one is selected.
+  const shown = status.categories.filter((c) => c.count > 0 || c.name === state.category);
+  const categories = h(
+    "ul",
+    { class: "nav" },
+    navItem("cat-all", "All", null, state.category === "", pick({ category: "" })),
+    ...shown.map((c) => navItem(`cat-${c.name}`, c.name, c.count, state.category === c.name, pick({ category: c.name }))),
+  );
+
+  const importance = h(
+    "div",
+    { class: "segmented", role: "group", "aria-label": "Minimum importance" },
+    ...[
+      [0, "Any"],
+      [3, "3+"],
+      [4, "4+"],
+      [5, "5"],
+    ].map(([value, label]) =>
+      h("button", { type: "button", "data-key": `imp-${value}`, "aria-pressed": state.minImportance === value ? "true" : "false", onclick: pick({ minImportance: value }) }, label),
+    ),
+  );
+
+  const pinned = h(
+    "label",
+    { class: "check-row" },
+    h("input", { type: "checkbox", "data-key": "pinned-only", checked: state.pinned, onchange: (e) => pick({ pinned: e.target.checked })() }),
+    "Pinned only",
+  );
+
+  clear($("#filters")).append(group("Scope", scopes), group("Category", categories), group("Importance", h("div", { class: "nav" }, importance)), h("div", { class: "group" }, pinned));
+
+  const e = status.embedder;
+  clear($("#embedder")).append(
+    e ? `${e.provider}/${e.model}` : "no embedder",
+    h("br"),
+    `${status.vectors} of ${status.total} indexed`,
+  );
+}

package/ui/js/state.js

@@ -0,0 +1,61 @@
+const KEY = "memi.ui";
+const MODES = ["hybrid", "semantic", "text"];
+const ORDERS = ["recent", "oldest", "importance"];
+
+function loadPrefs() {
+  try {
+    return JSON.parse(localStorage.getItem(KEY) ?? "{}");
+  } catch {
+    return {};
+  }
+}
+
+const prefs = loadPrefs();
+
+export const PAGE = 50;
+
+export const state = {
+  status: null,
+  items: [],
+  total: 0,
+  modeUsed: null,
+  note: null,
+  error: null,
+  loading: true,
+
+  query: "",
+  mode: MODES.includes(prefs.mode) ? prefs.mode : "hybrid",
+  order: ORDERS.includes(prefs.order) ? prefs.order : "recent",
+  scope: { kind: "all", project: null },
+  category: "",
+  minImportance: 0,
+  pinned: false,
+};
+
+/** Search mode and sort order are remembered. Filters start fresh each visit. */
+export function savePrefs() {
+  try {
+    localStorage.setItem(KEY, JSON.stringify({ mode: state.mode, order: state.order }));
+  } catch {
+    // Storage can be blocked. The page works without it.
+  }
+}
+
+/** Turns the current filters into API query parameters. */
+export function queryParams(offset = 0) {
+  const { scope } = state;
+  return {
+    q: state.query,
+    mode: state.mode,
+    order: state.order,
+    scope: scope.kind === "all" ? "all" : scope.kind === "global" ? "global" : "project",
+    project: scope.kind === "project" ? scope.project : undefined,
+    category: state.category,
+    minImportance: state.minImportance || undefined,
+    pinned: state.pinned ? "true" : undefined,
+    limit: PAGE,
+    offset,
+  };
+}
+
+export const hasFilters = () => state.scope.kind !== "all" || state.category !== "" || state.minImportance > 0 || state.pinned;

package/ui/js/toast.js

@@ -0,0 +1,10 @@
+import { $, h } from "./dom.js";
+import { icon } from "./icons.js";
+
+const ICONS = { info: "info", success: "check", error: "triangle-alert" };
+
+export function toast(message, { kind = "info", ms } = {}) {
+  const el = h("div", { class: `toast ${kind}`, role: kind === "error" ? "alert" : undefined }, icon(ICONS[kind] ?? "info"), h("span", {}, message));
+  $("#toasts").append(el);
+  setTimeout(() => el.remove(), ms ?? (kind === "error" ? 7000 : 4000));
+}