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,

    THEMES,

    accent,

    lineHeight,

    messageSpacing,

    theme

  } from './appearance';

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

  import ReactionPicker from './ReactionPicker.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);

  function themeAccent(): string {

    return getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || '#5865f2';

  }

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

  <section aria-label="Theme">

    <h3 class="sec-h">Theme</h3>

    <div class="themes" role="radiogroup" aria-label="Theme">

      {#each THEMES as t (t.id)}

        <button

          type="button"

          role="radio"

          aria-checked={$theme === t.id}

          class="theme-opt"

          class:active={$theme === t.id}

          data-swatch={t.id}

          on:click={() => theme.set(t.id)}

        >

          <span class="swatch" aria-hidden="true"></span>

          {t.label}

        </button>

      {/each}

    </div>

    <div class="range accent-row">

      <label for="accent-colour">Accent colour</label>

      <input id="accent-colour" type="color" value={$accent ?? themeAccent()} on:input={(e) => accent.set(e.currentTarget.value)} />

      <button type="button" class="ghost-btn" disabled={$accent === null} on:click={() => accent.set(null)}>Use theme colour</button>

    </div>

  </section>

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

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

  .theme-opt {

    display: flex; align-items: center; gap: 8px;

    padding: 6px 8px;

    background: var(--bg-soft);

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

    border-radius: 8px;

    color: var(--text);

    font-size: 13px;

    cursor: pointer;

    text-align: left;

  }

  .theme-opt.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

  .swatch { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); }

  [data-swatch='system'] .swatch { background: linear-gradient(135deg, #14151c 50%, #f7f7fa 50%); }

  [data-swatch='dark'] .swatch { background: #14151c; }

  [data-swatch='light'] .swatch { background: #f7f7fa; }

  [data-swatch='black'] .swatch { background: #000; }

  [data-swatch='nord'] .swatch { background: #2e3440; }

  .accent-row { margin-top: 10px; font-size: 13px; }

  .accent-row label { flex: 1; }

  .accent-row input[type='color'] { width: 36px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }

</style>