llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogExportSettings.svelte

<script lang="ts">
	import * as AlertDialog from '$lib/components/ui/alert-dialog';
	import { Checkbox } from '$lib/components/ui/checkbox';
	import Label from '$lib/components/ui/label/label.svelte';
	import { Shield, ShieldOff } from '@lucide/svelte';

	let {
		open = $bindable(),
		includeSensitiveData = $bindable(false),
		onCancel,
		onConfirm
	}: {
		open: boolean;
		includeSensitiveData: boolean;
		onCancel: () => void;
		onConfirm: () => void;
	} = $props();

	function handleOpenChange(newOpen: boolean) {
		if (!newOpen) {
			onCancel();
		}
	}
</script>

<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
	<AlertDialog.Content>
		<AlertDialog.Header>
			<AlertDialog.Title class="flex items-center gap-2">
				{#if includeSensitiveData}
					<ShieldOff class="h-5 w-5 text-destructive" />
				{:else}
					<Shield class="h-5 w-5 text-destructive" />
				{/if}
				Export Settings
			</AlertDialog.Title>

			<AlertDialog.Description>
				{#if includeSensitiveData}
					<p class="text-amber-500">
						Warning: This export will include sensitive data such as API keys and MCP server custom
						headers (e.g., authorization tokens). Do not share this file with anyone you don't
						trust.
					</p>
				{:else}
					<p>
						Sensitive data (API keys, MCP server custom headers) will not be included in the export
						to protect your credentials.
					</p>
				{/if}
			</AlertDialog.Description>
		</AlertDialog.Header>

		<div class="flex items-center gap-2 py-2">
			<Checkbox id="include-sensitive" bind:checked={includeSensitiveData} />

			<Label
				for="include-sensitive"
				class="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
			>
				{#if includeSensitiveData}
					<span class="text-destructive">Include sensitive data (not recommended)</span>
				{:else}
					<span>Include sensitive data</span>
				{/if}
			</Label>
		</div>

		<AlertDialog.Footer>
			<AlertDialog.Cancel onclick={onCancel}>Cancel</AlertDialog.Cancel>
			<AlertDialog.Action
				onclick={onConfirm}
				class="bg-destructive text-white hover:bg-destructive/80"
			>
				{#if includeSensitiveData}
					Export Anyway
				{:else}
					Export Without Sensitive Data
				{/if}
			</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>