alexei.dolgolyov
2d59a5b994
Apply six isolated, low-risk fixes surfaced by the parallel production-readiness review (backend, frontend, security, perf, UI/UX, bugs+features). Backend - Mask access_token in provider GET responses and drop it on edit when carrying the *** placeholder — fixes plaintext leak of HA long-lived tokens (security H-1). Centralized via PROVIDER_SECRET_FIELDS so all call sites stay in sync (C-5). - Hold HA status-change tasks in a module-level set with a done_callback — asyncio.create_task only keeps weak refs and the task could be GC'd before its row was written (C-1). - Roll back the request session in the Telegram-webhook catch-all so a handler exception cannot leak uncommitted writes into the next request (C-2). - Bail before reading the 1 MiB webhook body when the Gitea provider has no secret configured or the request has no signature header. For the generic webhook with bearer_token auth, verify the Authorization header before the body read. Closes the pre-auth resource-exhaustion amplifier (C-3). Frontend - Add supportsAutoOrganize capability to ProviderDescriptor and consume it from RuleEditor instead of `provider.type !== 'immich'`, bringing the last action-rule editor under CLAUDE.md rule 8 (no provider-type hardcoding in components). - Snackbar: add role="region" + per-toast role/aria-live/aria-atomic so screen readers announce success/error toasts. - Sidebar nav: add aria-current="page" on the active link so the active state has an accessible name. - New snackbar.region key in en + ru (locale parity preserved). Out of scope for this commit (tracked in .claude/reviews/README.md ship-blocker list): secret encryption at rest, JWT cookie move, Alembic adoption, webhook idempotency, deferred-dispatch crash window, persisted Telegram update watermark, bridge_self counter lock — each needs more than a mechanical edit.
163 lines
4.0 KiB
Svelte
163 lines
4.0 KiB
Svelte
<script lang="ts">
|
|
import { fly, fade } from 'svelte/transition';
|
|
import { getSnacks, removeSnack, type Snack } from '$lib/stores/snackbar.svelte';
|
|
import MdiIcon from '$lib/components/MdiIcon.svelte';
|
|
import { t } from '$lib/i18n';
|
|
import { portal } from '$lib/portal';
|
|
|
|
const snacks = $derived(getSnacks());
|
|
|
|
let expandedIds = $state<Set<number>>(new Set());
|
|
|
|
function toggleDetail(id: number) {
|
|
const next = new Set(expandedIds);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
expandedIds = next;
|
|
}
|
|
|
|
const iconMap: Record<string, string> = {
|
|
success: 'mdiCheckCircle',
|
|
error: 'mdiAlertCircle',
|
|
info: 'mdiInformation',
|
|
warning: 'mdiAlert',
|
|
};
|
|
|
|
const accentMap: Record<string, string> = {
|
|
success: '#059669',
|
|
error: '#ef4444',
|
|
info: '#3b82f6',
|
|
warning: '#f59e0b',
|
|
};
|
|
</script>
|
|
|
|
{#if snacks.length > 0}
|
|
<div use:portal class="snackbar-container" role="region" aria-label={t('snackbar.region')}>
|
|
{#each snacks as snack (snack.id)}
|
|
<div
|
|
in:fly={{ y: 40, duration: 300 }}
|
|
out:fade={{ duration: 200 }}
|
|
class="snack-item"
|
|
role={snack.type === 'error' ? 'alert' : 'status'}
|
|
aria-live={snack.type === 'error' ? 'assertive' : 'polite'}
|
|
aria-atomic="true"
|
|
style="--snack-accent: {accentMap[snack.type]};"
|
|
>
|
|
<span class="snack-icon" style="color: {accentMap[snack.type]};">
|
|
<MdiIcon name={iconMap[snack.type]} size={18} />
|
|
</span>
|
|
<div style="flex: 1; min-width: 0;">
|
|
<p class="snack-message">{snack.message}</p>
|
|
{#if snack.detail}
|
|
<button class="snack-detail-toggle" onclick={() => toggleDetail(snack.id)}>
|
|
{expandedIds.has(snack.id) ? t('snackbar.hideDetails') : t('snackbar.showDetails')}
|
|
</button>
|
|
{#if expandedIds.has(snack.id)}
|
|
<pre class="snack-detail">{snack.detail}</pre>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
<button class="snack-close" onclick={() => removeSnack(snack.id)} aria-label={t('common.dismiss')}>
|
|
<MdiIcon name="mdiClose" size={14} />
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.snackbar-container {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
width: 90%;
|
|
max-width: 26rem;
|
|
pointer-events: none;
|
|
bottom: 5rem;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.snackbar-container {
|
|
bottom: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.snack-item {
|
|
--snack-solid-bg: #131520;
|
|
pointer-events: auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.625rem;
|
|
padding: 0.85rem 1rem;
|
|
border-radius: 14px;
|
|
border-left: 3px solid var(--snack-accent);
|
|
background: var(--snack-solid-bg);
|
|
border-top: 1px solid var(--color-rule-strong);
|
|
border-right: 1px solid var(--color-rule-strong);
|
|
border-bottom: 1px solid var(--color-rule-strong);
|
|
box-shadow: var(--shadow-card), 0 12px 30px -10px rgba(0, 0, 0, 0.4);
|
|
}
|
|
:global([data-theme="light"]) .snack-item { --snack-solid-bg: #fafafe; }
|
|
|
|
:global([data-theme="dark"]) .snack-item {
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px color-mix(in srgb, var(--snack-accent) 10%, transparent);
|
|
}
|
|
|
|
.snack-icon {
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.snack-message {
|
|
font-size: 0.8rem;
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
.snack-detail-toggle {
|
|
font-size: 0.7rem;
|
|
color: var(--color-muted-foreground);
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin-top: 0.25rem;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.snack-detail-toggle:hover {
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
.snack-detail {
|
|
font-size: 0.7rem;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-muted-foreground);
|
|
margin: 0.25rem 0 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.snack-close {
|
|
flex-shrink: 0;
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-muted-foreground);
|
|
cursor: pointer;
|
|
padding: 0.125rem;
|
|
border-radius: 0.25rem;
|
|
transition: all 0.15s ease;
|
|
line-height: 1;
|
|
}
|
|
|
|
.snack-close:hover {
|
|
color: var(--color-foreground);
|
|
background: var(--color-muted);
|
|
}
|
|
</style>
|