§22 S2: collection directory at /p/<project>/ (1 → redirect, 2+ → list)

Replace DefaultCollectionRedirect with a CollectionDirectory that lists the project's visible collections, or redirects into the sole one when there is exactly one (preserving the S1 C3.7/C3.8 single-collection UX). The create-first-collection empty state is S4. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-05 13:14:18 -07:00
parent 2b32e124ab
commit 17bdd5fd9a
3 changed files with 109 additions and 8 deletions
@@ -0,0 +1,51 @@
+// §22 S2 — the project collection directory at `/p/<project>/`. Lists the
+// project's caller-visible collections as cards linking into each collection's
+// `/p/<project>/c/<collection>/` home. When exactly one collection is visible
+// the directory is skipped and we redirect straight into it (the S1 C3.7/C3.8
+// single-collection UX, preserved). The role-keyed "Create your first
+// collection" empty state is S4; S2 shows a minimal note when there are none.
+import { useEffect, useState } from 'react'
+import { Link, Navigate } from 'react-router-dom'
+import { listCollections } from '../api'
+import { collectionHome } from '../lib/entryPaths'
+import { entryNoun } from './ProjectLayout.jsx'
+
+export default function CollectionDirectory({ projectId }) {
+  const [cols, setCols] = useState(null)
+  useEffect(() => {
+    let live = true
+    listCollections(projectId)
+      .then(d => { if (live) setCols(d.items) })
+      .catch(() => { if (live) setCols([]) })
+    return () => { live = false }
+  }, [projectId])
+
+  if (cols === null) {
+    return <main className="chrome-pane"><div className="boot">Loading…</div></main>
+  }
+  // C3.7/C3.8: a single visible collection skips the directory.
+  if (cols.length === 1) {
+    return <Navigate to={collectionHome(projectId, cols[0].id)} replace />
+  }
+  return (
+    <main className="chrome-pane">
+      <div className="directory">
+        <h1>Collections</h1>
+        {cols.length === 0 ? (
+          <p className="directory-tagline">No collections yet.</p>
+        ) : (
+          <ul className="directory-list">
+            {cols.map(c => (
+              <li key={c.id} className="directory-card">
+                <Link to={collectionHome(projectId, c.id)}>
+                  <span className="directory-card-name">{c.name || c.id}</span>
+                  <span className="directory-card-type">{entryNoun(c.type)}s</span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </main>
+  )
+}