stefwill
c5bd7e38bf
- Rename extension from Shelf to "Read it later" - Add reminder settings: highlight and pin overdue unarchived items - Add auto-delete with a hard safety rule requiring its period to exceed the reminder period - Add cross-device sync via chrome.storage.sync (lightweight per-item metadata, no thumbnails) - Add light/dark/system theme support - Fix list-view Archive/Delete button alignment (card-perf wasn't filling the row) - Add "Worth a second look" spotlight: proactively resurfaces old, forgotten items with automatic backoff so repeatedly-ignored items are shown less often, never permanently
115 lines
4.5 KiB
HTML
115 lines
4.5 KiB
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>
|