Papure/src/lib/components/SettingsModal.svelte

<script lang="ts">
	import XIcon from '@lucide/svelte/icons/x';
	import { settings } from '$lib/state/settings.svelte';
	import { workspace } from '$lib/state/workspace.svelte';
	import { sync } from '$lib/sync/sync.svelte';
	import { GitHub } from '$lib/sync/github';

	type Tab = 'appearance' | 'input' | 'sync';
	let tab = $state<Tab>('appearance');
	const s = settings.data;

	let testing = $state(false);
	let testResult = $state<{ ok: boolean; text: string } | null>(null);

	function save() {
		settings.save();
	}

	function close() {
		settings.save();
		sync.schedule();
		workspace.settingsOpen = false;
	}

	async function testConnection() {
		save();
		testing = true;
		testResult = null;
		try {
			const repo = await new GitHub(s.github).checkAccess();
			testResult = { ok: true, text: `Connected. Default branch: ${repo.default_branch}` };
		} catch (e) {
			testResult = { ok: false, text: e instanceof Error ? e.message : String(e) };
		} finally {
			testing = false;
		}
	}

	async function syncNow() {
		save();
		sync.schedule();
		await sync.syncNow();
		if (sync.status === 'error') testResult = { ok: false, text: sync.error };
		else testResult = { ok: true, text: 'Synced.' };
	}
</script>

<svelte:window onkeydown={(e) => e.key === 'Escape' && close()} />

