newtab.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Read it later</title>
<link rel="stylesheet" href="newtab.css" />
</head>
<body>
  <div class="page">
    <header class="masthead">
      <div class="masthead-title">
        <span class="mark" aria-hidden="true">🔖</span>
        <h1>Read it later</h1>
      </div>
      <p class="tally"><span id="unreadCount">0</span> saved for later<span id="archivedNote"></span></p>
    </header>

    <div class="toolbar">
      <input id="search" type="text" placeholder="Search your shelf…" autocomplete="off" />

      <div class="control-group" role="group" aria-label="Sort by">
        <label for="sortSelect" class="sr-only">Sort by</label>
        <select id="sortSelect">
          <option value="newest">Newest first</option>
          <option value="oldest">Oldest first</option>
          <option value="title">Title, A–Z</option>
          <option value="domain">Site, A–Z</option>
        </select>
      </div>

      <div class="control-group view-toggle" role="group" aria-label="View">
        <button id="viewGridBtn" class="toggle-btn" data-view="grid" title="Grid view" aria-pressed="false">▦</button>
        <button id="viewListBtn" class="toggle-btn" data-view="list" title="List view" aria-pressed="false">☰</button>
      </div>

      <button id="showArchivedBtn" class="ghost-btn">Show archived</button>

      <div class="settings-wrap">
        <button id="settingsBtn" class="toggle-btn" title="Settings" aria-haspopup="true" aria-expanded="false">⚙</button>
        <div id="settingsPanel" class="settings-panel" hidden>
          <div class="settings-row settings-theme">
            <label for="themeSelect">Theme</label>
            <select id="themeSelect">
              <option value="system">System</option>
              <option value="light">Light</option>
              <option value="dark">Dark</option>
            </select>
          </div>

          <hr class="settings-divider" />

          <label class="settings-row">
            <input type="checkbox" id="reminderEnabled" />
            Remind me after
          </label>
          <div class="settings-row settings-period">
            <input type="number" id="reminderAmount" min="1" max="999" value="7" />
            <select id="reminderUnit">
              <option value="days">days</option>
              <option value="weeks">weeks</option>
              <option value="months">months</option>
            </select>
          </div>
          <p class="settings-hint">Overdue items are pinned to the top and highlighted.</p>

          <hr class="settings-divider" />

          <label class="settings-row">
            <input type="checkbox" id="autoDeleteEnabled" />
            Delete unarchived items after
          </label>
          <div class="settings-row settings-period">
            <input type="number" id="autoDeleteAmount" min="1" max="999" value="30" />
            <select id="autoDeleteUnit">
              <option value="days">days</option>
              <option value="weeks">weeks</option>
              <option value="months">months</option>
            </select>
          </div>
          <p class="settings-hint">Archive anything you want to keep — this only removes items you never got back to.</p>
          <p class="settings-error" id="autoDeleteError" hidden>Must be longer than the reminder period above, so you're always warned first.</p>

          <hr class="settings-divider" />

          <label class="settings-row">
            <input type="checkbox" id="spotlightEnabled" />
            Worth a second look
          </label>
          <p class="settings-hint">Resurfaces a few old, forgotten items each time you open a new tab. The more you pass on one, the less often it comes back.</p>
        </div>
      </div>
    </div>

    <section id="spotlight" class="spotlight" hidden aria-label="Worth a second look">
      <h2 class="spotlight-heading">Worth a second look</h2>
      <div id="spotlightStrip" class="spotlight-strip"></div>
    </section>

    <main id="shelf" class="shelf" data-view="grid">
      <!-- items injected here -->
    </main>

    <div id="emptyState" class="empty-state" hidden>
      <p class="empty-title">Your shelf is empty.</p>
      <p class="empty-sub">Click the Read it later icon in your toolbar, or right-click any page or link, to save something for later.</p>
    </div>
  </div>

  <div id="toast" class="toast" hidden></div>

  <script src="sync.js"></script>
  <script src="newtab.js"></script>
</body>
</html>