lobo/zetviel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

help overlay

Browse source
This commit is contained in:
Emil Lerch 2025-10-15 17:07:05 -07:00
parent 07a7521c52
commit 2941a4fc5e
Signed by: lobo
GPG key ID: A7B62D657EF764F8
1 changed files with 47 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
static/index.html
View file

@ -9,6 +9,9 @@
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; background: #1e1e1e; color: #e0e0e0; }
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #333; background: #252525; }
h1 { font-size: 1.5rem; }
.header-left { display: flex; align-items: center; gap: 1rem; }
.help-icon { cursor: pointer; font-size: 1.2rem; color: #0066cc; }
.help-icon:hover { color: #0052a3; }
.status-ok { color: #0f0; }
.status-error { color: #f00; }
.status-loading { color: #ff0; }
@ -33,12 +36,21 @@ button:disabled { background: #444; cursor: not-allowed; }
.attachments { margin-top: 1rem; padding: 0.5rem; background: #3a3a00; border-radius: 4px; }
.loading { padding: 1rem; text-align: center; color: #999; }
.error { padding: 1rem; background: #3a0000; border: 1px solid #600; border-radius: 4px; margin: 1rem; }
.help-overlay { display: none; position: fixed; bottom: 1rem; right: 1rem; width: 425px; max-height: 500px; overflow-y: auto; background: #252525; border: 1px solid #444; border-radius: 8px; padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 1000; font-size: 0.85rem; }
.help-overlay.visible { display: block; }
.help-overlay h3 { margin-bottom: 0.5rem; color: #0066cc; }
.help-overlay code { background: #2a2a2a; padding: 0.2rem 0.4rem; border-radius: 3px; color: #4ec9b0; }
.help-overlay ul { list-style: none; margin-top: 0.5rem; }
.help-overlay li { margin: 0.5rem 0; }
</style>
</head>
<body>
<div id="app">
<header>
<h1>Zetviel</h1>
<div class="header-left">
<h1>Zetviel</h1>
<span class="help-icon" onclick="toggleHelp()" title="Help (?)">?</span>
</div>
<div id="status" class="status-ok">●</div>
</header>
@ -51,6 +63,32 @@ button:disabled { background: #444; cursor: not-allowed; }
<div id="thread-list" class="thread-list"></div>
<div id="message-view" class="message-view"></div>
</div>
<div id="help-overlay" class="help-overlay">
<h3>Notmuch Search Syntax</h3>
<ul>
<li><code>tag:inbox</code> - Messages with inbox tag</li>
<li><code>from:alice</code> - From alice</li>
<li><code>to:bob</code> - To bob</li>
<li><code>subject:meeting</code> - Subject contains "meeting"</li>
<li><code>date:today</code> - Messages from today</li>
<li><code>date:yesterday</code> - Messages from yesterday</li>
<li><code>date:7d..</code> - Last 7 days</li>
<li><code>tag:unread AND from:alice</code> - Combine with AND</li>
<li><code>tag:inbox OR tag:sent</code> - Combine with OR</li>
<li><code>NOT tag:spam</code> - Exclude spam</li>
<li><code>attachment:pdf</code> - Has PDF attachment</li>
<li><code>*</code> - All messages</li>
</ul>
<h3 style="margin-top: 1rem;">Keyboard Shortcuts</h3>
<ul>
<li><code>/</code> - Focus search</li>
<li><code>j</code> - Next thread</li>
<li><code>k</code> - Previous thread</li>
<li><code>t</code> - Toggle HTML/text</li>
<li><code>?</code> - Toggle this help</li>
</ul>
</div>
</div>
<script>
let currentQuery = 'tag:inbox';
@ -195,6 +233,11 @@ function toggleHtmlText() {
}
}
function toggleHelp() {
const overlay = document.getElementById('help-overlay');
overlay.classList.toggle('visible');
}
function moveThread(direction) {
if (threads.length === 0) return;
@ -235,6 +278,9 @@ window.addEventListener('DOMContentLoaded', () => {
} else if (e.key === 't') {
e.preventDefault();
toggleHtmlText();
} else if (e.key === '?') {
e.preventDefault();
toggleHelp();
}
});
});