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

feat(ext/popup): attachments-disclosure shared component

Browse Source 
Compact disclosure rendering attachment rows with an action column
(× in edit, ↓ in view). Image-mime rows lazily decrypt + show a 16×16
thumb via object URLs; teardown revokes them on disclosure close. Edit
mode adds a "+ attach file" button wired to a hidden file input that
checks vault caps client-side before sending upload_attachment to SW.
6 new tests; total ~143.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-25 16:16:57 -04:00
parent b9c495cdea
commit c5f0449843
3 changed files with 363 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -794,3 +794,95 @@ textarea {
display: flex; justify-content: flex-end; gap: 6px;
margin-top: 20px; padding-top: 12px; border-top: 1px solid #21262d;
}
/* --- attachments disclosure (γ₁) --- */
.attachments-disclosure {
margin: 8px 0;
border: 1px solid #30363d;
border-radius: 4px;
padding: 6px 8px;
font-size: 11px;
color: #8b949e;
}
.attachments-disclosure[open] {
border-color: #aa812a;
}
.attachments-disclosure summary {
cursor: pointer;
list-style: none;
outline: none;
user-select: none;
padding: 2px 0;
}
.attachments-disclosure summary::-webkit-details-marker { display: none; }
.attachments-disclosure summary:hover { color: #c9d1d9; }
.attachments-disclosure__body {
margin-top: 6px;
}
.attachment-row {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0;
font-size: 10px;
border-bottom: 1px solid #21262d;
}
.attachment-row:last-of-type {
border-bottom: 0;
}
.attachment-row__icon,
.attachment-row__thumb {
width: 16px;
height: 16px;
background: #21262d;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
flex-shrink: 0;
overflow: hidden;
}
.attachment-row__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.attachment-row__name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #c9d1d9;
}
.attachment-row__meta {
color: #6e7681;
font-size: 9px;
font-family: ui-monospace, monospace;
flex-shrink: 0;
}
.attachment-row__remove,
.attachment-row__download {
color: #d2ab43;
cursor: pointer;
padding: 0 6px;
flex-shrink: 0;
}
.attachment-row__remove { color: #ab2b20; }
.attachment-add-btn {
background: transparent;
border: 1px dashed #30363d;
color: #8b949e;
padding: 5px 8px;
font-size: 10px;
cursor: pointer;
border-radius: 3px;
width: 100%;
margin-top: 6px;
text-align: center;
}
.attachment-add-btn:hover {
border-color: #aa812a;
color: #c9d1d9;
}