LETS GOOOOOOOOOOOOOOOOOOOOOOOOO

.env.example

@@ -54,6 +54,8 @@ R2_SECRET_ACCESS_KEY=minioadmin
 R2_BUCKET=notestack-assets
 R2_ENDPOINT_URL=
 R2_PUBLIC_BASE_URL=
+# Folder inside the bucket when it is shared with other apps, e.g. notestack. Empty = bucket root.
+R2_PREFIX=
 # How long presigned download links stay valid, in seconds.
 R2_PRESIGN_TTL_SECONDS=3600
 # Largest file a browser may upload (bytes). 209715200 = 200 MB.

backend/app/config.py

@@ -58,6 +58,8 @@ class Settings(BaseSettings):
     r2_bucket: str = "notestack-assets"
     r2_endpoint_url: str = ""  # override for MinIO locally; defaults to the R2 account endpoint
     r2_public_base_url: str = ""  # optional custom domain for public objects
+    # Folder inside the bucket, so Notestack can share a bucket with other apps. Empty = bucket root.
+    r2_prefix: str = ""
     r2_presign_ttl_seconds: int = 3600
     max_upload_bytes: int = 200 * 1024 * 1024
 

backend/app/services/storage.py

@@ -59,6 +59,10 @@ def workspace_owns_key(workspace_id: uuid.UUID, key: str) -> bool:
 class Storage:
     def __init__(self, bucket: str | None = None):
         self.bucket = bucket or settings.r2_bucket
+        self.prefix = settings.r2_prefix.strip("/") + "/" if settings.r2_prefix.strip("/") else ""
+
+    def _k(self, key: str) -> str:
+        return f"{self.prefix}{key}"
 
     @cached_property
     def client(self):
@@ -80,18 +84,18 @@ class Storage:
 
     def put_bytes(self, key: str, data: bytes, content_type: str | None = None) -> str:
         content_type = content_type or mimetypes.guess_type(key)[0] or "application/octet-stream"
-        self.client.put_object(Bucket=self.bucket, Key=key, Body=data, ContentType=content_type)
+        self.client.put_object(Bucket=self.bucket, Key=self._k(key), Body=data, ContentType=content_type)
         return key
 
     def put_text(self, key: str, text: str, content_type: str = "text/plain; charset=utf-8") -> str:
         return self.put_bytes(key, text.encode("utf-8"), content_type)
 
     def get_bytes(self, key: str) -> bytes:
-        return self.client.get_object(Bucket=self.bucket, Key=key)["Body"].read()
+        return self.client.get_object(Bucket=self.bucket, Key=self._k(key))["Body"].read()
 
     def head(self, key: str) -> dict | None:
         try:
-            return self.client.head_object(Bucket=self.bucket, Key=key)
+            return self.client.head_object(Bucket=self.bucket, Key=self._k(key))
         except ClientError as exc:
             if exc.response.get("Error", {}).get("Code") in {"404", "NoSuchKey", "NotFound"}:
                 return None
@@ -101,12 +105,12 @@ class Storage:
         return self.head(key) is not None
 
     def delete(self, key: str) -> None:
-        self.client.delete_object(Bucket=self.bucket, Key=key)
+        self.client.delete_object(Bucket=self.bucket, Key=self._k(key))
 
     def delete_prefix(self, prefix: str) -> int:
         deleted = 0
         paginator = self.client.get_paginator("list_objects_v2")
-        for page in paginator.paginate(Bucket=self.bucket, Prefix=prefix):
+        for page in paginator.paginate(Bucket=self.bucket, Prefix=self._k(prefix)):
             objects = [{"Key": o["Key"]} for o in page.get("Contents", [])]
             if objects:
                 self.client.delete_objects(Bucket=self.bucket, Delete={"Objects": objects})
@@ -114,7 +118,7 @@ class Storage:
         return deleted
 
     def presign_get(self, key: str, ttl: int | None = None, download_name: str | None = None) -> str:
