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 + +
      + ${historyItems} +
    +
    `; + } + return html`
      ${queueItems}
    + ${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}