functioning app

This commit is contained in:
Emil Lerch 2025-10-15 15:42:48 -07:00
parent 6341af1cac
commit 44cd018e09
Signed by: lobo
GPG key ID: A7B62D657EF764F8
4 changed files with 360 additions and 5 deletions

View file

@ -101,9 +101,39 @@ fn indexHandler(db: *root.NotmuchDb, _: *httpz.Request, res: *httpz.Response) !v
res.body = content;
}
fn staticHandler(_: *root.NotmuchDb, _: *httpz.Request, res: *httpz.Response) !void {
res.status = 404;
res.body = "Not Found";
fn staticHandler(db: *root.NotmuchDb, req: *httpz.Request, res: *httpz.Response) !void {
const path = req.url.path;
const file_path = if (std.mem.eql(u8, path, "/style.css"))
"static/style.css"
else if (std.mem.eql(u8, path, "/app.js"))
"static/app.js"
else {
res.status = 404;
res.body = "Not Found";
return;
};
const file = std.fs.cwd().openFile(file_path, .{}) catch {
res.status = 404;
res.body = "Not Found";
return;
};
defer file.close();
const content = file.readToEndAlloc(db.allocator, 1024 * 1024) catch {
res.status = 500;
res.body = "Error reading file";
return;
};
if (std.mem.endsWith(u8, file_path, ".css")) {
res.header("Content-Type", "text/css");
} else if (std.mem.endsWith(u8, file_path, ".js")) {
res.header("Content-Type", "application/javascript");
}
res.body = content;
}
const SecurityHeaders = struct {
@ -118,13 +148,18 @@ const SecurityHeaders = struct {
};
fn queryHandler(db: *root.NotmuchDb, req: *httpz.Request, res: *httpz.Response) !void {
const query = req.url.path[11..]; // Skip "/api/query/"
if (query.len == 0) {
const encoded_query = req.url.path[11..]; // Skip "/api/query/"
if (encoded_query.len == 0) {
res.status = 400;
try res.json(.{ .@"error" = "Query parameter required" }, .{});
return;
}
// URL decode the query
const query_buf = try db.allocator.dupe(u8, encoded_query);
defer db.allocator.free(query_buf);
const query = std.Uri.percentDecodeInPlace(query_buf);
var threads = db.search(query) catch |err| {
res.status = 500;
try res.json(.{ .@"error" = @errorName(err) }, .{});

138
static/app.js Normal file
View file

@ -0,0 +1,138 @@
let currentQuery = 'tag:inbox';
let isLoading = false;
async function api(endpoint) {
console.log('API call:', endpoint);
const res = await fetch(`/api/${endpoint}`);
console.log('Response status:', res.status);
if (!res.ok) {
const text = await res.text();
console.error('API error response:', text);
throw new Error(`API error: ${res.status}`);
}
const data = await res.json();
console.log('API response:', data);
return data;
}
function setStatus(state) {
const status = document.getElementById('status');
status.className = state === 'loading' ? 'status-loading' : state === 'ok' ? 'status-ok' : 'status-error';
}
function setLoading(loading) {
isLoading = loading;
const btn = document.querySelector('.search-bar button');
btn.disabled = loading;
btn.textContent = loading ? 'Loading...' : 'Search';
}
async function search() {
if (isLoading) return;
const query = document.getElementById('search').value;
currentQuery = query;
history.pushState({ query }, '', `/?q=${encodeURIComponent(query)}`);
await loadThreads(query);
}
async function loadThreads(query) {
setLoading(true);
setStatus('loading');
const list = document.getElementById('thread-list');
try {
const threads = await api(`query/${encodeURIComponent(query)}`);
if (!threads || threads.length === 0) {
list.innerHTML = '<div class="loading">No threads found</div>';
} else {
list.innerHTML = threads.map(t => `
<div class="thread" onclick="loadThread('${t.thread_id}')">
<div class="thread-subject">${escapeHtml(t.subject)}</div>
<div class="thread-authors">${escapeHtml(t.authors)}</div>
<div class="thread-date">${new Date(t.newest_date * 1000).toLocaleString()}</div>
</div>
`).join('');
}
setStatus('ok');
} catch (e) {
console.error('Error in loadThreads:', e);
list.innerHTML = `<div class="error">Error loading threads: ${escapeHtml(e.message)}</div>`;
setStatus('error');
} finally {
setLoading(false);
}
}
async function loadThread(threadId) {
setStatus('loading');
const view = document.getElementById('message-view');
view.innerHTML = '<div class="loading">Loading messages...</div>';
try {
const messages = await api(`thread/${threadId}`);
view.innerHTML = messages.map(m => `
<div class="message">
<div class="message-header">
<strong>From:</strong> ${escapeHtml(m.from || '')}<br>
<strong>To:</strong> ${escapeHtml(m.to || '')}<br>
<strong>Date:</strong> ${escapeHtml(m.date || '')}<br>
<strong>Subject:</strong> ${escapeHtml(m.subject || '')}
</div>
<button onclick="loadMessageContent('${m.message_id}')">Show Content</button>
<div id="msg-${m.message_id}" class="message-content"></div>
</div>
`).join('');
setStatus('ok');
} catch (e) {
console.error('Error in loadThread:', e);
view.innerHTML = `<div class="error">Error loading thread: ${escapeHtml(e.message)}</div>`;
setStatus('error');
}
}
async function loadMessageContent(messageId) {
setStatus('loading');
const div = document.getElementById(`msg-${messageId}`);
div.innerHTML = '<div class="loading">Loading content...</div>';
try {
const msg = await api(`message/${messageId}`);
div.innerHTML = `
<div class="content-type">${escapeHtml(msg.content_type)}</div>
<div class="content">${msg.content_type === 'text/html' ? msg.content : `<pre>${escapeHtml(msg.content)}</pre>`}</div>
${msg.attachments.length ? `<div class="attachments">Attachments: ${msg.attachments.map(a => escapeHtml(a.filename)).join(', ')}</div>` : ''}
`;
setStatus('ok');
} catch (e) {
console.error('Error in loadMessageContent:', e);
div.innerHTML = `<div class="error">Error loading message: ${escapeHtml(e.message)}</div>`;
setStatus('error');
}
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Initialize
window.addEventListener('DOMContentLoaded', () => {
console.log('App initialized');
const params = new URLSearchParams(location.search);
const query = params.get('q') || 'tag:inbox';
document.getElementById('search').value = query;
loadThreads(query);
// Allow Enter key to search
document.getElementById('search').addEventListener('keypress', (e) => {
if (e.key === 'Enter') search();
});
});
window.addEventListener('popstate', (e) => {
if (e.state?.query) {
document.getElementById('search').value = e.state.query;
loadThreads(e.state.query);
}
});

28
static/index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zetviel</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="app">
<header>
<h1>Zetviel</h1>
<div id="status" class="status-ok"></div>
</header>
<div class="search-bar">
<input type="text" id="search" placeholder="Search (e.g., tag:inbox)" value="tag:inbox">
<button onclick="search()">Search</button>
</div>
<div class="container">
<div id="thread-list" class="thread-list"></div>
<div id="message-view" class="message-view"></div>
</div>
</div>
<script src="/app.js"></script>
</body>
</html>

154
static/style.css Normal file
View file

@ -0,0 +1,154 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
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;
}
.status-ok { color: #0f0; }
.status-error { color: #f00; }
.status-loading { color: #ff0; }
.search-bar {
padding: 1rem;
border-bottom: 1px solid #333;
background: #252525;
}
#search {
width: 70%;
padding: 0.5rem;
border: 1px solid #444;
border-radius: 4px;
background: #2a2a2a;
color: #e0e0e0;
}
button {
padding: 0.5rem 1rem;
background: #0066cc;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #0052a3;
}
button:disabled {
background: #444;
cursor: not-allowed;
}
.container {
display: flex;
height: calc(100vh - 140px);
}
.thread-list {
width: 40%;
overflow-y: auto;
border-right: 1px solid #333;
}
.thread {
padding: 1rem;
border-bottom: 1px solid #2a2a2a;
cursor: pointer;
}
.thread:hover {
background: #2a2a2a;
}
.thread-subject {
font-weight: bold;
margin-bottom: 0.25rem;
}
.thread-authors {
color: #999;
font-size: 0.9rem;
}
.thread-date {
color: #666;
font-size: 0.85rem;
}
.message-view {
width: 60%;
overflow-y: auto;
padding: 1rem;
}
.message {
margin-bottom: 2rem;
padding: 1rem;
border: 1px solid #333;
border-radius: 4px;
background: #252525;
}
.message-header {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #333;
}
.message-content {
margin-top: 1rem;
}
.content {
padding: 1rem;
background: #2a2a2a;
border-radius: 4px;
}
.content pre {
white-space: pre-wrap;
word-wrap: break-word;
}
.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;
}