Files
haos-hacs-immich-album-watcher/frontend/src/lib/components/Modal.svelte
alexei.dolgolyov 381de98c40
Some checks failed
Validate / Hassfest (push) Has been cancelled
Comprehensive review fixes: security, performance, code quality, and UI polish
Backend: Fix CORS wildcard+credentials, add secret key warning, remove raw
API keys from sync endpoint, fix N+1 queries in watcher/sync, fix
AttributeError on event_types, delete dead scheduled.py/templates.py,
add limit cap on history, re-validate server on URL/key update, apply
tracking/template config IDs in update_target.

HA Integration: Replace datetime.now() with dt_util.now(), fix notification
queue to only remove successfully sent items, use album UUID for entity
unique IDs, add shared links dirty flag and users cache hourly refresh,
deduplicate _is_quiet_hours, add HTTP timeouts, cache albums in config
flow, change iot_class to local_polling.

Frontend: Make i18n reactive via $state (remove window.location.reload),
add Modal transitions/a11y/Escape key, create ConfirmModal replacing all
confirm() calls, add error handling to all pages, replace Unicode nav
icons with MDI SVGs, add card hover effects, dashboard stat icons, global
focus-visible styles, form slide transitions, mobile responsive bottom
nav, fix password error color, add ~20 i18n keys (EN/RU).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 18:34:31 +03:00

55 lines
1.5 KiB
Svelte

<script lang="ts">
import { fade, fly } from 'svelte/transition';
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}
<div
role="presentation"
class="fixed inset-0 z-[9999] flex items-center justify-center"
transition:fade={{ duration: 150 }}
>
<!-- Backdrop -->
<div
class="absolute inset-0 bg-black/50"
onclick={onclose}
role="presentation"
></div>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<!-- Panel -->
<div
role="dialog"
aria-modal="true"
aria-label={title}
tabindex="-1"
class="relative bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg shadow-xl w-full max-w-md mx-4 p-5"
onclick={(e) => e.stopPropagation()}
onkeydown={(e) => { if (e.key === 'Escape') onclose(); }}
transition:fly={{ y: -20, duration: 200 }}
>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">{title}</h3>
<button onclick={onclose}
class="text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] text-xl leading-none cursor-pointer bg-transparent border-none p-1 transition-colors"
aria-label="Close">
&times;
</button>
</div>
{@render children()}
</div>
</div>
{/if}