malice

<script lang="ts">

  import { createEventDispatcher } from 'svelte';

  import {

    LINE_HEIGHT_DEFAULT,

    LINE_HEIGHT_MAX,

    LINE_HEIGHT_MIN,

    MESSAGE_SPACING_DEFAULT,

    MESSAGE_SPACING_MAX,

    MESSAGE_SPACING_MIN,

    lineHeight,

    messageSpacing

  } from './appearance';

  import { DEFAULT_QUICK_REACTIONS } from './quick-reactions';

  import ReactionPicker from './ReactionPicker.svelte';

  import ThemeSettings from './ThemeSettings.svelte';

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

  export let quick: QuickReaction[];

  export let packs: ImagePack[] = [];

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

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

  $: quickIsDefault =

    quick.length === DEFAULT_QUICK_REACTIONS.length && quick.every((r, i) => r.key === DEFAULT_QUICK_REACTIONS[i].key);

</script>

<div class="modal settings" role="dialog" aria-modal="true" aria-label="Settings">

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

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

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

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

    </button>

  </div>

  <ThemeSettings />

  <section aria-label="Message spacing">

    <h3 class="sec-h">Space between messages</h3>

    <div class="range">

      <input

        type="range"

        min={MESSAGE_SPACING_MIN}

        max={MESSAGE_SPACING_MAX}

        step="1"

        bind:value={$messageSpacing}

        aria-label="Space between messages in pixels"

      />

      <span class="value">{$messageSpacing}px</span>

      <button

        type="button"

        class="ghost-btn"

        disabled={$messageSpacing === MESSAGE_SPACING_DEFAULT}

        on:click={() => messageSpacing.set(MESSAGE_SPACING_DEFAULT)}

      >

        Reset

      </button>

    </div>

    <h3 class="sec-h">Line height</h3>

    <div class="range">

      <input

        type="range"

        min={LINE_HEIGHT_MIN}

        max={LINE_HEIGHT_MAX}

        step="0.05"

        bind:value={$lineHeight}

        aria-label="Line height within messages"

      />

      <span class="value">{$lineHeight.toFixed(2)}</span>

      <button

        type="button"

        class="ghost-btn"

        disabled={$lineHeight === LINE_HEIGHT_DEFAULT}

        on:click={() => lineHeight.set(LINE_HEIGHT_DEFAULT)}

      >

        Reset

      </button>

    </div>

  </section>

  <section aria-label="Quick reactions">

    <div class="sec-head">

      <h3 class="sec-h">Quick reactions</h3>

      <button type="button" class="ghost-btn" disabled={quickIsDefault} on:click={() => onQuickChange(DEFAULT_QUICK_REACTIONS)}>

        Reset

      </button>

    </div>

    <ReactionPicker embedded {quick} {packs} {onQuickChange} onPick={() => {}} onClose={() => dispatch('close')} />

  </section>

  <section aria-label="Packs">

    <div class="sec-head">

      <h3 class="sec-h">Sticker and emoji packs</h3>

      <button type="button" class="ghost-btn" on:click={() => dispatch('packs')}>Manage</button>

    </div>

  </section>

</div>

<style>

  .settings { max-height: calc(100dvh - 32px); overflow-y: auto; }

  section { margin-top: 18px; }

  .sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

  .sec-head .sec-h { margin: 0; }

  .sec-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 6px; }

  .range + .sec-h { margin-top: 12px; }

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

  .range input[type='range'] { flex: 1; accent-color: var(--accent); }

  .value { font-size: 13px; min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }

</style>