@rsktash/beads-ui 0.1.1 → 0.1.3

package/client/src/components/Markdown.tsx

@@ -1,77 +0,0 @@
-import { useEffect, useState } from "react";
-import { marked } from "marked";
-import DOMPurify from "dompurify";
-import { codeToHtml } from "shiki";
-
-export function Markdown({ content }: { content: string }) {
-  const [html, setHtml] = useState("");
-
-  useEffect(() => {
-    if (!content) {
-      setHtml("");
-      return;
-    }
-
-    let cancelled = false;
-
-    async function render() {
-      const tokens = marked.lexer(content);
-
-      // Collect code blocks for syntax highlighting
-      const codeBlocks: Array<{ code: string; lang: string }> = [];
-      marked.walkTokens(tokens, (token) => {
-        if (token.type === "code") {
-          codeBlocks.push({
-            code: (token as { text: string }).text,
-            lang: (token as { lang?: string }).lang || "text",
-          });
-        }
-      });
-
-      // Highlight all code blocks in parallel
-      const highlighted = await Promise.all(
-        codeBlocks.map(async (block) => {
-          try {
-            return await codeToHtml(block.code, {
-              lang: block.lang,
-              theme: "github-light",
-            });
-          } catch {
-            return `<pre><code>${DOMPurify.sanitize(block.code)}</code></pre>`;
-          }
-        }),
-      );
-
-      // Render markdown and replace code blocks with highlighted versions
-      let rendered = marked.parser(tokens) as string;
-      let i = 0;
-      rendered = rendered.replace(
-        /<pre><code[^>]*>[\s\S]*?<\/code><\/pre>/g,
-        () => highlighted[i++] || "",
-      );
-
-      const sanitized = DOMPurify.sanitize(rendered, {
-        ADD_TAGS: ["span"],
-        ADD_ATTR: ["style", "class"],
-      });
-
-      if (!cancelled) setHtml(sanitized);
-    }
-
-    render();
-    return () => {
-      cancelled = true;
-    };
-  }, [content]);
-
-  return (
-    <div
-      className="prose prose-stone prose-sm max-w-none
-        prose-pre:bg-stone-50 prose-pre:border prose-pre:border-stone-200 prose-pre:rounded
-        prose-code:text-sm prose-code:font-mono
-        prose-headings:font-semibold prose-headings:text-stone-900
-        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline"
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  );
-}

package/client/src/components/PriorityBadge.tsx

@@ -1,26 +0,0 @@
-const PRIORITY_CONFIG: Record<number, { bg: string; text: string }> = {
-  0: { bg: "rgba(239,68,68,0.12)", text: "#DC2626" },
-  1: { bg: "rgba(249,115,22,0.12)", text: "#EA580C" },
-  2: { bg: "rgba(59,130,246,0.12)", text: "#2563EB" },
-  3: { bg: "rgba(34,197,94,0.12)", text: "#16A34A" },
-  4: { bg: "rgba(156,163,175,0.1)", text: "#9CA3AF" },
-};
-
-export function PriorityBadge({ priority }: { priority: number }) {
-  const config = PRIORITY_CONFIG[priority] || PRIORITY_CONFIG[4];
-  return (
-    <span
-      className="inline-flex items-center justify-center font-mono font-bold"
-      style={{
-        fontSize: "11px",
-        lineHeight: 1,
-        padding: "3px 8px",
-        borderRadius: "var(--radius-sm)",
-        backgroundColor: config.bg,
-        color: config.text,
-      }}
-    >
-      P{priority}
-    </span>
-  );
-}

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 };
-}