electric-cherry/src/lib/ui/components/ConfigTextEditor.svelte

<script lang="ts">
    import Field from '$ui/components/primitives/Field.svelte';
    import Input from '$ui/components/primitives/Input.svelte';
    import {
        addConfigSetting,
        changeConfigValue,
        configLines,
        configWarnings
    } from '$lib/config-workbench.js';
    import Button from './primitives/Button.svelte';
    let {
        text = $bindable(''),
        overlay = false,
        disabled = false
    }: { text?: string; overlay?: boolean; disabled?: boolean } = $props();
    let mode = $state<'raw' | 'settings'>('raw');
    let search = $state('');
    let newKey = $state('');
    let newValue = $state('');
    let addError = $state('');
    function addSetting() {
        try {
            text = addConfigSetting(text, newKey, newValue);
            search = '';
            newKey = '';
            newValue = '';
            addError = '';
        } catch (error) {
            addError = (error as Error).message;
        }
    }
    function addOnEnter(event: KeyboardEvent) {
        if (event.key === 'Enter') {
            event.preventDefault();
            if (!disabled && newKey.trim() && newValue.trim()) addSetting();
        }
    }
    const entries = $derived(configLines(text));
    const visible = $derived(
        entries.filter((e) => `${e.key} ${e.value}`.toLowerCase().includes(search.toLowerCase()))
    );
    const warnings = $derived(configWarnings(text, overlay));
</script>

<div class="editor">
    <div class="toolbar">
        <div class="switch" aria-label="Editor view">
            <button
                type="button"
                class:active={mode === 'raw'}
                aria-pressed={mode === 'raw'}
                onclick={() => (mode = 'raw')}>Raw .cfg</button
            >
            <button
                type="button"
                class:active={mode === 'settings'}
                aria-pressed={mode === 'settings'}
                onclick={() => (mode = 'settings')}>Settings <span>{entries.length}</span></button
            >
        </div>
        <span class="hint">{text.split(/\r?\n/).length} lines</span>
    </div>
    {#if mode === 'raw'}
        <textarea
            aria-label="Config contents"
            bind:value={text}
            {disabled}
            spellcheck="false"
            rows="12"
            placeholder={'// Add your settings\nset g_inactivity "0"'}
        ></textarea>
    {:else}
        <div class="settings">
            <Field label="Find a setting" hiddenLabel class="search"
                ><Input
                    aria-label="Find a setting"
                    bind:value={search}
                    placeholder="Find a setting…"
                /></Field
            >
            <p class="hint">
                Edit values and inline comments. Other commands and formatting stay in the raw file.
            </p>
            {#each visible as entry (entry.index)}
                <Field class="setting"
                    >{#snippet label()}<span
                            ><code>{entry.key}</code><small>Line {entry.index + 1}</small></span
                        >{/snippet}
                    <Input
                        mono
                        value={entry.value}
                        {disabled}
                        aria-label={`${entry.key}, line ${entry.index + 1}`}
                        oninput={(e) =>
                            (text = changeConfigValue(text, entry.index, e.currentTarget.value))}
                    />
                </Field>
            {:else}<p class="hint">
                    {entries.length ? 'No matching settings.' : 'Add your first setting below.'}
                </p>{/each}
            <div class="add-setting">
                <Field label="Setting name">
                    <Input
                        mono
                        bind:value={newKey}
                        onkeydown={addOnEnter}
                        placeholder="g_inactivity"
                        {disabled}
                    /></Field
                ><Field label="Value">
                    <Input
                        mono
                        bind:value={newValue}
                        onkeydown={addOnEnter}
                        placeholder="0"
                        {disabled}
                    /></Field
                ><Button
                    size="sm"
                    onclick={addSetting}
                    disabled={disabled || !newKey.trim() || !newValue.trim()}>Add setting</Button
                >
            </div>
            {#if addError}<p class="warnings" role="alert">{addError}</p>{/if}
        </div>
    {/if}
</div>
{#if warnings.length}
    <details
        class="warnings"
        open={warnings.some((w) => w.includes('ignored') || w.includes('no value'))}
    >
        <summary
            >{warnings.length} configuration {warnings.length === 1 ? 'note' : 'notes'} — review before
            saving</summary
        >
        <ul>
            {#each warnings as warning}<li>{warning}</li>{/each}
        </ul>
    </details>
{/if}

<style>
    .editor {
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--surface-sunken);
    }
    .toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        gap: 12px;
        border-bottom: 1px solid var(--border-subtle);
    }
    .switch {
        display: flex;
        gap: 4px;
    }
    button {
        font: inherit;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        border: 0;
        border-radius: var(--radius-sm);
        padding: 8px 12px;
        background: transparent;
        cursor: pointer;
    }
    button.active {
        color: var(--text-primary);
        background: var(--surface-raised);
    }
    button span {
        margin-left: 8px;
        color: var(--text-secondary);
    }
    button:focus-visible,
    textarea:focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: -2px;
    }
    textarea {
        display: block;
        width: 100%;
        height: 360px;
        min-height: 240px;
        box-sizing: border-box;
        resize: vertical;
        border: 0;
        padding: var(--space-5);
        background: transparent;
        color: var(--text-primary);
        font: var(--text-sm)/1.8 var(--font-mono);
        tab-size: 4;
    }
    textarea:disabled {
        opacity: 0.65;
    }
    .settings {
        padding: var(--space-4);
        max-height: 520px;
        overflow: auto;
    }

    .settings :global(.setting) {
        display: grid;
        grid-template-columns: minmax(140px, 1fr) minmax(0, 1.4fr);
        align-items: center;
        gap: 16px;
        padding: 12px 0;
        border-top: 1px solid var(--border-subtle);
    }
    .settings :global(.setting span) {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .add-setting {
        display: flex;
        align-items: end;
        flex-wrap: wrap;
        gap: 12px;
        border-top: 1px solid var(--border-strong);
        padding-top: 16px;
    }

    .add-setting :global(.field) {
        flex: 1 1 140px;
    }
    code {
        font: var(--text-sm) var(--font-mono);
    }
    small {
        display: block;
        color: var(--text-secondary);
        font-size: var(--text-xs);
        margin-top: 4px;
    }
    .hint {
        color: var(--text-secondary);
        font-size: var(--text-xs);
    }
    .warnings {
        color: var(--state-warning);
        font-size: var(--text-sm);
        padding: 12px 0 0;
    }
    summary {
        cursor: pointer;
    }
    li {
        margin: 6px 0;
    }
    @media (max-width: 600px) {
        .settings :global(.setting) {
            grid-template-columns: 1fr;
            gap: 8px;
        }
        .toolbar > .hint {
            display: none;
        }
    }
    textarea {
        border-color: var(--border-control);
    }
</style>