heartbeads 0.4.0

package/components/ActivityPanel.tsx

@@ -0,0 +1,345 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import type { ActivityEvent, ActivityFilterCategory } from "@/lib/activity";
+import { getEventCategory } from "@/lib/activity";
+import { ActivityItem } from "./ActivityItem";
+
+interface Props {
+  events: ActivityEvent[];
+  isOpen: boolean;
+  onClose: () => void;
+  onNodeClick: (nodeId: string) => void;
+}
+
+const FILTER_CATEGORIES: {
+  key: ActivityFilterCategory;
+  label: string;
+  icon: string;
+}[] = [
+  { key: "issues", label: "Issues", icon: "circle" },
+  { key: "deps", label: "Deps", icon: "link" },
+  { key: "comments", label: "Comments", icon: "chat" },
+  { key: "claims", label: "Claims", icon: "user" },
+  { key: "likes", label: "Likes", icon: "heart" },
+];
+
+// ============================================================================
+// Time grouping helpers
+// ============================================================================
+
+function getTimeGroup(time: number): string {
+  const now = Date.now();
+  const diff = now - time;
+  const hours = diff / (1000 * 60 * 60);
+  const days = diff / (1000 * 60 * 60 * 24);
+
+  if (hours < 1) return "Just now";
+  if (hours < 24) return "Today";
+  if (days < 2) return "Yesterday";
+  if (days < 7) return "This week";
+  if (days < 30) return "This month";
+  return "Older";
+}
+
+function groupEventsByTime(events: ActivityEvent[]): { label: string; events: ActivityEvent[] }[] {
+  const groups: Map<string, ActivityEvent[]> = new Map();
+  const order: string[] = [];
+
+  for (const event of events) {
+    const label = getTimeGroup(event.time);
+    if (!groups.has(label)) {
+      groups.set(label, []);
+      order.push(label);
+    }
+    groups.get(label)!.push(event);
+  }
+
+  return order.map((label) => ({ label, events: groups.get(label)! }));
+}
+
+/**
+ * Full slide-in sidebar panel for the activity feed.
+ * Includes search bar, filter chips, and time-grouped events.
+ * Same pattern as AllCommentsPanel / NodeDetail.
+ */
+export function ActivityPanel({
+  events,
+  isOpen,
+  onClose,
+  onNodeClick,
+}: Props) {
+  const [search, setSearch] = useState("");
+  const [activeFilters, setActiveFilters] = useState<Set<ActivityFilterCategory>>(
+    new Set(FILTER_CATEGORIES.map((c) => c.key))
+  );
+
+  const toggleFilter = (category: ActivityFilterCategory) => {
+    setActiveFilters((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        // Don't allow deactivating all filters
+        if (next.size > 1) next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  };
+
+  const filteredEvents = useMemo(() => {
+    let filtered = events;
+
+    // Apply category filters
+    filtered = filtered.filter((e) =>
+      activeFilters.has(getEventCategory(e.type))
+    );
+
+    // Apply text search
+    if (search.trim()) {
+      const q = search.trim().toLowerCase();
+      filtered = filtered.filter(
+        (e) =>
+          e.nodeId.toLowerCase().includes(q) ||
+          (e.nodeTitle && e.nodeTitle.toLowerCase().includes(q)) ||
+          (e.actor?.handle && e.actor.handle.toLowerCase().includes(q)) ||
+          (e.detail && e.detail.toLowerCase().includes(q))
+      );
+    }
+
+    return filtered;
+  }, [events, activeFilters, search]);
+
+  const groupedEvents = useMemo(
+    () => groupEventsByTime(filteredEvents),
+    [filteredEvents]
+  );
+
+  const allActive = activeFilters.size === FILTER_CATEGORIES.length;
+
+  return (
+    <>
+      {/* Desktop sidebar */}
+      <aside
+        className={`hidden md:flex absolute top-0 right-0 h-full w-[360px] bg-white border-l border-zinc-200 flex-col shadow-xl z-30 transform transition-transform duration-300 ease-out ${
+          isOpen ? "translate-x-0" : "translate-x-full"
+        }`}
+      >
+        {/* Header */}
+        <div className="shrink-0 px-5 py-3 border-b border-zinc-100 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h2 className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
+              Activity
+            </h2>
+            {events.length > 0 && (
+              <span className="px-1.5 py-0.5 bg-emerald-50 text-emerald-600 rounded-full text-[10px] font-medium">
+                {events.length}
+              </span>
+            )}
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 text-zinc-400 hover:text-zinc-600 transition-colors rounded-full hover:bg-zinc-100"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Search */}
+        <div className="px-4 pt-3 pb-2 shrink-0">
+          <div className="flex items-center bg-zinc-50/80 rounded-full border border-zinc-200/60 overflow-hidden">
+            <div className="pl-3 pr-1 text-zinc-400">
+              <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            </div>
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search activity..."
+              className="flex-1 px-2 py-2 text-xs text-zinc-800 bg-transparent outline-none placeholder:text-zinc-400"
+            />
+            {search && (
+              <button
+                onClick={() => setSearch("")}
+                className="pr-3 text-zinc-400 hover:text-zinc-600"
+              >
+                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Filter chips */}
+        <div className="flex flex-wrap gap-1.5 px-4 pb-3 shrink-0">
+          {FILTER_CATEGORIES.map((cat) => {
+            const isActive = activeFilters.has(cat.key);
+            return (
+              <button
+                key={cat.key}
+                onClick={() => toggleFilter(cat.key)}
+                className={`px-2.5 py-1 text-[11px] font-medium rounded-full border transition-all ${
+                  isActive
+                    ? "bg-emerald-50 text-emerald-700 border-emerald-200 shadow-sm"
+                    : "bg-white text-zinc-400 border-zinc-200 hover:text-zinc-600 hover:border-zinc-300"
+                }`}
+              >
+                {cat.label}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Event list with time groups */}
+        <div className="flex-1 overflow-y-auto custom-scrollbar border-t border-zinc-100">
+          {filteredEvents.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <svg
+                className="w-8 h-8 text-zinc-200 mb-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <p className="text-xs text-zinc-400">
+                {search.trim()
+                  ? "No activity matching your search"
+                  : "No activity yet"}
+              </p>
+              {search.trim() && (
+                <button
+                  onClick={() => setSearch("")}
+                  className="text-[11px] text-emerald-600 hover:text-emerald-700 mt-1.5"
+                >
+                  Clear search
+                </button>
+              )}
+            </div>
+          ) : (
+            groupedEvents.map((group) => (
+              <div key={group.label}>
+                {/* Time group header */}
+                <div className="sticky top-0 z-[1] px-4 py-1.5 bg-zinc-50/95 backdrop-blur-sm border-b border-zinc-100/60">
+                  <span className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wider">
+                    {group.label}
+                  </span>
+                </div>
+                {/* Events in this group */}
+                <div className="divide-y divide-zinc-50">
+                  {group.events.map((event) => (
+                    <ActivityItem
+                      key={event.id}
+                      event={event}
+                      variant="full"
+                      onNodeClick={onNodeClick}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Footer stats */}
+        <div className="shrink-0 px-5 py-2.5 border-t border-zinc-100 bg-zinc-50/50">
+          <div className="text-[10px] text-zinc-400">
+            {filteredEvents.length} event{filteredEvents.length !== 1 ? "s" : ""}
+            {!allActive && ` (filtered)`}
+            {search.trim() && ` matching "${search.trim()}"`}
+          </div>
+        </div>
+      </aside>
+
+      {/* Mobile drawer */}
+      <div
+        className={`md:hidden fixed inset-x-0 bottom-0 z-20 transition-transform duration-300 ease-out ${
+          isOpen ? "translate-y-0" : "translate-y-full"
+        }`}
+      >
+        <div className="bg-white rounded-t-2xl shadow-xl border-t border-zinc-200 max-h-[60vh] flex flex-col">
+          {/* Drag handle */}
+          <div className="flex justify-center pt-3 pb-1">
+            <div className="w-8 h-1 bg-zinc-300 rounded-full" />
+          </div>
+
+          {/* Header */}
+          <div className="flex items-center justify-between px-5 py-2">
+            <div className="flex items-center gap-2">
+              <h2 className="text-sm font-semibold text-zinc-900">Activity</h2>
+              {events.length > 0 && (
+                <span className="px-1.5 py-0.5 bg-emerald-50 text-emerald-600 rounded-full text-[10px] font-medium">
+                  {events.length}
+                </span>
+              )}
+            </div>
+            <button
+              onClick={onClose}
+              className="p-1 text-zinc-400 hover:text-zinc-600"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Filter chips */}
+          <div className="flex flex-wrap gap-1.5 px-5 pb-3">
+            {FILTER_CATEGORIES.map((cat) => (
+              <button
+                key={cat.key}
+                onClick={() => toggleFilter(cat.key)}
+                className={`px-2.5 py-1 text-[11px] font-medium rounded-full border transition-colors ${
+                  activeFilters.has(cat.key)
+                    ? "bg-emerald-50 text-emerald-700 border-emerald-200"
+                    : "bg-white text-zinc-400 border-zinc-200"
+                }`}
+              >
+                {cat.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Event list */}
+          <div className="flex-1 overflow-y-auto custom-scrollbar">
+            {filteredEvents.length === 0 ? (
+              <div className="py-8 text-center text-xs text-zinc-400">
+                No activity matching filters
+              </div>
+            ) : (
+              groupedEvents.map((group) => (
+                <div key={group.label}>
+                  <div className="sticky top-0 z-[1] px-5 py-1.5 bg-zinc-50/95 backdrop-blur-sm border-b border-zinc-100/60">
+                    <span className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wider">
+                      {group.label}
+                    </span>
+                  </div>
+                  <div className="divide-y divide-zinc-50">
+                    {group.events.map((event) => (
+                      <ActivityItem
+                        key={event.id}
+                        event={event}
+                        variant="full"
+                        onNodeClick={onNodeClick}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/components/AllCommentsPanel.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import { useState } from "react";
+import type { BeadsComment } from "@/hooks/useBeadsComments";
+import { HeartIcon } from "@/components/HeartIcon";
+import { formatRelativeTime } from "@/lib/utils";
+
+interface AllCommentsPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  allComments: BeadsComment[];
+  onNodeNavigate: (nodeId: string) => void;
+  isAuthenticated?: boolean;
+  currentDid?: string;
+  onLikeComment?: (comment: BeadsComment) => Promise<void>;
+  onDeleteComment?: (comment: BeadsComment) => Promise<void>;
+}
+
+export default function AllCommentsPanel({
+  isOpen,
+  onClose,
+  allComments,
+  onNodeNavigate,
+  isAuthenticated,
+  currentDid,
+  onLikeComment,
+  onDeleteComment,
+}: AllCommentsPanelProps) {
+  return (
+    <aside
+      className={`hidden md:flex absolute top-0 right-0 h-full w-[360px] bg-white border-l border-zinc-200 flex-col shadow-xl z-30 transform transition-transform duration-300 ease-out ${
+        isOpen ? "translate-x-0" : "translate-x-full"
+      }`}
+    >
+      {/* Header */}
+      <div className="shrink-0 px-5 py-3 border-b border-zinc-100 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
+            All Comments
+          </h2>
+          {allComments.length > 0 && (
+            <span className="px-1.5 py-0.5 bg-emerald-50 text-emerald-600 rounded-full text-[10px] font-medium">
+              {allComments.length}
+            </span>
+          )}
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1 text-zinc-400 hover:text-zinc-600 transition-colors rounded-full hover:bg-zinc-100"
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {/* Comment list */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar px-5 py-3">
+        {allComments.length > 0 ? (
+          <div className="space-y-0">
+            {/* Only show root comments (without replyTo) — replies are nested */}
+            {allComments.filter(c => !c.replyTo).map((comment) => (
+              <AllCommentCard
+                key={comment.uri}
+                comment={comment}
+                currentDid={currentDid}
+                isAuthenticated={isAuthenticated}
+                onNodeNavigate={onNodeNavigate}
+                onLike={onLikeComment}
+                onDelete={onDeleteComment}
+                depth={0}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <svg
+              className="w-8 h-8 text-zinc-200 mb-3"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+              />
+            </svg>
+            <p className="text-xs text-zinc-400">No comments yet</p>
+            <p className="text-[10px] text-zinc-300 mt-1">
+              Right-click a node to leave a comment
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="shrink-0 px-5 py-2.5 border-t border-zinc-100 bg-zinc-50/50">
+        <div className="text-[10px] text-zinc-400">
+          {allComments.length} comment{allComments.length !== 1 ? "s" : ""} across all issues
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+
+
+// ============================================================================
+// AllCommentCard — individual comment in the all-comments feed
+// ============================================================================
+
+function AllCommentCard({
+  comment,
+  currentDid,
+  isAuthenticated,
+  onNodeNavigate,
+  onLike,
+  onDelete,
+  depth,
+}: {
+  comment: BeadsComment;
+  currentDid?: string;
+  isAuthenticated?: boolean;
+  onNodeNavigate: (nodeId: string) => void;
+  onLike?: (comment: BeadsComment) => Promise<void>;
+  onDelete?: (comment: BeadsComment) => Promise<void>;
+  depth: number;
+}) {
+  const [liking, setLiking] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const isOwn = currentDid && currentDid === comment.did;
+  const hasLiked = currentDid
+    ? comment.likes.some((l) => l.did === currentDid)
+    : false;
+
+  const handleLike = async () => {
+    if (!onLike || liking) return;
+    setLiking(true);
+    try {
+      await onLike(comment);
+    } catch (err) {
+      console.error("Failed to toggle like:", err);
+    } finally {
+      setLiking(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!onDelete || deleting) return;
+    setDeleting(true);
+    try {
+      await onDelete(comment);
+    } catch (err) {
+      console.error("Failed to delete comment:", err);
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div className={`${depth > 0 ? "ml-4 pl-3 border-l border-zinc-100" : ""}`}>
+      <div className={`py-3 ${depth === 0 ? "border-b border-zinc-50" : ""}`}>
+        {/* Node target pill — only show for root comments */}
+        {depth === 0 && (
+          <button
+            onClick={() => onNodeNavigate(comment.nodeId)}
+            className="inline-flex items-center px-1.5 py-0.5 mb-1.5 rounded text-[10px] font-mono bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition-colors"
+          >
+            {comment.nodeId}
+          </button>
+        )}
+
+        {/* Author + time */}
+        <div className="flex items-center gap-1.5 mb-1">
+          <div className="shrink-0 w-4 h-4 rounded-full bg-zinc-100 overflow-hidden">
+            {comment.avatar ? (
+              <img
+                src={comment.avatar}
+                alt=""
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <div className="w-full h-full flex items-center justify-center text-[8px] font-medium text-zinc-400">
+                {(comment.handle || comment.did).charAt(0).toUpperCase()}
+              </div>
+            )}
+          </div>
+          <a
+            href={`https://www.impactindexer.org/data?did=${comment.did}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs font-medium text-zinc-600 truncate hover:text-emerald-600 transition-colors"
+          >
+            {comment.displayName ||
+              comment.handle ||
+              comment.did.slice(0, 16) + "..."}
+          </a>
+          <span className="text-[10px] text-zinc-300 shrink-0">
+            {formatRelativeTime(comment.createdAt)}
+          </span>
+        </div>
+
+        {/* Comment text */}
+        <p className="text-xs text-zinc-500 leading-relaxed whitespace-pre-wrap break-words">
+          {comment.text}
+        </p>
+
+        {/* Actions */}
+        <div className="flex items-center gap-2 mt-1 text-[10px]">
+          {/* Like */}
+          <button
+            onClick={handleLike}
+            disabled={!isAuthenticated || liking}
+            className={`flex items-center gap-0.5 transition-colors ${
+              hasLiked
+                ? "text-rose-500"
+                : "text-zinc-300 hover:text-rose-500"
+            } disabled:opacity-50`}
+          >
+            <HeartIcon className="w-3 h-3" filled={hasLiked} />
+            {comment.likes.length > 0 && <span>{comment.likes.length}</span>}
+          </button>
+
+          {/* Delete — own only */}
+          {isOwn && onDelete && (
+            <button
+              onClick={handleDelete}
+              disabled={deleting}
+              className="ml-auto text-zinc-300 hover:text-red-400 disabled:opacity-50 transition-colors"
+            >
+              {deleting ? "..." : "delete"}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Nested replies */}
+      {comment.replies.length > 0 && (
+        <div>
+          {comment.replies.map((reply) => (
+            <AllCommentCard
+              key={reply.uri}
+              comment={reply}
+              currentDid={currentDid}
+              isAuthenticated={isAuthenticated}
+              onNodeNavigate={onNodeNavigate}
+              onLike={onLike}
+              onDelete={onDelete}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+