stefwill
232524ad97
- Add free-form tags per item: chip display with remove, inline add (comma-separated, grid view only), and a toolbar tag-filter popover listing every tag in use - Search now also matches tags; tags sync across devices like every other item field - Fix Firefox manifest.json compliance for AMO submission: replace the placeholder gecko id with a real UUID, add the now-required data_collection_permissions (bookmarksInfo, since synced items are personal browsing/bookmark data), and bump strict_min_version to 140.0 (142.0 for gecko_android) to match - Add description.md (elevator pitch / short / detailed descriptions for store listings), PRIVACY.md, and .gitignore for the dist/ packaging output - Reword all em-dash punctuation across docs and code comments per user preference
123 lines
4.9 KiB
HTML
123 lines
4.9 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 title, site, or tag…" 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="tags-wrap">
|
||
<button id="tagsBtn" class="toggle-btn" title="Filter by tag" aria-haspopup="true" aria-expanded="false">🏷</button>
|
||
<div id="tagsPanel" class="tags-panel" hidden>
|
||
<div id="tagsList" class="tags-list"></div>
|
||
<p class="settings-hint" id="tagsEmptyHint" hidden>No tags yet. Add one from any card in grid view.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|