FabledScribe/frontend/src/components/rules/ProjectRulesTab.vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import {
  getProjectApplicableRules,
  getRule,
  createProjectRule,
  deleteRule,
} from "@/api/rulebooks";
import type { ApplicableRules } from "@/api/rulebooks";
import RuleHomePicker from "@/components/rules/RuleHomePicker.vue";

/**
 * A project's view of its rules (milestone 414). A rule's home is its reach:
 * the project's own rules apply here and nowhere else, and every global rule
 * (one in a rulebook) applies here too. There is no subscribing this project
 * to a rulebook and no skipping a global rule for it — a project that departs
 * from one writes its own rule and links it with an `overrides` relation.
 *
 * The second list is the global rules TAGGED to an area this project works in,
 * not every global rule: those arrive by retrieval when the work matches them,
 * and listing them all under every project would say nothing.
 */
const props = defineProps<{ projectId: number }>();
const router = useRouter();
const applicable = ref<ApplicableRules | null>(null);
const expandedRuleIds = ref<Set<number>>(new Set());

const ruleDetails = ref<Record<number, {
  why: string; how_to_apply: string;
  verify_with: string; expires_when: string; verified_at: string | null;
}>>({});

const showProjectRuleForm = ref(false);
const newProjectRule = ref({
  title: "", statement: "", why: "", how_to_apply: "",
  when_to_apply: "",
});

async function load() {
  applicable.value = await getProjectApplicableRules(props.projectId);
}

async function toggleRuleExpand(ruleId: number) {
  if (expandedRuleIds.value.has(ruleId)) {
    expandedRuleIds.value.delete(ruleId);
  } else {
    expandedRuleIds.value.add(ruleId);
    if (!ruleDetails.value[ruleId]) {
      const rule = await getRule(ruleId);
      ruleDetails.value[ruleId] = {
        why: rule.why || "",
        how_to_apply: rule.how_to_apply || "",
        verify_with: rule.verify_with || "",
        expires_when: rule.expires_when || "",
        verified_at: rule.verified_at,
      };
    }
  }
  // trigger reactivity on Set mutation
  expandedRuleIds.value = new Set(expandedRuleIds.value);
}

/** "never run" reads as a stronger claim than an absent date — and it is. */
function checkAge(verifiedAt: string | null): string {
  return verifiedAt ? `last passed ${verifiedAt.slice(0, 10)}` : "never run";
}

function openInRulesView(rulebookId: number, ruleId?: number) {
  const query: Record<string, string> = { rb: String(rulebookId) };
  if (ruleId) query.rule = String(ruleId);
  router.push({ path: "/rules", query });
}

interface TopicGroup {
  topic_id: number;
  topic_title: string;
  rules: ApplicableRules["rules"];
}
interface RulebookGroup {
  rulebook_id: number;
  rulebook_title: string;
  topics: TopicGroup[];
}
function groupByRulebookAndTopic(rules: ApplicableRules["rules"]): RulebookGroup[] {
  const byRulebook = new Map<number, RulebookGroup>();
  for (const r of rules) {
    // A rule carries topic_id XOR project_id. Only rulebook-scoped rules reach
    // this list, so a null topic would be a server-side contradiction — skip
    // it rather than widen the group's type to accommodate a case that means
    // something is wrong upstream.
    if (r.topic_id === null) continue;
    const topicId = r.topic_id;
    let rb = byRulebook.get(r.rulebook_id);
    if (!rb) {
      rb = { rulebook_id: r.rulebook_id, rulebook_title: r.rulebook_title, topics: [] };
      byRulebook.set(r.rulebook_id, rb);
    }
    let topic = rb.topics.find((t) => t.topic_id === topicId);
    if (!topic) {
      topic = { topic_id: topicId, topic_title: r.topic_title, rules: [] };
      rb.topics.push(topic);
    }
    topic.rules.push(r);
  }
  return Array.from(byRulebook.values());
}

async function submitProjectRule() {
  const statement = newProjectRule.value.statement.trim();
  if (!statement) return;
  await createProjectRule(props.projectId, {
    statement,
    title: newProjectRule.value.title.trim() || undefined,
    why: newProjectRule.value.why.trim() || undefined,
    how_to_apply: newProjectRule.value.how_to_apply.trim() || undefined,
    when_to_apply: newProjectRule.value.when_to_apply.trim() || undefined,
  });
  newProjectRule.value = {
    title: "", statement: "", why: "", how_to_apply: "",
    when_to_apply: "",
  };
  showProjectRuleForm.value = false;
  await load();
}

