alexei.dolgolyov
6076e6d8ca
Some checks failed
Validate / Hassfest (push) Has been cancelled
- Modal: revert to inline styles (Tailwind fixed class broken). Added max-height: 80vh with overflow-y: auto for scrollable content. - Template configs: preview is now per message slot via dropdown (assets added/removed/renamed/deleted, periodic, scheduled, memory) instead of hardcoded to assets_added only. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
40 lines
1.5 KiB
Svelte
40 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
let { open = false, title = '', onclose, children } = $props<{
|
|
open: boolean;
|
|
title?: string;
|
|
onclose: () => void;
|
|
children: import('svelte').Snippet;
|
|
}>();
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
if (e.key === 'Escape') onclose();
|
|
}
|
|
</script>
|
|
|
|
<svelte:window onkeydown={open ? handleKeydown : undefined} />
|
|
|
|
{#if open}
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5);"
|
|
onclick={onclose}
|
|
>
|
|
<div
|
|
style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.3); width: 100%; max-width: 32rem; max-height: 80vh; margin: 1rem; display: flex; flex-direction: column;"
|
|
onclick={(e) => e.stopPropagation()}
|
|
>
|
|
<div style="display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.25rem 0.75rem;">
|
|
<h3 style="font-size: 1.125rem; font-weight: 600;">{title}</h3>
|
|
<button onclick={onclose}
|
|
style="color: var(--color-muted-foreground); font-size: 1.25rem; line-height: 1; cursor: pointer; background: none; border: none; padding: 0.25rem;">
|
|
×
|
|
</button>
|
|
</div>
|
|
<div style="padding: 0 1.25rem 1.25rem; overflow-y: auto;">
|
|
{@render children()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|