123 lines
3.0 KiB
TypeScript
123 lines
3.0 KiB
TypeScript
import {Component, html} from 'htm/preact';
|
|
import browser from 'webextension-polyfill';
|
|
|
|
import Settings from '../settings';
|
|
import {Queue} from '../../types.d';
|
|
import {Link} from './link';
|
|
import {ConfirmButton} from './confirm-button';
|
|
|
|
type MainProps = {
|
|
settings: Settings;
|
|
};
|
|
|
|
type MainState = {
|
|
queue: Queue.Item[];
|
|
};
|
|
|
|
export class PageMain extends Component<MainProps, MainState> {
|
|
constructor(props: MainProps) {
|
|
super(props);
|
|
this.state = {
|
|
queue: props.settings.queue,
|
|
};
|
|
}
|
|
|
|
removeItem = async (id: number) => {
|
|
await this.props.settings.removeItem(id);
|
|
this.setState({queue: this.props.settings.queue});
|
|
await browser.runtime.sendMessage({action: 'queue update badge'});
|
|
};
|
|
|
|
render(): Queue.Component {
|
|
const queueItems: Queue.Component[] = this.state.queue
|
|
.sort((a, b) => a.added.getTime() - b.added.getTime())
|
|
.map((item) => html`<${Item} item=${item} remove=${this.removeItem} />`);
|
|
|
|
if (queueItems.length === 0) {
|
|
queueItems.push(html`<li>No items queued. 🤷</li>`);
|
|
}
|
|
|
|
return html`
|
|
<main class="page-main">
|
|
<ul class="q-list">
|
|
${queueItems}
|
|
</ul>
|
|
|
|
<details class="usage">
|
|
<summary>How do I use Queue?</summary>
|
|
|
|
<p>Adding links to your queue:</p>
|
|
<ul>
|
|
<li>Right-click any link or tab and click "Add to Queue".</li>
|
|
</ul>
|
|
|
|
<p>Opening the next link from your queue:</p>
|
|
<ul>
|
|
<li>
|
|
Click on the extension icon to open it in the current tab (when
|
|
possible).
|
|
</li>
|
|
<li>
|
|
Right-click the extension icon and click "Open next link in new
|
|
tab".
|
|
</li>
|
|
</ul>
|
|
|
|
<p>Opening the extension page:</p>
|
|
<ul>
|
|
<li>Double-click the extension icon.</li>
|
|
<li>
|
|
Right-click the extension icon and click "Open the extension
|
|
page".
|
|
</li>
|
|
</ul>
|
|
|
|
<p>Deleting queue items:</p>
|
|
<ul>
|
|
<li>
|
|
Click the red button with the ✗ and then confirm it by clicking
|
|
again.
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</main>
|
|
`;
|
|
}
|
|
}
|
|
|
|
type ItemProps = {
|
|
item: Queue.Item;
|
|
remove: (id: number) => Promise<void>;
|
|
};
|
|
|
|
function Item(props: ItemProps): Queue.Component {
|
|
const added = props.item.added.toLocaleString();
|
|
const {id, text, url} = props.item;
|
|
|
|
return html`
|
|
<li class="q-item">
|
|
<p class="title">
|
|
<${Link} text=${text ?? url} url=${url} />
|
|
</p>
|
|
|
|
<div class="buttons">
|
|
<${ConfirmButton}
|
|
class="confirm-button"
|
|
clickHandler=${async () => props.remove(id)}
|
|
confirmClass="confirm"
|
|
confirmText="✓"
|
|
text="✗"
|
|
timeout=${5 * 1000}
|
|
title="Remove"
|
|
/>
|
|
</div>
|
|
|
|
<p>
|
|
<time datetime=${added} title="Link queued on ${added}.">
|
|
${added}
|
|
</time>
|
|
</p>
|
|
</li>
|
|
`;
|
|
}
|