154 lines
3.7 KiB
TypeScript
154 lines
3.7 KiB
TypeScript
import {ConfirmButton, PrivacyLink} from '@holllo/gram';
|
|
import {Component, html} from 'htm/preact';
|
|
|
|
import {Settings} from '../../settings/settings.js';
|
|
import {updateBadge} from '../../utilities/badge.js';
|
|
import {History} from '../../utilities/history.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 isFirefox = import.meta.env.VITE_BROWSER === 'firefox';
|
|
|
|
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 ${isFirefox ? '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>
|
|
${isFirefox
|
|
? html`<li>Double-click the extension icon.</li>`
|
|
: undefined}
|
|
<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}
|
|
class="confirm-button"
|
|
click=${async () => props.remove!(id)}
|
|
confirmClass="confirm"
|
|
confirmText="✓"
|
|
extraAttributes=${{title: 'Remove'}}
|
|
text="✗"
|
|
timeout=${5 * 1000}
|
|
/>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<li class="q-item">
|
|
<p class="title">
|
|
<${PrivacyLink} href=${url}>${text ?? url}<//>
|
|
</p>
|
|
|
|
<div class="buttons">${remove}</div>
|
|
|
|
<p>
|
|
<time datetime=${added} title="Link queued on ${added}.">
|
|
${added}
|
|
</time>
|
|
</p>
|
|
</li>
|
|
`;
|
|
}
|