@knotpad/app 0.1.0

package/components/feedback/feedback-popup.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { MessageSquare, Bug, Lightbulb, X, Send, Loader2 } from "lucide-react";
+import { useToast } from "@/components/ui/toast";
+
+type FeedbackType = "feedback" | "bug" | "feature_request";
+
+const typeConfig: Record<FeedbackType, { icon: typeof MessageSquare; label: string; placeholder: string }> = {
+  feedback: {
+    icon: MessageSquare,
+    label: "General Feedback",
+    placeholder: "Tell us what you think about the app...",
+  },
+  bug: {
+    icon: Bug,
+    label: "Report a Bug",
+    placeholder: "Describe the issue you encountered...",
+  },
+  feature_request: {
+    icon: Lightbulb,
+    label: "Feature Request",
+    placeholder: "What feature would you like to see?",
+  },
+};
+
+export function FeedbackPopup() {
+  const [open, setOpen] = useState(false);
+  const [type, setType] = useState<FeedbackType>("feedback");
+  const [subject, setSubject] = useState("");
+  const [message, setMessage] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const toast = useToast();
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent | TouchEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!subject.trim() || !message.trim()) return;
+
+    setSubmitting(true);
+    try {
+      const res = await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ type, subject: subject.trim(), message: message.trim() }),
+      });
+
+      if (!res.ok) throw new Error("Failed to submit");
+
+      setSubmitted(true);
+      toast("Thank you for your feedback!", "success");
+      setTimeout(() => {
+        setOpen(false);
+        setSubmitted(false);
+        setSubject("");
+        setMessage("");
+        setType("feedback");
+      }, 2000);
+    } catch {
+      toast("Failed to submit feedback. Please try again.", "error");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const currentType = typeConfig[type];
+  const TypeIcon = currentType.icon;
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((o) => !o)}
+        title="Feedback"
+        aria-label="Send feedback"
+        aria-expanded={open}
+        className="relative flex h-10 w-10 items-center justify-center rounded-md text-zinc-500 transition-colors ring-focus hover:bg-zinc-800 hover:text-zinc-300"
+      >
+        <MessageSquare size={18} />
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 mb-2 w-80 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl overflow-hidden z-50">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-zinc-800 px-3 py-2">
+            <div className="flex items-center gap-2">
+              <TypeIcon size={14} className="text-zinc-400" />
+              <span className="text-xs font-semibold text-zinc-400">Send Feedback</span>
+            </div>
+            <button
+              onClick={() => setOpen(false)}
+              className="text-zinc-500 hover:text-zinc-300"
+              aria-label="Close"
+            >
+              <X size={14} />
+            </button>
+          </div>
+
+          {/* Type Selector */}
+          {!submitted && (
+            <div className="flex border-b border-zinc-800">
+              {(Object.keys(typeConfig) as FeedbackType[]).map((t) => {
+                const Icon = typeConfig[t].icon;
+                return (
+                  <button
+                    key={t}
+                    onClick={() => setType(t)}
+                    className={`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-medium transition-colors ${
+                      type === t
+                        ? "bg-zinc-800 text-zinc-200"
+                        : "text-zinc-500 hover:bg-zinc-800/50 hover:text-zinc-300"
+                    }`}
+                    title={typeConfig[t].label}
+                  >
+                    <Icon size={12} />
+                    <span className="hidden sm:inline">{t === "feature_request" ? "Feature" : typeConfig[t].label.split(" ")[0]}</span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Form */}
+          <div className="p-3">
+            {submitted ? (
+              <div className="flex flex-col items-center justify-center py-6 text-center">
+                <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500/10">
+                  <Send size={18} className="text-emerald-400" />
+                </div>
+                <p className="text-sm font-medium text-zinc-200">Thank you!</p>
+                <p className="text-xs text-zinc-500 mt-1">Your feedback has been received.</p>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-3">
+                <div>
+                  <input
+                    type="text"
+                    value={subject}
+                    onChange={(e) => setSubject(e.target.value)}
+                    placeholder="Subject"
+                    maxLength={200}
+                    className="w-full rounded-md border border-zinc-700 bg-zinc-950 px-3 py-2 text-xs text-zinc-200 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+                    required
+                  />
+                </div>
+                <div>
+                  <textarea
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder={currentType.placeholder}
+                    maxLength={5000}
+                    rows={4}
+                    className="w-full rounded-md border border-zinc-700 bg-zinc-950 px-3 py-2 text-xs text-zinc-200 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none resize-none"
+                    required
+                  />
+                  <div className="mt-1 flex justify-end">
+                    <span className="text-[10px] text-zinc-600">{message.length}/5000</span>
+                  </div>
+                </div>
+                <button
+                  type="submit"
+                  disabled={submitting || !subject.trim() || !message.trim()}
+                  className="w-full flex items-center justify-center gap-2 rounded-md bg-zinc-100 px-3 py-2 text-xs font-medium text-zinc-900 transition-colors hover:bg-white disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {submitting ? (
+                    <>
+                      <Loader2 size={14} className="animate-spin" />
+                      Sending...
+                    </>
+                  ) : (
+                    <>
+                      <Send size={14} />
+                      Send Feedback
+                    </>
+                  )}
+                </button>
+              </form>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/graph/graph-draw.ts

@@ -0,0 +1,337 @@
+import * as d3 from "d3";
+import type { SimNode, SimLink, GraphNode, GraphEdge } from "./graph-types";
+import { NODE_COLORS, NODE_RADIUS, LEGEND_LABELS } from "./graph-types";
+
+type DrawParams = {
+  svgRef: React.RefObject<SVGSVGElement | null>;
+  gRef: React.MutableRefObject<SVGGElement | null>;
+  zoomRef: React.MutableRefObject<d3.ZoomBehavior<SVGSVGElement, unknown> | null>;
+  transformRef: React.MutableRefObject<d3.ZoomTransform>;
+  positionsRef: React.MutableRefObject<Map<string, { x: number; y: number }>>;
+  nodeSelRef: React.MutableRefObject<d3.Selection<SVGGElement, SimNode, SVGGElement, unknown> | null>;
+  linkSelRef: React.MutableRefObject<d3.Selection<SVGLineElement, SimLink, SVGGElement, unknown> | null>;
+  dimmedRef: React.MutableRefObject<boolean>;
+  highlightNodeIdsRef: React.MutableRefObject<Set<string>>;
+  highlightEdgePairsRef: React.MutableRefObject<Set<string>>;
+  selectedNodeIdRef: React.MutableRefObject<string | null>;
+  collapsedNodeIds: Set<string>;
+  visibleNodes: GraphNode[];
+  visibleEdges: GraphEdge[];
+  setSelectedNodeId: (v: string | null) => void;
+  setContextMenu: (v: { x: number; y: number; nodeId: string } | null) => void;
+  setTooltip: (v: { x: number; y: number; label: string; type: string } | null | ((prev: { x: number; y: number; label: string; type: string } | null) => { x: number; y: number; label: string; type: string } | null)) => void;
+  onNoteSelect: (noteId: string | null) => void;
+};
+
+export function createGraphDraw(params: DrawParams) {
+  const {
+    svgRef, gRef, zoomRef, transformRef, positionsRef,
+    nodeSelRef, linkSelRef,
+    dimmedRef, highlightNodeIdsRef, highlightEdgePairsRef, selectedNodeIdRef,
+    collapsedNodeIds, visibleNodes, visibleEdges,
+    setSelectedNodeId, setContextMenu, setTooltip, onNoteSelect,
+  } = params;
+
+  return () => {
+    const svg = svgRef.current;
+    if (!svg || visibleNodes.length === 0) return;
+
+    d3.select(svg).selectAll("*").remove();
+    nodeSelRef.current = null;
+    linkSelRef.current = null;
+    gRef.current = null;
+
+    const width = svg.clientWidth || 900;
+    const height = svg.clientHeight || 600;
+
+    // Restore positions from cache so nodes don't jump after topology-triggered redraws
+    const simNodes: SimNode[] = visibleNodes.map((n) => {
+      const cached = positionsRef.current.get(n.id);
+      return cached ? { ...n, x: cached.x, y: cached.y } : { ...n };
+    });
+    const nodeById = new Map(simNodes.map((n) => [n.id, n]));
+
+    const simLinks: SimLink[] = visibleEdges
+      .map((e) => ({
+        source: nodeById.get(e.source)!,
+        target: nodeById.get(e.target)!,
+        type: e.type,
+      }))
+      .filter((e) => e.source && e.target);
+
+    const containedNodeIds = new Set(
+      visibleEdges
+        .filter((edge) => edge.type === "contains")
+        .map((edge) => edge.target)
+    );
+    const uncachedNodes = simNodes.filter((node) => !positionsRef.current.has(node.id));
+    const coreFolders = uncachedNodes.filter((node) => node.type === "folder");
+    const coreNotes = uncachedNodes.filter(
+      (node) => node.type === "note" && containedNodeIds.has(node.id)
+    );
+    const orphanNotes = uncachedNodes.filter(
+      (node) => node.type === "note" && !containedNodeIds.has(node.id)
+    );
+    const supportingNodes = uncachedNodes.filter(
+      (node) => node.type !== "folder" && node.type !== "note"
+    );
+    const orphanDirections = new Map<string, number>();
+
+    function seedEllipse(nodes: SimNode[], radiusX: number, radiusY: number, offsetY = 0) {
+      nodes.forEach((node, index) => {
+        const angle = (index / Math.max(1, nodes.length)) * Math.PI * 2;
+        node.x ??= width / 2 + Math.cos(angle) * radiusX;
+        node.y ??= height / 2 + offsetY + Math.sin(angle) * radiusY;
+      });
+    }
+
+    seedEllipse(coreFolders, 90, 60, -18);
+    seedEllipse(coreNotes, 180, 120, 0);
+    seedEllipse(supportingNodes, 255, 160, 18);
+
+    orphanNotes.forEach((node, index) => {
+      const direction = index % 2 === 0 ? -1 : 1;
+      const row = Math.floor(index / 2);
+      const rowOffset = row - Math.floor(orphanNotes.length / 4);
+      orphanDirections.set(node.id, direction);
+      node.x ??= width / 2 + direction * 280;
+      node.y ??= height / 2 + rowOffset * 68;
+    });
+
+    // Use a low alpha if most nodes already have cached positions (avoids jiggle on collapse/expand)
+    const cachedCount = simNodes.filter((n) => n.x !== undefined).length;
+    const initialAlpha = cachedCount > simNodes.length * 0.8 ? 0.05 : 1;
+
+    const simulation = d3
+      .forceSimulation<SimNode>(simNodes)
+      .alpha(initialAlpha)
+      .force("link", d3.forceLink<SimNode, SimLink>(simLinks).id((d) => d.id).distance((l) => {
+        const srcType = (l.source as SimNode).type;
+        const tgtType = (l.target as SimNode).type;
+        if (srcType === "folder" || tgtType === "folder") return 96;
+        if ((l as SimLink).type === "references") return 88;
+        return 72;
+      }))
+      .force("charge", d3.forceManyBody().strength(-185))
+      .force("center", d3.forceCenter(width / 2, height / 2))
+      .force("x", d3.forceX<SimNode>((node) => {
+        if (orphanDirections.has(node.id)) {
+          return width / 2 + orphanDirections.get(node.id)! * 250;
+        }
+        if (node.type === "folder") return width / 2;
+        return width / 2;
+      }).strength((node) => (orphanDirections.has(node.id) ? 0.14 : node.type === "folder" ? 0.08 : 0.035)))
+      .force("y", d3.forceY<SimNode>((node) => {
+        if (node.type === "folder") return height / 2 - 12;
+        return height / 2;
+      }).strength((node) => (orphanDirections.has(node.id) ? 0.08 : node.type === "folder" ? 0.08 : 0.03)))
+      .force("collision", d3.forceCollide<SimNode>((d) => NODE_RADIUS[d.type] + 10));
+
+    const root = d3.select(svg).append("g");
+    gRef.current = root.node();
+
+    const zoom = d3
+      .zoom<SVGSVGElement, unknown>()
+      .scaleExtent([0.15, 4])
+      .on("zoom", (event) => {
+        transformRef.current = event.transform;
+        root.attr("transform", event.transform.toString());
+      });
+    zoomRef.current = zoom;
+    d3.select(svg).call(zoom);
+
+    // Restore previous zoom/pan transform
+    if (transformRef.current !== d3.zoomIdentity) {
+      d3.select(svg).call(zoom.transform as any, transformRef.current);
+    }
+
+    // Click background to clear selection
+    d3.select(svg).on("click", (event) => {
+      if (event.target === svg) {
+        setSelectedNodeId(null);
+        onNoteSelect(null);
+        setContextMenu(null);
+      }
+    });
+
+    // Arrow markers
+    const defs = d3.select(svg).append("defs");
+    const arrowTypes = [
+      { id: "arrow-contains", color: "#52525b" },
+      { id: "arrow-assigned", color: "#52525b" },
+      { id: "arrow-references", color: "#78716c" },
+    ];
+    for (const { id, color } of arrowTypes) {
+      defs.append("marker")
+        .attr("id", id)
+        .attr("viewBox", "0 -5 10 10")
+        .attr("refX", 22)
+        .attr("markerWidth", 5)
+        .attr("markerHeight", 5)
+        .attr("orient", "auto")
+        .append("path")
+        .attr("d", "M0,-5L10,0L0,5")
+        .attr("fill", color);
+    }
+
+    // Read visual state from refs (not from closure, so draw deps stay minimal)
+    const _dimmed = dimmedRef.current;
+    const _highlightNodeIds = highlightNodeIdsRef.current;
+    const _highlightEdgePairs = highlightEdgePairsRef.current;
+    const _selectedNodeId = selectedNodeIdRef.current;
+
+    // Edges
+    const link = root
+      .append("g")
+      .selectAll<SVGLineElement, SimLink>("line")
+      .data(simLinks)
+      .join("line")
+      .attr("stroke", (d) => {
+        const src = (d.source as SimNode).id;
+        const tgt = (d.target as SimNode).id;
+        const key = `${src}→${tgt}`;
+        if (d.type === "references") {
+          return _dimmed ? (_highlightEdgePairs.has(key) ? "#78716c" : "#27272a") : "#57534e";
+        }
+        if (_dimmed) return _highlightEdgePairs.has(key) ? "#52525b" : "#27272a";
+        return "#3f3f46";
+      })
+      .attr("stroke-width", (d) => {
+        const src = (d.source as SimNode).id;
+        const tgt = (d.target as SimNode).id;
+        return _highlightEdgePairs.has(`${src}→${tgt}`) ? 2.5 : 1;
+      })
+      .attr("stroke-opacity", (d) => {
+        const src = (d.source as SimNode).id;
+        const tgt = (d.target as SimNode).id;
+        if (_dimmed && !_highlightEdgePairs.has(`${src}→${tgt}`)) return 0.15;
+        return d.type === "references" ? 0.5 : 0.7;
+      })
+      .attr("stroke-dasharray", (d) => d.type === "references" ? "4 3" : null)
+      .attr("marker-end", (d) => `url(#arrow-${d.type})`);
+
+    linkSelRef.current = link as unknown as d3.Selection<SVGLineElement, SimLink, SVGGElement, unknown>;
+
+    // Node groups
+    const node = root
+      .append("g")
+      .selectAll<SVGGElement, SimNode>("g")
+      .data(simNodes)
+      .join("g")
+      .attr("cursor", "pointer")
+      .on("click", (event, d) => {
+        event.stopPropagation();
+        setContextMenu(null);
+        // Read from ref — not from stale closure
+        const currentSelected = selectedNodeIdRef.current;
+        if (currentSelected === d.id) {
+          setSelectedNodeId(null);
+          onNoteSelect(null);
+        } else {
+          setSelectedNodeId(d.id);
+          if (d.type === "note" && d.id.startsWith("note-")) {
+            onNoteSelect(d.id.slice(5));
+          } else {
+            onNoteSelect(null);
+          }
+        }
+      })
+      .on("contextmenu", (event, d) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = svg.getBoundingClientRect();
+        setContextMenu({ x: event.clientX - rect.left, y: event.clientY - rect.top, nodeId: d.id });
+      })
+      .on("mouseenter", (event, d) => {
+        const rect = svg.getBoundingClientRect();
+        setTooltip({
+          x: event.clientX - rect.left,
+          y: event.clientY - rect.top,
+          label: d.label,
+          type: LEGEND_LABELS[d.type] ?? d.type,
+        });
+      })
+      .on("mousemove", (event) => {
+        const rect = svg.getBoundingClientRect();
+        setTooltip((prev) => prev ? { ...prev, x: event.clientX - rect.left, y: event.clientY - rect.top } : null);
+      })
+      .on("mouseleave", () => setTooltip(null));
+
+    // Drag: only reheat simulation on actual movement, not on plain clicks.
+    let simulationHeated = false;
+    node.call(
+      d3.drag<SVGGElement, SimNode>()
+        .on("start", (event, d) => {
+          simulationHeated = false;
+          d.fx = d.x; d.fy = d.y;
+        })
+        .on("drag", (event, d) => {
+          if (!simulationHeated) {
+            simulationHeated = true;
+            simulation.alphaTarget(0.3).restart();
+          }
+          d.fx = event.x; d.fy = event.y;
+        })
+        .on("end", (event, d) => {
+          simulationHeated = false;
+          if (!event.active) simulation.alphaTarget(0);
+          d.fx = null; d.fy = null;
+        })
+    );
+
+    nodeSelRef.current = node as unknown as d3.Selection<SVGGElement, SimNode, SVGGElement, unknown>;
+
+    // Circle
+    node
+      .append("circle")
+      .attr("r", (d) => NODE_RADIUS[d.type] ?? 10)
+      .attr("fill", (d) => NODE_COLORS[d.type] ?? "#52525b")
+      .attr("fill-opacity", (d) => (_dimmed && !_highlightNodeIds.has(d.id) ? 0.12 : 0.9))
+      .attr("stroke", (d) => {
+        if (_selectedNodeId === d.id) return "#e4e4e7";
+        if (!_dimmed || !_highlightNodeIds.has(d.id)) return "transparent";
+        return NODE_COLORS[d.type] ?? "#52525b";
+      })
+      .attr("stroke-width", (d) => _selectedNodeId === d.id ? 3 : 2)
+      .attr("stroke-opacity", (d) => _selectedNodeId === d.id ? 1 : 0.6);
+
+    // Label
+    node
+      .append("text")
+      .text((d) => (d.label.length > 22 ? d.label.slice(0, 20) + "…" : d.label))
+      .attr("x", (d) => (NODE_RADIUS[d.type] ?? 10) + 5)
+      .attr("y", 4)
+      .attr("font-size", 11)
+      .attr("fill", (d) => (_dimmed && !_highlightNodeIds.has(d.id) ? "#3f3f46" : "#a1a1aa"))
+      .attr("font-family", "var(--font-geist-sans), system-ui, sans-serif")
+      .attr("pointer-events", "none");
+
+    // Collapse indicator dot
+    node
+      .filter((d) => collapsedNodeIds.has(d.id))
+      .append("circle")
+      .attr("r", 4)
+      .attr("cx", (d) => -(NODE_RADIUS[d.type] ?? 10) - 2)
+      .attr("cy", 0)
+      .attr("fill", "#d4d4d8");
+
+    simulation.on("tick", () => {
+      // Update position cache on every tick
+      simNodes.forEach((n) => {
+        if (n.x !== undefined && n.y !== undefined) {
+          positionsRef.current.set(n.id, { x: n.x, y: n.y });
+        }
+      });
+
+      link
+        .attr("x1", (d) => (d.source as SimNode).x ?? 0)
+        .attr("y1", (d) => (d.source as SimNode).y ?? 0)
+        .attr("x2", (d) => (d.target as SimNode).x ?? 0)
+        .attr("y2", (d) => (d.target as SimNode).y ?? 0);
+
+      node.attr("transform", (d) => `translate(${d.x ?? 0},${d.y ?? 0})`);
+    });
+
+    return () => { simulation.stop(); };
+  };
+}