malice

<script lang="ts">

  import { createEventDispatcher } from 'svelte';

  import ContextMenu, { type MenuItem } from './ContextMenu.svelte';

  import MxcAvatar from './MxcAvatar.svelte';

  import { messageMediaUrl, runCommand, uploadMedia } from './api';

  import {

    allPacks,

    clonePackDestinations,

    editableChoices,

    hasUsage,

    packLabel,

    packSlug,

    packTarget,

    shortcodeFor,

    validShortcode

  } from './packs';

  import type { PackTarget } from './transport';

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

  export let packs: ImagePacks;

  export let rooms: RoomSummary[];

  export let onError: (message: string) => void;

  const dispatch = createEventDispatcher<{ close: void }>();

  let selectedId: string | null = 'user';

  let creating = false;

  let newRoom = '';

  let newName = '';

  let confirmDelete = false;

  let uploading: { done: number; total: number } | null = null;

  let menu: { items: MenuItem[]; x: number; y: number } | null = null;

  let fileInput: HTMLInputElement;

  let avatarInput: HTMLInputElement;

  const roomName = (roomId: string) => rooms.find((r) => r.room_id === roomId)?.name ?? roomId;

  $: list = allPacks(packs);

  $: userPack = list.find((p) => p.source === 'User') ?? null;

  $: roomPacks = list.filter((p) => p.source !== 'User' && p.editable);

  $: otherPacks = list.filter((p) => p.source !== 'User' && !p.editable);

  $: packRooms = rooms.filter((r) => r.can_edit_packs && r.membership === 'Joined');

  $: selected = selectedId === 'user' ? userPack : (list.find((p) => p.id === selectedId) ?? null);

  $: target = selectedId === 'user' ? ({ kind: 'user' } as PackTarget) : selected ? packTarget(selected) : null;

  $: editable = selectedId === 'user' || (selected?.editable ?? false);

  $: if (selectedId) confirmDelete = false;

  async function run(work: () => Promise<unknown>, failure: string): Promise<boolean> {

    try {

      await work();

      return true;

    } catch (e) {

      onError(e instanceof Error ? e.message : failure);

      return false;

    }

  }

  async function createPack(): Promise<void> {

    const name = newName.trim();

    if (!newRoom || !name) return;

    const state_key = packSlug(name);

    const ok = await run(

      () => runCommand({ op: 'create_room_pack', room_id: newRoom, state_key, display_name: name }),

      'Could not create the pack'

    );

    if (!ok) return;

    creating = false;

    newName = '';

    selectedId = `room:${newRoom}:${state_key}`;

  }

  async function rename(event: Event): Promise<void> {

    const name = (event.currentTarget as HTMLInputElement).value.trim();

    if (!target || !name || name === (selected?.display_name ?? '')) return;

    await run(() => runCommand({ op: 'set_pack_meta', target: target!, display_name: name }), 'Could not rename the pack');

  }

  async function changeAvatar(): Promise<void> {

    const file = avatarInput.files?.[0];

    avatarInput.value = '';

    if (!file || !target) return;

    const t = target;

    await run(async () => {

      const { mxc } = await uploadMedia(file);

      await runCommand({ op: 'set_pack_meta', target: t, avatar: mxc });

    }, 'Could not change the pack avatar');

  }

  async function addImages(): Promise<void> {

    const files = [...(fileInput.files ?? [])].filter((f) => f.type.startsWith('image/'));

    fileInput.value = '';

    if (!files.length || !target) return;

    const t = target;

    const taken = new Set(selected?.images.map((i) => i.shortcode) ?? []);

    uploading = { done: 0, total: files.length };

    for (const file of files) {

      const shortcode = shortcodeFor(file.name, taken);

      await run(async () => {

        const { mxc } = await uploadMedia(file);

        const size = await imageSize(file);

        const info = { mimetype: file.type || null, size_bytes: file.size, width: size?.width ?? null, height: size?.height ?? null };

        await runCommand({ op: 'put_pack_image', target: t, shortcode, mxc, body: null, usage: null, info });

      }, `Could not add ${file.name}`);

      uploading = { done: uploading.done + 1, total: files.length };

    }

    uploading = null;

  }

  async function imageSize(file: File): Promise<{ width: number; height: number } | null> {

    try {

      const bitmap = await createImageBitmap(file);

      const size = { width: bitmap.width, height: bitmap.height };

      bitmap.close();

      return size;

    } catch {

      return null;

    }

  }

  async function renameImage(image: PackImage, event: Event): Promise<void> {

    const input = event.currentTarget as HTMLInputElement;

    const to = input.value.trim();

    if (!target || to === image.shortcode) return;

    if (!validShortcode(to) || selected?.images.some((i) => i.shortcode === to)) {

      input.value = image.shortcode;

      onError(`Can't rename to "${to}"`);

      return;

    }

    await run(() => runCommand({ op: 'rename_pack_image', target: target!, from: image.shortcode, to }), 'Could not rename');

  }

  async function toggleUsage(image: PackImage, usage: PackUsage): Promise<void> {

    if (!target) return;

    const current: PackUsage[] = image.usage.length ? image.usage : ['Emoticon', 'Sticker'];

    const next = current.includes(usage) ? current.filter((u) => u !== usage) : [...current, usage];

    if (next.length === 0) return;

    await run(

      () =>

        runCommand({

          op: 'put_pack_image',

          target: target!,

          shortcode: image.shortcode,

          mxc: image.media_id,

          body: image.body,

          usage: next

        }),

      'Could not change how the image is used'

    );

  }

  async function removeImage(image: PackImage): Promise<void> {

    if (!target) return;

    await run(() => runCommand({ op: 'remove_pack_image', target: target!, shortcode: image.shortcode }), 'Could not remove');

  }

  async function setEverywhere(enabled: boolean): Promise<void> {

    if (!selected || selected.source === 'User') return;

    const { room_id, state_key } = selected.source.Room;

    await run(() => runCommand({ op: 'set_pack_enabled', room_id, state_key, enabled }), 'Could not change the pack');

  }

  async function deletePack(): Promise<void> {

    if (!target) return;

    const ok = await run(() => runCommand({ op: 'delete_pack', target: target! }), 'Could not delete the pack');

    if (ok) selectedId = 'user';

  }

  function cloneImageMenu(pack: ImagePack, image: PackImage, ev: MouseEvent): void {

    menu = {

      x: ev.clientX,

      y: ev.clientY,

      items: editableChoices(packs, roomName).map((choice) => ({

        label: `Clone to ${choice.label}`,

        action: () =>

          void run(

            () => runCommand({ op: 'clone_pack_image', from_pack: pack.id, shortcode: image.shortcode, to: choice.target }),

            'Could not clone the image'

          )

      }))

    };

  }

  function clonePackMenu(pack: ImagePack, ev: MouseEvent): void {

    menu = {

      x: ev.clientX,

      y: ev.clientY,

      items: clonePackDestinations(pack, packRooms, roomName).map((d) => ({

        label: d.label,

        action: () =>

          void run(async () => {

            const res = (await runCommand({ op: 'clone_pack', from_pack: pack.id, to: d.target, display_name: d.display_name })) as {

              skipped?: string[];

            };

            if (res?.skipped?.length) onError(`Couldn't copy ${res.skipped.map((s) => `:${s}:`).join(', ')}`);

          }, 'Could not clone the pack')

      }))

    };

  }

