From 447adf816caa9b5dc7fa1fb856c635afb742677e Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 27 May 2026 22:01:03 -0400
Subject: [PATCH] =?UTF-8?q?feat(rulebook):=20subscription=20panel=20?=
 =?UTF-8?q?=E2=80=94=20toggle=20projects=20per=20rulebook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rules/RulebookDetailPane.vue   | 61 +++++++++++++++++--
 1 file changed, 57 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/rules/RulebookDetailPane.vue b/frontend/src/components/rules/RulebookDetailPane.vue
index 6bb4636..56be664 100644
--- a/frontend/src/components/rules/RulebookDetailPane.vue
+++ b/frontend/src/components/rules/RulebookDetailPane.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRulebooksStore } from "@/stores/rulebooks";
+import { apiGet } from "@/api/client";
+import {
+  subscribeProject, unsubscribeProject, getProjectApplicableRules,
+} from "@/api/rulebooks";
 import type { RulebookTopic } from "@/api/rulebooks";
 
 const props = defineProps<{
@@ -14,6 +18,41 @@ const store = useRulebooksStore();
 const isCreating = ref(false);
 const newTitle = ref("");
 
+interface ProjectLite { id: number; title: string }
+const projects = ref<ProjectLite[]>([]);
+// Map<project_id, Set<rulebook_id>>
+const subscribedRulebookIds = ref<Map<number, Set<number>>>(new Map());
+
+async function loadProjects() {
+  const data = await apiGet<{ projects: ProjectLite[] }>("/api/projects");
+  projects.value = data.projects;
+  for (const p of projects.value) {
+    const result = await getProjectApplicableRules(p.id);
+    subscribedRulebookIds.value.set(
+      p.id,
+      new Set(result.subscribed_rulebooks.map((rb) => rb.id)),
+    );
+  }
+}
+
+function isSubscribed(projectId: number): boolean {
+  return subscribedRulebookIds.value.get(projectId)?.has(props.rulebookId) ?? false;
+}
+
+async function toggleSubscription(projectId: number, checked: boolean) {
+  if (checked) {
+    await subscribeProject(projectId, props.rulebookId);
+    const set = subscribedRulebookIds.value.get(projectId) || new Set<number>();
+    set.add(props.rulebookId);
+    subscribedRulebookIds.value.set(projectId, set);
+  } else {
+    await unsubscribeProject(projectId, props.rulebookId);
+    subscribedRulebookIds.value.get(projectId)?.delete(props.rulebookId);
+  }
+  // trigger reactivity on Map mutation
+  subscribedRulebookIds.value = new Map(subscribedRulebookIds.value);
+}
+
 async function submitNew() {
   const title = newTitle.value.trim();
   if (!title) return;
@@ -22,6 +61,9 @@ async function submitNew() {
   isCreating.value = false;
   emit("select-topic", topic.id);
 }
+
+onMounted(loadProjects);
+watch(() => props.rulebookId, () => {/* re-render of isSubscribed from existing map */});
 </script>
 
 <template>
@@ -47,10 +89,20 @@ async function submitNew() {
         </div>
       </form>
     </div>
-    <!-- Subscription panel — populated in T14. -->
     <div class="subscriptions">
       <h3>Subscribers</h3>
-      <p class="hint">(subscription management — populated in next task)</p>
+      <ul class="sub-list">
+        <li v-for="p in projects" :key="p.id">
+          <label>
+            <input
+              type="checkbox"
+              :checked="isSubscribed(p.id)"
+              @change="toggleSubscription(p.id, ($event.target as HTMLInputElement).checked)"
+            />
+            {{ p.title }}
+          </label>
+        </li>
+      </ul>
     </div>
   </section>
 </template>
@@ -75,6 +127,7 @@ li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); }
   padding-top: 1rem;
 }
 .subscriptions h3 { font-size: 0.9em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
-.hint { font-size: 0.85em; opacity: 0.6; }
+.sub-list li { cursor: default; }
+.sub-list label { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; }
 button { cursor: pointer; }
 </style>