From dc1b6aac01057b17c655752a1c8d213a95f8ea76 Mon Sep 17 00:00:00 2001
From: Justin Paul <justin@jpaul.me>
Date: Tue, 9 Jun 2026 08:36:20 -0400
Subject: [PATCH] Trees list: inline visibility selector
 (private/unlisted/public)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tree visibility was set to private with no UI to change it — the trees list
only displayed the value as text. Add a private/unlisted/public dropdown on
each tree card that PATCHes visibility immediately (optimistic), pulled out of
the card's navigation Link so it doesn't trigger a page change. Honors the
"everything configurable / full CRUD in the UI" invariants. Living people stay
protected by the privacy engine regardless of tree visibility.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Justin Paul <justin@jpaul.me>
---
 frontend/app/trees/page.tsx | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/app/trees/page.tsx b/frontend/app/trees/page.tsx
index 7316737..bcdf3f5 100644
--- a/frontend/app/trees/page.tsx
+++ b/frontend/app/trees/page.tsx
@@ -53,6 +53,15 @@ export default function TreesPage() {
     await api.POST("/api/v1/trees/{tree_id}/restore", { params: { path: { tree_id: id } } });
     load();
   }
+  // Optimistic visibility change so the dropdown reflects the pick immediately.
+  async function setVisibility(id: string, visibility: NonNullable<Tree["visibility"]>) {
+    setTrees((cur) => cur.map((t) => (t.id === id ? { ...t, visibility } : t)));
+    await api.PATCH("/api/v1/trees/{tree_id}", {
+      params: { path: { tree_id: id } },
+      body: { visibility },
+    });
+    load();
+  }
 
   if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;
 
@@ -76,16 +85,26 @@ export default function TreesPage() {
           {trees.map((tree) => (
             <li key={tree.id}>
               <Card className="transition-colors hover:border-bronze/50">
-                <CardContent className="flex items-center justify-between p-4">
+                <CardContent className="flex items-center justify-between gap-3 p-4">
                   <Link href={`/trees/${tree.id}/tree`} className="min-w-0 flex-1">
                     <div className="truncate font-medium">{tree.name}</div>
-                    <div className="text-xs uppercase tracking-wide text-bronze">
-                      {tree.visibility}
-                    </div>
                   </Link>
+                  <select
+                    value={tree.visibility ?? "private"}
+                    onChange={(e) =>
+                      setVisibility(tree.id, e.target.value as NonNullable<Tree["visibility"]>)
+                    }
+                    aria-label="Tree visibility"
+                    title="Who can see this tree. Living people stay protected even when public."
+                    className="rounded-md border border-[var(--border)] bg-[var(--surface)] px-2 py-1 text-xs uppercase tracking-wide text-bronze focus-visible:border-bronze focus-visible:outline-none"
+                  >
+                    <option value="private">Private</option>
+                    <option value="unlisted">Unlisted</option>
+                    <option value="public">Public</option>
+                  </select>
                   <button
                     onClick={() => remove(tree.id)}
-                    className="ml-3 text-[var(--muted)] hover:text-bronze"
+                    className="text-[var(--muted)] hover:text-bronze"
                     aria-label="Delete tree"
                   >
                     ×
-- 
2.52.0