feat: deferred dispatch, release-check provider, settings polish
- Defer quiet-hours dispatches into new deferred_dispatch table; drain job + periodic catch-up scan re-fire at window end with coalescing on (link, event_type, collection_id). - Add ON DELETE SET NULL migration on event_log_id and partial unique index on (link_id, collection_id, event_type) WHERE status='pending'. - Add release-check provider abstraction (Gitea/GitHub) with SSRF-safe URL validation, settings UI cassette, and scheduled polling. - Replace importlib-only version lookup with version.py helper that prefers the higher of installed metadata vs source pyproject so stale editable dev installs stop misreporting. - Aurora frontend polish: MetaStrip component, ReleaseCassette, EventDetailModal expansion, and i18n additions.
This commit is contained in:
@@ -12,6 +12,13 @@
|
||||
}
|
||||
let { event, onclose }: Props = $props();
|
||||
|
||||
// Retain the last non-null event so the modal body stays populated
|
||||
// while the close transition plays after the parent clears `event`.
|
||||
let displayEvent = $state<EventLog | null>(null);
|
||||
$effect(() => {
|
||||
if (event) displayEvent = event;
|
||||
});
|
||||
|
||||
function fmtDateTime(iso: string): string {
|
||||
try {
|
||||
const d = new Date(iso);
|
||||
@@ -21,6 +28,44 @@
|
||||
}
|
||||
}
|
||||
|
||||
/** Humanize a duration in seconds into ``Xd Yh`` / ``Xh Ym`` / ``Xm`` / ``Xs``.
|
||||
*
|
||||
* Used by the deferred-dispatch lifecycle banner to render
|
||||
* ``deferred_for_seconds`` ("held for 8h 23m") rather than an opaque
|
||||
* integer that the user has to mentally divide. Keeps two units so
|
||||
* the magnitude reads correctly across hours-long quiet windows
|
||||
* without becoming noisy for short ones. */
|
||||
function humanDuration(totalSeconds: number): string {
|
||||
if (!Number.isFinite(totalSeconds) || totalSeconds < 0) return '';
|
||||
if (totalSeconds < 60) return `${Math.floor(totalSeconds)}s`;
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
if (minutes < 60) return `${minutes}m`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const remMin = minutes % 60;
|
||||
if (hours < 24) return remMin ? `${hours}h ${remMin}m` : `${hours}h`;
|
||||
const days = Math.floor(hours / 24);
|
||||
const remHours = hours % 24;
|
||||
return remHours ? `${days}d ${remHours}h` : `${days}d`;
|
||||
}
|
||||
|
||||
/** Render an absolute ISO timestamp as a future-relative string.
|
||||
*
|
||||
* "in 8h 23m" / "in 12m". Returns an empty string for past times — the
|
||||
* deferred-until banner shouldn't show a relative offset once the
|
||||
* window has already ended (a follow-up event_log row marks delivery).
|
||||
*/
|
||||
function timeFromNow(iso: string | undefined): string {
|
||||
if (!iso) return '';
|
||||
try {
|
||||
const target = new Date(iso).getTime();
|
||||
const diff = Math.floor((target - Date.now()) / 1000);
|
||||
if (diff <= 0) return '';
|
||||
return humanDuration(diff);
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function issuerLabel(issuer: { id?: number; username?: string; first_name?: string; last_name?: string } | undefined): string {
|
||||
if (!issuer) return '';
|
||||
if (issuer.username) return '@' + issuer.username;
|
||||
@@ -41,47 +86,130 @@
|
||||
goto(path);
|
||||
}
|
||||
|
||||
const issuer = $derived(event?.details?.issuer as { id?: number; username?: string; first_name?: string; last_name?: string } | undefined);
|
||||
const issuer = $derived(displayEvent?.details?.issuer as { id?: number; username?: string; first_name?: string; last_name?: string } | undefined);
|
||||
const issuerText = $derived(issuerLabel(issuer));
|
||||
|
||||
const isCommand = $derived(event?.event_type?.startsWith('command_') ?? false);
|
||||
const isAction = $derived(event?.event_type?.startsWith('action_') ?? false);
|
||||
const isCommand = $derived(displayEvent?.event_type?.startsWith('command_') ?? false);
|
||||
const isAction = $derived(displayEvent?.event_type?.startsWith('action_') ?? false);
|
||||
|
||||
const detailsJson = $derived.by(() => {
|
||||
if (!event?.details) return '';
|
||||
if (!displayEvent?.details) return '';
|
||||
try {
|
||||
return JSON.stringify(event.details, null, 2);
|
||||
return JSON.stringify(displayEvent.details, null, 2);
|
||||
} catch {
|
||||
return String(event.details);
|
||||
return String(displayEvent.details);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Modal open={event !== null} title={event ? t('events.detailTitle') : ''} {onclose}>
|
||||
{#if event}
|
||||
<Modal open={event !== null} title={displayEvent ? t('events.detailTitle') : ''} {onclose}>
|
||||
{#if displayEvent}
|
||||
<div class="event-detail">
|
||||
<!-- Subject + verb -->
|
||||
<div class="hero-row">
|
||||
<MdiIcon name="mdiBell" size={18} />
|
||||
<div>
|
||||
<div class="hero-subject">{event.collection_name || event.event_type}</div>
|
||||
<div class="hero-subject">{displayEvent.collection_name || displayEvent.event_type}</div>
|
||||
<div class="hero-meta">
|
||||
<span class="event-type">{event.event_type}</span>
|
||||
<span class="event-type">{displayEvent.event_type}</span>
|
||||
<span class="dot">·</span>
|
||||
<span>{fmtDateTime(event.created_at)}</span>
|
||||
<span>{fmtDateTime(displayEvent.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dispatch lifecycle (only when the event went through the
|
||||
quiet-hours defer path). Rendered ABOVE the provenance grid
|
||||
because timing of delivery is more interesting than the
|
||||
bot/tracker names when the event is held back. -->
|
||||
{#if displayEvent.details?.dispatch_status === 'deferred'}
|
||||
<section class="lifecycle lifecycle--deferred">
|
||||
<MdiIcon name="mdiPauseCircleOutline" size={18} />
|
||||
<div class="lifecycle-body">
|
||||
<div class="lifecycle-title">{t('events.lifecycle.heldTitle')}</div>
|
||||
<div class="lifecycle-detail">
|
||||
{t('events.lifecycle.heldUntil')}
|
||||
<b>{fmtDateTime(displayEvent.details.deferred_until ?? '')}</b>
|
||||
{#if timeFromNow(displayEvent.details.deferred_until)}
|
||||
<span class="lifecycle-rel">· {t('events.lifecycle.inPrefix')} {timeFromNow(displayEvent.details.deferred_until)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="lifecycle-hint">{t('events.lifecycle.heldHint')}</div>
|
||||
</div>
|
||||
</section>
|
||||
{:else if displayEvent.details?.dispatch_status === 'delivered_after_quiet_hours'}
|
||||
<section class="lifecycle lifecycle--late">
|
||||
<MdiIcon name="mdiClockCheckOutline" size={18} />
|
||||
<div class="lifecycle-body">
|
||||
<div class="lifecycle-title">{t('events.lifecycle.deliveredLateTitle')}</div>
|
||||
{#if displayEvent.details.deferred_for_seconds != null}
|
||||
<div class="lifecycle-detail">
|
||||
{t('events.lifecycle.heldFor')}
|
||||
<b>{humanDuration(displayEvent.details.deferred_for_seconds)}</b>
|
||||
</div>
|
||||
{/if}
|
||||
{#if displayEvent.details.original_event_log_id}
|
||||
<div class="lifecycle-hint">
|
||||
{t('events.lifecycle.originalEvent')} #{displayEvent.details.original_event_log_id}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
{:else if displayEvent.details?.dispatch_status === 'deferred_then_dropped'}
|
||||
<section class="lifecycle lifecycle--dropped">
|
||||
<MdiIcon name="mdiCloseCircleOutline" size={18} />
|
||||
<div class="lifecycle-body">
|
||||
<div class="lifecycle-title">{t('events.lifecycle.droppedTitle')}</div>
|
||||
{#if displayEvent.details.reason}
|
||||
<div class="lifecycle-detail">
|
||||
{t('events.lifecycle.reason')}:
|
||||
<code class="lifecycle-reason">{displayEvent.details.reason}</code>
|
||||
</div>
|
||||
{/if}
|
||||
{#if displayEvent.details.original_event_log_id}
|
||||
<div class="lifecycle-hint">
|
||||
{t('events.lifecycle.originalEvent')} #{displayEvent.details.original_event_log_id}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
{:else if displayEvent.details?.dispatch_status === 'deferred_then_failed'}
|
||||
<section class="lifecycle lifecycle--dropped">
|
||||
<MdiIcon name="mdiAlertCircleOutline" size={18} />
|
||||
<div class="lifecycle-body">
|
||||
<div class="lifecycle-title">{t('events.lifecycle.failedTitle')}</div>
|
||||
{#if displayEvent.details.reason}
|
||||
<div class="lifecycle-detail">
|
||||
{t('events.lifecycle.reason')}:
|
||||
<code class="lifecycle-reason">{displayEvent.details.reason}</code>
|
||||
</div>
|
||||
{/if}
|
||||
{#if displayEvent.details.original_event_log_id}
|
||||
<div class="lifecycle-hint">
|
||||
{t('events.lifecycle.originalEvent')} #{displayEvent.details.original_event_log_id}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
{:else if displayEvent.details?.dispatch_status === 'suppressed_quiet_hours_nondeferrable'}
|
||||
<section class="lifecycle lifecycle--dropped">
|
||||
<MdiIcon name="mdiVolumeOff" size={18} />
|
||||
<div class="lifecycle-body">
|
||||
<div class="lifecycle-title">{t('events.lifecycle.suppressedTitle')}</div>
|
||||
<div class="lifecycle-hint">{t('events.lifecycle.suppressedHint')}</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- Provenance grid -->
|
||||
<dl class="provenance">
|
||||
{#if event.bot_name}
|
||||
{#if displayEvent.bot_name}
|
||||
<dt>{t('events.bot')}</dt>
|
||||
<dd>{event.bot_name}</dd>
|
||||
<dd>{displayEvent.bot_name}</dd>
|
||||
{/if}
|
||||
{#if event.collection_id && isCommand}
|
||||
{#if displayEvent.collection_id && isCommand}
|
||||
<dt>{t('events.chat')}</dt>
|
||||
<dd class="font-mono">{event.collection_id}</dd>
|
||||
<dd class="font-mono">{displayEvent.collection_id}</dd>
|
||||
{/if}
|
||||
{#if issuerText}
|
||||
<dt>{t('events.issuer')}</dt>
|
||||
@@ -90,56 +218,56 @@
|
||||
{#if issuer?.id}<span class="muted font-mono">(id {issuer.id})</span>{/if}
|
||||
</dd>
|
||||
{/if}
|
||||
{#if event.command_tracker_name}
|
||||
{#if displayEvent.command_tracker_name}
|
||||
<dt>{t('events.commandTracker')}</dt>
|
||||
<dd>{event.command_tracker_name}</dd>
|
||||
<dd>{displayEvent.command_tracker_name}</dd>
|
||||
{/if}
|
||||
{#if event.tracker_name}
|
||||
{#if displayEvent.tracker_name}
|
||||
<dt>{t('events.tracker')}</dt>
|
||||
<dd>{event.tracker_name}</dd>
|
||||
<dd>{displayEvent.tracker_name}</dd>
|
||||
{/if}
|
||||
{#if event.action_name}
|
||||
{#if displayEvent.action_name}
|
||||
<dt>{t('events.action')}</dt>
|
||||
<dd>{event.action_name}</dd>
|
||||
<dd>{displayEvent.action_name}</dd>
|
||||
{/if}
|
||||
{#if event.provider_name}
|
||||
{#if displayEvent.provider_name}
|
||||
<dt>{t('events.provider')}</dt>
|
||||
<dd>{event.provider_name}</dd>
|
||||
<dd>{displayEvent.provider_name}</dd>
|
||||
{/if}
|
||||
{#if event.assets_count > 0}
|
||||
{#if displayEvent.assets_count > 0}
|
||||
<dt>{t('events.assetsCount')}</dt>
|
||||
<dd class="font-mono">{event.assets_count}</dd>
|
||||
<dd class="font-mono">{displayEvent.assets_count}</dd>
|
||||
{/if}
|
||||
</dl>
|
||||
|
||||
<!-- Action buttons — deep-link + highlight the related entity card -->
|
||||
<div class="actions">
|
||||
{#if event.provider_id}
|
||||
<button type="button" onclick={() => openEntity('/providers', event.provider_id)}>
|
||||
{#if displayEvent.provider_id}
|
||||
<button type="button" onclick={() => openEntity('/providers', displayEvent.provider_id)}>
|
||||
<MdiIcon name="mdiServer" size={14} />
|
||||
{t('events.openProvider')}
|
||||
</button>
|
||||
{/if}
|
||||
{#if event.telegram_bot_id && isCommand}
|
||||
<button type="button" onclick={() => openEntity('/bots', event.telegram_bot_id)}>
|
||||
{#if displayEvent.telegram_bot_id && isCommand}
|
||||
<button type="button" onclick={() => openEntity('/bots', displayEvent.telegram_bot_id)}>
|
||||
<MdiIcon name="mdiRobotHappy" size={14} />
|
||||
{t('events.openBot')}
|
||||
</button>
|
||||
{/if}
|
||||
{#if event.command_tracker_id && isCommand}
|
||||
<button type="button" onclick={() => openEntity('/command-trackers', event.command_tracker_id)}>
|
||||
{#if displayEvent.command_tracker_id && isCommand}
|
||||
<button type="button" onclick={() => openEntity('/command-trackers', displayEvent.command_tracker_id)}>
|
||||
<MdiIcon name="mdiChat" size={14} />
|
||||
{t('events.openCommandTracker')}
|
||||
</button>
|
||||
{/if}
|
||||
{#if event.action_id && isAction}
|
||||
<button type="button" onclick={() => openEntity('/actions', event.action_id)}>
|
||||
{#if displayEvent.action_id && isAction}
|
||||
<button type="button" onclick={() => openEntity('/actions', displayEvent.action_id)}>
|
||||
<MdiIcon name="mdiPlayCircle" size={14} />
|
||||
{t('events.openAction')}
|
||||
</button>
|
||||
{/if}
|
||||
{#if !isCommand && !isAction && event.tracker_id}
|
||||
<button type="button" onclick={() => openEntity('/notification-trackers', event.tracker_id)}>
|
||||
{#if !isCommand && !isAction && displayEvent.tracker_id}
|
||||
<button type="button" onclick={() => openEntity('/notification-trackers', displayEvent.tracker_id)}>
|
||||
<MdiIcon name="mdiRadar" size={14} />
|
||||
{t('events.openTracker')}
|
||||
</button>
|
||||
@@ -251,4 +379,71 @@
|
||||
word-break: break-word;
|
||||
}
|
||||
.font-mono { font-family: var(--font-mono); }
|
||||
|
||||
/* Dispatch lifecycle banner — appears only when the event took the
|
||||
* quiet-hours defer path. The three colour variants mirror the dashboard
|
||||
* badge palette: primary glow for "held", success for "delivered late",
|
||||
* muted/dim for "dropped" / "failed" / "suppressed".
|
||||
*/
|
||||
.lifecycle {
|
||||
display: flex; align-items: flex-start; gap: 0.7rem;
|
||||
padding: 0.75rem 0.95rem;
|
||||
border-radius: 0.7rem;
|
||||
border: 1px solid var(--color-border);
|
||||
background: color-mix(in oklab, var(--color-foreground) 4%, transparent);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.lifecycle-body {
|
||||
display: flex; flex-direction: column; gap: 0.2rem;
|
||||
flex: 1; min-width: 0;
|
||||
}
|
||||
.lifecycle-title {
|
||||
font-weight: 600;
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
.lifecycle-detail {
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
.lifecycle-detail b {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
}
|
||||
.lifecycle-rel {
|
||||
color: var(--color-muted-foreground);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.lifecycle-hint {
|
||||
color: var(--color-muted-foreground);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
.lifecycle-reason {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
padding: 0.05rem 0.35rem;
|
||||
border-radius: 0.3rem;
|
||||
background: color-mix(in oklab, var(--color-foreground) 8%, transparent);
|
||||
word-break: break-all;
|
||||
}
|
||||
.lifecycle--deferred {
|
||||
border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
|
||||
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
||||
}
|
||||
.lifecycle--deferred :global(svg) {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.lifecycle--late {
|
||||
border-color: color-mix(in srgb, var(--color-success, #16a34a) 35%, transparent);
|
||||
background: color-mix(in srgb, var(--color-success, #16a34a) 8%, transparent);
|
||||
}
|
||||
.lifecycle--late :global(svg) {
|
||||
color: var(--color-success, #16a34a);
|
||||
}
|
||||
.lifecycle--dropped {
|
||||
opacity: 0.92;
|
||||
}
|
||||
.lifecycle--dropped :global(svg) {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
<script lang="ts">
|
||||
import MdiIcon from './MdiIcon.svelte';
|
||||
|
||||
export type MetaTone = 'default' | 'mint' | 'sky' | 'coral' | 'citrus' | 'orchid' | 'lavender';
|
||||
|
||||
export interface MetaTile {
|
||||
icon?: string;
|
||||
label: string;
|
||||
value?: string;
|
||||
hint?: string;
|
||||
tone?: MetaTone;
|
||||
mono?: boolean;
|
||||
href?: string;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
copyValue?: string;
|
||||
}
|
||||
|
||||
let { tiles, align = 'start' }: {
|
||||
tiles: MetaTile[];
|
||||
align?: 'start' | 'end';
|
||||
} = $props();
|
||||
|
||||
function handleClick(e: MouseEvent, tile: MetaTile) {
|
||||
if (tile.onclick) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
tile.onclick(e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="meta-strip" style="justify-content: {align === 'end' ? 'flex-end' : 'flex-start'};">
|
||||
{#each tiles as tile, i (i)}
|
||||
{#if tile.href}
|
||||
<a
|
||||
class="meta-tile meta-tone-{tile.tone || 'default'} meta-tile--interactive"
|
||||
class:meta-tile--mono={tile.mono}
|
||||
title={tile.hint}
|
||||
href={tile.href}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{#if tile.icon}
|
||||
<span class="meta-tile__icon"><MdiIcon name={tile.icon} size={14} /></span>
|
||||
{/if}
|
||||
<span class="meta-tile__text">
|
||||
{#if tile.value}<span class="meta-tile__value">{tile.value}</span>{/if}
|
||||
<span class="meta-tile__label">{tile.label}</span>
|
||||
</span>
|
||||
</a>
|
||||
{:else if tile.onclick}
|
||||
<button
|
||||
type="button"
|
||||
class="meta-tile meta-tone-{tile.tone || 'default'} meta-tile--interactive"
|
||||
class:meta-tile--mono={tile.mono}
|
||||
title={tile.hint}
|
||||
onclick={(e: MouseEvent) => handleClick(e, tile)}
|
||||
>
|
||||
{#if tile.icon}
|
||||
<span class="meta-tile__icon"><MdiIcon name={tile.icon} size={14} /></span>
|
||||
{/if}
|
||||
<span class="meta-tile__text">
|
||||
{#if tile.value}<span class="meta-tile__value">{tile.value}</span>{/if}
|
||||
<span class="meta-tile__label">{tile.label}</span>
|
||||
</span>
|
||||
</button>
|
||||
{:else}
|
||||
<div
|
||||
class="meta-tile meta-tone-{tile.tone || 'default'}"
|
||||
class:meta-tile--mono={tile.mono}
|
||||
title={tile.hint}
|
||||
>
|
||||
{#if tile.icon}
|
||||
<span class="meta-tile__icon"><MdiIcon name={tile.icon} size={14} /></span>
|
||||
{/if}
|
||||
<span class="meta-tile__text">
|
||||
{#if tile.value}<span class="meta-tile__value">{tile.value}</span>{/if}
|
||||
<span class="meta-tile__label">{tile.label}</span>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.meta-strip {
|
||||
display: none;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
|
||||
padding: 2px 18px;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.meta-strip {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-tile {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(14px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.1;
|
||||
color: var(--color-muted-foreground);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
max-width: 22rem;
|
||||
min-width: 0;
|
||||
text-decoration: none;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.meta-tile__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: currentColor;
|
||||
opacity: 0.9;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.meta-tile__text {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.4rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.meta-tile__value {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-foreground);
|
||||
letter-spacing: -0.01em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.meta-tile__label {
|
||||
font-size: 0.72rem;
|
||||
color: var(--color-muted-foreground);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.meta-tile--mono .meta-tile__label,
|
||||
.meta-tile--mono .meta-tile__value {
|
||||
font-family: var(--font-mono);
|
||||
letter-spacing: -0.02em;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.meta-tile--interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.meta-tile--interactive:hover {
|
||||
border-color: var(--color-rule-strong);
|
||||
background: var(--color-glass-strong);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Tone variants — applied to the dot/icon and accent border on hover */
|
||||
.meta-tone-mint { box-shadow: inset 2px 0 0 var(--color-mint); }
|
||||
.meta-tone-sky { box-shadow: inset 2px 0 0 var(--color-sky); }
|
||||
.meta-tone-coral { box-shadow: inset 2px 0 0 var(--color-coral); }
|
||||
.meta-tone-citrus { box-shadow: inset 2px 0 0 var(--color-citrus); }
|
||||
.meta-tone-orchid { box-shadow: inset 2px 0 0 var(--color-orchid); }
|
||||
.meta-tone-lavender { box-shadow: inset 2px 0 0 var(--color-primary); }
|
||||
|
||||
.meta-tone-mint .meta-tile__icon { color: var(--color-mint); }
|
||||
.meta-tone-sky .meta-tile__icon { color: var(--color-sky); }
|
||||
.meta-tone-coral .meta-tile__icon { color: var(--color-coral); }
|
||||
.meta-tone-citrus .meta-tile__icon { color: var(--color-citrus); }
|
||||
.meta-tone-orchid .meta-tile__icon { color: var(--color-orchid); }
|
||||
.meta-tone-lavender .meta-tile__icon { color: var(--color-primary); }
|
||||
</style>
|
||||
@@ -11,14 +11,22 @@
|
||||
}>();
|
||||
|
||||
let visible = $state(false);
|
||||
let mounted = $state(false);
|
||||
let panelEl = $state<HTMLDivElement | undefined>();
|
||||
let previouslyFocused: HTMLElement | null = null;
|
||||
let closeTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
const uniqueId = `modal-${Math.random().toString(36).slice(2, 9)}`;
|
||||
const TRANSITION_MS = 250;
|
||||
|
||||
$effect(() => {
|
||||
if (open) {
|
||||
if (closeTimer) {
|
||||
clearTimeout(closeTimer);
|
||||
closeTimer = null;
|
||||
}
|
||||
previouslyFocused = document.activeElement as HTMLElement | null;
|
||||
mounted = true;
|
||||
requestAnimationFrame(() => {
|
||||
visible = true;
|
||||
// Focus first focusable element inside the modal
|
||||
@@ -29,13 +37,18 @@
|
||||
focusable?.focus();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
} else if (mounted) {
|
||||
visible = false;
|
||||
// Restore focus to the previously focused element
|
||||
if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
|
||||
previouslyFocused.focus();
|
||||
previouslyFocused = null;
|
||||
}
|
||||
if (closeTimer) clearTimeout(closeTimer);
|
||||
closeTimer = setTimeout(() => {
|
||||
mounted = false;
|
||||
closeTimer = null;
|
||||
}, TRANSITION_MS);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -73,7 +86,7 @@
|
||||
|
||||
<svelte:window onkeydown={open ? handleKeydown : undefined} />
|
||||
|
||||
{#if open}
|
||||
{#if mounted}
|
||||
<div use:portal class="modal-portal-root">
|
||||
<div
|
||||
class="modal-backdrop"
|
||||
|
||||
Reference in New Issue
Block a user