feat: collapsible accordion slots for template editing UX

Template slot editors (notification + command) now use collapsible accordion rows instead of showing all editors at once. Each slot displays a compact header with status pill (empty/valid/warning/error). Adds slot name filtering and a preview toggle button that swaps between editor and rendered preview views.
2026-03-24 17:06:03 +03:00
parent d0bc767e98
commit b1ab5b884f
5 changed files with 274 additions and 44 deletions
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import MdiIcon from './MdiIcon.svelte';
+
+	let {
+		label,
+		description = '',
+		expanded = false,
+		status = 'empty',
+		ontoggle,
+		children,
+	} = $props<{
+		label: string;
+		description?: string;
+		expanded: boolean;
+		status: 'empty' | 'valid' | 'error' | 'warning';
+		ontoggle: () => void;
+		children: import('svelte').Snippet;
+	}>();
+
+	const STATUS_MAP: Record<string, { icon: string; color: string; bg: string }> = {
+		empty: { icon: 'mdiCircleOutline', color: 'var(--color-muted-foreground)', bg: 'transparent' },
+		valid: { icon: 'mdiCheckCircle', color: 'var(--color-success-fg)', bg: 'var(--color-success-bg)' },
+		warning: { icon: 'mdiAlert', color: '#d97706', bg: 'rgba(217, 119, 6, 0.1)' },
+		error: { icon: 'mdiAlertCircle', color: 'var(--color-error-fg)', bg: 'var(--color-error-bg)' },
+	};
+	const statusConfig = $derived(STATUS_MAP[status]);
+</script>
+
+<div class="slot-root" class:slot-expanded={expanded}>
+	<button type="button" class="slot-header" onclick={ontoggle}>
+		<span class="slot-chevron" class:slot-chevron-open={expanded}>
+			<MdiIcon name="mdiChevronRight" size={18} />
+		</span>
+
+		<span class="slot-label">{description || label}</span>
+
+		<span class="slot-status-pill" style="color: {statusConfig.color}; background: {statusConfig.bg};">
+			<MdiIcon name={statusConfig.icon} size={14} />
+		</span>
+	</button>
+
+	{#if expanded}
+		<div class="slot-body" transition:slide={{ duration: 150 }}>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.slot-root {
+		border: 1px solid var(--color-border);
+		border-radius: 0.5rem;
+		overflow: hidden;
+		transition: border-color 0.2s ease, box-shadow 0.2s ease;
+	}
+
+	.slot-root:hover {
+		border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-primary) 40%);
+	}
+
+	.slot-expanded {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
+	}
+
+	.slot-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		color: var(--color-foreground);
+		font-size: 0.8125rem;
+		transition: background 0.15s ease;
+	}
+
+	.slot-header:hover {
+		background: color-mix(in srgb, var(--color-muted) 50%, transparent);
+	}
+
+	.slot-chevron {
+		display: inline-flex;
+		color: var(--color-muted-foreground);
+		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		flex-shrink: 0;
+	}
+
+	.slot-chevron-open {
+		transform: rotate(90deg);
+	}
+
+	.slot-label {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.slot-status-pill {
+		display: inline-flex;
+		align-items: center;
+		padding: 0.125rem 0.25rem;
+		border-radius: 0.25rem;
+		flex-shrink: 0;
+	}
+
+	.slot-body {
+		padding: 0.75rem;
+		border-top: 1px solid var(--color-border);
+	}
+</style>