<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
<div class="backdrop" onclick={(e) => e.target === e.currentTarget && close()}>
	<div class="modal" role="dialog" aria-modal="true" aria-label="Settings">
		<nav>
			<div class="nav-title">Options</div>
			<button class:active={tab === 'appearance'} onclick={() => (tab = 'appearance')}>Appearance</button>
			<button class:active={tab === 'input'} onclick={() => (tab = 'input')}>Pen &amp; touch</button>
			<button class:active={tab === 'sync'} onclick={() => (tab = 'sync')}>Sync</button>
		</nav>
		<section>
			<button class="icon-btn close" title="Close" onclick={close}><XIcon size={18} /></button>

			{#if tab === 'appearance'}
				<h2>Appearance</h2>
				<div class="row">
					<div><div class="name">Theme</div><div class="desc">Follow the system, or pick one.</div></div>
					<select bind:value={s.theme} onchange={save}>
						<option value="system">System</option>
						<option value="light">Light</option>
						<option value="dark">Dark</option>
					</select>
				</div>
				<div class="row">
					<div>
						<div class="name">Pages in dark theme</div>
						<div class="desc">Dim pages to match the theme, or keep them white like paper. Only affects the screen; the PDF is always on white.</div>
					</div>
					<select bind:value={s.pageStyle} onchange={save}>
						<option value="match">Match theme</option>
						<option value="paper">Paper</option>
					</select>
				</div>
			{:else if tab === 'input'}
				<h2>Pen &amp; touch</h2>
				<div class="row">
					<div><div class="name">Draw with finger</div><div class="desc">When off, a single finger always pans; only pen and mouse draw. Once you use a pen, fingers only pan and zoom.</div></div>
					<input type="checkbox" class="toggle" bind:checked={s.fingerDraw} onchange={save} />
				</div>
				<h3>Palm rejection</h3>
				<div class="row">
					<div><div class="name">Pen session lockout</div><div class="desc">Ignore touches while the pen is writing, and finger ink for 5 seconds after it was used.</div></div>
					<input type="checkbox" class="toggle" bind:checked={s.palm.penSession} onchange={save} />
				</div>
				<div class="row">
					<div><div class="name">Reject wide contacts</div><div class="desc">Ignore touches with a palm-sized contact area (over 35 px).</div></div>
					<input type="checkbox" class="toggle" bind:checked={s.palm.geometry} onchange={save} />
				</div>
				<div class="row">
					<div><div class="name">Reject touches right after pen activity</div><div class="desc">Ignore touches within 150 ms of pen activity.</div></div>
					<input type="checkbox" class="toggle" bind:checked={s.palm.timing} onchange={save} />
				</div>
				<div class="row">
					<div><div class="name">Lock out on pen hover</div><div class="desc">Ignore finger ink while the pen hovers above the screen.</div></div>
					<input type="checkbox" class="toggle" bind:checked={s.palm.hover} onchange={save} />
				</div>
			{:else}
				<h2>Sync</h2>
				<p class="intro">
					Canvases are stored as PDFs in a GitHub repository. Changes save on this device straight away and are pushed
					periodically, or when you press sync. If a file changed in both places, the newer version wins.
				</p>
				<div class="row">
					<div>
						<div class="name">Personal access token</div>
						<div class="desc">A fine-grained token with <b>Contents: read &amp; write</b> on the repository. It's stored only in this browser.</div>
					</div>
					<input type="password" autocomplete="off" bind:value={s.github.token} onchange={save} placeholder="github_pat_…" />
				</div>
				<div class="row">
					<div><div class="name">Repository</div><div class="desc">Owner and name.</div></div>
					<div class="pair">
						<input bind:value={s.github.owner} onchange={save} placeholder="owner" />
						<span>/</span>
						<input bind:value={s.github.repo} onchange={save} placeholder="notes" />
					</div>
				</div>
				<div class="row">
					<div><div class="name">Branch</div></div>
					<input bind:value={s.github.branch} onchange={save} placeholder="main" />
				</div>
				<div class="row">
					<div><div class="name">Folder in repository</div><div class="desc">Leave empty to use the repository root.</div></div>
					<input bind:value={s.github.dir} onchange={save} placeholder="(root)" />
				</div>
				<div class="row">
					<div><div class="name">Push automatically every</div><div class="desc">Minutes. 0 means only when you press sync.</div></div>
					<input type="number" min="0" max="120" bind:value={s.pushInterval} onchange={() => (save(), sync.schedule())} />
				</div>
				<div class="actions">
					<button class="btn" disabled={testing || !settings.githubReady} onclick={testConnection}>Test connection</button>
					<button class="btn primary" disabled={!settings.githubReady || sync.status === 'syncing'} onclick={syncNow}>
						{sync.status === 'syncing' ? 'Syncing…' : 'Sync now'}
					</button>
				</div>
				{#if testResult}
					<p class="result" class:bad={!testResult.ok}>{testResult.text}</p>
				{/if}
			{/if}
		</section>
	</div>
</div>

<style>
	.backdrop {
		position: fixed;
		inset: 0;
		z-index: 50;
		display: grid;
		place-items: center;
		background: rgba(0, 0, 0, 0.45);
		padding: 16px;
	}
	.modal {
		display: flex;
		width: min(860px, 100%);
		height: min(600px, 100%);
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: 10px;
		box-shadow: var(--shadow);
		overflow: hidden;
	}
	nav {
		width: 190px;
		flex: none;
		background: var(--bg-2);
		border-right: 1px solid var(--border);
		padding: 16px 8px;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.nav-title {
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--faint);
		padding: 0 10px 8px;
	}
	nav button {
		text-align: left;
		border: 0;
		background: none;
		padding: 6px 10px;
		border-radius: 4px;
		color: var(--muted);
		cursor: pointer;
	}
	nav button:hover {
		background: var(--hover);
		color: var(--text);
	}
	nav button.active {
		background: var(--accent-soft);
		color: var(--text);
	}
	section {
		position: relative;
		flex: 1;
		overflow: auto;
		padding: 20px 28px 28px;
	}
	.close {
		position: absolute;
		right: 12px;
		top: 12px;
	}
	h2 {
		font-size: 17px;
		margin: 4px 0 16px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--border);
	}
	h3 {
		font-size: 13px;
		margin: 24px 0 4px;
		color: var(--muted);
	}
	.intro {
		color: var(--muted);
		margin: 0 0 8px;
		line-height: 1.5;
	}
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding: 12px 0;
		border-bottom: 1px solid var(--border);
	}
	.row > :first-child {
		flex: 1;
	}
	.name {
		color: var(--text);
	}
	.desc {
		color: var(--muted);
		font-size: 12px;
		margin-top: 3px;
		line-height: 1.45;
	}
	.row input:not([type='checkbox']),
	.row select {
		width: 220px;
	}
	.row input[type='number'] {
		width: 80px;
	}
	.pair {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.pair input {
		width: 104px !important;
	}
	.pair span {
		color: var(--faint);
	}
	.toggle {
		appearance: none;
		width: 36px;
		height: 20px;
		border-radius: 10px;
		background: var(--bg-3);
		border: 0;
		padding: 0;
		position: relative;
		cursor: pointer;
		flex: none;
		transition: background 0.15s;
	}
	.toggle::after {
		content: '';
		position: absolute;
		top: 2px;
		left: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		transition: transform 0.15s;
	}
	.toggle:checked {
		background: var(--accent);
	}
	.toggle:checked::after {
		transform: translateX(16px);
	}
	.actions {
		display: flex;
		gap: 8px;
		justify-content: flex-end;
		margin-top: 18px;
	}
	.btn:disabled {
		opacity: 0.5;
		cursor: default;
	}
	.result {
		text-align: right;
		color: var(--success);
		margin: 10px 0 0;
	}
	.result.bad {
		color: var(--danger);
	}
	@media (max-width: 640px) {
		.modal {
			flex-direction: column;
		}
		nav {
			width: auto;
			flex-direction: row;
			border-right: 0;
			border-bottom: 1px solid var(--border);
			padding: 8px;
		}
		.nav-title {
			display: none;
		}
		.row {
			flex-direction: column;
			align-items: stretch;
			gap: 8px;
		}
		.row input:not([type='checkbox']),
		.row select {
			width: 100%;
		}
	}
</style>