FabledScribe/frontend/src/views/RulesView.vue

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useRulebooksStore } from "@/stores/rulebooks";
import RulebookListPane from "@/components/rules/RulebookListPane.vue";
import RulebookDetailPane from "@/components/rules/RulebookDetailPane.vue";
import RuleListPane from "@/components/rules/RuleListPane.vue";
import RuleEditorSlideOver from "@/components/rules/RuleEditorSlideOver.vue";
import RuleSweepPane from "@/components/rules/RuleSweepPane.vue";
import PreferenceDriftPane from "@/components/rules/PreferenceDriftPane.vue";

const store = useRulebooksStore();
const route = useRoute();
const router = useRouter();

const selectedRulebookId = ref<number | null>(null);
const selectedTopicId = ref<number | null>(null);
const editingRuleId = ref<number | null>(null);
const creatingRuleForTopic = ref<number | null>(null);
const sweepActive = ref(false);
const driftActive = ref(false);

function syncFromRoute() {
  const rb = route.query.rb ? Number(route.query.rb) : null;
  const topic = route.query.topic ? Number(route.query.topic) : null;
  const rule = route.query.rule ? Number(route.query.rule) : null;
  selectedRulebookId.value = rb;
  selectedTopicId.value = topic;
  editingRuleId.value = rule;
  sweepActive.value = route.query.view === "due";
  driftActive.value = route.query.view === "drift";
}

/** The two cross-cutting views share one `view` query key, so entering either
 *  leaves the other — and keeps `?rule=…` so an open editor survives the
 *  switch, the way the sweep already did. */
function selectCrossCutting(view: "due" | "drift") {
  sweepActive.value = view === "due";
  driftActive.value = view === "drift";
  const { rb, topic, ...rest } = route.query;
  void rb; void topic;
  router.replace({ query: { ...rest, view } });
}

function selectRulebook(id: number) {
  sweepActive.value = false;
  driftActive.value = false;
  selectedRulebookId.value = id;
  selectedTopicId.value = null;
  router.replace({ query: { rb: String(id) } });
  store.fetchTopics(id);
}

function selectTopic(id: number) {
  selectedTopicId.value = id;
  router.replace({ query: { ...route.query, topic: String(id) } });
  store.fetchRules(id);
}

function openRule(id: number) {
  editingRuleId.value = id;
  router.replace({ query: { ...route.query, rule: String(id) } });
}

function closeRuleEditor() {
  editingRuleId.value = null;
  creatingRuleForTopic.value = null;
  const { rule, ...rest } = route.query;
  void rule;
  router.replace({ query: rest });
}

function startCreatingRule(topicId: number) {
  creatingRuleForTopic.value = topicId;
}

onMounted(async () => {
  await store.fetchRulebooks();
  syncFromRoute();
  if (selectedRulebookId.value) await store.fetchTopics(selectedRulebookId.value);
  if (selectedTopicId.value) await store.fetchRules(selectedTopicId.value);
});

watch(() => route.query, syncFromRoute);
</script>

<template>
  <div class="rules-view">
    <RulebookListPane
      :rulebooks="store.rulebooks"
      :selected-id="selectedRulebookId"
      :sweep-active="sweepActive"
      :drift-active="driftActive"
      @select="selectRulebook"
      @select-sweep="selectCrossCutting('due')"
      @select-drift="selectCrossCutting('drift')"
    />
    <RuleSweepPane v-if="sweepActive" class="sweep-span" @open-rule="openRule" />
    <PreferenceDriftPane v-else-if="driftActive" class="sweep-span" @open-rule="openRule" />
    <RulebookDetailPane
      v-else-if="selectedRulebookId !== null"
      :rulebook-id="selectedRulebookId"
      :topics="store.topicsByRulebook[selectedRulebookId] || []"
      :selected-topic-id="selectedTopicId"
      @select-topic="selectTopic"
    />
    <div v-else class="pane empty">
      <p>Select a rulebook to view its topics.</p>
    </div>
    <RuleListPane
      v-if="!sweepActive && !driftActive && selectedTopicId !== null"
      :topic-id="selectedTopicId"
      :rules="store.rulesByTopic[selectedTopicId] || []"
      @open-rule="openRule"
      @create-rule="startCreatingRule"
    />
    <div v-else-if="!sweepActive && !driftActive" class="pane empty">
      <p>Select a topic to view its rules.</p>
    </div>
    <RuleEditorSlideOver
      v-if="editingRuleId !== null || creatingRuleForTopic !== null"
      :rule-id="editingRuleId"
      :topic-id="creatingRuleForTopic"
      @close="closeRuleEditor"
    />
  </div>
</template>

<style scoped>
.rules-view {
  display: grid;
  grid-template-columns: 280px 300px 1fr;
  height: 100vh;
  gap: 1px;
  background: var(--fs-border-color);
}
/* A cross-cutting pane — the sweep, or recent changes — takes the width the
   rulebook + topic panes would have used rather than being squeezed into one
   column. */
.sweep-span { grid-column: 2 / -1; }
.pane.empty {
  background: var(--fs-surface-hover);
  padding: 1rem;
  opacity: 0.6;
  font-style: italic;
}
</style>