malice

<script lang="ts">

  import { runCommand } from './api';

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

  import { cloneRequest, editableChoices, freePackStateKey, packLabel } from './packs';

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

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

  export let source: CloneSource;

  export let packs: ImagePacks;

  export let rooms: RoomSummary[];

  export let onClose: () => void;

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

  const roomName = (id: string) => rooms.find((room) => room.room_id === id)?.name ?? id;

  let destinationId = '';

  let roomId = '';

  let name = source.kind === 'sticker' ? 'Sticker pack' : packLabel(source.pack, roomName);

  let asSticker = true;

  let asEmoji = true;

  let busy = false;

  let error = '';

  let createdTarget: { roomId: string; name: string; target: PackTarget } | null = null;

  $: choices = editableChoices(packs, roomName).filter((choice) =>

    source.kind !== 'pack' || choice.pack?.id !== source.pack.id);

  $: locations = rooms.filter((room) => room.can_edit_packs && room.membership === 'Joined')

    .sort((a, b) => Number(b.space) - Number(a.space) || a.name.localeCompare(b.name));

  $: if (!destinationId) destinationId = choices[0]?.pack?.id ?? (choices.length ? 'user' : 'new');

  $: if (!roomId && locations.length) roomId = locations[0].room_id;

  $: creating = destinationId === 'new';

  function key(event: KeyboardEvent): void {

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

    event.stopImmediatePropagation();

    if (!busy) onClose();

  }

  async function copy(): Promise<void> {

    if (busy) return;

    const usage: PackUsage[] = [...(asSticker ? ['Sticker' as const] : []), ...(asEmoji ? ['Emoticon' as const] : [])];

    if (!usage.length) {

      error = 'Choose stickers, emoji, or both';

      return;

    }

    busy = true;

    error = '';

    try {

      const choice = choices.find((item) => (item.pack?.id ?? 'user') === destinationId);

      let target = choice?.target;

      const displayName = name.trim();

      if (creating) {

        if (!roomId || !displayName) throw new Error('Choose a space or room and give the pack a name');

        if (!createdTarget || createdTarget.roomId !== roomId || createdTarget.name !== displayName) {

          const stateKey = freePackStateKey(packs, roomId, displayName);

          target = { kind: 'room', room_id: roomId, state_key: stateKey };

          await runCommand({ op: 'create_room_pack', room_id: roomId, state_key: stateKey, display_name: displayName });

          createdTarget = { roomId, name: displayName, target };

        } else target = createdTarget.target;

      }

      if (!target) throw new Error('Choose a destination pack');

      const result = await runCommand(cloneRequest(source, target, usage, creating ? displayName : null, choice?.pack ?? null)) as { skipped?: string[] };

      if (result?.skipped?.length) onError(`Could not copy ${result.skipped.join(', ')}`);

      onClose();

    } catch (e) {

      error = e instanceof Error ? e.message : 'Could not copy the images';

    } finally {

      busy = false;

    }

  }

</script>

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

<div class="modal clone" role="dialog" aria-modal="true" aria-label={source.kind === 'pack' ? 'Clone pack' : 'Clone image'}>

  <h2>{source.kind === 'pack' ? 'Clone pack' : 'Clone image'}</h2>

  <form on:submit|preventDefault={() => void copy()}>

    <fieldset disabled={busy}>

      <label class="field">

        <span>Destination pack</span>

        <select bind:value={destinationId}>

          {#each choices as choice}

            <option value={choice.pack?.id ?? 'user'}>{choice.label}</option>

          {/each}

          {#if locations.length}<option value="new">New pack in a space or room</option>{/if}

        </select>

      </label>

      {#if creating && locations.length}

        <label class="field">

          <span>Space or room</span>

          <select bind:value={roomId}>

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

              <option value={room.room_id}>{room.space ? 'Space' : 'Room'} · {room.name}</option>

            {/each}

          </select>

        </label>

        <label class="field"><span>New pack name</span><input type="text" bind:value={name} required /></label>

      {:else if choices.length === 0}

        <p>No writable destination packs are available. Creating shared packs requires permission in a joined space or room.</p>

      {:else}

        <p>Copies are appended to the selected pack. Existing images stay in place and duplicate names get a numbered suffix.</p>

      {/if}

      <div class="uses" role="group" aria-label="Use copied images as">

        <label><input type="checkbox" bind:checked={asSticker} /> Stickers</label>

        <label><input type="checkbox" bind:checked={asEmoji} /> Emoji and reactions</label>

      </div>

      {#if error}<p class="error" role="alert">{error}</p>{/if}

      <div class="actions">

        <button type="button" class="ghost-btn" on:click={onClose}>Cancel</button>

        <button type="submit" class="primary-btn" disabled={(!choices.length && !locations.length) || (!asSticker && !asEmoji)}>{busy ? 'Copying…' : 'Copy'}</button>

      </div>

    </fieldset>

  </form>

</div>

<style>

  .clone { width: min(460px, 100%); }

  h2 { margin: 0 0 16px; font-size: 18px; }

  fieldset { display: flex; flex-direction: column; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }

  .field { display: flex; flex-direction: column; gap: 6px; }

  input[type='text'], select { width: 100%; padding: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); }

  p { margin: 0; font-size: 13px; color: var(--muted); }

  .uses, .actions { display: flex; flex-wrap: wrap; gap: 14px; }

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

  .actions { justify-content: flex-end; }

  .error { color: var(--danger); }

</style>