malice

<script lang="ts">

  import { onDestroy } from 'svelte';

  import { get } from 'svelte/store';

  import { THEMES, accent, customThemes, theme, themePreview, type ThemeId } from './appearance';

  import {

    MALICIOUS_PALETTE, THEME_COLOURS, captureTheme, isThemeColour, readThemeFile,

    themeDocument, themeStyle, type CustomTheme, type ThemeColour, type ThemeDocument

  } from './custom-themes';

  let draft: ThemeDocument | null = null;

  let editingId: CustomTheme['id'] | null = null;

  let selectedColour: ThemeColour = 'bg';

  let hexInput = '';

  let previewApp = false;

  let error = '';

  let notice = '';

  let fileInput: HTMLInputElement;

  $: selected = $customThemes.find((item) => item.id === $theme);

  $: selectedName = selected?.name ?? THEMES.find((item) => item.id === $theme)?.label ?? 'Theme';

  $: if (draft) hexInput = draft.colours[selectedColour];

  $: themePreview.set(previewApp ? draft : null);

  onDestroy(() => themePreview.set(null));

  function chooseTheme(id: ThemeId): void {

    draft = null;

    previewApp = false;

    themePreview.set(null);

    accent.set(null);

    theme.set(id);

    error = '';

    notice = '';

  }

  function editTheme(asNew: boolean): void {

    themePreview.set(null);

    previewApp = false;

    editingId = !asNew && selected ? selected.id : null;

    draft = selected && !asNew ? themeDocument(selected) : captureTheme(

      `${selectedName} custom`, $theme === 'malicious' ? MALICIOUS_PALETTE : selected?.palette

    );

    selectedColour = 'bg';

    error = '';

    notice = '';

  }

  function persistThemes(items: CustomTheme[]): void {

    localStorage.setItem('malice.customThemes', JSON.stringify(items));

    customThemes.set(items);

  }

  function saveTheme(doc: ThemeDocument, id: CustomTheme['id'] | null = null): void {

    try {

      const saved: CustomTheme = { ...themeDocument(doc), id: id ?? `custom:${crypto.randomUUID()}` };

      const items = get(customThemes);

      persistThemes(id ? items.map((item) => item.id === id ? saved : item) : [...items, saved]);

      chooseTheme(saved.id);

      notice = `${saved.name} saved on this device.`;

    } catch {

      error = 'Could not save the theme. Check that browser storage is available and has space.';

    }

  }

  function deleteTheme(): void {

    if (!selected) return;

    try {

      persistThemes($customThemes.filter((item) => item.id !== selected?.id));

      chooseTheme('dark');

      notice = 'Custom theme deleted.';

    } catch {

      error = 'Could not delete the theme from browser storage.';

    }

  }

  function exportTheme(doc: ThemeDocument): void {

    const blob = new Blob([JSON.stringify(themeDocument(doc), null, 2) + '\n'], { type: 'application/json' });

    const url = URL.createObjectURL(blob);

    const anchor = document.createElement('a');

    anchor.href = url;

    anchor.download = `${doc.name.replace(/[^\p{L}\p{N}_-]+/gu, '-').replace(/^-|-$/g, '') || 'theme'}.malice-theme.json`;

    anchor.click();

    setTimeout(() => URL.revokeObjectURL(url), 1000);

  }

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

    const input = event.currentTarget as HTMLInputElement;

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

    input.value = '';

    if (!file) return;

    error = '';

    notice = '';

    try {

      if (file.size > 65536) throw new Error('Theme files must be smaller than 64 KB.');

      const imported = readThemeFile(await file.text());

      draft = imported;

      editingId = null;

      previewApp = false;

      selectedColour = 'bg';

      notice = 'Theme loaded. Preview it and save to add it to your themes.';

    } catch (cause) {

      error = cause instanceof Error ? cause.message : 'Could not read the theme file.';

    }

  }

  function updateColour(value: string): void {

    if (!draft || !isThemeColour(value)) return;

    draft = { ...draft, colours: { ...draft.colours, [selectedColour]: value.toLowerCase() } };

    error = '';

  }

  function updateHex(): void {

    if (!isThemeColour(hexInput)) {

      error = 'Enter a hex colour with six digits, or eight digits including opacity.';

      return;

    }

    updateColour(hexInput);

  }

  function updateOpacity(value: string): void {

    if (!draft) return;

    const alpha = Math.round(Number(value) * 255 / 100);

    updateColour(draft.colours[selectedColour].slice(0, 7) + (alpha === 255 ? '' : alpha.toString(16).padStart(2, '0')));

  }

  function addToPalette(): void {

    if (!draft || draft.palette.length >= 64) return;

    const colour = draft.colours[selectedColour];

    if (!draft.palette.includes(colour)) draft = { ...draft, palette: [...draft.palette, colour] };

  }

  function removeFromPalette(): void {

    if (draft) draft = { ...draft, palette: draft.palette.filter((colour) => colour !== draft?.colours[selectedColour]) };

  }

