@rsktash/beads-ui 0.1.0 → 0.1.2

package/client/src/components/SearchDialog.tsx

@@ -1,137 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { useSubscription } from "../hooks/use-subscription";
-import { useSearch } from "../hooks/use-search";
-import { StatusBadge } from "./StatusBadge";
-import { PriorityBadge } from "./PriorityBadge";
-
-export function SearchDialog() {
-  const [open, setOpen] = useState(false);
-  const { issues } = useSubscription("all-issues");
-  const { query, setQuery, results } = useSearch(issues);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Cmd+K to open, Escape to close
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      const tag = (e.target as HTMLElement)?.tagName;
-      if (e.key === "k" && (e.metaKey || e.ctrlKey) && tag !== "TEXTAREA") {
-        e.preventDefault();
-        setOpen(true);
-      }
-      if (e.key === "Escape" && open) {
-        e.preventDefault();
-        setOpen(false);
-        setQuery("");
-        setSelectedIndex(0);
-      }
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [open, setQuery]);
-
-  // Focus input when opened
-  useEffect(() => {
-    if (open) setTimeout(() => inputRef.current?.focus(), 0);
-  }, [open]);
-
-  // Reset selection when results change
-  useEffect(() => setSelectedIndex(0), [results]);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    const shown = results.slice(0, 20);
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setSelectedIndex((i) => Math.min(i + 1, shown.length - 1));
-    }
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setSelectedIndex((i) => Math.max(i - 1, 0));
-    }
-    if (e.key === "Enter" && shown[selectedIndex]) {
-      window.location.hash = `#/detail/${shown[selectedIndex].id}`;
-      setOpen(false);
-      setQuery("");
-    }
-  };
-
-  if (!open) return null;
-
-  const shown = results.slice(0, 20);
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]"
-      onClick={() => {
-        setOpen(false);
-        setQuery("");
-      }}
-    >
-      <div className="absolute inset-0" style={{ background: "var(--bg-overlay)" }} />
-      <div
-        className="relative w-full max-w-lg overflow-hidden"
-        style={{
-          background: "var(--bg-elevated)",
-          borderRadius: "var(--radius-lg)",
-          border: "1px solid var(--border-subtle)",
-          boxShadow: "0 25px 50px -12px rgba(0,0,0,0.15)",
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <input
-          ref={inputRef}
-          type="text"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Search issues..."
-          className="w-full px-4 py-3 text-sm outline-none"
-          style={{
-            borderBottom: "1px solid var(--border-subtle)",
-            background: "transparent",
-            color: "var(--text-primary)",
-          }}
-        />
-        <div className="max-h-80 overflow-y-auto">
-          {shown.length === 0 && query && (
-            <div className="px-4 py-6 text-sm text-center" style={{ color: "var(--text-tertiary)" }}>
-              No results
-            </div>
-          )}
-          {shown.map((issue, i) => (
-            <button
-              key={issue.id}
-              onClick={() => {
-                window.location.hash = `#/detail/${issue.id}`;
-                setOpen(false);
-                setQuery("");
-              }}
-              className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-left transition-colors"
-              style={{
-                background: i === selectedIndex ? "var(--bg-hover)" : "transparent",
-              }}
-              onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
-              onMouseLeave={(e) => { e.currentTarget.style.background = i === selectedIndex ? "var(--bg-hover)" : "transparent"; }}
-            >
-              <span className="font-mono text-xs w-28 shrink-0" style={{ color: "var(--text-tertiary)" }}>
-                {issue.id}
-              </span>
-              <StatusBadge status={issue.status} />
-              <span className="flex-1 truncate" style={{ color: "var(--text-primary)" }}>{issue.title}</span>
-              <PriorityBadge priority={issue.priority} />
-            </button>
-          ))}
-        </div>
-        <div
-          className="px-4 py-2 text-xs"
-          style={{
-            color: "var(--text-tertiary)",
-            borderTop: "1px solid var(--border-subtle)",
-          }}
-        >
-          &uarr;&darr; navigate &middot; &crarr; open &middot; esc close
-        </div>
-      </div>
-    </div>
-  );
-}

package/client/src/components/SectionEditor.tsx

