bvandeusen/FabledScribe
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases 53 Wiki Activity

refactor(frontend): CSS pay-down, derive batch (milestone 302 step 4) — page-header, error-msg/state-msg/empty-msg, empty-title/empty-sub, required, field-hint recipes into components.css; form-buttons into rules-shared.css; scoped copies trimmed to remainders/overrides; the three views' .input becomes fs-input + width/box-sizing remainder (canon #2336)
CI & Build / TypeScript typecheck (push) Failing after 2s
Details
CI & Build / Python lint (push) Successful in 3s
Details
CI & Build / Plugin hooks (push) Successful in 8s
Details
CI & Build / integration (push) Successful in 24s
Details
CI & Build / Python tests (push) Successful in 1m2s
Details
CI & Build / Build & push image (push) Skipped
Details

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
bvandeusen
2026-08-23 17:30:43 -04:00
co-authored by Claude Fable 5
parent c28c87c39e
commit 6fb0cb38a5
10 changed files with 93 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/SnippetEditorView.vue
+11 -33
View File
@@ -227,7 +227,7 @@ function cancel() {
ref="nameRef"
v-model="form.name"
type="text"
class="input mono"
class="fs-input input mono"
placeholder="useDebouncedRef"
@keydown.escape="cancel"
/>
@@ -239,7 +239,7 @@ function cancel() {
id="sn-when"
v-model="form.when_to_use"
type="text"
class="input"
class="fs-input input"
placeholder="Debounce a reactive ref that updates too often"
@keydown.escape="cancel"
/>
@@ -253,7 +253,7 @@ function cancel() {
id="sn-lang"
v-model="form.language"
type="text"
class="input"
class="fs-input input"
placeholder="typescript"
@keydown.escape="cancel"
/>
@@ -264,7 +264,7 @@ function cancel() {
id="sn-sig"
v-model="form.signature"
type="text"
class="input mono"
class="fs-input input mono"
placeholder="useDebouncedRef(value, ms)"
@keydown.escape="cancel"
/>
@@ -277,9 +277,9 @@ function cancel() {
<span class="hint-inline">— where the reference implementation(s) live; a merged snippet keeps every call site</span>
</legend>
<div v-for="(loc, i) in locations" :key="i" class="loc-row">
<input v-model="loc.repo" type="text" class="input mono" placeholder="repo" aria-label="Repo" @keydown.escape="cancel" />
<input v-model="loc.path" type="text" class="input mono" placeholder="path" aria-label="Path" @keydown.escape="cancel" />
<input v-model="loc.symbol" type="text" class="input mono" placeholder="symbol" aria-label="Symbol" @keydown.escape="cancel" />
<input v-model="loc.repo" type="text" class="fs-input input mono" placeholder="repo" aria-label="Repo" @keydown.escape="cancel" />
<input v-model="loc.path" type="text" class="fs-input input mono" placeholder="path" aria-label="Path" @keydown.escape="cancel" />
<input v-model="loc.symbol" type="text" class="fs-input input mono" placeholder="symbol" aria-label="Symbol" @keydown.escape="cancel" />
<button
type="button"
class="loc-remove"
@@ -296,7 +296,7 @@ function cancel() {
<textarea
id="sn-code"
v-model="form.code"
class="input mono code-area"
class="fs-input input mono code-area"
rows="14"
spellcheck="false"
placeholder="Paste the reusable implementation…"
@@ -309,7 +309,7 @@ function cancel() {
id="sn-tags"
v-model="tagsText"
type="text"
class="input"
class="fs-input input"
placeholder="composable, ui (comma-separated)"
@keydown.escape="cancel"
/>
@@ -383,14 +383,6 @@ function cancel() {
color: var(--fs-accent);
}
.state-msg {
color: var(--fs-text-tertiary);
font-size: 0.9rem;
}
.error-msg {
color: var(--fs-error);
font-size: 0.9rem;
}
.form {
display: flex;
@@ -417,9 +409,6 @@ function cancel() {
font-weight: 500;
color: var(--fs-text-primary);
}
.required {
color: var(--fs-error);
}
.hint {
font-size: 0.75rem;
color: var(--fs-text-tertiary);
@@ -430,21 +419,10 @@ function cancel() {
color: var(--fs-text-tertiary);
}
/* remainder over .fs-input (components.css, canon #2336; m302) */
.input {
padding: 0.5rem 0.7rem;
border: 1px solid var(--fs-border-color);
border-radius: var(--fs-radius-sm);
background: var(--fs-surface-page);
color: var(--fs-text-primary);
font-size: 0.9rem;
font-family: inherit;
box-sizing: border-box;
width: 100%;
}
.input:focus {
outline: none;
border-color: var(--fs-accent);
box-shadow: var(--fs-focus-ring);
box-sizing: border-box;
}
.mono {
font-family: var(--fs-font-mono);