</script>

<section aria-label="Theme">

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

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

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

      <button type="button" role="radio" aria-checked={$theme === item.id} class="theme-opt" class:active={$theme === item.id}

        data-swatch={item.id} on:click={() => chooseTheme(item.id)}>

        <span class="swatch" aria-hidden="true"></span>{item.label}

      </button>

    {/each}

    {#each $customThemes as item (item.id)}

      <button type="button" role="radio" aria-checked={$theme === item.id} class="theme-opt" class:active={$theme === item.id}

        on:click={() => chooseTheme(item.id)}>

        <span class="swatch" style:background={item.colours.bg} style:border-color={item.colours.accent} aria-hidden="true"></span>

        <span class="theme-name">{item.name}</span>

      </button>

    {/each}

  </div>

  <div class="toolbar">

    <button type="button" class="ghost-btn" on:click={() => editTheme(true)}>Create theme</button>

    {#if selected}<button type="button" class="ghost-btn" on:click={() => editTheme(false)}>Edit theme</button>{/if}

    <button type="button" class="ghost-btn" on:click={() => fileInput.click()}>Import theme</button>

    <button type="button" class="ghost-btn" disabled={draft !== null} on:click={() => exportTheme(captureTheme(selectedName, selected?.palette ?? ($theme === 'malicious' ? MALICIOUS_PALETTE : undefined)))}>Export theme</button>

    {#if selected}<button type="button" class="ghost-btn danger" on:click={deleteTheme}>Delete theme</button>{/if}

    <input class="file-input" type="file" accept=".json,application/json" aria-label="Import theme file" bind:this={fileInput} on:change={importTheme} />

  </div>

  {#if !draft}

    <div class="accent-row">

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

      <input id="accent-colour" type="color" value={$accent ?? captureTheme(selectedName).colours.accent.slice(0, 7)} on:input={(event) => accent.set(event.currentTarget.value)} />

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

    </div>

  {/if}

  {#if draft}

    <div class="editor">

      <label class="field">Theme name<input type="text" maxlength="80" bind:value={draft.name} /></label>

      <label class="field">Colour scheme

        <select bind:value={draft.scheme}><option value="dark">Dark</option><option value="light">Light</option></select>

      </label>

      <div class="colour-roles" role="radiogroup" aria-label="Colour to edit">

        {#each THEME_COLOURS as [key, label] (key)}

          <button type="button" role="radio" aria-checked={selectedColour === key} class="role-opt" class:active={selectedColour === key}

            on:click={() => selectedColour = key}>

            <span class="swatch" style:background={draft.colours[key]} aria-hidden="true"></span>{label}

          </button>

        {/each}

      </div>

      <div class="colour-edit">

        <input type="color" aria-label="Pick colour" value={draft.colours[selectedColour].slice(0, 7)}

          on:input={(event) => updateColour(event.currentTarget.value + draft!.colours[selectedColour].slice(7))} />

        <label class="hex-field">Hex colour<input type="text" maxlength="9" spellcheck="false" bind:value={hexInput} on:change={updateHex} aria-invalid={!!error && !isThemeColour(hexInput)} /></label>

        <label class="opacity-field">Opacity

          <input type="range" min="0" max="100" step="1"

            value={Math.round(parseInt(draft.colours[selectedColour].slice(7) || 'ff', 16) / 255 * 100)}

            on:input={(event) => updateOpacity(event.currentTarget.value)} />

        </label>

      </div>

      <h4 class="sec-h">Palette</h4>

      <div class="palette" aria-label="Theme palette">

        {#each draft.palette as colour, index (`${index}-${colour}`)}

          <button type="button" class="palette-colour" style:background={colour} title={colour} aria-label={`Use ${colour}`}

            on:click={() => updateColour(colour)}></button>

        {/each}

      </div>

      <div class="toolbar">

        <button type="button" class="ghost-btn" disabled={draft.palette.length >= 64 || draft.palette.includes(draft.colours[selectedColour])} on:click={addToPalette}>Add colour</button>

        <button type="button" class="ghost-btn" disabled={!draft.palette.includes(draft.colours[selectedColour])} on:click={removeFromPalette}>Remove colour</button>

      </div>

      <label class="field">Sender name lightness

        <input type="range" min="0" max="100" step="1" bind:value={draft.nameLightness} />

      </label>

      <div class="theme-preview" style={themeStyle(draft)} aria-label="Theme preview">

        <div class="preview-heading">{draft.name || 'Your theme'}<span class="preview-muted">just now</span></div>

        <p>A little room to make your own. <span class="preview-link">A shared link</span></p>

        <div class="preview-status"><span class="preview-ok">Connected</span><span class="preview-warn">Warning</span><span class="preview-error">Error</span></div>

        <div class="preview-composer"><span class="preview-muted">Write a message…</span><span class="primary-btn" aria-hidden="true">Send</span></div>

      </div>

      <label class="preview-toggle"><input type="checkbox" bind:checked={previewApp} />Preview across the app</label>

      <div class="toolbar">

        <button type="button" class="primary-btn" disabled={!draft.name.trim() || !isThemeColour(hexInput)} on:click={() => draft && saveTheme(draft, editingId)}>Save theme</button>

        {#if editingId}<button type="button" class="ghost-btn" disabled={!draft.name.trim() || !isThemeColour(hexInput)} on:click={() => draft && saveTheme(draft)}>Save as new</button>{/if}

        <button type="button" class="ghost-btn" on:click={() => draft && exportTheme(draft)}>Export draft</button>

        <button type="button" class="ghost-btn" on:click={() => { draft = null; previewApp = false; error = ''; notice = ''; }}>Cancel</button>

      </div>

    </div>

  {/if}

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

  {#if notice}<p class="theme-notice" role="status">{notice}</p>{/if}

</section>

<style>

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

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

  .theme-opt, .role-opt { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-size: 13px; cursor: pointer; text-align: left; }

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

  .theme-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

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

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

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

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

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

  [data-swatch='malicious'] .swatch { background: #1b2021; border-color: #5abfc9; box-shadow: inset -6px 0 #ffb852; }

  .toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

  .file-input { display: none; }

  .accent-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }

  .accent-row label { flex: 1; }

  input[type='color'] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; }

  .editor { margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); }

  .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }

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

  .colour-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 6px; max-height: 210px; overflow-y: auto; padding: 2px; }

  .colour-edit { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 14px 0; }

  .hex-field, .opacity-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }

  .hex-field { flex: 1; min-width: 100px; }

  .opacity-field { flex: 1; min-width: 100px; }

  input[type='range'] { width: 100%; accent-color: var(--accent); }

  .palette { display: flex; flex-wrap: wrap; gap: 6px; }

  .palette-colour { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }

  .toolbar + .field { margin-top: 14px; }

  .theme-preview { margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); color: var(--text); font-size: 13px; }

  .preview-heading { display: flex; gap: 10px; flex-wrap: wrap; font-weight: 600; }

  .preview-muted { color: var(--muted); font-size: 12px; font-weight: 400; }

  .preview-link { color: var(--accent); }

  .preview-status { display: flex; gap: 10px; flex-wrap: wrap; }

  .preview-ok { color: var(--ok-text); }

  .preview-warn { color: var(--warn-text); background: var(--warn-bg); }

  .preview-error { color: var(--danger-text); background: var(--danger-bg); }

  .preview-composer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; margin-top: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); }

  .preview-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 12px; }

  .theme-error { color: var(--danger-text); background: var(--danger-bg); padding: 8px; border-radius: var(--r-sm); }

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

</style>