Erga

<!doctype html>
<link rel="stylesheet" href="style.css">
<main class="doc">
  <h1>Inbox Design Doc</h1>
  <p>This is a design doc for our new
    email client, <strong>Inbox</strong>.</p>
  <h2>Goals</h2>
  <p>Our goal is to build an email
    client where users direct agents
    to triage their email so they can
    focus on the important messages.</p>
  <h2>Prototype</h2>
  <div id="inbox"></div>
</main>
<script src="demo.js"></script>

.doc {
  display: grid;
  grid-template-columns: 1fr 212px;
  gap: 16px;
  font: 15px/1.5 Literata, serif;
}
.doc h2 { font: 600 12px Inter; }

.row {
  display: grid;
  grid-template-columns: 24px 1fr;
  padding: 7px 8px;
  border-radius: 7px;
}
.row:hover { background: #f7f8fa; }
.row.read .subject { color: #5b6676; }
.tag.reply { color: #b4540a; }

// Render the agent's Focus list.
const inbox = document.getElementById('inbox');

fetch('mail.json')
  .then(r => r.json())
  .then(mail => {
    for (const m of mail.filter(m => m.focus)) {
      const row = el('div', 'row');
      row.append(avatar(m.from), summary(m));
      row.onclick = () => {
        row.classList.toggle('read');
        updateCount();
      };
      inbox.append(row);
    }
  });