update

2026-08-10 21:15:19 +01:00
parent d7ca591b76
commit 4da942786e
97 changed files with 105039 additions and 3370 deletions
@@ -4,73 +4,187 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>GoMail</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap" rel="stylesheet">
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
-body{background:#0f172a;color:#e2e8f0;font-family:system-ui,-apple-system,sans-serif;margin:0}
-.sidebar{width:220px;background:#1e293b;border-right:1px solid #334155;min-height:100vh;position:fixed;top:0;left:0;bottom:0}
-.main{margin-left:220px;display:flex;min-height:100vh}
-.msg-list{width:340px;border-right:1px solid #334155;overflow-y:auto}
-.msg-view{flex:1;padding:24px;overflow-y:auto}
-.nav-item{padding:9px 16px;cursor:pointer;font-size:13px;color:#94a3b8;border-radius:8px;margin:2px 8px}
-.nav-item:hover{background:#334155}
-.nav-item.active{background:#7c3aed22;color:#a78bfa}
-.msg-row{padding:12px 16px;border-bottom:1px solid #1e293b;cursor:pointer;font-size:13px}
-.msg-row:hover{background:#1e293b80}
-.msg-row.unread{font-weight:600}
-.btn{padding:7px 14px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;border:none}
-.btn-primary{background:#7c3aed;color:#fff}
-.btn-ghost{background:transparent;color:#94a3b8;border:1px solid #334155}
-.inp{background:#0f172a;border:1px solid #334155;border-radius:7px;padding:8px 12px;color:#e2e8f0;font-size:13px;width:100%}
+:root{
+  --bg:#12141c;
+  --surface:#1a1d29;
+  --surface-2:#20232f;
+  --border:#2a2e3d;
+  --text:#e8e6e1;
+  --text-muted:#8b8d98;
+  --text-faint:#5b5e6b;
+  --accent:#d9a441;
+  --accent-dim:#d9a44122;
+  --accent-text:#f0c878;
+  --danger:#e2685a;
+}
+*{box-sizing:border-box}
+body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;margin:0;font-size:14px}
+.serif{font-family:'Source Serif 4',Georgia,serif}
+::selection{background:var(--accent-dim)}
+::-webkit-scrollbar{width:10px;height:10px}
+::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
+::-webkit-scrollbar-track{background:transparent}
+a{color:inherit}
+
+/* ── layout shell ────────────────────────────────────────────── */
+.app-shell{display:flex;height:100vh;overflow:hidden}
+.rail{width:250px;flex:none;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}
+.rail-header{padding:18px 16px 10px;display:flex;align-items:center;gap:8px}
+.rail-brand{font-weight:700;font-size:16px;letter-spacing:.01em}
+.rail-body{flex:1;overflow-y:auto;padding:4px 8px}
+.rail-footer{padding:10px 12px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
+.workspace{flex:1;display:flex;min-width:0}
+
+/* ── nav rows (accounts + folders) ──────────────────────────────── */
+.section-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:14px 10px 6px}
+.nav-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--text-muted);font-size:13px}
+.nav-row:hover{background:var(--surface-2)}
+.nav-row.active{background:var(--accent-dim);color:var(--accent-text)}
+.seal{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}
+.nav-row.active .seal{background:var(--accent);color:#1a1206;border-color:var(--accent)}
+.nav-row-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.count-badge{font-size:11px;color:var(--text-faint);min-width:16px;text-align:right}
+.nav-row.active .count-badge{color:var(--accent-text)}
+
+/* ── message list pane ──────────────────────────────────────────── */
+.list-pane{width:360px;flex:none;border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
+.list-toolbar{padding:12px;border-bottom:1px solid var(--border)}
+.list-title{font-weight:700;font-size:15px;margin-bottom:8px}
+.msg-list{flex:1;overflow-y:auto}
+.msg-row{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer}
+.msg-row:hover{background:var(--surface)}
+.msg-row.selected{background:var(--accent-dim)}
+.msg-row .msg-from{display:flex;align-items:center;gap:6px;color:var(--text);font-size:13px}
+.msg-row.unread .msg-from{font-weight:700}
+.msg-row .msg-subject{color:var(--text-muted);font-size:13px;margin-top:2px;font-family:'Source Serif 4',Georgia,serif}
+.msg-row .msg-meta{color:var(--text-faint);font-size:11px;margin-top:4px;display:flex;gap:6px;align-items:center}
+.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
+.chip{font-size:10px;padding:1px 7px;border-radius:9px;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}
+
+/* ── reading pane ────────────────────────────────────────────────── */
+.reading-pane{flex:1;overflow-y:auto;padding:28px 32px;min-width:0}
+.reading-empty{color:var(--text-faint);text-align:center;margin-top:80px}
+.reading-subject{font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:21px;color:#fff}
+.reading-meta{color:var(--text-muted);font-size:13px;margin-top:6px;line-height:1.6}
+.reading-body{white-space:pre-wrap;font-family:inherit;color:#d4d2ce;font-size:13.5px;line-height:1.6;margin-top:20px}
+
+/* ── generic controls ────────────────────────────────────────────── */
+.btn{padding:8px 15px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:filter .12s}
+.btn:hover{filter:brightness(1.1)}
+.btn-primary{background:var(--accent);color:#1a1206}
+.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}
+.btn-danger{background:transparent;color:var(--danger);border:1px solid #e2685a44}
+.btn:focus-visible,.inp:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+.inp{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-size:13px;width:100%}
+.inp::placeholder{color:var(--text-faint)}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px}
+.view-single{flex:1;overflow-y:auto;padding:28px 32px}
 .modal-bg{position:fixed;inset:0;background:#00000088;z-index:50;display:flex;align-items:center;justify-content:center}
-.modal{background:#1e293b;border:1px solid #334155;border-radius:14px;padding:24px;width:560px;max-width:95vw}
-.badge{padding:2px 8px;border-radius:10px;font-size:11px}
+.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;width:560px;max-width:95vw;max-height:88vh;overflow-y:auto}
+.label{font-size:12px;color:var(--text-muted);margin-bottom:4px;display:block}
+.field{margin-bottom:12px}
+.notice{background:var(--accent-dim);border:1px solid var(--accent);color:var(--accent-text);border-radius:8px;padding:10px 12px;font-size:12px;margin-bottom:12px}
+.settings-section{margin-bottom:22px}
+.settings-section h3{font-family:'Source Serif 4',Georgia,serif;font-size:17px;margin:0 0 4px}
+.settings-section p.hint{color:var(--text-muted);font-size:12px;margin:0 0 12px}
 </style>
 </head>
 <body>

 <div id="login" style="display:none;min-height:100vh;align-items:center;justify-content:center" class="flex">
-  <div style="background:#1e293b;border:1px solid #334155;border-radius:14px;padding:28px;width:320px">
-    <div style="text-align:center;margin-bottom:20px"><div style="font-size:2.5rem">📧</div>
-      <h1 style="font-weight:700;color:#fff">GoMail</h1></div>
-    <input id="le" class="inp" placeholder="you@example.com" style="margin-bottom:10px">
-    <input id="lp" type="password" class="inp" placeholder="Password" style="margin-bottom:10px" onkeydown="if(event.key==='Enter')login()">
+  <div class="card" style="width:320px">
+    <div style="text-align:center;margin-bottom:20px">
+      <div class="seal" style="width:44px;height:44px;font-size:18px;margin:0 auto 10px;background:var(--accent);color:#1a1206;border:none">G</div>
+      <h1 class="serif" style="font-weight:700;color:#fff;font-size:22px;margin:0">GoMail</h1>
+    </div>
+    <div class="field"><input id="le" class="inp" placeholder="you@example.com"></div>
+    <div class="field"><input id="lp" type="password" class="inp" placeholder="Password" onkeydown="if(event.key==='Enter')login()"></div>
    <button onclick="login()" class="btn btn-primary" style="width:100%">Sign in</button>
-    <p id="lerr" style="display:none;color:#f87171;font-size:12px;text-align:center;margin-top:10px"></p>
+    <p id="lerr" style="display:none;color:var(--danger);font-size:12px;text-align:center;margin-top:10px"></p>
  </div>
 </div>

-<div id="app" style="display:none">
-  <aside class="sidebar">
-    <div style="padding:16px;border-bottom:1px solid #334155;font-weight:700;color:#fff">📧 GoMail</div>
-    <div style="padding:12px 8px">
-      <button onclick="openCompose()" class="btn btn-primary" style="width:100%;margin-bottom:12px">✎ Compose</button>
-      <div id="folder-list"></div>
-      <div class="nav-item" onclick="showQuarantine()" id="nav-quarantine" style="margin-top:8px">🔒 Quarantine</div>
+<div id="mfa-login" style="display:none;min-height:100vh;align-items:center;justify-content:center" class="flex">
+  <div class="card" style="width:320px">
+    <h1 class="serif" style="font-weight:700;color:#fff;font-size:18px;margin:0 0 4px">Two-factor code</h1>
+    <p class="hint" style="color:var(--text-muted);font-size:12px;margin:0 0 14px">Enter a code from your authenticator app, or a backup code.</p>
+    <div class="field"><input id="mfa-code" class="inp" placeholder="123456" onkeydown="if(event.key==='Enter')mfaVerifyLogin()"></div>
+    <button onclick="mfaVerifyLogin()" class="btn btn-primary" style="width:100%">Verify</button>
+    <button onclick="usePasskeyLogin()" class="btn btn-ghost" style="width:100%;margin-top:8px">Use a passkey instead</button>
+    <p id="mfaerr" style="display:none;color:var(--danger);font-size:12px;text-align:center;margin-top:10px"></p>
+  </div>
+</div>
+
+<div id="app" style="display:none" class="app-shell">
+  <aside class="rail">
+    <div class="rail-header">
+      <div class="seal" style="background:var(--accent);color:#1a1206;border:none">G</div>
+      <div class="rail-brand serif">GoMail</div>
    </div>
-    <div style="position:absolute;bottom:0;padding:12px;border-top:1px solid #334155;width:100%;box-sizing:border-box">
-      <span id="me-email" style="font-size:12px;color:#64748b"></span>
-      <button onclick="logout()" style="float:right;font-size:11px;color:#475569;background:none;border:none;cursor:pointer">Logout</button>
+    <div style="padding:0 12px 8px">
+      <button onclick="openCompose()" class="btn btn-primary" style="width:100%">&#9998; Compose</button>
+    </div>
+    <div class="rail-body">
+      <div class="section-label">Accounts</div>
+      <div id="account-switcher"></div>
+      <div id="folder-section">
+        <div class="section-label">Folders</div>
+        <div id="folder-list"></div>
+      </div>
+      <div class="section-label">&nbsp;</div>
+      <div class="nav-row" onclick="showQuarantine()" id="nav-quarantine">
+        <div class="seal">&#128274;</div><div class="nav-row-label">Quarantine</div>
+      </div>
+      <div class="nav-row" onclick="showSettings()" id="nav-settings">
+        <div class="seal">&#9881;</div><div class="nav-row-label">Settings</div>
+      </div>
+    </div>
+    <div class="rail-footer">
+      <span id="me-email" style="font-size:12px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
+      <button onclick="logout()" style="font-size:11px;color:var(--text-faint);background:none;border:none;cursor:pointer;flex:none">Sign out</button>
    </div>
  </aside>

-  <main class="main">
-    <div id="view-mail" style="display:flex;flex:1">
-      <div class="msg-list" id="msg-list"></div>
-      <div class="msg-view" id="msg-view"><div style="color:#475569;text-align:center;margin-top:60px">Select a message</div></div>
+  <main class="workspace">
+    <div id="view-mail" style="display:flex;flex:1;min-width:0">
+      <section class="list-pane">
+        <div class="list-toolbar">
+          <div class="list-title" id="list-title">Inbox</div>
+          <input id="search-box" class="inp" placeholder="Search this account…" oninput="onSearchInput(this.value)">
+          <div id="search-body-toggle" style="display:none;margin-top:6px">
+            <a href="#" onclick="event.preventDefault();runSearch(true)" style="font-size:11px;color:var(--text-muted)">Search message bodies too (slower)</a>
+          </div>
+        </div>
+        <div class="msg-list" id="msg-list"></div>
+      </section>
+      <section class="reading-pane" id="msg-view"><div class="reading-empty">Select a message</div></section>
    </div>
-    <div id="view-quarantine" style="display:none;flex:1;padding:24px">
-      <h2 style="color:#fff;font-weight:700;margin-bottom:16px">Quarantine</h2>
+    <div id="view-quarantine" class="view-single" style="display:none">
+      <h2 class="serif" style="font-weight:700;margin-bottom:16px">Quarantine</h2>
      <div id="quarantine-list"></div>
    </div>
+    <div id="view-settings" class="view-single" style="display:none">
+      <h2 class="serif" style="font-weight:700;margin-bottom:20px">Settings</h2>
+      <div id="settings-body"></div>
+    </div>
  </main>
 </div>

 <div id="compose-modal" class="modal-bg" style="display:none">
  <div class="modal">
-    <h3 style="color:#fff;font-weight:700;margin-bottom:16px">New Message</h3>
-    <input id="c-to" class="inp" placeholder="To" style="margin-bottom:8px">
-    <input id="c-subject" class="inp" placeholder="Subject" style="margin-bottom:8px">
-    <textarea id="c-body" class="inp" rows="8" placeholder="Message..." style="margin-bottom:12px"></textarea>
+    <h3 class="serif" style="font-weight:700;margin-bottom:16px">New message</h3>
+    <div class="field">
+      <label class="label">From</label>
+      <select id="c-from" class="inp"></select>
+    </div>
+    <div class="field"><input id="c-to" class="inp" placeholder="To"></div>
+    <div class="field"><input id="c-subject" class="inp" placeholder="Subject"></div>
+    <div class="field"><textarea id="c-body" class="inp" rows="8" placeholder="Write something…"></textarea></div>
    <div style="display:flex;gap:8px;justify-content:flex-end">
      <button onclick="closeCompose()" class="btn btn-ghost">Cancel</button>
      <button onclick="sendMessage()" class="btn btn-primary">Send</button>
@@ -78,126 +192,6 @@ body{background:#0f172a;color:#e2e8f0;font-family:system-ui,-apple-system,sans-s
  </div>
 </div>

-<script>
-const API='/api';
-let token=localStorage.getItem('gomail_token')||'';
-let currentFolder='INBOX';
-
-async function api(path,opts={}){
-  const r=await fetch(API+path,{...opts,headers:{'Content-Type':'application/json','Authorization':'Bearer '+token,...(opts.headers||{})}});
-  if(r.status===401){showLogin();return null;}
-  return r.ok?r.json():Promise.reject(await r.json());
-}
-
-async function login(){
-  const email=document.getElementById('le').value,pwd=document.getElementById('lp').value;
-  try{
-    const d=await fetch(API+'/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({Email:email,Password:pwd})}).then(r=>r.json());
-    if(d.error)throw new Error(d.error);
-    token=d.token;localStorage.setItem('gomail_token',token);
-    showApp();
-  }catch(e){const el=document.getElementById('lerr');el.textContent=e.message||'Login failed';el.style.display='';}
-}
-function logout(){localStorage.removeItem('gomail_token');token='';showLogin();}
-function showLogin(){document.getElementById('login').style.display='flex';document.getElementById('app').style.display='none';}
-async function showApp(){
-  document.getElementById('login').style.display='none';document.getElementById('app').style.display='block';
-  const me=await api('/me');if(!me)return;
-  document.getElementById('me-email').textContent=me.email;
-  loadFolders();
-}
-
-async function loadFolders(){
-  const folders=await api('/folders');if(!folders)return;
-  document.getElementById('folder-list').innerHTML=folders.map(f=>
-    `<div class="nav-item ${f.id===currentFolder?'active':''}" onclick="selectFolder('${f.id}')">
-      ${f.display_name} ${f.unread_count>0?`<span class="badge" style="background:#7c3aed;color:#fff">${f.unread_count}</span>`:''}
-    </div>`).join('');
-  loadMessages(currentFolder);
-}
-
-function selectFolder(id){
-  currentFolder=id;
-  document.getElementById('view-mail').style.display='flex';
-  document.getElementById('view-quarantine').style.display='none';
-  loadFolders();
-}
-
-async function loadMessages(folderID){
-  const msgs=await api('/folders/'+folderID+'/messages');if(!msgs)return;
-  document.getElementById('msg-list').innerHTML=msgs.length?msgs.map(m=>{
-    const unread=!(m.Flags||[]).includes('\\Seen');
-    return `<div class="msg-row ${unread?'unread':''}" onclick="viewMessage('${folderID}','${m.ID}')">
-      <div style="color:#e2e8f0">${esc(m.From||'(unknown)')}</div>
-      <div style="color:#94a3b8">${esc(m.Subject||'(no subject)')}</div>
-    </div>`;
-  }).join(''):'<div style="padding:20px;color:#475569;text-align:center">No messages</div>';
-}
-
-async function viewMessage(folderID,id){
-  const msg=await api('/messages/'+folderID+'/'+id);if(!msg)return;
-  document.getElementById('msg-view').innerHTML=`
-    <div style="border-bottom:1px solid #334155;padding-bottom:12px;margin-bottom:12px">
-      <div style="font-size:18px;font-weight:700;color:#fff">${esc(msg.Subject||'(no subject)')}</div>
-      <div style="color:#94a3b8;font-size:13px;margin-top:4px">From: ${esc(msg.From)}</div>
-      <div style="color:#94a3b8;font-size:13px">To: ${esc(msg.To)}</div>
-    </div>
-    <pre style="white-space:pre-wrap;font-family:inherit;color:#cbd5e1;font-size:13px">${esc(bodyOf(msg.Raw))}</pre>
-    <div style="margin-top:16px">
-      <button onclick="deleteMessage('${folderID}','${id}')" class="btn btn-ghost">🗑 Delete</button>
-    </div>`;
-  api('/messages/'+folderID+'/'+id+'/flags',{method:'PUT',body:JSON.stringify({Flags:['\\Seen']})});
-}
-
-function bodyOf(raw){
-  if(!raw)return'';
-  const decoded=atob(raw);
-  const idx=decoded.indexOf('\r\n\r\n');
-  return idx>=0?decoded.slice(idx+4):decoded;
-}
-
-async function deleteMessage(folderID,id){
-  await api('/messages/'+folderID+'/'+id,{method:'DELETE'});
-  loadMessages(folderID);
-  document.getElementById('msg-view').innerHTML='<div style="color:#475569;text-align:center;margin-top:60px">Select a message</div>';
-}
-
-function openCompose(){document.getElementById('compose-modal').style.display='flex';}
-function closeCompose(){document.getElementById('compose-modal').style.display='none';}
-async function sendMessage(){
-  const to=document.getElementById('c-to').value.split(',').map(s=>s.trim());
-  const subject=document.getElementById('c-subject').value;
-  const body=document.getElementById('c-body').value;
-  try{
-    await api('/messages',{method:'POST',body:JSON.stringify({to,subject,body})});
-    closeCompose();
-    document.getElementById('c-to').value='';document.getElementById('c-subject').value='';document.getElementById('c-body').value='';
-  }catch(e){alert('Send failed: '+(e.error||e.message));}
-}
-
-async function showQuarantine(){
-  document.getElementById('view-mail').style.display='none';
-  document.getElementById('view-quarantine').style.display='block';
-  const entries=await api('/quarantine');if(!entries)return;
-  document.getElementById('quarantine-list').innerHTML=entries.length?entries.map(e=>`
-    <div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center">
-      <div><div style="color:#e2e8f0;font-size:13px">Reason: ${esc(e.Reason||'—')}</div>
-        <div style="color:#64748b;font-size:12px">Held: ${e.CreatedAt}</div></div>
-      <button onclick="releaseQ('${e.ID}')" class="btn btn-primary">Release</button>
-    </div>`).join(''):'<div style="color:#475569;text-align:center;padding:40px">🎉 Nothing held</div>';
-}
-async function releaseQ(id){
-  try{await api('/quarantine/'+id+'/release',{method:'POST'});showQuarantine();}
-  catch(e){alert('Release failed: '+(e.error||e.message));}
-}
-
-function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
-
-async function boot(){
-  if(!token){showLogin();return;}
-  try{const me=await api('/me');if(me)showApp();else showLogin();}catch{showLogin();}
-}
-boot();
-</script>
+<script src="app.js"></script>
 </body>
 </html>