@knotpad/app 0.1.0 → 0.1.2

package/components/feedback/feedback-popup.tsx

@@ -1,207 +0,0 @@
-"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

@@ -1,337 +0,0 @@
-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(); };
-  };
-}