malice

<script lang="ts">

  import { onMount } from 'svelte';

  import { messageMediaUrl } from './api';

  import MxcAvatar from './MxcAvatar.svelte';

  import EmojiText from './EmojiText.svelte';

  import { packLabel, stickersOf } from './packs';

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

  export let packs: ImagePack[];

  export let roomName: (roomId: string) => string;

  export let onSend: (pack: ImagePack, image: PackImage) => void;

  export let onClone: (pack: ImagePack, image: PackImage, x: number, y: number) => void;

  export let onClonePack: (pack: ImagePack, x: number, y: number) => void;

  export let onManage: () => void;

  export let onClose: () => void;

  let root: HTMLDivElement;

  let search: HTMLInputElement;

  let query = '';

  let activeId: string | null = null;

  $: withStickers = packs.filter((p) => stickersOf(p).length > 0);

  $: q = query.trim().toLowerCase();

  $: shown = withStickers

    .map((pack) => ({

      pack,

      images: stickersOf(pack).filter(

        (i) => !q || i.shortcode.toLowerCase().includes(q) || (i.body ?? '').toLowerCase().includes(q)

      )

    }))

    .filter((g) => g.images.length > 0 && (q || activeId === null || g.pack.id === activeId));

  onMount(() => search?.focus());

  function outside(ev: PointerEvent): void {

    if (!root.contains(ev.target as Node) && !(ev.target as Element).closest?.('.context-menu, .sticker-btn')) onClose();

  }

  function key(ev: KeyboardEvent): void {

    if (ev.key === 'Escape' && !document.querySelector('.context-menu')) {

      ev.stopPropagation();

      onClose();

    }

  }

</script>

<svelte:window on:pointerdown|capture={outside} on:keydown|capture={key} />

<div class="sticker-picker" role="dialog" aria-label="Stickers" bind:this={root}>

  <div class="top">

    <input class="search" type="search" placeholder="Search stickers" bind:value={query} bind:this={search} />

    <button type="button" class="icon-btn" title="Manage packs" aria-label="Manage packs" on:click={onManage}>

      <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>

    </button>

  </div>

  {#if withStickers.length > 1}

    <div class="tabs" role="tablist" aria-label="Packs">

      <button type="button" role="tab" class="tab all" aria-selected={activeId === null} on:click={() => (activeId = null)}>All</button>

      {#each withStickers as pack (pack.id)}

        <button

          type="button"

          role="tab"

          class="tab"

          aria-selected={activeId === pack.id}

          title={packLabel(pack, roomName)}

          on:click={() => (activeId = pack.id)}

        >

          {#if pack.avatar}

            <MxcAvatar mxc={pack.avatar} label={packLabel(pack, roomName)} size={24} shape="rounded" />

          {:else}

            <img src={messageMediaUrl(stickersOf(pack)[0].media_id, 'Thumbnail')} alt={packLabel(pack, roomName)} />

          {/if}

        </button>

      {/each}

    </div>

  {/if}

  <div class="scroll">

    {#each shown as g (g.pack.id)}

      <section class="group" aria-label={packLabel(g.pack, roomName)}>

        <div class="group-head">

          <h3><EmojiText text={packLabel(g.pack, roomName)} /></h3>

          <button type="button" class="clone-pack" on:click={(ev) => onClonePack(g.pack, ev.clientX, ev.clientY)}>Clone pack</button>

        </div>

        <div class="grid">

          {#each g.images as image (image.shortcode)}

            <button

              type="button"

              class="cell"

              title={image.body ?? image.shortcode}

              aria-label={image.body ?? image.shortcode}

              on:click={() => onSend(g.pack, image)}

              on:contextmenu|preventDefault={(ev) => onClone(g.pack, image, ev.clientX, ev.clientY)}

            >

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

            </button>

          {/each}

        </div>

      </section>

    {:else}

      {#if withStickers.length === 0}

        <div class="empty">

          <p class="status">No stickers yet</p>

          <button type="button" class="primary-btn" on:click={onManage}>Add a pack</button>

        </div>

      {:else}

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

      {/if}

    {/each}

  </div>

</div>

<style>

  .sticker-picker {

    display: flex;

    flex-direction: column;

    gap: 6px;

    width: 360px;

    height: auto;

    max-height: min(420px, calc(100vh - 120px));

    max-width: calc(100vw - 16px);

    padding: 8px;

    background: var(--panel);

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

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

    box-shadow: 0 6px 24px rgb(0 0 0 / 0.5);

  }

  .top { display: flex; gap: 6px; }

  .search {

    flex: 1;

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

  .tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }

  .tab {

    flex: none;

    display: grid;

    place-items: center;

    min-width: 32px;

    height: 32px;

    padding: 2px 6px;

    border: 1px solid transparent;

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

    background: transparent;

    color: var(--muted);

    font-size: 12px;

    cursor: pointer;

  }

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

  .tab[aria-selected='true'] { border-color: var(--accent); color: var(--text); }

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

  .group-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 4px; }

  h3 { margin: 0; font-size: 12px; font-weight: 650; color: var(--muted); }

  .clone-pack {

    border: none;

    background: none;

    color: var(--accent);

    font-size: 12px;

    cursor: pointer;

  }

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

  .cell {

    aspect-ratio: 1;

    padding: 4px;

    border: 1px solid transparent;

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

    background: transparent;

    cursor: pointer;

  }

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

  .cell img { width: 100%; height: 100%; object-fit: contain; }

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

  .empty { display: flex; flex-direction: column; align-items: center; padding-bottom: 12px; }

</style>