105 lines
2.3 KiB
TypeScript
105 lines
2.3 KiB
TypeScript
import {html} from 'htm/preact';
|
|
import {useState} from 'preact/hooks';
|
|
import {
|
|
ConfirmButton,
|
|
Link,
|
|
QComponent,
|
|
QItem,
|
|
removeQItem,
|
|
Settings
|
|
} from '../..';
|
|
|
|
type MainProps = {
|
|
settings: Settings;
|
|
};
|
|
|
|
export function PageMain(props: MainProps): QComponent {
|
|
const [queue, updateQueue] = useState(props.settings.queue);
|
|
|
|
const _removeQItem = async (id: number) => {
|
|
const updated = await removeQItem(id);
|
|
updateQueue(updated.queue);
|
|
};
|
|
|
|
const qItems: QComponent[] = queue
|
|
.sort((a, b) => a.added.getTime() - b.added.getTime())
|
|
.map((item) => html`<${Item} item=${item} remove=${_removeQItem} />`);
|
|
|
|
if (qItems.length === 0) {
|
|
qItems.push(html`<li>No items queued. 🤷</li>`);
|
|
}
|
|
|
|
return html`
|
|
<main class="page-main">
|
|
<ul class="q-list">
|
|
${qItems}
|
|
</ul>
|
|
|
|
<details class="usage">
|
|
<summary>How do I use Queue?</summary>
|
|
|
|
<p>Adding links to your queue:</p>
|
|
<ul>
|
|
<li>Right-click any link and click "Add to Queue".</li>
|
|
</ul>
|
|
|
|
<p>Opening the next link from your queue:</p>
|
|
<ul>
|
|
<li>Click on the extension icon.</li>
|
|
</ul>
|
|
|
|
<p>Opening the extension page:</p>
|
|
<ul>
|
|
<li>Double-click the extension icon.</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: QItem;
|
|
remove: (id: number) => Promise<void>;
|
|
};
|
|
|
|
function Item(props: ItemProps): QComponent {
|
|
const {added, 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.toLocaleString()}
|
|
title="Link queued on ${added.toLocaleString()}."
|
|
>
|
|
${added.toLocaleString()}
|
|
</time>
|
|
</p>
|
|
</li>
|
|
`;
|
|
}
|