@rsktash/beads-ui 0.1.0

package/client/src/views/Board.tsx

@@ -0,0 +1,200 @@
+import { useMemo, useState, useRef, useEffect } from "react";
+import { useSubscription } from "../hooks/use-subscription";
+import { IssueCard } from "../components/IssueCard";
+import type { SubscriptionType } from "../lib/types";
+
+const COLUMN_PAGE_SIZE = 20;
+
+const STATUS_COLORS: Record<string, string> = {
+  open: "var(--status-open)",
+  in_progress: "var(--status-in-progress)",
+  blocked: "var(--status-blocked)",
+  closed: "var(--status-closed)",
+};
+
+function Column({
+  title,
+  subscriptionType,
+  statusKey,
+  onCardClick,
+  isClosed = false,
+}: {
+  title: string;
+  subscriptionType: SubscriptionType;
+  statusKey: string;
+  onCardClick: (id: string) => void;
+  isClosed?: boolean;
+}) {
+  const [limit, setLimit] = useState(COLUMN_PAGE_SIZE);
+  const params = useMemo(() => ({ limit, offset: 0 }), [limit]);
+  const { issues, loading, total } = useSubscription(subscriptionType, params);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [hasOverflow, setHasOverflow] = useState(false);
+
+  const hasMore = total > issues.length;
+  const remaining = total - issues.length;
+  const dotColor = STATUS_COLORS[statusKey] ?? "var(--text-tertiary)";
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const check = () => setHasOverflow(el.scrollHeight > el.clientHeight);
+    check();
+    const observer = new ResizeObserver(check);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [issues.length]);
+
+  return (
+    <div className="flex-1 min-w-[280px] max-w-[360px] flex flex-col self-start">
+      {/* Column header */}
+      <div
+        className="flex items-center gap-2.5 px-1 pb-3 mb-3"
+        style={{ borderBottom: "1px solid var(--border-subtle)" }}
+      >
+        <div
+          className="rounded-full shrink-0"
+          style={{
+            width: "10px",
+            height: "10px",
+            backgroundColor: dotColor,
+            boxShadow: `0 0 0 3px ${dotColor}33`,
+          }}
+        />
+        <h2
+          className="text-sm font-semibold"
+          style={{ color: "var(--text-primary)" }}
+        >
+          {title}
+        </h2>
+        <span
+          className="text-xs font-medium px-2 py-0.5 rounded-full ml-auto"
+          style={{
+            backgroundColor: "rgba(0,0,0,0.05)",
+            color: "var(--text-tertiary)",
+            fontSize: "11px",
+          }}
+        >
+          {loading ? "\u2026" : isClosed && total > issues.length ? `${issues.length} / ${total}` : total}
+        </span>
+      </div>
+
+      {/* Card list */}
+      <div
+        ref={scrollRef}
+        className="space-y-2 overflow-y-auto flex-1 pr-1 relative"
+        style={{
+          maxHeight: "calc(100vh - 160px)",
+          maskImage: hasOverflow
+            ? "linear-gradient(to bottom, transparent 0px, black 8px, black calc(100% - 8px), transparent 100%)"
+            : undefined,
+          WebkitMaskImage: hasOverflow
+            ? "linear-gradient(to bottom, transparent 0px, black 8px, black calc(100% - 8px), transparent 100%)"
+            : undefined,
+        }}
+      >
+        {loading && issues.length === 0 && (
+          <div className="py-8 text-center">
+            <p className="text-xs" style={{ color: "var(--text-tertiary)" }}>
+              Loading&hellip;
+            </p>
+          </div>
+        )}
+
+        {!loading && issues.length === 0 && (
+          <div
+            className="py-8 text-center"
+            style={{
+              border: "2px dashed var(--border-default)",
+              borderRadius: "var(--radius-md)",
+              minHeight: "100px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <p className="text-xs" style={{ color: "var(--text-tertiary)" }}>
+              No items
+            </p>
+          </div>
+        )}
+
+        {issues.map((issue) => (
+          <IssueCard
+            key={issue.id}
+            issue={issue}
+            onClick={() => onCardClick(issue.id)}
+            dimmed={isClosed}
+          />
+        ))}
+
+        {hasMore && (
+          <button
+            onClick={() => setLimit((l) => l + COLUMN_PAGE_SIZE)}
+            className="w-full text-xs py-2"
+            style={{
+              color: "var(--text-secondary)",
+              transition: "color 120ms ease",
+            }}
+            onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
+            onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-secondary)"; }}
+          >
+            Show {remaining} more&hellip;
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function Board() {
+  const { total: totalIssues } = useSubscription("all-issues", { limit: 1, offset: 0 });
+  const { total: totalEpics } = useSubscription("epics", { limit: 1, offset: 0 });
+
+  const navigateToDetail = (id: string) => {
+    window.location.hash = `#/detail/${id}`;
+  };
+
+  return (
+    <div className="p-6" style={{ background: "var(--bg-base)" }}>
+      <div className="mb-6">
+        <h1
+          className="text-xl font-bold"
+          style={{ color: "var(--text-primary)" }}
+        >
+          Board
+        </h1>
+        <p className="text-sm mt-0.5" style={{ color: "var(--text-tertiary)" }}>
+          {totalIssues} issues across {totalEpics} epics
+        </p>
+      </div>
+      <div className="flex gap-4 overflow-x-auto items-start">
+        <Column
+          title="Open"
+          subscriptionType="ready-issues"
+          statusKey="open"
+          onCardClick={navigateToDetail}
+        />
+        <Column
+          title="In Progress"
+          subscriptionType="in-progress-issues"
+          statusKey="in_progress"
+          onCardClick={navigateToDetail}
+        />
+        <Column
+          title="Blocked"
+          subscriptionType="blocked-issues"
+          statusKey="blocked"
+          onCardClick={navigateToDetail}
+        />
+        <Column
+          title="Closed"
+          subscriptionType="closed-issues"
+          statusKey="closed"
+          onCardClick={navigateToDetail}
+          isClosed
+        />
+      </div>
+    </div>
+  );
+}

package/client/src/views/Detail.tsx

@@ -0,0 +1,398 @@
+import { useState } from "react";
+import { useSubscription } from "../hooks/use-subscription";
+import { useMutation } from "../hooks/use-mutation";
+import { StatusBadge } from "../components/StatusBadge";
+import { PriorityBadge } from "../components/PriorityBadge";
+import { TypeBadge } from "../components/TypeBadge";
+import { SectionEditor } from "../components/SectionEditor";
+import { getInitials, getAvatarColor } from "../lib/avatar";
+import type { Issue } from "../lib/types";
+
+function MetadataCard({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div
+      className="px-3 py-2.5 rounded-md"
+      style={{ border: "1px solid var(--border-subtle)" }}
+    >
+      <h3
+        className="font-semibold uppercase tracking-wider mb-1.5"
+        style={{ fontSize: "11px", color: "var(--text-tertiary)" }}
+      >
+        {label}
+      </h3>
+      {children}
+    </div>
+  );
+}
+
+function MetadataSidebar({
+  issue,
+  onUpdate,
+}: {
+  issue: Issue;
+  onUpdate: ReturnType<typeof useMutation>;
+}) {
+  const parentId = issue.parent_id || (issue as any).parent;
+  const parentTitle = issue.parent_title || (issue as any).parent_title;
+  const parentStatus = issue.parent_status || (issue as any).parent_status;
+  const ts = new Date(issue.updated_at).toLocaleDateString();
+
+  return (
+    <aside
+      className="shrink-0 p-4 space-y-3 overflow-y-auto"
+      style={{
+        width: "280px",
+        borderLeft: "1px solid var(--border-subtle)",
+        background: "var(--bg-base)",
+      }}
+    >
+      <MetadataCard label="Status">
+        <select
+          value={issue.status}
+          onChange={(e) =>
+            onUpdate.updateStatus(
+              issue.id,
+              e.target.value as "open" | "in_progress" | "closed",
+            )
+          }
+          className="w-full px-2 py-1 text-sm rounded-md outline-none"
+          style={{
+            border: "1px solid var(--border-default)",
+            background: "var(--bg-elevated)",
+            color: "var(--text-primary)",
+          }}
+        >
+          <option value="open">Open</option>
+          <option value="in_progress">In Progress</option>
+          <option value="closed">Closed</option>
+        </select>
+      </MetadataCard>
+
+      <MetadataCard label="Priority">
+        <select
+          value={issue.priority}
+          onChange={(e) =>
+            onUpdate.updatePriority(issue.id, Number(e.target.value))
+          }
+          className="w-full px-2 py-1 text-sm rounded-md outline-none"
+          style={{
+            border: "1px solid var(--border-default)",
+            background: "var(--bg-elevated)",
+            color: "var(--text-primary)",
+          }}
+        >
+          {[0, 1, 2, 3, 4].map((p) => (
+            <option key={p} value={p}>P{p}</option>
+          ))}
+        </select>
+      </MetadataCard>
+
+      <MetadataCard label="Type">
+        <TypeBadge type={issue.issue_type} />
+      </MetadataCard>
+
+      <MetadataCard label="Assignee">
+        {issue.assignee ? (
+          <div className="flex items-center gap-2">
+            <div
+              className="flex items-center justify-center rounded-full text-[10px] font-bold shrink-0"
+              style={{
+                width: "24px",
+                height: "24px",
+                backgroundColor: getAvatarColor(issue.assignee),
+                color: "var(--text-inverse)",
+              }}
+            >
+              {getInitials(issue.assignee)}
+            </div>
+            <span className="text-sm" style={{ color: "var(--text-primary)" }}>{issue.assignee}</span>
+          </div>
+        ) : (
+          <span className="text-sm" style={{ color: "var(--text-tertiary)" }}>Unassigned</span>
+        )}
+      </MetadataCard>
+
+      <MetadataCard label="Updated">
+        <span className="text-sm" style={{ color: "var(--text-secondary)" }}>{ts}</span>
+      </MetadataCard>
+
+      {issue.labels && issue.labels.length > 0 && (
+        <MetadataCard label="Labels">
+          <div className="flex flex-wrap gap-1">
+            {issue.labels.map((l) => (
+              <span
+                key={l}
+                className="px-2 py-0.5 text-xs rounded"
+                style={{ background: "var(--bg-hover)", color: "var(--text-secondary)" }}
+              >
+                {l}
+              </span>
+            ))}
+          </div>
+        </MetadataCard>
+      )}
+
+      {/* Parent */}
+      {parentId && (
+        <MetadataCard label="Parent">
+          <a
+            href={`#/detail/${parentId}`}
+            className="block rounded px-1 py-1 -mx-1 transition-colors"
+            style={{ color: "var(--text-primary)" }}
+            onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
+            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
+          >
+            <div className="flex items-center gap-1.5 mb-0.5">
+              {parentStatus && <StatusBadge status={parentStatus} />}
+              <span className="font-mono text-xs" style={{ color: "var(--text-tertiary)" }}>{parentId}</span>
+            </div>
+            {parentTitle && (
+              <p className="text-xs leading-snug pl-0.5 line-clamp-2" style={{ color: "var(--text-secondary)" }}>
+                {parentTitle}
+              </p>
+            )}
+          </a>
+        </MetadataCard>
+      )}
+
+      {/* Blocked By */}
+      {(() => {
+        const blocksDeps = (issue.dependencies || []).filter(
+          (dep: any) => dep.type === "blocks" && dep.issue_id === issue.id
+        );
+        if (blocksDeps.length === 0) return null;
+        return (
+          <MetadataCard label="Blocked By">
+            <div className="space-y-1">
+              {blocksDeps.map((dep: any) => (
+                <a
+                  key={dep.depends_on_id}
+                  href={`#/detail/${dep.depends_on_id}`}
+                  className="block text-xs font-mono px-1 py-0.5 transition-colors"
+                  style={{ color: "var(--accent)" }}
+                  onMouseEnter={(e) => { e.currentTarget.style.textDecoration = "underline"; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.textDecoration = "none"; }}
+                >
+                  {dep.depends_on_id}
+                </a>
+              ))}
+            </div>
+          </MetadataCard>
+        );
+      })()}
+
+      {/* Children / Dependents (sidebar) */}
+      {issue.dependents && issue.dependents.length > 0 && (
+        <MetadataCard label="Children / Dependents">
+          <div className="space-y-1">
+            {issue.dependents.map((dep) => (
+              <a
+                key={dep.id}
+                href={`#/detail/${dep.id}`}
+                className="block text-xs rounded px-1 py-1.5 -mx-1 transition-colors"
+                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
+              >
+                <div className="flex items-center gap-1.5 mb-0.5">
+                  <StatusBadge status={dep.status} />
+                  <span className="font-mono" style={{ color: "var(--text-tertiary)" }}>{dep.id}</span>
+                </div>
+                {dep.title && (
+                  <p className="text-xs leading-snug pl-0.5 line-clamp-2" style={{ color: "var(--text-secondary)" }}>
+                    {dep.title}
+                  </p>
+                )}
+              </a>
+            ))}
+          </div>
+        </MetadataCard>
+      )}
+    </aside>
+  );
+}
+
+function CommentsSection({ issueId }: { issueId: string }) {
+  const mutations = useMutation();
+  const [newComment, setNewComment] = useState("");
+
+  const handleAddComment = async () => {
+    if (!newComment.trim()) return;
+    await mutations.addComment(issueId, newComment.trim());
+    setNewComment("");
+  };
+
+  return (
+    <div
+      className="rounded-lg p-4"
+      style={{
+        background: "var(--bg-elevated)",
+        border: "1px solid var(--border-subtle)",
+        boxShadow: "var(--shadow-card)",
+      }}
+    >
+      <h3
+        className="font-semibold uppercase tracking-wider mb-3"
+        style={{ fontSize: "11px", color: "var(--text-tertiary)" }}
+      >
+        Comments
+      </h3>
+      <div className="flex gap-2">
+        <textarea
+          value={newComment}
+          onChange={(e) => setNewComment(e.target.value)}
+          placeholder="Add a comment... (Ctrl+Enter to submit)"
+          rows={3}
+          className="flex-1 p-2 text-sm 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)"; }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && (e.ctrlKey || e.metaKey))
+              handleAddComment();
+          }}
+        />
+      </div>
+      <button
+        onClick={handleAddComment}
+        className="mt-2 px-3 py-1.5 text-sm rounded-md font-medium transition-colors"
+        style={{
+          background: "var(--bg-hover)",
+          color: "var(--text-primary)",
+          border: "1px solid var(--border-default)",
+        }}
+        onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--accent)"; }}
+        onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border-default)"; }}
+      >
+        Add Comment
+      </button>
+    </div>
+  );
+}
+
+export function Detail({ issueId }: { issueId: string }) {
+  const { issues, loading } = useSubscription("issue-detail", { id: issueId });
+  const mutations = useMutation();
+  const issue = issues[0];
+
+  if (loading) return <div className="p-6" style={{ color: "var(--text-tertiary)" }}>Loading...</div>;
+  if (!issue)
+    return <div className="p-6" style={{ color: "var(--text-tertiary)" }}>Issue not found</div>;
+
+  return (
+    <div className="flex h-full" style={{ background: "var(--bg-base)" }}>
+      <div className="flex-1 overflow-y-auto p-6 space-y-5">
+        {/* Breadcrumbs */}
+        <div className="flex items-center gap-2 text-sm" style={{ color: "var(--text-tertiary)" }}>
+          <a
+            href="#/list"
+            className="flex items-center gap-1 transition-colors"
+            style={{ color: "var(--text-tertiary)" }}
+            onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
+            onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-tertiary)"; }}
+          >
+            &larr; List
+          </a>
+          <span>/</span>
+          <span className="font-mono">{issue.id}</span>
+        </div>
+
+        {/* Title */}
+        <h1 className="text-2xl font-bold" style={{ color: "var(--text-primary)" }}>
+          {issue.title}
+        </h1>
+
+        {/* Description */}
+        <SectionEditor
+          label="Description"
+          value={issue.description || ""}
+          onSave={(v) =>
+            mutations.editText({
+              id: issue.id,
+              field: "description",
+              value: v,
+            })
+          }
+        />
+
+        {/* Acceptance Criteria */}
+        <SectionEditor
+          label="Acceptance Criteria"
+          value={issue.acceptance || ""}
+          placeholder="Add acceptance criteria..."
+          onSave={(v) =>
+            mutations.editText({
+              id: issue.id,
+              field: "acceptance",
+              value: v,
+            })
+          }
+        />
+
+        {/* Notes */}
+        <SectionEditor
+          label="Notes"
+          value={issue.notes || ""}
+          placeholder="Add notes..."
+          onSave={(v) =>
+            mutations.editText({ id: issue.id, field: "notes", value: v })
+          }
+        />
+
+        {/* Design */}
+        <SectionEditor
+          label="Design"
+          value={issue.design || ""}
+          placeholder="Add design notes..."
+          onSave={(v) =>
+            mutations.editText({ id: issue.id, field: "design", value: v })
+          }
+        />
+
+        {/* Children (epics only) */}
+        {issue.issue_type === "epic" && issue.dependents && issue.dependents.length > 0 && (
+          <div
+            className="rounded-lg p-4"
+            style={{
+              background: "var(--bg-elevated)",
+              border: "1px solid var(--border-subtle)",
+              boxShadow: "var(--shadow-card)",
+            }}
+          >
+            <h3
+              className="font-semibold uppercase tracking-wider mb-3"
+              style={{ fontSize: "11px", color: "var(--text-tertiary)" }}
+            >
+              Children ({issue.closed_children ?? 0} / {issue.total_children ?? issue.dependents.length})
+            </h3>
+            <div className="space-y-0.5">
+              {issue.dependents.map((child) => (
+                <a
+                  key={child.id}
+                  href={`#/detail/${child.id}`}
+                  className="flex items-center gap-2.5 px-2 py-2 rounded-md transition-colors"
+                  style={{ opacity: child.status === "closed" ? 0.6 : 1 }}
+                  onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
+                >
+                  <StatusBadge status={child.status} />
+                  <span className="text-xs font-mono" style={{ color: "var(--text-tertiary)" }}>{child.id}</span>
+                  <span className="text-sm truncate" style={{ color: "var(--text-primary)" }}>{child.title}</span>
+                </a>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Comments */}
+        <CommentsSection issueId={issue.id} />
+      </div>
+
+      {/* Metadata sidebar */}
+      <MetadataSidebar issue={issue} onUpdate={mutations} />
+    </div>
+  );
+}