feat(ext/popup): Document item type — form + signature-block detail

Form requires title + primary_attachment; the primary-row picker is
compact in edit mode (dashed-border when empty, filename row when
filled). Detail view promotes the primary to a gold signature block
(48×60 thumb + filename + meta + ↓ download · 🔍 preview). For image-
mime primaries, the thumb lazy-loads via decrypt + object-URL; the
preview button toggles an inline expanded view.

Supplementary attachments use the standard compact disclosure (Task 7)
when present.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-25 18:58:52 -04:00
parent 6ef7aaca53
commit 705b171553
3 changed files with 571 additions and 0 deletions

View File

@@ -892,3 +892,109 @@ textarea {
border-color: #aa812a;
color: #c9d1d9;
}
/* --- Document type signature block + primary picker (γ₁) --- */
.document-signature-block {
border-left: 3px solid #aa812a;
background: #161b22;
padding: 10px;
margin: 8px 0;
border-radius: 0 4px 4px 0;
display: flex;
align-items: center;
gap: 10px;
}
.document-signature-block__thumb {
width: 48px;
height: 60px;
border-radius: 2px;
background: linear-gradient(135deg, #b88a30, #7c5719);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
overflow: hidden;
color: #fff3cf;
}
.document-signature-block__thumb img {
width: 100%; height: 100%; object-fit: contain;
}
.document-signature-block__info { flex: 1; min-width: 0; }
.document-signature-block__name {
font-size: 11px;
color: #f1cf6e;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.document-signature-block__meta {
font-size: 9px;
color: #8b949e;
font-family: ui-monospace, monospace;
margin-top: 2px;
}
.document-signature-block__actions {
font-size: 9px;
margin-top: 4px;
}
.document-signature-block__preview {
margin-top: 8px;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 3px;
padding: 6px;
text-align: center;
}
.document-signature-block__preview img {
max-width: 100%;
max-height: 200px;
border-radius: 2px;
}
/* Document primary picker (form mode) */
.document-primary-row {
background: #161b22;
border: 1px solid #30363d;
border-radius: 4px;
padding: 6px 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
cursor: pointer;
}
.document-primary-row--empty {
border-style: dashed;
border-color: #aa812a;
color: #8b949e;
justify-content: center;
padding: 10px 8px;
}
.document-primary-row__thumb {
width: 18px; height: 18px;
border-radius: 2px;
background: linear-gradient(135deg, #b88a30, #7c5719);
display: flex; align-items: center; justify-content: center;
font-size: 10px; flex-shrink: 0;
}
.document-primary-row__name {
flex: 1;
color: #c9d1d9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.document-primary-row__meta {
color: #6e7681;
font-size: 9px;
font-family: ui-monospace, monospace;
}
.document-primary-row__action {
color: #d2ab43;
font-size: 10px;
padding: 0 6px;
cursor: pointer;
}