</script>

<div class="modal packs" role="dialog" aria-modal="true" aria-label="Sticker and emoji packs">

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

    <button type="button" role="tab" aria-selected="true" class="active">Packs</button>

    <button type="button" class="icon-btn modal-x" aria-label="Close packs" on:click={() => dispatch('close')}>

      <span aria-hidden="true">✕</span>

    </button>

  </div>

  <div class="layout">

    <nav class="pack-list" aria-label="Packs">

      <button type="button" class="pack-item" class:active={selectedId === 'user'} on:click={() => (selectedId = 'user')}>

        <MxcAvatar mxc={userPack?.avatar ?? null} label="Your pack" size={28} shape="rounded" />

        <span>{userPack?.display_name ?? 'Your pack'}</span>

      </button>

      {#if roomPacks.length}

        <h4>Room packs</h4>

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

          <button type="button" class="pack-item" class:active={selectedId === pack.id} on:click={() => (selectedId = pack.id)}>

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

            <span>{packLabel(pack, roomName)}</span>

          </button>

        {/each}

      {/if}

      {#if otherPacks.length}

        <h4>Other packs</h4>

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

          <button type="button" class="pack-item" class:active={selectedId === pack.id} on:click={() => (selectedId = pack.id)}>

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

            <span>{packLabel(pack, roomName)}</span>

          </button>

        {/each}

      {/if}

      {#if packRooms.length}

        {#if creating}

          <form class="new-pack" on:submit|preventDefault={() => void createPack()}>

            <select bind:value={newRoom} aria-label="Room">

              <option value="" disabled>Room</option>

              {#each packRooms as room (room.room_id)}

                <option value={room.room_id}>{room.name}</option>

              {/each}

            </select>

            <input type="text" placeholder="Pack name" bind:value={newName} aria-label="Pack name" />

            <div class="row">

              <button type="button" class="ghost-btn" on:click={() => (creating = false)}>Cancel</button>

              <button type="submit" class="primary-btn" disabled={!newRoom || !newName.trim()}>Create</button>

            </div>

          </form>

        {:else}

          <button type="button" class="ghost-btn new-btn" on:click={() => (creating = true)}>New room pack</button>

        {/if}

      {/if}

    </nav>

    <section class="editor" aria-label="Pack">

      {#if editable && target}

        <div class="meta">

          <button type="button" class="avatar-btn" title="Change pack avatar" on:click={() => avatarInput.click()}>

            <MxcAvatar mxc={selected?.avatar ?? null} label={selected?.display_name ?? 'Pack'} size={48} shape="rounded" />

          </button>

          <input

            class="name"

            type="text"

            value={selected?.display_name ?? ''}

            placeholder={selectedId === 'user' ? 'Your pack' : 'Pack name'}

            aria-label="Pack name"

            on:change={(e) => void rename(e)}

          />

          <input type="file" accept="image/*" class="visually-hidden" bind:this={avatarInput} on:change={() => void changeAvatar()} />

        </div>

        <div class="row">

          {#if selected && selected.source !== 'User'}

            <label class="check">

              <input type="checkbox" checked={selected.enabled_everywhere} on:change={(e) => void setEverywhere(e.currentTarget.checked)} />

              Use everywhere

            </label>

          {/if}

          <span class="spacer"></span>

          <button type="button" class="primary-btn" disabled={uploading !== null} on:click={() => fileInput.click()}>

            {uploading ? `Uploading ${uploading.done}/${uploading.total}` : 'Add images'}

          </button>

          <input type="file" accept="image/*" multiple class="visually-hidden" bind:this={fileInput} on:change={() => void addImages()} />

          {#if selected}

            {#if confirmDelete}

              <button type="button" class="ghost-btn" on:click={() => (confirmDelete = false)}>Keep</button>

              <button type="button" class="ghost-btn danger" on:click={() => void deletePack()}>Delete pack</button>

            {:else}

              <button type="button" class="ghost-btn danger" on:click={() => (confirmDelete = true)}>Delete</button>

            {/if}

          {/if}

        </div>

        <div class="images">

          {#each selected?.images ?? [] as image (image.shortcode)}

            <div class="image">

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

              <input type="text" value={image.shortcode} aria-label="Shortcode" on:change={(e) => void renameImage(image, e)} />

              <div class="usage">

                <button type="button" aria-pressed={hasUsage(image, 'Emoticon')} title="Emoji" on:click={() => void toggleUsage(image, 'Emoticon')}>☺</button>

                <button type="button" aria-pressed={hasUsage(image, 'Sticker')} title="Sticker" on:click={() => void toggleUsage(image, 'Sticker')}>▣</button>

                <button type="button" class="remove" title="Remove" aria-label={`Remove ${image.shortcode}`} on:click={() => void removeImage(image)}>✕</button>

              </div>

            </div>

          {:else}

            <p class="empty">No images yet</p>

          {/each}

        </div>

      {:else if selected}

        <div class="meta">

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

          <strong class="name">{packLabel(selected, roomName)}</strong>

          <span class="spacer"></span>

          <button type="button" class="primary-btn" on:click={(ev) => selected && clonePackMenu(selected, ev)}>Clone pack</button>

        </div>

        <div class="images">

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

            <div class="image">

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

              <span class="code">{image.shortcode}</span>

              <button type="button" class="ghost-btn" on:click={(ev) => selected && cloneImageMenu(selected, image, ev)}>Clone</button>

            </div>

          {/each}

        </div>

      {/if}

    </section>

  </div>

</div>

{#if menu}

  <ContextMenu items={menu.items} x={menu.x} y={menu.y} onClose={() => (menu = null)} />

{/if}

<style>

  .packs { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 64px); display: flex; flex-direction: column; }

  .layout { display: flex; gap: 14px; min-height: 0; flex: 1; }

  .pack-list { flex: none; width: 210px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

  h4 { margin: 10px 6px 4px; font-size: 12px; color: var(--muted); font-weight: 650; }

  .pack-item {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 6px 8px;

    border: none;

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

    background: transparent;

    color: var(--text);

    font: inherit;

    font-size: 13.5px;

    text-align: left;

    cursor: pointer;

  }

  .pack-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .pack-item:hover { background: var(--hover); }

  .pack-item.active { background: color-mix(in srgb, var(--accent) 20%, transparent); }

  .new-btn { margin-top: 8px; }

  .new-pack { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

  .editor { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }

  .meta { display: flex; align-items: center; gap: 10px; }

  .avatar-btn { padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--r-md); }

  .name { flex: 1; font-size: 15px; }

  .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  .spacer { flex: 1; }

  .check { display: flex; align-items: center; gap: 6px; font-size: 13px; }

  input[type='text'], select {

    background: var(--bg-soft);

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

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

    color: var(--text);

    padding: 6px 8px;

    font: inherit;

    font-size: 13px;

    min-width: 0;

  }

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

  .image {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 6px;

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

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

    background: var(--bg-soft);

  }

  .image img { width: 100%; aspect-ratio: 1; object-fit: contain; }

  .image input { width: 100%; font-size: 12px; padding: 3px 6px; }

  .code { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .usage { display: flex; gap: 4px; }

  .usage button {

    flex: 1;

    padding: 2px 0;

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

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

    background: transparent;

    color: var(--muted);

    cursor: pointer;

  }

  .usage button[aria-pressed='true'] { color: var(--accent); border-color: var(--accent); }

  .usage .remove { flex: none; padding: 2px 6px; }

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

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

</style>