async function removeProjectRule(ruleId: number) {
  if (!confirm("Delete this project rule? It will move to the trash.")) return;
  await deleteRule(ruleId);
  await load();
}

onMounted(load);

watch(() => props.projectId, load);
</script>

<template>
  <div class="rules-tab" v-if="applicable">
    <section class="project-rules">
      <div class="section-head">
        <h3>Project rules</h3>
        <button
          v-if="!showProjectRuleForm"
          class="add"
          @click="showProjectRuleForm = true"
        >
          + New project rule
        </button>
      </div>
      <form v-if="showProjectRuleForm" class="new-rule-form" @submit.prevent="submitProjectRule">
        <input
          v-model="newProjectRule.title"
          placeholder="Title (optional — derived from statement if blank)"
        />
        <textarea
          v-model="newProjectRule.statement"
          required
          autofocus
          placeholder="Statement (required) — the actionable instruction, 1-2 sentences"
          rows="2"
        ></textarea>
        <textarea
          v-model="newProjectRule.when_to_apply"
          placeholder="When to apply — the moment, in the words a session actually produces"
          rows="2"
        ></textarea>
        <p v-if="!newProjectRule.when_to_apply.trim()" class="trigger-hint">
          Without a trigger the rule will never reach a session — nothing is
          preloaded, so a rule arrives only when work matches what it names.
        </p>
        <textarea
          v-model="newProjectRule.why"
          placeholder="Why (optional) — the rationale"
          rows="2"
        ></textarea>
        <textarea
          v-model="newProjectRule.how_to_apply"
          placeholder="How to apply (optional) — when / where it kicks in"
          rows="2"
        ></textarea>
        <div class="form-buttons">
          <button type="submit">Create</button>
          <button type="button" @click="showProjectRuleForm = false">Cancel</button>
        </div>
      </form>
      <ul v-if="applicable.project_rules && applicable.project_rules.length > 0" class="rule-list">
        <li v-for="r in applicable.project_rules" :key="r.id" class="rule">
          <div class="rule-head" @click="toggleRuleExpand(r.id)">
            <span class="rule-title">{{ r.title }}</span>
            <span class="rule-statement">{{ r.statement }}</span>
          </div>
          <div v-if="expandedRuleIds.has(r.id) && ruleDetails[r.id]" class="rule-detail">
            <div v-if="ruleDetails[r.id].why">
              <strong>Why:</strong> {{ ruleDetails[r.id].why }}
            </div>
            <div v-if="ruleDetails[r.id].how_to_apply">
              <strong>How to apply:</strong> {{ ruleDetails[r.id].how_to_apply }}
            </div>
            <!-- Shown only when the rule carries a check. Read-only here: this
                 tab is the project's view of what binds it, and editing a rule
                 belongs on the rulebook surface that owns it. -->
            <div v-if="ruleDetails[r.id].verify_with">
              <strong>Check:</strong> {{ ruleDetails[r.id].verify_with }}
              <span class="rule-check-age">{{ checkAge(ruleDetails[r.id].verified_at) }}</span>
            </div>
            <div v-if="ruleDetails[r.id].expires_when">
              <strong>Ends when:</strong> {{ ruleDetails[r.id].expires_when }}
            </div>
            <RuleHomePicker
              :rule-id="r.id"
              :topic-id="r.topic_id"
              :project-id="projectId"
              @moved="load"
            />
            <button class="delete-link" @click="removeProjectRule(r.id)">Delete</button>
          </div>
        </li>
      </ul>
      <p
        v-else-if="!showProjectRuleForm"
        class="empty"
      >
        No project-only rules yet.
      </p>
    </section>

    <section class="applicable">
      <h3>Global rules for this project's areas</h3>
      <p class="applicable-note">
        Every global rule applies to this project and arrives when the work matches it.
        These are the ones tagged to an area this project works in.
      </p>
      <p v-if="applicable.rules.length === 0" class="empty">
        None tagged to this project's areas. Global rules live in
        <a @click="router.push('/rules')">Rulebooks</a>.
      </p>
      <div
        v-for="rb in groupByRulebookAndTopic(applicable.rules)"
        :key="rb.rulebook_id"
        class="rb-group"
      >
        <h4>{{ rb.rulebook_title }}</h4>
        <div v-for="topic in rb.topics" :key="topic.topic_id" class="topic-group">
          <h5>{{ topic.topic_title }}</h5>
          <ul>
            <li v-for="r in topic.rules" :key="r.id" class="rule">
              <div class="rule-head" @click="toggleRuleExpand(r.id)">
                <span class="rule-title">{{ r.title }}</span>
                <span class="rule-statement">{{ r.statement }}</span>
              </div>
              <div v-if="expandedRuleIds.has(r.id) && ruleDetails[r.id]" class="rule-detail">
                <div v-if="ruleDetails[r.id].why">
                  <strong>Why:</strong> {{ ruleDetails[r.id].why }}
                </div>
                <div v-if="ruleDetails[r.id].how_to_apply">
                  <strong>How to apply:</strong> {{ ruleDetails[r.id].how_to_apply }}
                </div>
                <div v-if="ruleDetails[r.id].verify_with">
                  <strong>Check:</strong> {{ ruleDetails[r.id].verify_with }}
                  <span class="rule-check-age">{{ checkAge(ruleDetails[r.id].verified_at) }}</span>
                </div>
                <div v-if="ruleDetails[r.id].expires_when">
                  <strong>Ends when:</strong> {{ ruleDetails[r.id].expires_when }}
                </div>
                <button
                  class="edit-link"
                  @click="openInRulesView(r.rulebook_id, r.id)"
                >
                  Edit in Rulebook →
                </button>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <p v-if="applicable.truncated" class="truncated">
        Truncated at 50 rules — there are more applicable rules.
      </p>
    </section>

  </div>
