feat(rulebook): RulesView three-pane shell + child panes + rule editor

2026-05-27 22:00:32 -04:00
parent 605dd0a13a
commit 75d8e7ab49
5 changed files with 426 additions and 0 deletions
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { RuleHeader } from "@/api/rulebooks";
+
+defineProps<{ topicId: number; rules: RuleHeader[] }>();
+const emit = defineEmits<{
+  "open-rule": [id: number];
+  "create-rule": [topicId: number];
+}>();
+</script>
+
+<template>
+  <section class="pane">
+    <header><h2>Rules</h2></header>
+    <ul>
+      <li v-for="r in rules" :key="r.id" @click="emit('open-rule', r.id)">
+        <div class="title">{{ r.title }}</div>
+        <div class="statement">{{ r.statement }}</div>
+      </li>
+    </ul>
+    <button class="new-rule" @click="emit('create-rule', topicId)">+ New rule</button>
+  </section>
+</template>
+
+<style scoped>
+.pane { background: var(--color-surface, #18181b); padding: 1rem; overflow-y: auto; }
+header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
+ul { list-style: none; padding: 0; margin: 1rem 0; }
+li {
+  padding: 0.75rem;
+  cursor: pointer;
+  border-radius: 6px;
+  border-left: 2px solid var(--color-primary, #6366f1);
+  margin-bottom: 0.5rem;
+  background: rgba(255, 255, 255, 0.02);
+}
+li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); }
+.title { font-family: Fraunces, serif; font-style: italic; font-size: 1.05em; }
+.statement { font-size: 0.9em; opacity: 0.8; margin-top: 0.25rem; }
+.new-rule { cursor: pointer; }
+</style>