synops/frontend/src/lib/components/traits/WebViewerTrait.svelte

<script lang="ts">
	/**
	 * Web Viewer — vis en URL eller node-HTML i en BlockShell.
	 *
	 * Bruksområder:
	 * - Preview av publiserte artikler
	 * - Ekstern referanse mens du jobber
	 * - Admin-sider (Authentik, Forgejo, gamle /admin/*)
	 * - Dokumentasjon, API-referanser
	 */
	import type { Node } from '$lib/realtime';

	interface Props {
		collection: Node | undefined;
		config: Record<string, unknown>;
		userId?: string;
		accessToken?: string;
	}

	let { collection, config, userId, accessToken }: Props = $props();

	let url = $state((config.url as string) ?? '');
	let inputUrl = $state(url);
	let history = $state<string[]>([]);
	let historyIndex = $state(-1);

	function navigate(newUrl: string) {
		if (!newUrl.trim()) return;
		// Legg til https:// hvis mangler
		let resolved = newUrl.trim();
		if (!resolved.startsWith('http://') && !resolved.startsWith('https://')) {
			resolved = 'https://' + resolved;
		}
		if (resolved !== url) {
			// Legg til i historikk
			if (url) {
				history = [...history.slice(0, historyIndex + 1), url];
				historyIndex = history.length;
			}
			url = resolved;
			inputUrl = resolved;
		}
	}

	function goBack() {
		if (historyIndex < 0 || history.length === 0) return;
		url = history[historyIndex];
		inputUrl = url;
		historyIndex--;
	}

	function goForward() {
		if (historyIndex >= history.length - 1) return;
		historyIndex++;
		url = history[historyIndex + 1] ?? url;
		inputUrl = url;
	}

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Enter') {
			navigate(inputUrl);
		}
	}

	function refresh() {
		const current = url;
		url = '';
		requestAnimationFrame(() => { url = current; });
	}

	// Hurtiglenker
	const bookmarks = [
		{ label: 'Hjem', url: 'https://ws.synops.no' },
		{ label: 'Admin', url: 'https://ws.synops.no/admin' },
		{ label: 'Helse', url: 'https://ws.synops.no/admin/health' },
		{ label: 'Jobber', url: 'https://ws.synops.no/admin/jobs' },
		{ label: 'Forbruk', url: 'https://ws.synops.no/admin/usage' },
		{ label: 'Auth', url: 'https://auth.synops.no' },
		{ label: 'Git', url: 'https://git.synops.no' },
		{ label: 'Synops.no', url: 'https://synops.no' },
	];
</script>

<div class="wv">
	<!-- URL-bar -->
	<div class="wv-bar">
		<button class="wv-nav-btn" onclick={goBack} disabled={historyIndex < 0} title="Tilbake">←</button>
		<button class="wv-nav-btn" onclick={goForward} disabled={historyIndex >= history.length - 1} title="Frem">→</button>
		<button class="wv-nav-btn" onclick={refresh} title="Oppdater">↻</button>
		<input
			class="wv-url"
			type="text"
			bind:value={inputUrl}
			onkeydown={handleKeydown}
			placeholder="Skriv inn URL..."
		/>
		<button class="wv-go-btn" onclick={() => navigate(inputUrl)}>Gå</button>
	</div>

	<!-- Bokmerker -->
	<div class="wv-bookmarks">
		{#each bookmarks as bm (bm.url)}
			<button
				class="wv-bookmark"
				class:wv-bookmark-active={url === bm.url}
				onclick={() => navigate(bm.url)}
			>{bm.label}</button>
		{/each}
	</div>

	<!-- Innhold -->
	{#if url}
		<iframe
			class="wv-frame"
			src={url}
			title="Web Viewer"
			sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
		></iframe>
	{:else}
		<div class="wv-empty">
			<p>Skriv inn en URL eller velg et bokmerke</p>
		</div>
	{/if}
</div>

<style>
	.wv { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

	.wv-bar {
		display: flex; gap: 4px; padding: 6px 8px;
		border-bottom: 1px solid var(--color-border, #2a2a2e);
		align-items: center;
	}
	.wv-nav-btn {
		border: none; background: transparent; cursor: pointer;
		font-size: 14px; color: var(--color-text-muted, #8a8a96);
		padding: 2px 6px; border-radius: 4px; line-height: 1;
	}
	.wv-nav-btn:hover:not(:disabled) { background: var(--color-surface-hover, #242428); color: var(--color-text, #e8e8ec); }
	.wv-nav-btn:disabled { opacity: 0.3; cursor: default; }

	.wv-url {
		flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 12px;
		font-family: monospace;
	}
	.wv-go-btn {
		border: none; background: var(--color-accent, #6366f1); color: white;
		padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer;
	}
	.wv-go-btn:hover { background: var(--color-accent-hover, #7577f5); }

	.wv-bookmarks {
		display: flex; gap: 2px; padding: 4px 8px; overflow-x: auto;
		border-bottom: 1px solid var(--color-border, #2a2a2e);
	}
	.wv-bookmark {
		border: none; background: transparent; cursor: pointer;
		font-size: 11px; color: var(--color-text-dim, #5a5a66);
		padding: 2px 8px; border-radius: 3px; white-space: nowrap;
	}
	.wv-bookmark:hover { background: var(--color-surface-hover, #242428); color: var(--color-text-muted, #8a8a96); }
	.wv-bookmark-active { color: var(--color-accent, #6366f1); background: var(--color-accent-glow, rgba(99,102,241,0.15)); }

	.wv-frame {
		flex: 1; border: none; width: 100%; min-height: 0;
		background: white;
	}

	.wv-empty {
		flex: 1; display: flex; align-items: center; justify-content: center;
		color: var(--color-text-dim, #5a5a66); font-size: 13px;
	}
</style>