makersclaw 0.2.0 → 0.3.1

package/registry/blocks/sidebar/sidebar-panel.jsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Empty, InputGroup, Item, Notice, ScrollArea, Skeleton, commandScore, toast } from "../../ui";
+
+// The Sidebar's second column (README "panel"): a title, an optional
+// search field and a list — the mails in a folder, the threads in a
+// channel — or any node of the app's own. Drawn beside the nav from
+// 768px and as the sheet's second screen on a phone (sidebar.jsx decides
+// where). Also the helper that turns an action's `{ ok: false }` into a
+// toast, shared by item menus, the foot's "+" menu and primaryAction.
+
+/** Menu items whose onSelect may be async and return `{ ok, error? }`:
+ *  a refusal or a throw becomes an error toast, so a failed "Archive"
+ *  never looks done. `arg` is what each onSelect is called with. */
+export function guard(entries, arg) {
+  return (entries ?? []).filter(Boolean).map((entry) => {
+    if (Array.isArray(entry.items)) return { ...entry, items: guard(entry.items, arg) };
+    if (!entry.onSelect) return entry;
+    return { ...entry, onSelect: () => run(entry.onSelect, arg, entry.label) };
+  });
+}
+
+/** Runs an action and says so when it fails. */
+export async function run(fn, arg, label) {
+  try {
+    const result = await fn?.(arg);
+    if (result && result.ok === false) toast.error(result.error || `${label ?? "That"} didn't go through`);
+    return result;
+  } catch (err) {
+    toast.error(`${label ?? "That"} didn't go through`, { description: err?.message });
+    return { ok: false };
+  }
+}
+
+const textOf = (it) => [it.title, it.subtitle, it.description, ...(it.keywords ?? [])].filter((x) => typeof x === "string").join(" ");
+
+/** The panel's body: header (title, actions, search), then the list or its
+ *  loading · error · empty state. `onChoose(item)` runs after the item's
+ *  own onSelect (the Sidebar closes the phone sheet there). */
+export function PanelBody({ panel, onChoose, sheet = false }) {
+  const [own, setOwn] = useState("");
+  const query = panel.query ?? own;
+  const setQuery = (q) => {
+    if (panel.query === undefined) setOwn(q);
+    panel.onQueryChange?.(q);
+  };
+  const searchOn = Boolean(panel.search);
+  const placeholder = (typeof panel.search === "object" && panel.search.placeholder) || "Search";
+  const items = (panel.items ?? []).filter(Boolean);
+  const shown = !searchOn || panel.filter === false || !query.trim() ? items : items.filter((it) => commandScore(textOf(it), query) > 0);
+
+  function choose(item) {
+    item.onSelect?.(item);
+    panel.onSelect?.(item);
+    onChoose?.(item);
+  }
+
+  let body;
+  if (panel.error) {
+    body = (
+      <div className="p-3">
+        <Notice
+          tone="danger"
+          title={typeof panel.error === "string" ? panel.error : "This list didn't load"}
+          action={panel.onRetry ? <Button size="sm" onClick={panel.onRetry}>Try again</Button> : undefined}
+        />
+      </div>
+    );
+  } else if (panel.loading) {
+    body = (
+      <ul aria-busy="true" aria-label={`Loading ${panel.title ?? "list"}`} className="grid">
+        {[0, 1, 2, 3, 4].map((i) => (
+          <li key={i} className="grid gap-2 border-b border-border px-4 py-3">
+            <Skeleton className="w-1/2" />
+            <Skeleton className="w-3/4" />
+            <Skeleton className="w-full" />
+          </li>
+        ))}
+      </ul>
+    );
+  } else if (!shown.length) {
+    body = (
+      <div className="p-4">
+        <Empty
+          icon={query.trim() ? "search" : "inbox"}
+          title={query.trim() ? `Nothing matches "${query.trim()}"` : panel.empty ?? "Nothing here yet"}
+        />
+      </div>
+    );
+  } else {
+    body = (
+      <ul aria-label={panel.title ?? "List"} className="grid">
+        {shown.map((it, i) => (
+          <li key={it.key ?? it.href ?? `${it.title}-${i}`} className="border-b border-border">
+            <Item
+              title={it.title}
+              meta={it.meta}
+              media={it.media}
+              icon={it.icon}
+              href={it.disabled ? undefined : it.href}
+              onClick={it.disabled ? undefined : () => choose(it)}
+              disabled={it.disabled}
+              aria-current={it.active ? "true" : undefined}
+              description={
+                it.subtitle || it.description ? (
+                  <>
+                    {it.subtitle ? <span className="block truncate font-medium text-foreground">{it.subtitle}</span> : null}
+                    {it.description ? <span className="line-clamp-2">{it.description}</span> : null}
+                  </>
+                ) : undefined
+              }
+            />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {panel.title || panel.actions || searchOn ? (
+        <div className="grid shrink-0 gap-3 border-b border-border p-3">
+          {panel.title || panel.actions ? (
+            <div className="flex min-h-9 items-center gap-2">
+              {panel.title ? <h2 className="min-w-0 flex-1 truncate text-base font-semibold">{panel.title}</h2> : null}
+              {panel.actions ? <div className="flex shrink-0 items-center gap-1">{panel.actions}</div> : null}
+            </div>
+          ) : null}
+          {searchOn ? (
+            <InputGroup
+              icon="search"
+              type="search"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={placeholder}
+              aria-label={`Search ${panel.title ?? "the list"}`}
+            />
+          ) : null}
+        </div>
+      ) : null}
+      {sheet ? <div className="min-h-0 flex-1">{body}</div> : (
+        <ScrollArea label={panel.title ?? "List"} className="min-h-0 flex-1" fade>
+          {body}
+        </ScrollArea>
+      )}
+    </div>
+  );
+}