From 596487a835946b34322b2827a7e065f106455869 Mon Sep 17 00:00:00 2001
From: Bauke
Date: Thu, 2 Sep 2021 15:59:18 +0200
Subject: [PATCH] Add session-based history for queued items.
---
source/background.ts | 7 +++-
source/manifest.json | 2 +-
source/scss/components/_page-main.scss | 11 ++++++
source/settings-page.ts | 8 ++++-
source/types.d.ts | 1 +
source/utilities/components/page-main.ts | 44 +++++++++++++++++-------
source/utilities/settings.ts | 14 +++++++-
7 files changed, 71 insertions(+), 16 deletions(-)
diff --git a/source/background.ts b/source/background.ts
index 7c29645..57de8b6 100644
--- a/source/background.ts
+++ b/source/background.ts
@@ -1,6 +1,6 @@
import browser, {Menus} from 'webextension-polyfill';
-import {error} from './utilities/log';
+import {debug, error} from './utilities/log';
import {getManifest, updateBadge} from './utilities/browser';
import {versionAsNumber} from './utilities/version';
import Settings from './utilities/settings';
@@ -9,6 +9,11 @@ import {Queue} from './types.d';
let timeoutID: number | null = null;
+browser.runtime.onStartup.addListener(async () => {
+ debug('Removing history from local storage');
+ await browser.storage.local.remove('history');
+});
+
browser.browserAction.onClicked.addListener(async () => {
const settings = await Settings.get();
diff --git a/source/manifest.json b/source/manifest.json
index e95787d..cfab2ef 100644
--- a/source/manifest.json
+++ b/source/manifest.json
@@ -3,7 +3,7 @@
"manifest_version": 2,
"name": "Queue",
"description": "A WebExtension for queueing links.",
- "version": "0.1.8",
+ "version": "0.1.9",
"permissions": [
"contextMenus",
"storage",
diff --git a/source/scss/components/_page-main.scss b/source/scss/components/_page-main.scss
index 0c8ea47..31a4a60 100644
--- a/source/scss/components/_page-main.scss
+++ b/source/scss/components/_page-main.scss
@@ -51,6 +51,7 @@
}
}
+.history,
.usage {
border: 1px solid var(--df-2);
@@ -75,7 +76,17 @@
color: var(--db-1);
}
}
+}
+.history {
+ margin-bottom: 16px;
+
+ .q-list {
+ border: none;
+ }
+}
+
+.usage {
ul {
list-style: square;
margin: 4px 0 2rem 16px;
diff --git a/source/settings-page.ts b/source/settings-page.ts
index c2851b0..a67f8bb 100644
--- a/source/settings-page.ts
+++ b/source/settings-page.ts
@@ -8,6 +8,10 @@ import Settings from './utilities/settings';
window.addEventListener('DOMContentLoaded', async () => {
window.HollloQueue = {
+ clearHistory: async () => {
+ debug('Clearing history');
+ await browser.storage.local.remove('history');
+ },
dumpBackup: async () => {
debug(JSON.stringify(await browser.storage.local.get(), null, 2));
},
@@ -28,10 +32,12 @@ window.addEventListener('DOMContentLoaded', async () => {
await settings.save();
}
+ const history = await browser.storage.local.get({history: []});
+
render(
html`
<${PageHeader} />
- <${PageMain} settings=${settings} />
+ <${PageMain} history=${history.history} settings=${settings} />
<${PageFooter}
manifest=${manifest}
showVersionUpdated=${showVersionUpdated}
diff --git a/source/types.d.ts b/source/types.d.ts
index 0ed775e..3d3dc42 100644
--- a/source/types.d.ts
+++ b/source/types.d.ts
@@ -5,6 +5,7 @@ import browser from 'webextension-polyfill';
export {};
type HollloQueue = {
+ clearHistory: () => Promise;
dumpBackup: () => Promise;
dumpSettings: () => Promise;
};
diff --git a/source/utilities/components/page-main.ts b/source/utilities/components/page-main.ts
index 972edd6..4dc4a71 100644
--- a/source/utilities/components/page-main.ts
+++ b/source/utilities/components/page-main.ts
@@ -7,6 +7,7 @@ import {Link} from './link';
import {ConfirmButton} from './confirm-button';
type MainProps = {
+ history: Queue.Item[];
settings: Settings;
};
@@ -37,12 +38,29 @@ export class PageMain extends Component {
queueItems.push(html`No items queued. 🤷`);
}
+ const historyItems: Queue.Component[] = this.props.history
+ .sort((a, b) => b.added.getTime() - a.added.getTime())
+ .map((item) => html`<${Item} item=${item} />`);
+
+ let history: Queue.Component | undefined;
+ if (historyItems.length > 0) {
+ history = html`
+ Queue history
+
+
+ `;
+ }
+
return html`
+ ${history}
+
How do I use Queue?
@@ -87,12 +105,24 @@ export class PageMain extends Component {
type ItemProps = {
item: Queue.Item;
- remove: (id: number) => Promise;
+ remove?: (id: number) => Promise;
};
function Item(props: ItemProps): Queue.Component {
const added = props.item.added.toLocaleString();
const {id, text, url} = props.item;
+ let remove;
+ if (props.remove !== undefined) {
+ remove = html`<${ConfirmButton}
+ class="confirm-button"
+ clickHandler=${async () => props.remove!(id)}
+ confirmClass="confirm"
+ confirmText="✓"
+ text="✗"
+ timeout=${5 * 1000}
+ title="Remove"
+ />`;
+ }
return html`
@@ -100,17 +130,7 @@ function Item(props: ItemProps): Queue.Component {
<${Link} text=${text ?? url} url=${url} />
-
- <${ConfirmButton}
- class="confirm-button"
- clickHandler=${async () => props.remove(id)}
- confirmClass="confirm"
- confirmText="✓"
- text="✗"
- timeout=${5 * 1000}
- title="Remove"
- />
-
+ ${remove}