malice

<script lang="ts">

  import { createEventDispatcher } from 'svelte';

  import PackCloneDialog from './PackCloneDialog.svelte';

  import MxcAvatar from './MxcAvatar.svelte';

  import EmojiText from './EmojiText.svelte';

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

  import { disabledPackImages, setPackImageEnabled } from './pack-preferences';

  import { imageEnabled } from './pack-preferences-model';

  import type { CloneSource } from './pack-clone';

  import {

    allPacks,

    freePackStateKey,

    hasUsage,

    packLabel,

    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 cloneSource: CloneSource | null = null;

  let fileInput: HTMLInputElement;

  let avatarInput: HTMLInputElement;

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

  const sidebarPackLabel = (pack: ImagePack) => {

    const label = packLabel(pack, roomName);

    if (pack.source === 'User' || !pack.display_name) return label;

    return `${label} · ${roomName(pack.source.Room.room_id)}`;

  };

  const packScope = (pack: ImagePack) => {

    if (pack.source === 'User') return 'Personal pack synced to your account';

    const roomId = pack.source.Room.room_id;

    return `${rooms.find((room) => room.room_id === roomId)?.space ? 'Space' : 'Room'} pack in ${roomName(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');

  $: spacePackRooms = packRooms.filter((room) => room.space);

  $: regularPackRooms = packRooms.filter((room) => !room.space);

  $: 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 = freePackStateKey(packs, newRoom, 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 renameImageBody(image: PackImage, event: Event): Promise<void> {

    const input = event.currentTarget as HTMLInputElement;

    const body = input.value.trim() || image.shortcode;

    const currentBody = image.body?.trim() || image.shortcode;

    if (!target || body === currentBody) {

      input.value = currentBody;

      return;

    }

    const ok = await run(

      () => runCommand({

        op: 'put_pack_image',

        target: target!,

        shortcode: image.shortcode,

        mxc: image.media_id,

        body,

        usage: null

      }),

      'Could not rename the sticker'

    );

    if (!ok) input.value = currentBody;

  }

  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 openImageClone(image: PackImage): void {

    if (selected) cloneSource = { kind: 'image', pack: selected, image };

  }

  async function togglePersonalImage(image: PackImage, enabled: boolean): Promise<void> {

    if (!selected) return;

    await run(

      () => setPackImageEnabled(selected!.id, image.shortcode, enabled),

      'Could not save your image preference'

    );

  }

</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><EmojiText text={userPack?.display_name ?? 'Your pack'} /></span>

      </button>

      {#if roomPacks.length}

        <h4>Room and space 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={sidebarPackLabel(pack)} size={28} shape="rounded" />

            <span><EmojiText text={sidebarPackLabel(pack)} /></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={sidebarPackLabel(pack)} size={28} shape="rounded" />

            <span><EmojiText text={sidebarPackLabel(pack)} /></span>

          </button>

        {/each}

      {/if}

      {#if packRooms.length}

        {#if creating}

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

            <select bind:value={newRoom} aria-label="Space or room">

              <option value="" disabled>Space or room</option>

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

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

              {/each}

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

                <option value={room.room_id}>Room · {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 pack</button>

        {/if}

      {/if}

    </nav>

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

      {#if selectedId === 'user'}

        <p class="scope">Personal pack synced to your account</p>

      {:else if selected}

        <p class="scope">{packScope(selected)}</p>

      {/if}

      {#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()} />

          {#if selected}

            <button type="button" class="ghost-btn" on:click={() => selected && (cloneSource = { kind: 'pack', pack: selected })}>Clone pack</button>

          {/if}

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

        <p class="preference-note">Hiding an image with Use for me only affects you, and syncs to your account. Emoji and sticker settings apply for everyone.</p>

        <div class="images">

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

            <div class="image">

              <img class:hidden={!imageEnabled($disabledPackImages, selected?.id ?? 'user', image.shortcode)} 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)} />

              <input type="text" value={image.body?.trim() || image.shortcode} aria-label="Sticker name" on:change={(e) => void renameImageBody(image, e)} />

              <label class="personal-check">

                <input type="checkbox" checked={imageEnabled($disabledPackImages, selected?.id ?? 'user', image.shortcode)} on:change={(e) => void togglePersonalImage(image, e.currentTarget.checked)} />

                Use for me

              </label>

              <div class="usage">

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

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

                <button type="button" class="ghost-btn clone" on:click={() => openImageClone(image)}>Clone</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"><EmojiText text={packLabel(selected, roomName)} /></strong>

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

          <button type="button" class="primary-btn" on:click={() => (cloneSource = { kind: 'pack', pack: selected })}>Clone pack</button>

        </div>

        {#if 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}

        <p class="preference-note">Hiding an image with Use for me only affects you, and syncs to your account. Emoji and sticker settings apply for everyone.</p>

        <div class="images">

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

            <div class="image">

              <img class:hidden={!imageEnabled($disabledPackImages, selected?.id ?? 'user', image.shortcode)} src={messageMediaUrl(image.media_id, 'Thumbnail')} alt={image.shortcode} loading="lazy" />

              <span class="code">{image.body?.trim() ? `${image.body.trim()} · ${image.shortcode}` : image.shortcode}</span>

              <label class="personal-check">

                <input type="checkbox" checked={imageEnabled($disabledPackImages, selected?.id ?? 'user', image.shortcode)} on:change={(e) => void togglePersonalImage(image, e.currentTarget.checked)} />

                Use for me

              </label>

              <button type="button" class="ghost-btn" on:click={() => openImageClone(image)}>Clone</button>

            </div>

          {/each}

        </div>

      {/if}

    </section>

  </div>

</div>

{#if cloneSource}

  <div class="modal-wrap">

    <PackCloneDialog

      source={cloneSource}

      {packs}

      {rooms}

      onClose={() => (cloneSource = null)}

      {onError}

    />

  </div>

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

  .scope, .preference-note { margin: 0; color: var(--muted); font-size: 12px; }

  .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 img.hidden { opacity: 0.35; }

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

  .personal-check { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }

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

  .usage .clone { flex: none; padding: 2px 6px; font-size: 12px; }

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

  .modal-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgb(0 0 0 / 55%); }

</style>