embycovers/homescreen_editor/lib/SqlModal.svelte

<script>
	import { createEventDispatcher } from 'svelte';
	export let sql = '';

	const dispatch = createEventDispatcher();
	let copied = false;

	function copyToClipboard() {
		navigator.clipboard.writeText(sql).then(() => {
			copied = true;
			setTimeout(() => (copied = false), 2000);
		});
	}

	function download() {
		const blob = new Blob([sql], { type: 'text/sql' });
		const url = URL.createObjectURL(blob);
		const a = document.createElement('a');
		a.href = url;
		a.download = `emby-homescreen-update-${new Date().toISOString().slice(0, 10)}.sql`;
		a.click();
		URL.revokeObjectURL(url);
	}
</script>

<div
	class="overlay"
	role="button"
	tabindex="0"
	aria-label="Close generated SQL modal"
	on:click|self={() => dispatch('close')}
	on:keydown={(event) => (event.key === 'Escape' || event.key === 'Enter') && dispatch('close')}
>
	<div class="modal" role="dialog" aria-modal="true" aria-label="Generated SQL">
		<div class="modal-header">
			<h3>Generated SQL</h3>
			<button class="close-btn" on:click={() => dispatch('close')}>×</button>
		</div>

		<div class="modal-body">
			<pre class="sql-output">{sql}</pre>
		</div>

		<div class="modal-actions">
			<button class="action-btn secondary" on:click={copyToClipboard}>
				{copied ? '✓ Copied' : 'Copy to clipboard'}
			</button>
			<button class="action-btn primary" on:click={download}> Download .sql file </button>
		</div>
	</div>
</div>

<style>
	.overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.82);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		padding: 20px;
	}
	.modal {
		background: #0f1116;
		border: 1px solid var(--border);
		border-radius: 14px;
		width: 100%;
		max-width: 720px;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
	}
	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 20px;
		border-bottom: 1px solid var(--border);
	}
	.modal-header h3 {
		margin: 0;
		font-size: 16px;
		color: var(--text);
	}
	.close-btn {
		all: unset;
		cursor: pointer;
		font-size: 22px;
		color: var(--text-muted);
		line-height: 1;
	}
	.modal-body {
		flex: 1;
		overflow-y: auto;
		padding: 16px 20px;
	}
	.sql-output {
		font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
		font-size: 12px;
		line-height: 1.6;
		color: var(--text);
		white-space: pre-wrap;
		word-break: break-all;
		margin: 0;
		background: #12151b;
		padding: 14px;
		border-radius: 10px;
		border: 1px solid var(--border);
	}
	.modal-actions {
		display: flex;
		gap: 10px;
		padding: 16px 20px;
		border-top: 1px solid var(--border);
		justify-content: flex-end;
	}
	.action-btn {
		all: unset;
		cursor: pointer;
		padding: 8px 18px;
		border-radius: 10px;
		font-size: 13px;
		font-weight: 600;
		font-family: inherit;
	}
	.action-btn.secondary {
		border: 1px solid var(--border);
		color: var(--text);
		background: #15181e;
	}
	.action-btn.secondary:hover {
		background: var(--surface-hover);
	}
	.action-btn.primary {
		background: var(--accent);
		border: 1px solid rgba(42, 215, 239, 0.35);
		color: #031014;
	}
	.action-btn.primary:hover {
		background: #35d2ea;
	}
</style>