docs for memories

2026-06-29 15:00:34 +01:00
parent 701d39982f
commit 421c96c814
14 changed files with 956 additions and 33 deletions
--- a/apps/web/src/components/features/resource-link-capture.tsx
+++ b/apps/web/src/components/features/resource-link-capture.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+type ResourceSection = {
+  title: string;
+  level: number;
+};
+
+type ResourceLink = {
+  id: string;
+  title: string;
+  url: string;
+  category: string;
+  status: string;
+  createdAt: string;
+};
+
+interface ResourceLinkCaptureProps {
+  date: string;
+}
+
+export function ResourceLinkCapture({ date }: ResourceLinkCaptureProps) {
+  const [open, setOpen] = useState(false);
+  const [title, setTitle] = useState("");
+  const [url, setUrl] = useState("");
+  const [category, setCategory] = useState("Interesting things to read up:");
+  const qc = useQueryClient();
+
+  const { data } = useQuery({
+    queryKey: ["resource-links", "capture"],
+    queryFn: async () => {
+      const res = await fetch("/api/resource-links?status=inbox&includeSections=1");
+      if (!res.ok) throw new Error("Failed to load resource links");
+      return res.json() as Promise<{ links: ResourceLink[]; sections: ResourceSection[] }>;
+    },
+    enabled: open,
+    staleTime: 60_000,
+  });
+
+  const sections = data?.sections?.length
+    ? data.sections
+    : [{ title: "Interesting things to read up:", level: 1 }];
+
+  const save = useMutation({
+    mutationFn: async () => {
+      const res = await fetch("/api/resource-links", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ date, title, url, category }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error ?? "Failed to save link");
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      setTitle("");
+      setUrl("");
+      qc.invalidateQueries({ queryKey: ["resource-links"] });
+    },
+  });
+
+  if (!open) {
+    return (
+      <button type="button" className="retro-btn text-xs w-full" onClick={() => setOpen(true)}>
+        Capture resource link
+      </button>
+    );
+  }
+
+  return (
+    <div className="retro-window border border-[var(--warm-grey)]/30">
+      <div className="retro-titlebar text-sm">Resource Inbox</div>
+      <div className="p-3 space-y-2 text-sm">
+        <input
+          className="retro-input w-full text-xs"
+          placeholder="Title"
+          value={title}
+          onChange={(event) => setTitle(event.target.value)}
+        />
+        <input
+          className="retro-input w-full text-xs"
+          placeholder="https://..."
+          value={url}
+          onChange={(event) => setUrl(event.target.value)}
+        />
+        <select
+          className="retro-window-inset w-full p-1 text-xs"
+          value={category}
+          onChange={(event) => setCategory(event.target.value)}
+        >
+          {sections.map((section) => (
+            <option key={section.title} value={section.title}>
+              {section.title}
+            </option>
+          ))}
+        </select>
+        {save.error && (
+          <p className="text-xs text-[var(--muted-rose)]">{save.error.message}</p>
+        )}
+        <div className="flex gap-2">
+          <button
+            type="button"
+            className="retro-btn retro-btn-primary text-xs flex-1"
+            disabled={save.isPending || !title.trim() || !url.trim()}
+            onClick={() => save.mutate()}
+          >
+            {save.isPending ? "Saving..." : "Save link"}
+          </button>
+          <button type="button" className="retro-btn text-xs" onClick={() => setOpen(false)}>
+            Close
+          </button>
+        </div>
+        {data?.links?.length ? (
+          <div className="pt-2 border-t border-[var(--warm-grey)]/25">
+            <p className="text-xs font-bold text-[var(--warm-grey)] mb-1">Inbox</p>
+            <ul className="space-y-1">
+              {data.links.slice(0, 4).map((link) => (
+                <li key={link.id} className="text-xs truncate">
+                  {link.title}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}