malice

<script lang="ts">

  import EmojiText from './EmojiText.svelte';

  import { onMount } from 'svelte';

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

  import Emoji from './Emoji.svelte';

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

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

  import { MAX_QUICK_REACTIONS } from './types';

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

  import { hasUsage } from './packs';

  export let packs: ImagePack[];

  export let quick: QuickReaction[];

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

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

  export let onClose: () => void;

  export let embedded = false;

  let root: HTMLDivElement;

  let input: HTMLInputElement;

  let query = '';

  let customising = embedded;

  let groups: EmojiGroup[] | null = null;

  let loadFailed = false;

  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);

  $: full = quick.length >= MAX_QUICK_REACTIONS;

  $: 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) => r.key === key);

  }

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

    if (!customising) {

      onPick(key, shortcode);

      return;

    }

    if (isQuick(key)) onQuickChange(quick.filter((r) => r.key !== key));

    else if (!full) onQuickChange([...quick, { key, shortcode }]);

  }

  function quickLabel(r: QuickReaction): string {

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

  }

  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>

        <span class="muted">{quick.length}/{MAX_QUICK_REACTIONS}</span>

      </div>

      <div class="quick-row">

        {#each quick as r (r.key)}

          <span class="quick-item">

            {#if r.key.startsWith('mxc://')}

              <img src={mediaUrl(r.key, 64) ?? ''} alt={quickLabel(r)} />

            {:else}

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

            {/if}

            <button

              type="button"

              class="remove"

              aria-label={`Remove ${quickLabel(r)} from quick reactions`}

              on:click={() => onQuickChange(quick.filter((x) => x.key !== r.key))}

            >

              ×

            </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}

              disabled={customising && full && !isQuick(image.reaction_key)}

              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}

                disabled={customising && full && !isQuick(e.emoji)}

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

              >

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

              </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; justify-content: space-between; font-size: 12px; font-weight: 650; margin-bottom: 4px; }

  .quick-row { 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 6px;

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

    font-size: 16px;

  }

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

  .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>