</template>

<style scoped>
.trigger-hint { flex: 1; min-width: 12rem; font-size: 0.75rem; color: var(--fs-text-tertiary); }

.rules-tab { padding: 1rem; }
h3 {
  font-size: 0.9em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 0;
}
.add {
  background: none;
  border: 1px dashed var(--fs-border-color);
  padding: 0.25rem 0.75rem; border-radius: 999px; cursor: pointer;
  color: inherit;
}
.applicable { margin-top: 2rem; }
.applicable-note { margin: 0 0 0.75rem; color: var(--fs-text-tertiary); font-size: 0.85rem; }
.rb-group { margin-bottom: 1.5rem; }
.rb-group h4 { font-family: Fraunces, serif; font-style: italic; margin-bottom: 0.5rem; }
/* `.topic-group` is deliberately bare — a namespace for the two h5 rules (this
   one and the flex row further down), with the h5's own margin-top doing the
   separating. Its children assume nothing about it, which is what tells it
   apart from a base rule someone deleted (#2444). */
.topic-group h5 {
  font-size: 0.85em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 0.75rem;
}
ul { list-style: none; padding: 0; margin: 0; }
.rule {
  border-left: 2px solid var(--fs-accent);
  padding-left: 0.75rem; margin: 0.5rem 0;
}
.rule-head { cursor: pointer; }
.rule-title { font-weight: 500; }
.rule-check-age {
  margin-left: var(--fs-space-2);
  color: var(--fs-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.rule-statement { display: block; opacity: 0.85; margin-top: 0.25rem; }
.rule-detail {
  margin-top: 0.5rem; padding: 0.5rem;
  background: var(--fs-surface-page); border-radius: 6px;
}
.rule-detail > div { margin-bottom: 0.5rem; }
.edit-link {
  background: none; border: none; cursor: pointer;
  color: var(--fs-accent); padding: 0.5rem 0 0 0;
}
.empty, .truncated { opacity: 0.7; font-style: italic; }
.empty a { cursor: pointer; text-decoration: underline; }
.project-rules { margin-top: 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; }
.new-rule-form {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.75rem; margin: 0.5rem 0;
  background: var(--fs-surface-page);
  border: 1px solid var(--fs-border-color); border-radius: 6px;
}
.new-rule-form input, .new-rule-form textarea {
  background: var(--fs-surface-hover); color: inherit;
  border: 1px solid var(--fs-border-color); border-radius: 6px;
  padding: 0.5rem; font: inherit; resize: vertical;
}
.rule-list { margin-top: 0.5rem; }
.delete-link {
  background: none; border: none; cursor: pointer;
  color: var(--fs-destructive); padding: 0.5rem 0 0 0;
}
</style>