alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(ext/popup): renderSectionsEditor + wireSectionsEditor helpers

Browse Source 
Adds the collapsible custom-fields editor (disclosure toggle, add/remove
sections + fields, in-place label/value mutation). Module-level helpers
only: caller owns the sectionsDraft and triggers rerender on structural
changes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-24 18:10:09 -04:00
parent 553d9d7ca9
commit 3264cccb60
3 changed files with 395 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
extension/src/popup/styles.css
View File

@@ -525,3 +525,62 @@ textarea {
border: 0;
border-top: 1px solid #21262d;
}
/* --- custom-section editor (β₂ slice 2) --- */
.disclosure {
border-top: 1px solid #21262d;
margin-top: 14px;
padding-top: 10px;
}
.disclosure__toggle {
background: transparent; border: 0; color: #58a6ff;
cursor: pointer; font-size: 12px; padding: 0;
font-family: inherit;
}
.disclosure[data-expanded="false"] .disclosure__body { display: none; }
.section-editor__head {
display: flex; align-items: baseline; gap: 8px;
margin-top: 10px; margin-bottom: 4px;
font-size: 11px;
}
.section-editor__head .name { color: #c9d1d9; font-weight: 600; }
.section-editor__head .name.anon { color: #8b949e; font-style: italic; font-weight: normal; }
.section-editor__head .actions { color: #8b949e; font-size: 10px; margin-left: auto; }
.section-editor__head .actions button {
background: transparent; border: 0; color: inherit;
cursor: pointer; padding: 0; margin-left: 8px;
font: inherit;
}
.section-editor__head .actions button:hover { color: #c9d1d9; }
.section-editor__field {
display: grid; grid-template-columns: 120px 1fr auto;
gap: 4px; margin-bottom: 4px; font-size: 11px;
}
.section-editor__field input {
background: #0d1117; border: 1px solid #30363d; color: #c9d1d9;
padding: 3px 6px; border-radius: 3px; font: inherit; font-size: 11px;
}
.section-editor__field .delete-field {
background: transparent; border: 0; color: #f85149;
cursor: pointer; font-size: 14px; padding: 0 4px;
}
.section-editor__add {
display: flex; gap: 6px; margin-top: 6px;
}
.section-editor__add button {
background: transparent; border: 1px solid #30363d; color: #8b949e;
padding: 2px 10px; border-radius: 3px; cursor: pointer;
font-size: 10px; font-family: inherit;
}
.section-editor__add button:hover { color: #c9d1d9; border-color: #484f58; }
.disclosure__body .add-section {
margin-top: 12px; background: transparent;
border: 1px dashed #30363d; color: #8b949e;
padding: 6px 10px; border-radius: 4px; cursor: pointer;
width: 100%; font-size: 11px; font-family: inherit;
}
.disclosure__body .add-section:hover { border-color: #484f58; color: #c9d1d9; }