functioning app

src/main.zig

@@ -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 {
+fn staticHandler(db: *root.NotmuchDb, req: *httpz.Request, res: *httpz.Response) !void {
-    res.status = 404;
+    const path = req.url.path;
-    res.body = "Not Found";
+
+    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/"
+    const encoded_query = req.url.path[11..]; // Skip "/api/query/"
-    if (query.len == 0) {
+    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) }, .{});

static/app.js

@@ -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);
+    }
+});

static/index.html

@@ -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>

static/style.css

@@ -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;
+}