queue/source/options/components/page-main.ts

import {ConfirmButton, PrivacyLink} from '@holllo/preact-components';
import {Component, html} from 'htm/preact';

import type {Settings} from '../../settings/settings.js';
import {updateBadge} from '../../utilities/badge.js';
import type {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,
    };
  }

  moveItem = async (id: number, direction: Queue.MoveDirection) => {
    const {settings} = this.props;
    await settings.moveQueueItem(id, direction);
    this.setState({queue: this.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.sortIndex - b.sortIndex)
      .map(
        (item) =>
          html`
            <${queueItem}
              item=${item}
              move=${this.moveItem}
              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;
  move?: (id: number, direction: Queue.MoveDirection) => Promise<void>;
  remove?: (id: number) => Promise<void>;
};

function queueItem(props: ItemProps): HtmComponent {
  const added = props.item.added.toLocaleString();
  const {id, text, url} = props.item;

  const move = [];
  if (props.move !== undefined) {
    const moveButtons: Array<[string, Queue.MoveDirection]> = [
      ['↑', 'up'],
      ['↓', 'down'],
    ];
    move.push(
      ...moveButtons.map(
        ([text, direction]) =>
          html`
            <button
              title="Move item ${direction}"
              onClick=${async () => props.move!(id, direction)}
            >
              ${text}
            </button>
          `,
      ),
    );
  }

  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} attributes=${{href: url}}>${text ?? url}<//>
      </p>

      <div class="buttons">${move}${remove}</div>

      <p>
        <time datetime=${added} title="Link queued on ${added}.">
          ${added}
        </time>
      </p>
    </li>
  `;
}