email_agent/web/templates/dashboard.html

<!doctype html>
<html lang="en" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Email Agent</title>
  <link rel="stylesheet" href="/static/tokens.css">
  <link rel="stylesheet" href="/static/app.css">
  <script>
    (function () {
      try {
        var t = localStorage.getItem("ea-theme");
        if (!t) t = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
        document.documentElement.setAttribute("data-theme", t);
      } catch (e) {}
    })();
    function eaToggleTheme() {
      var el = document.documentElement;
      var next = el.getAttribute("data-theme") === "dark" ? "light" : "dark";
      el.setAttribute("data-theme", next);
      try { localStorage.setItem("ea-theme", next); } catch (e) {}
    }
  </script>
</head>
<body>
  <header class="nav-bar">
    <span class="wordmark">Email Agent</span>
    <div class="nav-actions">
      <a class="btn btn-utility" href="/rules">Rules</a>
      <a class="btn btn-utility" href="/unsubscribe">Unsubscribe</a>
      <a class="btn btn-utility" href="/reports">Reports</a>
      <button class="btn btn-utility theme-toggle" type="button" onclick="eaToggleTheme()" aria-label="Toggle dark mode">
        <span class="icon-light" aria-hidden="true">&#9790;</span>
        <span class="icon-dark" aria-hidden="true">&#9728;</span>
      </button>
      <form method="post" action="/logout">
        <input type="hidden" name="csrf" value="{{.CSRFToken}}">
        <button class="btn btn-utility" type="submit">Log out</button>
      </form>
    </div>
  </header>

  <main class="page">
    <h1 class="greeting">{{.Greeting}}, Sam</h1>

    <div class="shell">
      <aside class="panel" aria-label="Categories and folders">
        <div class="nav-groups">
          <div class="nav-group">
            <div class="nav-group-title">
              <span>Categories</span>
              <a class="nav-edit" href="/categories">Edit</a>
            </div>
            <div class="nav-group-items">
              <a class="nav-item nav-item-active" href="#"
                 hx-get="/partials/inbox?folder=all" hx-target="#inbox-list" hx-swap="innerHTML">
                <span class="dot" style="background: var(--primary)"></span>
                <span>All mail</span>
                <span class="count">{{.Total}}</span>
              </a>
              {{range .Categories}}
              <a class="nav-item" href="#"
                 hx-get="/partials/inbox?{{.Param}}" hx-target="#inbox-list" hx-swap="innerHTML">
                <span class="dot" style="background: {{.Color}}; {{if not .Count}}opacity:.35;{{end}}"></span>
                <span>{{.Name}}</span>
                <span class="count">{{.Count}}</span>
              </a>
              {{end}}
            </div>
          </div>
          <div class="nav-group">
            <div class="nav-group-title">Folders</div>
            <div class="nav-group-items">
              {{range .Folders}}
              <a class="nav-item" href="#"
                 hx-get="/partials/inbox?{{.Param}}" hx-target="#inbox-list" hx-swap="innerHTML">
                <span class="dot" style="background: {{.Color}}"></span>
                <span>{{.Name}}</span>
                <span class="count">{{.Count}}</span>
              </a>
              {{end}}
            </div>
          </div>
        </div>
      </aside>

      <section class="panel" aria-label="Message list">
        <div class="panel-head">
          <h2>Inbox</h2>
          <div class="panel-actions">
            <button class="btn btn-primary" type="button"
                    hx-post="/actions/fetch" hx-target="#inbox-list" hx-swap="innerHTML"
                    hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
              Check mail
            </button>
            <button class="btn btn-primary" type="button"
                    hx-post="/actions/classify" hx-target="#inbox-list" hx-swap="innerHTML"
                    hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
              Classify
            </button>
            <button class="btn btn-utility" type="button"
                    hx-post="/actions/reclassify" hx-target="#inbox-list" hx-swap="innerHTML"
                    hx-confirm="Re-classify every stored message with the current categories and rules?"
                    hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
              Re-classify all
            </button>
            <button class="btn btn-utility" type="button"
                    hx-get="/partials/inbox" hx-target="#inbox-list" hx-swap="innerHTML">
              Refresh
            </button>
          </div>
        </div>
        <div id="inbox-list" class="msg-list"
             hx-get="/partials/inbox" hx-trigger="load" hx-swap="innerHTML"></div>
      </section>

      <aside class="panel detail-pane" id="message-detail" aria-label="Message detail">
        <div class="panel-head"><h2>Message</h2></div>
        <div class="detail-body">
          <p class="muted">Select a message to read it here.</p>
          <p class="faint" style="margin-top: var(--space-xs);">Recommended action, reply draft, and history will appear in this pane.</p>
        </div>
      </aside>
    </div>
  </main>

  <script src="/static/htmx.min.js" defer></script>
  <script>
    // Bulk-select state for the Phase 4 triage toolbar. The message list is
    // swapped by HTMX, so the handlers live on the document (delegation).
    function eaSelectedIds() {
      return document.querySelectorAll('#bulk-items input[name="ids"]:checked');
    }
    function eaUpdateSelected() {
      var el = document.getElementById('selected-count');
      if (el) el.textContent = eaSelectedIds().length + ' selected';
    }
    document.addEventListener('change', function (e) {
      if (!e.target) return;
      if (e.target.id === 'select-all') {
        var on = e.target.checked;
        document.querySelectorAll('#bulk-items input[name="ids"]').forEach(function (cb) { cb.checked = on; });
        eaUpdateSelected();
      } else if (e.target.name === 'ids') {
        eaUpdateSelected();
      }
    });
    document.body.addEventListener('htmx:afterSwap', function () {
      var sa = document.getElementById('select-all');
      if (sa) sa.checked = false;
      eaUpdateSelected();
    });
  </script>
</body>
</html>