thandClaude Opus 4.7
8cbec8d601
- Overlays: drop the 24/40/54px inset frame on tasks, calendar,
gallery, search, detail, edit modal, bookmarks, email, gitea and
oumta-dashboard so they fill the viewport like the support
overlay does. Removed the shared border-radius + overflow:hidden
rule on their inner containers (only settings + dialog still use
it) so the card's top colour bar isn't clipped.
- Done badge: the corner-triangle variant gets chopped by rounded
card borders. applyDesign now toggles body.rounded-cards whenever
--ui-radius-card > 0, and the CSS swaps the triangle for a 18px
circle pill with the check centred. Triangle stays for square
cards.
- Support plugin: "Close ticket" button is a regular labelled
button now (was a 30×30 icon ghost that clipped the text). Empty
hero state ("select a ticket") matches the board's empty style —
centred in the column with a pixel-font blink-cursor label.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
107 lines
9.7 KiB
HTML
107 lines
9.7 KiB
HTML
<!-- Email Plugin: full-screen mail viewer overlay -->
|
|
<div class="overlay fixed inset-0" id="email-overlay" style="z-index:75;">
|
|
<div class="email-modal bg-t-bg flex flex-col" style="position:absolute;inset:0;">
|
|
|
|
<!-- Header -->
|
|
<div class="flex items-center gap-3 px-4 py-2 border-b border-t-border shrink-0 bg-t-surface">
|
|
<i class="ph ph-envelope text-t-accent text-base"></i>
|
|
<h2 class="font-pixel text-xs text-t-accent">mail</h2>
|
|
<select id="email-account-select" class="bg-t-bg border border-t-border text-t-bright text-xs font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer min-w-32"></select>
|
|
<button id="email-refresh" class="toolbar-btn" data-tip="refresh"><i class="ph ph-arrows-clockwise text-sm"></i></button>
|
|
<span id="email-status" class="text-[10px] text-t-dim font-pixel"></span>
|
|
<div class="flex-1"></div>
|
|
<button id="email-show-settings" class="flex items-center gap-1.5 px-2 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-tip="manage accounts"><i class="ph ph-gear text-sm"></i><span class="font-pixel text-[10px]">Accounts</span></button>
|
|
<button id="email-close" class="flex items-center gap-1.5 px-2 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">Close</span></button>
|
|
</div>
|
|
|
|
<!-- ── Welcome view (shown when no accounts) ── -->
|
|
<div id="email-view-welcome" class="hidden flex-1 min-h-0 overflow-y-auto">
|
|
<div class="flex items-center justify-center h-full px-6 py-12">
|
|
<div class="email-welcome text-center max-w-md">
|
|
<i class="ph ph-envelope text-t-accent text-6xl block mb-4"></i>
|
|
<h3 class="font-pixel text-base text-t-accent tracking-wider mb-2">welcome to mail</h3>
|
|
<p class="text-xs text-t-muted leading-relaxed mb-6">
|
|
Read mail from any IMAP account inside hyprcrd. Messages stay on the
|
|
server — only the ones you explicitly extract become cards.
|
|
To get started, add at least one account in settings.
|
|
</p>
|
|
<button id="email-welcome-configure" class="inline-flex items-center gap-2 px-4 py-2 text-xs bg-t-accent text-t-bg border border-t-accent hover:brightness-110 transition-all">
|
|
<i class="ph ph-gear text-sm"></i>
|
|
<span class="font-pixel text-[11px]">Configure accounts</span>
|
|
</button>
|
|
<p class="text-[10px] text-t-dim mt-4 font-pixel">settings → mail</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Mail viewer (default view when accounts exist) ── -->
|
|
<div id="email-view-mail" class="hidden flex-1 min-h-0 overflow-hidden">
|
|
<!-- Message list -->
|
|
<div id="email-list-pane" class="overflow-y-auto border-r border-t-border bg-t-bg shrink-0 relative" style="width:38%;">
|
|
<div class="sticky top-0 z-20 bg-t-bg">
|
|
<!-- List toolbar: pagination + spam quick-select -->
|
|
<div id="email-list-toolbar" class="hidden flex items-center gap-2 px-3 py-1.5 border-b border-t-border">
|
|
<button id="email-page-prev" class="toolbar-btn" data-tip="previous page"><i class="ph ph-caret-left text-sm"></i></button>
|
|
<button id="email-page-next" class="toolbar-btn" data-tip="next page"><i class="ph ph-caret-right text-sm"></i></button>
|
|
<span id="email-page-info" class="font-pixel text-[9px] text-t-dim">—</span>
|
|
<div class="flex-1"></div>
|
|
<button id="email-select-spam" class="hidden flex items-center gap-1 px-2 py-0.5 text-xs border border-t-danger text-t-danger hover:bg-t-danger/10 transition-colors" data-tip="select spam">
|
|
<i class="ph ph-warning-octagon text-sm"></i>
|
|
<span class="font-pixel text-[9px]">select spam (<span id="email-spam-count">0</span>)</span>
|
|
</button>
|
|
</div>
|
|
<!-- Selection action bar (visible when at least one selected) -->
|
|
<div id="email-selection-bar" class="hidden flex items-center gap-2 px-3 py-2 border-b border-t-accent bg-t-raised">
|
|
<span id="email-selection-count" class="font-pixel text-[10px] text-t-accent">0 selected</span>
|
|
<div class="flex-1"></div>
|
|
<button id="email-selection-mark-spam" class="flex items-center gap-1 px-2 py-0.5 text-xs border border-t-danger text-t-danger hover:bg-t-danger/10 transition-colors" data-tip="mark as spam">
|
|
<i class="ph ph-warning-octagon text-sm"></i><span class="font-pixel text-[9px]">Spam</span>
|
|
</button>
|
|
<button id="email-selection-mark-ham" class="flex items-center gap-1 px-2 py-0.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors" data-tip="not spam">
|
|
<i class="ph ph-check-circle text-sm"></i><span class="font-pixel text-[9px]">Not spam</span>
|
|
</button>
|
|
<button id="email-selection-delete" class="flex items-center gap-1 px-2 py-0.5 text-xs border border-t-danger text-t-danger hover:bg-t-danger/10 transition-colors" data-tip="Delete selected on server">
|
|
<i class="ph ph-trash text-sm"></i><span class="font-pixel text-[9px]">Delete</span>
|
|
</button>
|
|
<button id="email-selection-clear" class="flex items-center gap-1 px-2 py-0.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-tip="Clear selection">
|
|
<i class="ph ph-x text-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="email-list" class="divide-y divide-t-border"></div>
|
|
</div>
|
|
<!-- Resizer -->
|
|
<div id="email-divider" class="shrink-0" style="width:5px;cursor:col-resize;background:transparent;position:relative;">
|
|
<div style="position:absolute;left:2px;top:0;bottom:0;width:1px;background:var(--t-border);"></div>
|
|
</div>
|
|
<!-- Message body -->
|
|
<div id="email-body-pane" class="flex-1 min-w-0 min-h-0 flex flex-col bg-t-bg">
|
|
<div id="email-body-empty" class="flex items-center justify-center flex-1 text-t-dim text-xs font-pixel">
|
|
<div class="text-center">
|
|
<i class="ph ph-envelope-open text-3xl mb-2 block"></i>
|
|
<span class="cursor-blink">select a message</span>
|
|
</div>
|
|
</div>
|
|
<div id="email-body" class="hidden flex flex-col flex-1 min-h-0">
|
|
<div class="shrink-0 border-b border-t-border px-5 pt-5 pb-3">
|
|
<h3 id="email-msg-subject" class="text-t-bright text-base font-bold mb-2"></h3>
|
|
<div class="flex items-center gap-3 text-[10px] font-pixel text-t-dim">
|
|
<span><span class="text-t-muted">from:</span> <span id="email-msg-from" class="text-t-text"></span></span>
|
|
<span><span class="text-t-muted">date:</span> <span id="email-msg-date" class="text-t-text"></span></span>
|
|
</div>
|
|
<div class="mt-3 flex items-center gap-2 flex-wrap">
|
|
<button id="email-extract-btn" class="flex items-center gap-1.5 px-3 py-1 text-xs bg-t-accent text-t-bg border border-t-accent hover:brightness-110 transition-all"><i class="ph ph-scissors text-sm"></i><span class="font-pixel text-[10px]">Extract as card</span></button>
|
|
<button id="email-view-html" class="hidden items-center gap-1.5 px-3 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-tip="Show HTML rendered version (external images blocked by default)"><i class="ph ph-code text-sm"></i><span class="font-pixel text-[10px]">View as html</span></button>
|
|
<button id="email-view-text" class="hidden items-center gap-1.5 px-3 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-tip="Switch back to plain text"><i class="ph ph-text-aa text-sm"></i><span class="font-pixel text-[10px]">View as text</span></button>
|
|
<button id="email-load-images" class="hidden items-center gap-1.5 px-3 py-1 text-xs border border-t-accent2 text-t-accent2 hover:bg-t-accent2/10 transition-colors" data-tip="Load external images (privacy: tracking pixels may be loaded)"><i class="ph ph-image text-sm"></i><span class="font-pixel text-[10px]">Load images (<span id="email-blocked-count">0</span>)</span></button>
|
|
<span id="email-extract-status" class="font-pixel text-[9px] text-t-dim"></span>
|
|
</div>
|
|
</div>
|
|
<pre id="email-msg-text" class="flex-1 min-h-0 overflow-y-auto text-xs text-t-text whitespace-pre-wrap break-words font-mono leading-relaxed px-5 py-4 m-0"></pre>
|
|
<iframe id="email-msg-html" class="hidden flex-1 min-h-0 w-full bg-white" sandbox="allow-popups allow-popups-to-escape-sandbox" style="border:none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|