cesnimda/Inboxintel
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ui): email dashboard UX refactor (PHASES 1/3/4) (#44)
CI / backend (push) Successful in 1m33s
Details
CI / frontend (push) Successful in 33s
Details
CI / format (push) Successful in 2m2s
Details
CI / db-tests (push) Successful in 1m45s
Details
Deploy Staging / deploy (push) Successful in 38s
Details
Security / secrets (push) Successful in 6s
Details
Security / dependencies (push) Successful in 1m17s
Details
Security / sast (push) Successful in 56s
Details
CI / backend (pull_request) Successful in 1m9s
Details
CI / frontend (pull_request) Successful in 21s
Details
CI / format (pull_request) Successful in 1m4s
Details
CI / db-tests (pull_request) Successful in 1m27s
Details
Security / secrets (pull_request) Successful in 6s
Details
Security / dependencies (pull_request) Successful in 1m21s
Details
Security / sast (pull_request) Successful in 1m8s
Details

Browse Source
This commit was merged in pull request #44.
This commit is contained in:
cesnimda
2026-07-04 21:16:21 +02:00
parent 04ff72097b
commit 2f173dc3e5
15 changed files with 712 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles.css
+53 -27
View File
@@ -117,8 +117,6 @@ button:disabled { opacity: 0.5; cursor: default; }
.widget--link:hover { border-color: var(--accent); }
.mini-row--link { cursor: pointer; }
.mini-row--link:hover td { color: var(--accent); }
.chm-label--link { cursor: pointer; text-decoration: underline dotted; }
.chm-label--link:hover { color: var(--accent); }
.widget canvas { flex: 1; min-height: 0; }
.stat { align-items: flex-start; justify-content: center; }
@@ -137,17 +135,21 @@ table.grid th, table.grid td { padding: 8px; border-bottom: 1px solid #332f2b; t
.num { text-align: right; }
.muted { color: var(--muted); font-size: 12px; }
.heatmap { display: flex; flex-direction: column; gap: 2px; }
.hm-row { display: flex; align-items: center; gap: 2px; }
.hm-day { width: 30px; font-size: 10px; color: var(--muted); }
.hm-cell { width: 10px; height: 10px; background: var(--accent); border-radius: 2px; }
/* Category heatmap */
.cat-heatmap { display: flex; flex-direction: column; gap: 3px; overflow: auto; }
.chm-row { display: grid; grid-template-columns: 92px repeat(7, 1fr); gap: 3px; align-items: stretch; }
.chm-head .chm-col { font-size: 10px; color: var(--muted); text-align: center; }
.chm-label { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chm-cell { background: var(--accent); border-radius: 3px; min-height: 22px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
/* Emails by Category — ranked horizontal bars */
.cat-bars { display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.cat-bar {
display: grid; grid-template-columns: 92px 1fr 40px; gap: 8px; align-items: center;
width: 100%; padding: 3px 4px; margin: 0; border: none; background: transparent;
border-radius: 6px; text-align: left; font: inherit; color: inherit;
}
.cat-bar--link { cursor: pointer; }
.cat-bar--link:hover { background: rgba(255, 255, 255, 0.04); }
.cat-bar:disabled { cursor: default; }
.cat-bar-label { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-bar-track { height: 14px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; overflow: hidden; }
.cat-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; }
.cat-bar-count { font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.cat-bar--link:hover .cat-bar-label { color: var(--accent); }
/* react-grid-layout resize handle — make it clearly visible on the dark theme */
.react-resizable-handle {
@@ -296,32 +298,57 @@ input, select { background: var(--panel-2); border: 1px solid #332f2b; color: va
.fv-error { color: var(--danger); font-size: 14px; padding: 12px 0; }
.email-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.email-row { border-bottom: 1px solid #332f2b; cursor: pointer; }
.email-row {
height: 44px;
border-bottom: 1px solid #332f2b;
cursor: pointer;
transition: background 0.1s ease;
}
.email-row > td { padding-top: 0; padding-bottom: 0; vertical-align: middle; }
/* Single, consistent hover state for the whole row. */
.email-row:hover { background: var(--panel); }
.email-row--unread .el-sender,
/* Unread: prominent subject, keep sender readable but not shouty. */
.email-row--unread .el-subj-text { font-weight: 700; color: var(--text); }
.email-row--unread .el-sender { font-weight: 600; color: var(--text); }
.el-unread { width: 14px; padding: 10px 4px 10px 0; }
.el-select { width: 34px; padding: 0 4px 0 10px; text-align: center; }
.el-select > * { vertical-align: middle; }
.el-unread { width: 14px; padding: 0 4px 0 0; text-align: center; }
.unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.el-sender { width: 180px; padding: 10px 12px 10px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.el-subject { padding: 10px 8px; overflow: hidden; }
/* Sender: secondary in the hierarchy — muted by default. */
.el-sender {
width: 180px; padding: 0 12px 0 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--muted); font-size: 12.5px;
}
/* Subject + snippet share one line: subject prominent, snippet muted. */
.el-subject { padding: 0 8px; overflow: hidden; max-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.el-subj-text { color: var(--text); }
.el-snippet { color: var(--muted); }
.el-meta { width: 80px; padding: 10px 8px; text-align: right; white-space: nowrap; }
.el-snippet {
color: var(--muted); font-size: 12.5px;
}
.el-snippet::before { content: '—'; margin: 0 6px; opacity: 0.55; }
.el-meta { width: 80px; padding: 0 8px; text-align: right; white-space: nowrap; }
.el-attach { margin-right: 4px; font-size: 12px; }
.el-size { font-size: 11px; color: var(--muted); }
.el-date { width: 70px; padding: 10px 0 10px 8px; text-align: right; color: var(--muted); white-space: nowrap; font-size: 12px; }
.el-date { width: 70px; padding: 0 0 0 8px; text-align: right; color: var(--muted); white-space: nowrap; font-size: 12px; }
.el-actions { width: 80px; padding: 0 6px; text-align: right; white-space: nowrap; }
.el-actions { width: 96px; padding: 0 6px; text-align: right; white-space: nowrap; }
.action-btn {
background: none; border: none; padding: 3px 4px; cursor: pointer;
font-size: 13px; opacity: 0; transition: opacity 0.1s, color 0.1s;
background: none; border: none; padding: 4px 5px; cursor: pointer;
font-size: 13px; line-height: 1; opacity: 0;
transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease;
border-radius: 4px; color: var(--muted);
}
.action-btn:hover { background: var(--panel-2); opacity: 1 !important; }
.action-btn:hover { background: var(--panel-2); color: var(--text); opacity: 1 !important; }
.action-btn--active { opacity: 1 !important; }
.action-btn--danger:hover { color: var(--danger); }
.email-row:hover .action-btn { opacity: 0.6; }
.email-row:hover .action-btn { opacity: 0.65; }
.action-btn:focus-visible { opacity: 1 !important; outline: 2px solid var(--accent); outline-offset: 1px; }
.email-row--acting { opacity: 0.6; pointer-events: none; }
.action-btn--unsub { font-size: 11px; }
.action-btn--done { opacity: 1 !important; color: var(--ok); }
@@ -405,7 +432,6 @@ input, select { background: var(--panel-2); border: 1px solid #332f2b; color: va
}
.bulk-btn:hover { border-color: var(--accent); }
.bulk-btn--danger:hover { border-color: var(--danger); color: var(--danger); }
.el-select { width: 28px; text-align: center; }
/* ── Keyboard shortcut help ──────────────────────────────────────────────── */
.kbd-hint { position: fixed; bottom: 14px; right: 14px; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid #332f2b; border-radius: 6px; padding: 4px 10px; opacity: 0.7; }