-        params = {"Bucket": self.bucket, "Key": key}
+        params = {"Bucket": self.bucket, "Key": self._k(key)}
         if download_name:
             params["ResponseContentDisposition"] = f'attachment; filename="{safe_filename(download_name)}"'
         return self.client.generate_presigned_url(
@@ -124,14 +128,14 @@ class Storage:
     def presign_put(self, key: str, content_type: str, ttl: int | None = None) -> str:
         return self.client.generate_presigned_url(
             "put_object",
-            Params={"Bucket": self.bucket, "Key": key, "ContentType": content_type},
+            Params={"Bucket": self.bucket, "Key": self._k(key), "ContentType": content_type},
             ExpiresIn=ttl or settings.r2_presign_ttl_seconds,
         )
 
     def public_url(self, key: str) -> str | None:
         if not settings.r2_public_base_url:
             return None
-        return f"{settings.r2_public_base_url.rstrip('/')}/{key}"
+        return f"{settings.r2_public_base_url.rstrip('/')}/{self._k(key)}"
 
 
 def _local_sig(method: str, key: str, exp: int) -> str:

backend/tests/conftest.py

@@ -8,6 +8,9 @@ os.environ["CORPUS_CACHE_DIR"] = tempfile.mkdtemp(prefix="notestack-corpus-")
 os.environ["RUN_WORKER_IN_API"] = "false"
 os.environ["LLM_API_KEY"] = ""
 os.environ["ELEVENLABS_API_KEY"] = ""
+os.environ["FIRECRAWL_API_KEY"] = ""
+os.environ["R2_PREFIX"] = ""
+os.environ["TYPESAFE_API_KEY"] = ""
 os.environ.setdefault("EMAIL_PROVIDER", "console")
 os.environ.setdefault("JWT_SECRET", "test-secret-that-is-at-least-32-bytes-long")
 os.environ.setdefault("BILLING_ENABLED", "false")

deploy/env.prod.example

@@ -46,6 +46,8 @@ R2_ACCOUNT_ID=
 R2_ACCESS_KEY_ID=
 R2_SECRET_ACCESS_KEY=
 R2_BUCKET=notestack-assets
+# Sharing a bucket with other apps? Keep Notestack in its own folder:
+R2_PREFIX=
 
 # ---- AI
 LLM_API_KEY=<z.ai key>

frontend/src/components/AppShell.tsx

@@ -66,9 +66,15 @@ export default function AppShell() {
       <SkyCanvas intensity={0.35} />
       <aside className="sidebar">
         <div className="sidebar-top">
-          <NavLink to="/" className="sidebar-brand">
-            <Logo size={28} />
-          </NavLink>
+          {collapsed ? (
+            <button type="button" className="sidebar-brand sidebar-brand-btn" onClick={toggle} aria-label="Expand sidebar" title="Expand sidebar">
+              <Logo size={28} />
+            </button>
+          ) : (
+            <NavLink to="/" className="sidebar-brand">
+              <Logo size={28} />
+            </NavLink>
+          )}
           <button
             type="button"
             className="icon-btn sidebar-toggle"

frontend/src/pages/TopicMap.tsx

@@ -26,6 +26,26 @@ type View = { x: number; y: number; w: number; h: number };
 type ColorMode = "recency" | "momentum";
 
 const HOME: View = { x: 0, y: 0, w: W, h: H };
+const PINS_KEY = "notestack.topicmap.pins";
+
+type Pins = Record<string, { x: number; y: number }>;
+
+function readPins(ids: Set<string>): Pins {
+  try {
+    const all = JSON.parse(localStorage.getItem(PINS_KEY) || "{}") as Pins;
+    return Object.fromEntries(Object.entries(all).filter(([id]) => ids.has(id)));
+  } catch {
+    return {};
+  }
+}
+
+function writePins(pins: Pins) {
+  try {
+    localStorage.setItem(PINS_KEY, JSON.stringify(pins));
+  } catch {
+    // Storage blocked: positions just last for this visit.
+  }
+}
 const MIN_W = W / 8;
 const MAX_W = W * 1.6;
 
@@ -204,6 +224,7 @@ function useZoomPan(svgRef: RefObject<SVGSVGElement>) {
 
   return {
     view,
+    toSvg,
     zoomAt,
     pan,
     reset,
@@ -284,7 +305,10 @@ export default function TopicMap() {
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
   const svgRef = useRef<SVGSVGElement>(null);
-  const { view, zoomAt, pan, reset, focusOn, handlers } = useZoomPan(svgRef);
+  const { view, toSvg, zoomAt, pan, reset, focusOn, handlers } = useZoomPan(svgRef);
+  const [pins, setPins] = useState<Pins>({});
+  const [dragging, setDragging] = useState(false);
+  const justDragged = useRef(false);
 
   const load = () => topicsApi.map().then(setData, () => setError("Could not load the topic map."));
   useEffect(() => {
@@ -295,6 +319,17 @@ export default function TopicMap() {
   });
 
   const positions = useMemo(() => (data?.nodes.length ? layout(data) : new Map<string, P>()), [data]);
+  const placed = useMemo(() => {
+    const m = new Map<string, P>();
+    positions.forEach((p, id) => m.set(id, pins[id] ? { ...p, ...pins[id] } : p));
+    return m;
+  }, [positions, pins]);
+  useEffect(() => {
+    if (data) setPins(readPins(new Set(data.nodes.map((n) => n.id))));
+  }, [data]);
+  useEffect(() => {
+    if (!dragging && data) writePins(pins);
+  }, [pins, dragging, data]);
   const byId = useMemo(() => new Map((data?.nodes ?? []).map((n) => [n.id, n])), [data]);
   const neighbors = useMemo(() => {
     const m = new Map<string, Set<string>>();
@@ -312,14 +347,14 @@ export default function TopicMap() {
     return data.galaxies
       .filter((g) => g.size > 1)
       .map((g) => {
-        const pts = g.topic_ids.map((id) => positions.get(id)).filter(Boolean) as P[];
+        const pts = g.topic_ids.map((id) => placed.get(id)).filter(Boolean) as P[];
         const cx = pts.reduce((s, p) => s + p.x, 0) / Math.max(pts.length, 1);
         const cy = pts.reduce((s, p) => s + p.y, 0) / Math.max(pts.length, 1);
         const rx = Math.max(90, ...pts.map((p) => Math.abs(p.x - cx) + p.r)) + 50;
         const ry = Math.max(80, ...pts.map((p) => Math.abs(p.y - cy) + p.r)) + 45;
         return { ...g, cx, cy, rx, ry };
       });
-  }, [data, positions]);
+  }, [data, placed]);
 
   const brightest = useMemo(
     () => new Set((data?.nodes ?? []).slice().sort((a, b) => b.post_count - a.post_count).slice(0, 3).map((n) => n.id)),
@@ -342,6 +377,7 @@ export default function TopicMap() {
   const rebuild = async (full: boolean) => {
     setError(null);
     try {
+      if (full) setPins({});
       setJob(await topicsApi.rebuild(full));
     } catch (e) {
       setError(errorMessage(e));
@@ -351,12 +387,60 @@ export default function TopicMap() {
   const open = async (id: string, center = false) => {
     playClick();
     if (center) {
-      const p = positions.get(id);
+      const p = placed.get(id);
       if (p) focusOn(p.x, p.y);
     }
     setSelected(await topicsApi.get(id));
   };
 
+  const startDrag = (e: ReactPointerEvent, ids: string[]) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    justDragged.current = false;
+    const v = view;
+    const origin = toSvg(e.clientX, e.clientY, v);
+    const start = Object.fromEntries(ids.map((id) => [id, placed.get(id)!]).filter(([, p]) => p)) as Record<string, P>;
+    let moved = false;
+    const move = (ev: PointerEvent) => {
+      const p = toSvg(ev.clientX, ev.clientY, v);
+      const dx = p.x - origin.x;
+      const dy = p.y - origin.y;
+      if (!moved) {
+        if (Math.hypot(dx, dy) < 4 * (v.w / W)) return;
+        moved = true;
+        setDragging(true);
+      }
+      setPins((prev) => {
+        const next = { ...prev };
+        for (const [id, s] of Object.entries(start)) next[id] = { x: s.x + dx, y: s.y + dy };
+        return next;
+      });
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+      if (moved) {
+        justDragged.current = true;
+        setDragging(false);
+      }
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+  };
+  /** A click that ends a drag is not a click. */
+  const wasDrag = () => {
+    const d = justDragged.current;
+    justDragged.current = false;
+    return d;
+  };
+  const resetPins = () => {
+    playClick();
+    setPins({});
+  };
+  const hasPins = Object.keys(pins).length > 0;
+
   const flyToGalaxy = (gid: number) => {
     const n = nebulae.find((g) => g.id === gid);
     if (n) focusOn(n.cx, n.cy, Math.max(n.rx * 2.6, (n.ry * 2.6 * W) / H));
@@ -417,6 +501,11 @@ export default function TopicMap() {
               <button className="icon-btn mono" onClick={reset} aria-label="Reset view" title="Reset view">
                 1:1
               </button>
+              {hasPins && (
+                <button className="icon-btn mono" onClick={resetPins} aria-label="Reset star positions" title="Reset star positions">
+                  ↺
+                </button>
+              )}
             </div>
 
             <div className="map-hud mono" aria-live="polite">
@@ -430,7 +519,7 @@ export default function TopicMap() {
                 </>
               ) : (
                 <span className="muted">
-                  {data.nodes.length} stars · {galaxyCount} galaxies · scroll to zoom, drag to pan
+                  {data.nodes.length} stars · {galaxyCount} galaxies · scroll to zoom, drag space to pan, drag stars or galaxies to move them
                 </span>
               )}
             </div>
@@ -464,7 +553,7 @@ export default function TopicMap() {
               role="img"
               aria-label="Topic constellation. Plus and minus zoom, arrow keys pan, 0 resets."
               tabIndex={0}
-              className="map-svg"
+              className={`map-svg${dragging ? " dragging" : ""}`}
               style={{ aspectRatio: `${W} / ${H}` }}
               {...handlers}
               onKeyDown={(e) => {
@@ -491,6 +580,13 @@ export default function TopicMap() {
                   <stop offset="60%" stopColor="#217cff" stopOpacity="0.06" />
                   <stop offset="100%" stopColor="#217cff" stopOpacity="0" />
                 </radialGradient>
+                <radialGradient id="galaxy-core" cx="50%" cy="50%" r="50%">
+                  <stop offset="0%" stopColor="#ffffff" stopOpacity="0.7" />
+                  <stop offset="12%" stopColor="#ffffff" stopOpacity="0.32" />
+                  <stop offset="40%" stopColor="#ffffff" stopOpacity="0.08" />
+                  <stop offset="70%" stopColor="#217cff" stopOpacity="0.05" />
+                  <stop offset="100%" stopColor="#217cff" stopOpacity="0" />
+                </radialGradient>
                 <linearGradient id="comet" x1="0" y1="0" x2="1" y2="0">
                   <stop offset="0%" stopColor="#ffffff" stopOpacity="0.85" />
                   <stop offset="100%" stopColor="#217cff" stopOpacity="0" />
@@ -500,8 +596,15 @@ export default function TopicMap() {
               <DeepField />
 
               {nebulae.map((g) => (
-                <g key={g.id} className="nebula" onClick={() => flyToGalaxy(g.id)}>
+                <g
+                  key={g.id}
+                  className="nebula"
+                  onPointerDown={(e) => startDrag(e, g.topic_ids)}
+                  onClick={() => !wasDrag() && flyToGalaxy(g.id)}
+                >
                   <ellipse cx={g.cx} cy={g.cy} rx={g.rx} ry={g.ry} fill="url(#nebula)" />
+                  <circle cx={g.cx} cy={g.cy} r={Math.min(g.rx, g.ry) * 0.75} fill="url(#galaxy-core)" className="galaxy-core" />
+                  <circle cx={g.cx} cy={g.cy} r={2.4 * scale} fill="#ffffff" className="galaxy-heart" />
                   <text
                     x={g.cx}
                     y={g.cy - g.ry + 18 * scale}
@@ -515,8 +618,8 @@ export default function TopicMap() {
               ))}
 
               {data.edges.map((e) => {
-                const a = positions.get(e.source);
-                const b = positions.get(e.target);
+                const a = placed.get(e.source);
+                const b = placed.get(e.target);
                 if (!a || !b) return null;
                 const lit = focus && (e.source === focus || e.target === focus);
                 const strength = e.weight / maxEdge;
@@ -537,7 +640,7 @@ export default function TopicMap() {
               })}
 
               {data.nodes.map((n) => {
-                const p = positions.get(n.id)!;
+                const p = placed.get(n.id)!;
                 const dim = focus && focus !== n.id && !neighbors.get(focus)?.has(n.id);
                 const active = selected?.id === n.id;
                 const color = starColor(n);
@@ -552,7 +655,8 @@ export default function TopicMap() {
                     opacity={dim ? 0.2 : 1}
                     onMouseEnter={() => setHover(n.id)}
                     onMouseLeave={() => setHover(null)}
-                    onClick={() => open(n.id)}
+                    onPointerDown={(e) => startDrag(e, [n.id])}
+                    onClick={() => !wasDrag() && open(n.id)}
                     onDoubleClick={() => open(n.id, true)}
                     tabIndex={0}
                     role="button"

frontend/src/styles/pages.css

@@ -842,7 +842,8 @@ select.input option {
 }
 
 .map-node {
-  cursor: pointer;
+  cursor: grab;
+  touch-action: none;
   transition: opacity 0.2s;
 }
 
@@ -1304,7 +1305,7 @@ select.input option {
   }
 
   .shell.collapsed {
-    grid-template-columns: 72px 1fr;
+    grid-template-columns: 64px 1fr;
   }
 
   .shell.collapsed .sidebar {
@@ -1316,6 +1317,28 @@ select.input option {
     flex-direction: column;
   }
 
+  /* Collapsed: only the logo, which expands the sidebar again. */
+  .shell.collapsed .sidebar-toggle,
+  .shell.collapsed .sidebar nav,
+  .shell.collapsed .sidebar-user {
+    display: none;
+  }
+
+  .sidebar-brand-btn {
+    padding: 4px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    cursor: pointer;
+    transition: box-shadow 0.2s ease;
+  }
+
+  .sidebar-brand-btn:hover,
+  .sidebar-brand-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--blue-60), 0 0 16px var(--blue-35);
+  }
+
   .shell.collapsed .side-link {
     justify-content: center;
     padding: 10px;

frontend/src/styles/showcase.css

@@ -603,7 +603,38 @@
 }
 
 .nebula {
-  cursor: zoom-in;
+  cursor: grab;
+}
+
+.map-svg.dragging,
+.map-svg.dragging .nebula,
+.map-svg.dragging .map-node {
+  cursor: grabbing;
+}
+
+.galaxy-core {
+  pointer-events: none;
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: core-breathe 6s ease-in-out infinite;
+}
+
+.galaxy-heart {
+  pointer-events: none;
+  filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #217cff);
+}
+
+@keyframes core-breathe {
+  50% {
+    opacity: 0.75;
+    transform: scale(0.94);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .galaxy-core {
+    animation: none;
+  }
 }
 
 .galaxy-label {