import {Component, html} from 'htm/preact'; import {Settings} from '../../settings/settings.js'; import {updateBadge} from '../../utilities/badge.js'; import {History} from '../../utilities/history.js'; import {ConfirmButton} from './confirm-button.js'; import {Link} from './link.js'; type Props = { history: History; settings: Settings; }; type State = { queue: Queue.Item[]; }; export class PageMain extends Component { constructor(props: Props) { super(props); this.state = { queue: props.settings.queue, }; } removeItem = async (id: number) => { const {settings} = this.props; await settings.removeQueueItem(id); await updateBadge(settings); this.setState({queue: this.props.settings.queue}); }; render() { const queueItems = this.state.queue .sort((a, b) => a.added.getTime() - b.added.getTime()) .map( (item) => html`<${queueItem} item=${item} remove=${this.removeItem} />`, ); if (queueItems.length === 0) { queueItems.push(html`
  • No items queued. 🤷
  • `); } const historyItems = this.props.history.queue .sort((a, b) => b.added.getTime() - a.added.getTime()) .map((item) => html`<${queueItem} item=${item} />`); let history: HtmComponent | undefined; if (historyItems.length > 0) { history = html`
    Queue history
    `; } return html`
    ${history}
    How do I use Queue?

    Adding links to your queue:

    • Right-click any link or tab and click "Add to Queue".

    Opening the next link from your queue:

    • Click on the extension icon to open it in the current tab.
    • Right-click the extension icon and click "Open next link in new tab".

    Opening the extension page:

    • Double-click the extension icon.
    • Right-click the extension icon and click "Open the extension page".

    Deleting queue items:

    • Click the red button with the ✗ and then confirm it by clicking again.
    `; } } type ItemProps = { item: Queue.Item; remove?: (id: number) => Promise; }; function queueItem(props: ItemProps): HtmComponent { const added = props.item.added.toLocaleString(); const {id, text, url} = props.item; let remove; if (props.remove !== undefined) { remove = html` <${ConfirmButton} cssClass="confirm-button" clickHandler=${async () => props.remove!(id)} confirmClass="confirm" confirmText="✓" text="✗" timeout=${5 * 1000} title="Remove" /> `; } return html`
  • <${Link} text=${text ?? url} url=${url} />

    ${remove}

  • `; }