Initial commit: Shelf read-later extension

2026-07-13 11:11:24 +10:00
commit d627e6bb44
10 changed files with 876 additions and 0 deletions
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Shelf</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>Shelf</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>
+
+    <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 Shelf 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="newtab.js"></script>
+</body>
+</html>