Files
FabledScribe/frontend/src/components/rules/PlanRulesPanel.vue
T
bvandeusenandClaude Opus 5 a6d6550483
CI & Build / Python lint (push) Successful in 4s
CI & Build / Plugin hooks (push) Successful in 10s
CI & Build / integration (push) Successful in 19s
CI & Build / TypeScript typecheck (push) Successful in 33s
CI & Build / Python tests (push) Successful in 57s
CI & Build / Build & push image (push) Successful in 45s
fix(ui): walk the eleven dangling-style reports — two were real
#2444. Each needed reading rather than a batch fix, and the split was 2 real
losses, 4 false reports, 5 wrappers that are bare on purpose.

REAL:

  .system-card   was a flex row, and every child still says so —
                 .system-swatch and .system-actions are flex-shrink: 0,
                 .system-body and .system-form--inline are flex: 1.
                 align-items: flex-start is why the swatch carries
                 margin-top: 0.3rem: nudged onto the first line of text.
  .systems-list  no rule AT ALL, so the systems list rendered with browser
                 bullets and indent. Invisible to the check — see below.
  .graph-embed   the panel is a flex column whose header is flex-shrink: 0,
                 so this is the item that takes the remaining height. Without
                 it the `height: 100%` on the line below resolves against auto
                 and does nothing, which left the comment above it specifying
                 a rule that could not work.

FALSE REPORTS, and the checker was wrong rather than the code:

`.pane.empty` and `td.num` are base rules for the element that carries those
classes — the check read any compound with more than a lone class as a
modifier. It now records a compound's whole class SET and clears an element
carrying all of them, which is exact: recording the classes individually would
have cleared `.pane` everywhere on the strength of a rule that only applies
alongside `.empty`. Four reports gone, and a check with false reports is one
that gets skimmed.

BARE ON PURPOSE — .rb, .topic-group, .new-topic, .sub-list, .dash-head, and
both .detail-row rows. Each namespaces descendant rules and assumes nothing
about layout, which is the tell that separates them from a deleted base. All
seven now carry a comment saying so, so the next reader doesn't re-litigate
them and a NEW entry in the report means something actually changed.

Also recorded in the script: it cannot see a class with no rule anywhere, since
that is indistinguishable from a semantic-only hook. `.systems-list` was found
by reading the file beside a class that WAS half-styled.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs
2026-08-05 09:26:35 -04:00

74 lines
2.3 KiB
Vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { getProjectApplicableRules } from "@/api/rulebooks";
import type { ApplicableRules } from "@/api/rulebooks";
const props = defineProps<{ projectId: number }>();
const data = ref<ApplicableRules | null>(null);
function grouped(rules: ApplicableRules["rules"]) {
const g: Record<string, Record<string, ApplicableRules["rules"]>> = {};
for (const r of rules) {
(g[r.rulebook_title] ??= {});
(g[r.rulebook_title][r.topic_title] ??= []).push(r);
}
return g;
}
async function load() {
data.value = await getProjectApplicableRules(props.projectId);
}
onMounted(load);
watch(() => props.projectId, load);
</script>
<template>
<section class="plan-rules" v-if="data && data.rules.length">
<h3>Applicable rules</h3>
<div v-for="(topics, rb) in grouped(data.rules)" :key="rb" class="rb">
<h4>{{ rb }}</h4>
<div v-for="(rules, topic) in topics" :key="topic">
<h5>{{ topic }}</h5>
<ul>
<li v-for="r in rules" :key="r.id">
<strong>{{ r.title }}</strong> {{ r.statement }}
</li>
</ul>
</div>
</div>
<p v-if="data.truncated" class="truncated">
Truncated at 50 rules more apply.
</p>
</section>
</template>
<style scoped>
.plan-rules {
margin-top: 1.5rem;
border-top: 1px solid var(--color-border);
padding-top: 1rem;
}
.plan-rules h3 {
font-size: 0.9em; opacity: 0.7;
text-transform: uppercase; letter-spacing: 0.05em;
}
/* `.rb` is deliberately bare — it exists to namespace the two heading rules
below, and its children carry their own spacing (the h4 keeps the UA
margin-top that separates one rulebook group from the next). Nothing here
assumes a flex or grid parent, which is the tell that distinguishes this
from a base rule someone deleted (#2444). Stated so the next reader doesn't
re-open the question. */
.rb h4 { font-family: Fraunces, serif; font-style: italic; margin-bottom: 0.25rem; }
.rb h5 {
font-size: 0.8em; opacity: 0.7;
text-transform: uppercase; margin-top: 0.5rem;
}
.plan-rules ul {
list-style: none; padding-left: 0.75rem; margin: 0.25rem 0;
border-left: 2px solid var(--color-primary);
}
.plan-rules li { margin: 0.35rem 0; font-size: 0.92em; }
.truncated { opacity: 0.7; font-style: italic; font-size: 0.85em; }
</style>