148 lines
3.5 KiB
TypeScript
148 lines
3.5 KiB
TypeScript
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<Props, State> {
|
|
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`<li>No items queued. 🤷</li>`);
|
|
}
|
|
|
|
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`
|
|
<details class="history">
|
|
<summary>Queue history</summary>
|
|
|
|
<ul class="q-list">
|
|
${historyItems}
|
|
</ul>
|
|
</details>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<main class="page-main">
|
|
<ul class="q-list">
|
|
${queueItems}
|
|
</ul>
|
|
|
|
${history}
|
|
|
|
<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.</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 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`
|
|
<li class="q-item">
|
|
<p class="title">
|
|
<${Link} text=${text ?? url} url=${url} />
|
|
</p>
|
|
|
|
<div class="buttons">${remove}</div>
|
|
|
|
<p>
|
|
<time datetime=${added} title="Link queued on ${added}.">
|
|
${added}
|
|
</time>
|
|
</p>
|
|
</li>
|
|
`;
|
|
}
|