@@ -1,212 +0,0 @@
-import { useState, useCallback, useEffect } from "react";
-import { Markdown } from "./Markdown";
-
-interface SectionEditorProps {
-  label: string;
-  value: string;
-  placeholder?: string;
-  onSave: (value: string) => Promise<unknown>;
-}
-
-export function SectionEditor({
-  label,
-  value,
-  placeholder,
-  onSave,
-}: SectionEditorProps) {
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(value);
-  const [tab, setTab] = useState<"edit" | "preview">("edit");
-  const [saving, setSaving] = useState(false);
-
-  // Sync draft with external value when not editing
-  useEffect(() => {
-    if (!editing) setDraft(value);
-  }, [value, editing]);
-
-  const handleSave = useCallback(async () => {
-    setSaving(true);
-    try {
-      await onSave(draft);
-      setEditing(false);
-      setTab("edit");
-    } finally {
-      setSaving(false);
-    }
-  }, [draft, onSave]);
-
-  const handleCancel = useCallback(() => {
-    setDraft(value);
-    setEditing(false);
-    setTab("edit");
-  }, [value]);
-
-  const handleEditorKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        handleSave();
-      }
-      if (e.key === "Escape") {
-        e.preventDefault();
-        handleCancel();
-      }
-    },
-    [handleSave, handleCancel],
-  );
-
-  if (!editing) {
-    return (
-      <div
-        className="group rounded-lg p-4"
-        style={{
-          background: "var(--bg-elevated)",
-          border: "1px solid var(--border-subtle)",
-          boxShadow: "var(--shadow-card)",
-        }}
-      >
-        <div className="flex items-center justify-between mb-2">
-          <h3
-            className="font-semibold uppercase tracking-wider"
-            style={{ fontSize: "11px", color: "var(--text-tertiary)" }}
-          >
-            {label}
-          </h3>
-          <button
-            onClick={() => setEditing(true)}
-            className="opacity-0 group-hover:opacity-100 transition-opacity"
-            style={{ color: "var(--text-tertiary)" }}
-            onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
-            onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-tertiary)"; }}
-            title={`Edit ${label}`}
-          >
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-              />
-            </svg>
-          </button>
-        </div>
-        {value ? (
-          <Markdown content={value} />
-        ) : (
-          <p className="text-sm italic" style={{ color: "var(--text-tertiary)" }}>
-            {placeholder || `Add ${label.toLowerCase()}...`}
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="rounded-lg p-4"
-      style={{
-        background: "var(--bg-elevated)",
-        border: "1px solid var(--accent)",
-        boxShadow: "var(--shadow-card)",
-      }}
-      onKeyDown={handleEditorKeyDown}
-    >
-      <div className="flex items-center justify-between mb-2">
-        <h3
-          className="font-semibold uppercase tracking-wider"
-          style={{ fontSize: "11px", color: "var(--text-tertiary)" }}
-        >
-          {label}
-        </h3>
-        <div
-          className="flex overflow-hidden text-xs rounded-md"
-          style={{ border: "1px solid var(--border-default)" }}
-        >
-          <button
-            onClick={() => setTab("edit")}
-            className="px-2.5 py-1 font-medium"
-            style={{
-              background: tab === "edit" ? "var(--bg-hover)" : "var(--bg-elevated)",
-              color: tab === "edit" ? "var(--text-primary)" : "var(--text-secondary)",
-            }}
-          >
-            Edit
-          </button>
-          <button
-            onClick={() => setTab("preview")}
-            className="px-2.5 py-1 font-medium"
-            style={{
-              background: tab === "preview" ? "var(--bg-hover)" : "var(--bg-elevated)",
-              color: tab === "preview" ? "var(--text-primary)" : "var(--text-secondary)",
-              borderLeft: "1px solid var(--border-default)",
-            }}
-          >
-            Preview
-          </button>
-        </div>
-      </div>
-      {tab === "edit" ? (
-        <textarea
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          rows={10}
-          className="w-full p-3 text-sm font-mono rounded-md resize-y outline-none"
-          style={{
-            border: "1px solid var(--border-default)",
-            background: "var(--bg-base)",
-            color: "var(--text-primary)",
-          }}
-          onFocus={(e) => { e.currentTarget.style.borderColor = "var(--accent)"; }}
-          onBlur={(e) => { e.currentTarget.style.borderColor = "var(--border-default)"; }}
-          autoFocus
-        />
-      ) : (
-        <div
-          className="p-3 rounded-md min-h-[160px]"
-          style={{
-            border: "1px solid var(--border-default)",
-            background: "var(--bg-base)",
-          }}
-        >
-          <Markdown content={draft} />
-        </div>
-      )}
-      <div className="flex items-center justify-end gap-2 mt-3">
-        <span className="text-xs mr-auto" style={{ color: "var(--text-tertiary)" }}>
-          Cmd+S to save, Esc to cancel
-        </span>
-        <button
-          onClick={handleCancel}
-          className="px-3 py-1.5 text-sm rounded-md transition-colors"
-          style={{
-            color: "var(--text-secondary)",
-            border: "1px solid var(--border-default)",
-            background: "var(--bg-elevated)",
-          }}
-          onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
-          onMouseLeave={(e) => { e.currentTarget.style.background = "var(--bg-elevated)"; }}
-        >
-          Cancel
-        </button>
-        <button
-          onClick={handleSave}
-          disabled={saving}
-          className="px-3 py-1.5 text-sm rounded-md font-medium disabled:opacity-50 transition-colors"
-          style={{
-            background: "var(--accent)",
-            color: "white",
-          }}
-          onMouseEnter={(e) => { e.currentTarget.style.opacity = "0.9"; }}
-          onMouseLeave={(e) => { e.currentTarget.style.opacity = "1"; }}
-        >
-          {saving ? "Saving..." : "Save"}
-        </button>
-      </div>
-    </div>
-  );
-}

package/client/src/components/StatusBadge.tsx

@@ -1,64 +0,0 @@
-const STATUS_CONFIG: Record<string, { dot: string; bg: string; text: string; border: string; label: string }> = {
-  open: {
-    dot: "var(--status-open)",
-    bg: "rgba(59,130,246,0.08)",
-    text: "#2563EB",
-    border: "rgba(59,130,246,0.2)",
-    label: "Open",
-  },
-  in_progress: {
-    dot: "var(--status-in-progress)",
-    bg: "rgba(245,158,11,0.08)",
-    text: "#D97706",
-    border: "rgba(245,158,11,0.2)",
-    label: "In Progress",
-  },
-  blocked: {
-    dot: "var(--status-blocked)",
-    bg: "rgba(239,68,68,0.08)",
-    text: "#DC2626",
-    border: "rgba(239,68,68,0.2)",
-    label: "Blocked",
-  },
-  closed: {
-    dot: "var(--status-closed)",
-    bg: "rgba(34,197,94,0.08)",
-    text: "#16A34A",
-    border: "rgba(34,197,94,0.2)",
-    label: "Closed",
-  },
-};
-
-const DEFAULT_CONFIG = {
-  dot: "#9CA3AF",
-  bg: "rgba(156,163,175,0.08)",
-  text: "#6B7280",
-  border: "rgba(156,163,175,0.2)",
-  label: "",
-};
-
-export function StatusBadge({ status }: { status: string }) {
-  const config = STATUS_CONFIG[status] || DEFAULT_CONFIG;
-  return (
-    <span
-      className="inline-flex items-center gap-1.5 px-2 py-0.5 font-semibold"
-      style={{
-        fontSize: "11px",
-        borderRadius: "20px",
-        backgroundColor: config.bg,
-        color: config.text,
-        border: `1px solid ${config.border}`,
-      }}
-    >
-      <span
-        className="rounded-full shrink-0"
-        style={{
-          width: "6px",
-          height: "6px",
-          backgroundColor: config.dot,
-        }}
-      />
-      {config.label || status}
-    </span>
-  );
-}

package/client/src/components/TypeBadge.tsx

@@ -1,26 +0,0 @@
-const TYPE_CONFIG: Record<string, { bg: string; text: string }> = {
-  epic: { bg: "rgba(124,58,237,0.1)", text: "#7C3AED" },
-  feature: { bg: "rgba(99,102,241,0.1)", text: "#6366F1" },
-  bug: { bg: "rgba(239,68,68,0.1)", text: "#DC2626" },
-  task: { bg: "rgba(22,163,74,0.1)", text: "#16A34A" },
-  chore: { bg: "rgba(120,113,108,0.1)", text: "#78716C" },
-};
-
-const DEFAULT = { bg: "rgba(120,113,108,0.1)", text: "#78716C" };
-
-export function TypeBadge({ type }: { type: string }) {
-  const config = TYPE_CONFIG[type] || DEFAULT;
-  return (
-    <span
-      className="inline-flex items-center px-2 py-0.5 font-semibold capitalize"
-      style={{
-        fontSize: "11px",
-        borderRadius: "var(--radius-sm)",
-        backgroundColor: config.bg,
-        color: config.text,
-      }}
-    >
-      {type}
-    </span>
-  );
-}

package/client/src/hooks/use-mutation.ts

@@ -1,55 +0,0 @@
-import { useCallback } from "react";
-import { useWs } from "../lib/ws-context";
-import type {
-  EditTextPayload,
-  CreateIssuePayload,
-} from "../lib/types";
-
-export function useMutation() {
-  const ws = useWs();
-
-  return {
-    updateStatus: useCallback(
-      (id: string, status: "open" | "in_progress" | "closed") =>
-        ws.updateStatus({ id, status }),
-      [ws],
-    ),
-    editText: useCallback(
-      (payload: EditTextPayload) => ws.editText(payload),
-      [ws],
-    ),
-    createIssue: useCallback(
-      (payload: CreateIssuePayload) => ws.createIssue(payload),
-      [ws],
-    ),
-    updatePriority: useCallback(
-      (id: string, priority: number) => ws.updatePriority(id, priority),
-      [ws],
-    ),
-    updateAssignee: useCallback(
-      (id: string, assignee: string) => ws.updateAssignee(id, assignee),
-      [ws],
-    ),
-    addLabel: useCallback(
-      (id: string, label: string) => ws.addLabel(id, label),
-      [ws],
-    ),
-    removeLabel: useCallback(
-      (id: string, label: string) => ws.removeLabel(id, label),
-      [ws],
-    ),
-    deleteIssue: useCallback((id: string) => ws.deleteIssue(id), [ws]),
-    addComment: useCallback(
-      (id: string, text: string) => ws.addComment(id, text),
-      [ws],
-    ),
-    addDep: useCallback(
-      (a: string, b: string) => ws.addDep(a, b),
-      [ws],
-    ),
-    removeDep: useCallback(
-      (a: string, b: string) => ws.removeDep(a, b),
-      [ws],
-    ),
-  };
-}

package/client/src/hooks/use-search.ts

@@ -1,19 +0,0 @@
-import { useState, useMemo } from "react";
-import type { Issue } from "../lib/types";
-
-export function useSearch(issues: Issue[]) {
-  const [query, setQuery] = useState("");
-
-  const results = useMemo(() => {
-    if (!query.trim()) return issues;
-    const q = query.toLowerCase();
-    return issues.filter(
-      (i) =>
-        i.id.toLowerCase().includes(q) ||
-        i.title.toLowerCase().includes(q) ||
-        (i.description || "").toLowerCase().includes(q),
-    );
-  }, [issues, query]);
-
-  return { query, setQuery, results };
-}

package/client/src/hooks/use-subscription.ts

@@ -1,187 +0,0 @@
-import { useEffect, useState, useRef } from "react";
-import { useWs } from "../lib/ws-context";
-import type { Issue, SubscriptionType, PushEvent } from "../lib/types";
-import { WsClient } from "../lib/ws-client";
-
-/**
- * Shared subscription cache. Multiple useSubscription() calls with the same
- * type+params share a single server-side subscription. The cache lives on
- * the WsClient instance (via WeakMap) so it's scoped to the connection.
- */
-
-interface SharedSub {
-  refCount: number;
-  subId: string;
-  items: Map<string, Issue>;
-  listeners: Set<() => void>;
-  loading: boolean;
-  total: number;
-  cleanupPush: (() => void) | null;
-}
-
-const clientCaches = new WeakMap<WsClient, Map<string, SharedSub>>();
-
-function getCache(ws: WsClient): Map<string, SharedSub> {
-  let cache = clientCaches.get(ws);
-  if (!cache) {
-    cache = new Map();
-    clientCaches.set(ws, cache);
-  }
-  return cache;
-}
-
-function cacheKey(
-  type: SubscriptionType,
-  params?: Record<string, string | number | boolean>,
-): string {
-  return params ? `${type}:${JSON.stringify(params)}` : type;
-}
-
-function acquireSubscription(
-  ws: WsClient,
-  type: SubscriptionType,
-  params?: Record<string, string | number | boolean>,
-): SharedSub {
-  const cache = getCache(ws);
-  const key = cacheKey(type, params);
-
-  let shared = cache.get(key);
-  if (shared) {
-    shared.refCount++;
-    return shared;
-  }
-
-  const subId = `sub-${type}-${Date.now()}`;
-  shared = {
-    refCount: 1,
-    subId,
-    items: new Map(),
-    listeners: new Set(),
-    loading: true,
-    total: 0,
-    cleanupPush: null,
-  };
-
-  const notify = () => {
-    for (const listener of shared!.listeners) listener();
-  };
-
-  shared.cleanupPush = ws.onPush((event: PushEvent) => {
-    if (event.id !== subId) return;
-
-    if (event.type === "snapshot") {
-      shared!.items = new Map();
-      for (const issue of event.issues) shared!.items.set(issue.id, issue);
-      shared!.loading = false;
-      if (typeof event.total === "number") {
-        shared!.total = event.total;
-      } else {
-        shared!.total = event.issues.length;
-      }
-      notify();
-    } else if (event.type === "upsert") {
-      shared!.items.set(event.issue.id, event.issue);
-      notify();
-    } else if (event.type === "delete") {
-      shared!.items.delete(event.issue_id);
-      notify();
-    }
-  });
-
-  ws.subscribe({ id: subId, type, params });
-  cache.set(key, shared);
-  return shared;
-}
-
-function releaseSubscription(
-  ws: WsClient,
-  type: SubscriptionType,
-  params?: Record<string, string | number | boolean>,
-): void {
-  const cache = getCache(ws);
-  const key = cacheKey(type, params);
-  const shared = cache.get(key);
-  if (!shared) return;
-
-  shared.refCount--;
-  if (shared.refCount <= 0) {
-    shared.cleanupPush?.();
-    ws.unsubscribe(shared.subId);
-    cache.delete(key);
-  }
-}
-
-export function useSubscription(
-  type: SubscriptionType,
-  params?: Record<string, string | number | boolean>,
-): { issues: Issue[]; loading: boolean; refreshing: boolean; total: number } {
-  const ws = useWs();
-  const paramsKey = params ? JSON.stringify(params) : "";
-  const sharedRef = useRef<SharedSub | null>(null);
-
-  // Track whether we've ever received data (initial load vs refresh)
-  const hasLoadedOnceRef = useRef(false);
-  const [staleIssues, setStaleIssues] = useState<Issue[]>([]);
-  const [staleTotal, setStaleTotal] = useState(0);
-
-  // Acquire/release shared subscription on mount/unmount
-  useEffect(() => {
-    const shared = acquireSubscription(ws, type, params);
-    sharedRef.current = shared;
-    return () => {
-      releaseSubscription(ws, type, params);
-      sharedRef.current = null;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ws, type, paramsKey]);
-
-  // Subscribe to changes
-  const [issues, setIssues] = useState<Issue[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [total, setTotal] = useState(0);
-
-  useEffect(() => {
-    const shared = sharedRef.current;
-    if (!shared) return;
-
-    const currentIssues = Array.from(shared.items.values());
-    setIssues(currentIssues);
-    setLoading(shared.loading);
-    setTotal(shared.total);
-
-    // When new data arrives, save it as stale for next transition
-    if (!shared.loading && currentIssues.length > 0) {
-      hasLoadedOnceRef.current = true;
-      setStaleIssues(currentIssues);
-      setStaleTotal(shared.total);
-    }
-
-    const listener = () => {
-      const items = Array.from(shared.items.values());
-      setIssues(items);
-      setLoading(shared.loading);
-      setTotal(shared.total);
-
-      if (!shared.loading && items.length > 0) {
-        hasLoadedOnceRef.current = true;
-        setStaleIssues(items);
-        setStaleTotal(shared.total);
-      }
-    };
-    shared.listeners.add(listener);
-    return () => {
-      shared.listeners.delete(listener);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ws, type, paramsKey]);
-
-  const isInitialLoad = loading && !hasLoadedOnceRef.current;
-  const isRefreshing = loading && hasLoadedOnceRef.current;
-
-  return {
-    issues: isRefreshing ? staleIssues : issues,
-    loading: isInitialLoad,
-    refreshing: isRefreshing,
-    total: isRefreshing ? staleTotal : total,
-  };
-}