malice

<script lang="ts">

  import EmojiText from './EmojiText.svelte';

  import { onMount, tick } from 'svelte';

  import { mediaUrl, messageMediaUrl } from './api';

  import Emoji from './Emoji.svelte';

  import { loadEmoji, searchEmoji } from './emoji';

  import type { EmojiGroup } from './emoji';

  import type { ImagePack, PackImage, QuickEntry, QuickSeparator } from './types';

  import { hasUsage } from './packs';

  import { isSeparator, normaliseQuick, sameQuick } from './quick-reactions-model';

  import { flipAfter, reorder } from './reorder';

  import { moveBy, moveToSlot } from './reorder-model';

  export let packs: ImagePack[];

  export let quick: QuickEntry[];

  export let onPick: (key: string, shortcode: string | null) => void;

  export let onQuickChange: (list: QuickEntry[]) => void;

  export let onClose: () => void;

  export let embedded = false;

  let root: HTMLDivElement;

  let input: HTMLInputElement;

  let row: HTMLDivElement;

  let query = '';

  let customising = embedded;

  let groups: EmojiGroup[] | null = null;

  let loadFailed = false;

  let draftSeparator: QuickSeparator | null = null;

  const separatorIds = new WeakMap<QuickSeparator, number>();

  let separatorCount = 0;

  onMount(() => {

    if (!embedded) input.focus();

    loadEmoji().then(

      (g) => (groups = g),

      () => (loadFailed = true)

    );

  });

  $: q = query.trim().toLowerCase().replace(/^:|:$/g, '');

  $: filteredPacks = packs

    .map((pack) => ({ pack, images: pack.images.filter((i) => imageMatches(i, q)) }))

    .filter((p) => p.images.length > 0);

  $: filteredGroups = searchEmoji(groups ?? [], q);

  $: working = draftSeparator ? [...quick, draftSeparator] : quick;

  $: canSeparate = working.length > 0 && !isSeparator(working[working.length - 1]);

  $: nothingFound = q !== '' && groups !== null && filteredPacks.length === 0 && filteredGroups.length === 0;

  function imageMatches(image: PackImage, needle: string): boolean {

    if (!hasUsage(image, 'Emoticon')) return false;

    if (!needle) return true;

    return image.shortcode.toLowerCase().includes(needle) || (image.body ?? '').toLowerCase().includes(needle);

  }

  function packName(pack: ImagePack): string {

    return pack.display_name ?? 'Emoji pack';

  }

  function isQuick(key: string): boolean {

    return quick.some((r) => !isSeparator(r) && r.key === key);

  }

  function commit(list: QuickEntry[]): void {

    const next = normaliseQuick(list);

    draftSeparator = null;

    if (!sameQuick(next, quick)) onQuickChange(next);

  }

  function choose(key: string, shortcode: string | null): void {

    if (!customising) {

      onPick(key, shortcode);

      return;

    }

    if (isQuick(key)) commit(working.filter((r) => isSeparator(r) || r.key !== key));

    else commit([...working, { key, shortcode }]);

  }

  function entryKey(entry: QuickEntry): string {

    if (!isSeparator(entry)) return entry.key;

    let id = separatorIds.get(entry);

    if (id === undefined) separatorIds.set(entry, (id = separatorCount++));

    return `separator:${id}`;

  }

  function entryLabel(entry: QuickEntry): string {

    if (isSeparator(entry)) return 'separator';

    return entry.shortcode ? `:${entry.shortcode}:` : entry.key;

  }

  function remove(index: number): void {

    commit(working.filter((_, i) => i !== index));

  }

  function moveItem(from: number, slot: number): void {

    const next = moveToSlot(working, from, slot);

    if (next !== working) commit(next);

  }

  async function onChipKeydown(e: KeyboardEvent, index: number, entry: QuickEntry): Promise<void> {

    if (!(e.altKey || e.shiftKey) || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;

    e.preventDefault();

    const next = moveBy(working, index, e.key === 'ArrowLeft' ? -1 : 1);

    if (next === working) return;

    const id = entryKey(entry);

    void flipAfter(row, () => commit(next));

    await tick();

    const grabs = row.querySelectorAll<HTMLElement>('.grab');

    (row.querySelector<HTMLElement>(`[data-reorder="${CSS.escape(id)}"] .grab`) ?? grabs[Math.min(index, grabs.length - 1)])?.focus();

  }

  function onKeydown(e: KeyboardEvent): void {

    if (e.key !== 'Escape') return;

    e.stopPropagation();

    onClose();

  }

  function closeOutside(e: PointerEvent): void {

    if (!embedded && !root.contains(e.target as Node)) onClose();

  }

</script>

<svelte:window on:pointerdown={closeOutside} />

<div

  class="picker"

  class:embedded

  role="dialog"

  tabindex="-1"

  aria-label={customising ? 'Customise quick reactions' : 'Pick a reaction'}

  bind:this={root}

  on:keydown={onKeydown}

>

  <input

    class="search"

    type="search"

    placeholder="Search emoji"

    aria-label="Search emoji"

    autocomplete="off"

    bind:this={input}

    bind:value={query}

  />

  {#if customising}

    <div class="quick" role="group" aria-label="Quick reactions">

      <div class="quick-head">

        <span>Quick reactions</span>

        <button type="button" class="add-sep" disabled={!canSeparate} on:click={() => (draftSeparator = { separator: true })}>

          Add separator

        </button>

      </div>

      <div class="quick-row" bind:this={row} use:reorder={{ onMove: moveItem }}>

        {#each working as entry, i (entryKey(entry))}

          <span class="quick-item" class:separator={isSeparator(entry)} data-reorder={entryKey(entry)}>

            <button

              type="button"

              class="grab"

              data-reorder-handle

              aria-label={`Move ${entryLabel(entry)}, ${i + 1} of ${working.length}`}

              on:keydown={(e) => onChipKeydown(e, i, entry)}

            >

              {#if isSeparator(entry)}

                <span class="bar"></span>

              {:else if entry.key.startsWith('mxc://')}

                <img src={mediaUrl(entry.key, 64) ?? ''} alt="" draggable="false" />

              {:else}

                <Emoji emoji={entry.key} size={18} />

              {/if}

            </button>

            <button

              type="button"

              class="remove"

              aria-label={`Remove ${entryLabel(entry)} from quick reactions`}

              on:click={() => remove(i)}

            >

              ×

            </button>

          </span>

        {:else}

          <span class="muted">None. Pick emoji below to add them.</span>

        {/each}

      </div>

    </div>

  {/if}

  <div class="scroll" aria-busy={groups === null && !loadFailed}>

    {#each filteredPacks as { pack, images } (pack.id)}

      <section class="group" aria-label={packName(pack)}>

        <h3><EmojiText text={packName(pack)} /></h3>

        <div class="grid">

          {#each images as image (image.reaction_key + image.shortcode)}

            <button

              type="button"

              class="cell"

              class:chosen={customising && isQuick(image.reaction_key)}

              title={`:${image.shortcode}:`}

              aria-label={`:${image.shortcode}:`}

              aria-pressed={customising ? isQuick(image.reaction_key) : undefined}

              on:click={() => choose(image.reaction_key, image.shortcode)}

            >

              <img src={messageMediaUrl(image.media_id, 'Thumbnail')} alt="" loading="lazy" />

            </button>

          {/each}

        </div>

      </section>

    {/each}

    {#if loadFailed}

      <p class="status" role="alert">Could not load the emoji list.</p>

    {:else if groups === null}

      <p class="status" role="status">Loading emoji…</p>

    {:else}

      {#each filteredGroups as g (g.name)}

        <section class="group" aria-label={g.name}>

          <h3>{g.name}</h3>

          <div class="grid">

            {#each g.emojis as e (e.emoji)}

              <button

                type="button"

                class="cell"

                class:chosen={customising && isQuick(e.emoji)}

                title={e.label}

                aria-label={e.label}

                aria-pressed={customising ? isQuick(e.emoji) : undefined}

                on:click={() => choose(e.emoji, e.shortcodes[0] ?? null)}

              >

                <Emoji emoji={e.emoji} size={24} lazy />

              </button>

            {/each}

          </div>

        </section>

      {/each}

    {/if}

    {#if nothingFound}

      <p class="status" role="status">No emoji match "<EmojiText text={query.trim()} />".</p>

    {/if}

  </div>

  {#if !embedded}

    <div class="foot">

      <button type="button" class="mode" aria-pressed={customising} on:click={() => (customising = !customising)}>

        {customising ? 'Done' : 'Customise quick reactions'}

      </button>

    </div>

  {/if}

</div>

<style>

  .picker.embedded { width: 100%; height: 340px; box-shadow: none; }

  .picker {

    outline: none;

    display: flex; flex-direction: column; gap: 6px;

    width: 320px; height: 380px; max-width: 100%; max-height: 100%;

    padding: 8px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--r-md);

    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);

  }

  .search {

    background: var(--bg-soft);

    border: 1px solid var(--border);

    border-radius: var(--r-md);

    color: var(--text);

    padding: 6px 10px;

    font-size: 13px;

  }

  .search:focus-visible { outline: none; border-color: var(--accent); }

  .muted { color: var(--muted); font-size: 12px; }

  .quick { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; background: var(--bg-soft); }

  .quick-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 650; margin-bottom: 4px; }

  .add-sep {

    background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);

    color: var(--text); font-size: 11px; font-weight: 400; padding: 1px 6px; cursor: pointer;

    transition: border-color var(--pop);

  }

  .add-sep:hover:not(:disabled) { border-color: var(--accent); }

  .add-sep:disabled { opacity: 0.4; cursor: default; }

  .quick-row { position: relative; display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; align-items: center; }

  .quick-item {

    display: inline-flex; align-items: center; gap: 2px;

    padding: 1px 2px 1px 0;

    border: 1px solid var(--border); border-radius: var(--r-sm);

    font-size: 16px;

    user-select: none;

  }

  .quick-item.separator { border-style: dashed; }

  .quick-item:has(.grab:focus-visible) { border-color: var(--accent); }

  .quick-item:global([data-dragging]) {

    z-index: 2; background: var(--bg-soft); border-color: var(--accent);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

  }

  .quick-item img { width: 18px; height: 18px; object-fit: contain; }

  .grab {

    display: inline-flex; align-items: center; height: 20px; padding: 0 2px 0 6px;

    background: transparent; border: none; color: inherit; font: inherit;

    cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none;

  }

  .grab:focus-visible { outline: none; }

  .quick-item:global([data-dragging]) .grab { cursor: grabbing; }

  .separator .grab { padding: 0 6px; }

  .bar { width: 1px; height: 14px; background: var(--muted); }

  @media (pointer: coarse) {

    .grab { height: 30px; }

  }

  .remove {

    background: transparent; border: none; color: var(--muted);

    cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: var(--r-sm);

  }

  .remove:hover { color: var(--danger); }

  .scroll { flex: 1; min-height: 0; overflow-y: auto; }

  .group h3 {

    margin: 6px 2px 2px; font-size: 11px; font-weight: 650;

    text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);

  }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 2px; }

  .cell {

    display: grid; place-items: center;

    height: 32px; padding: 0;

    background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);

    font-size: 20px; cursor: pointer; color: var(--text);

  }

  .cell img { width: 24px; height: 24px; object-fit: contain; }

  .cell:hover:not(:disabled), .cell:focus-visible { background: var(--hover); border-color: var(--border); outline: none; }

  .cell.chosen { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

  .cell:disabled { opacity: 0.3; cursor: default; }

  .status { color: var(--muted); font-size: 13px; text-align: center; margin: 16px 0; }

  .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

  .mode {

    margin-left: auto;

    background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);

    color: var(--text); font-size: 12px; padding: 3px 8px; cursor: pointer;

  }

  .mode:hover, .mode[aria-pressed='true'] { border-color: var(--accent); }

</style>