feat: comprehensive code review fixes — security, performance, quality
Backend security: - Reject Gitea webhooks when webhook_secret is empty (was silently skipping) - Add slowapi rate limiting on login (5/min) and setup (3/min) endpoints - Add CORS middleware with configurable origins - Mask telegram_webhook_secret in settings API response - Protect system-owned command template configs from regular user modification - Increase minimum password length to 8 characters Backend performance: - Batch queries in _resolve_command_context (3 queries instead of 3N) - Concurrent album fetching with asyncio.gather in immich commands - Singleton Jinja2 SandboxedEnvironment (reuse instead of per-render creation) - TTLCache for rate limits (bounded memory, auto-eviction) - Optional aiohttp session reuse in send_reply/send_media_group Backend code quality: - Extract dispatch_helpers.py (shared link_data loading + event filtering) - Extract database/seeds.py from main.py (490 lines → dedicated module) - Split immich_handler.py (415 lines) into commands/immich/ subpackage - Replace bare except blocks with logged warnings - Add per-provider config validation (Pydantic models) - Truncate command input to 512 chars - Expose usage_* and desc_* slots in capabilities and variables API Frontend security: - CSS.escape() for user-controlled querySelector in highlight.ts - Client-side password min 8 chars validation on setup and password change Frontend code quality: - Replace any types with proper interfaces across top files - Decompose targets/+page.svelte into TargetForm + ReceiverSection - Fix $derived.by usage, $state mutation patterns - Add console.warn to empty catch blocks Frontend UX: - Auth redirect via goto() with "Redirecting..." state - Platform-aware Ctrl/Cmd K keyboard hint - Remove stat-card hover transform Frontend accessibility: - Modal: role=dialog, aria-modal, focus trap, restore focus - EntitySelect/IconGridSelect: listbox/option roles, aria-selected/disabled
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
import MdiIcon from './MdiIcon.svelte';
|
||||
|
||||
let { icon = 'mdiInformation', message = '', size = 40 }: { icon?: string; message?: string; size?: number } = $props();
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center py-8 gap-3" style="color: var(--color-muted-foreground);">
|
||||
<div style="opacity: 0.4;"><MdiIcon name={icon} {size} /></div>
|
||||
{#if message}<p class="text-sm">{message}</p>{/if}
|
||||
</div>
|
||||
@@ -6,6 +6,8 @@
|
||||
label: string;
|
||||
icon?: string;
|
||||
desc?: string;
|
||||
disabled?: boolean;
|
||||
disabledHint?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -62,6 +64,7 @@
|
||||
}
|
||||
|
||||
function selectItem(item: EntityItem) {
|
||||
if (item.disabled) return;
|
||||
value = item.value || null;
|
||||
onselect?.(value);
|
||||
closePalette();
|
||||
@@ -103,6 +106,8 @@
|
||||
|
||||
<!-- Trigger button -->
|
||||
<button type="button" class="es-trigger" class:es-sm={size === 'sm'} onclick={openPalette}
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
style="opacity: {disabled ? 0.5 : 1}; cursor: {disabled ? 'default' : 'pointer'};">
|
||||
{#if selected}
|
||||
{#if selected.icon}
|
||||
@@ -135,15 +140,19 @@
|
||||
<kbd class="ep-kbd">ESC</kbd>
|
||||
</div>
|
||||
|
||||
<div class="ep-list" bind:this={listEl}>
|
||||
<div class="ep-list" bind:this={listEl} role="listbox">
|
||||
{#if filtered.length === 0}
|
||||
<div class="ep-empty">No matches</div>
|
||||
{:else}
|
||||
{#each filtered as item, i}
|
||||
<button
|
||||
class="ep-item"
|
||||
class:ep-highlight={i === highlightIdx}
|
||||
class:ep-highlight={i === highlightIdx && !item.disabled}
|
||||
class:ep-current={String(item.value) === String(value)}
|
||||
class:ep-disabled={item.disabled}
|
||||
role="option"
|
||||
aria-selected={String(item.value) === String(value)}
|
||||
aria-disabled={item.disabled || undefined}
|
||||
onclick={() => selectItem(item)}
|
||||
onmouseenter={() => highlightIdx = i}
|
||||
type="button"
|
||||
@@ -152,7 +161,9 @@
|
||||
<span class="ep-item-icon"><MdiIcon name={item.icon} size={18} /></span>
|
||||
{/if}
|
||||
<span class="ep-item-label">{item.label}</span>
|
||||
{#if item.desc}
|
||||
{#if item.disabled && item.disabledHint}
|
||||
<span class="ep-item-hint">{item.disabledHint}</span>
|
||||
{:else if item.desc}
|
||||
<span class="ep-item-desc">{item.desc}</span>
|
||||
{/if}
|
||||
</button>
|
||||
@@ -292,6 +303,13 @@
|
||||
.ep-item:hover, .ep-item.ep-highlight {
|
||||
background: var(--color-muted);
|
||||
}
|
||||
.ep-item.ep-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
.ep-item.ep-disabled:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.ep-item.ep-current {
|
||||
border-left-color: var(--color-primary);
|
||||
}
|
||||
@@ -319,4 +337,11 @@
|
||||
text-overflow: ellipsis;
|
||||
max-width: 40%;
|
||||
}
|
||||
.ep-item-hint {
|
||||
font-size: 0.7rem;
|
||||
font-style: italic;
|
||||
color: var(--color-muted-foreground);
|
||||
white-space: nowrap;
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,262 @@
|
||||
<script lang="ts">
|
||||
import { t } from '$lib/i18n';
|
||||
import MdiIcon from './MdiIcon.svelte';
|
||||
|
||||
interface DayData {
|
||||
date: string;
|
||||
[eventType: string]: string | number;
|
||||
}
|
||||
|
||||
let { days = [] }: { days: DayData[] } = $props();
|
||||
|
||||
const EVENT_TYPES = ['assets_added', 'assets_removed', 'collection_renamed', 'collection_deleted', 'sharing_changed'] as const;
|
||||
|
||||
const COLORS: Record<string, string> = {
|
||||
assets_added: '#059669',
|
||||
assets_removed: '#ef4444',
|
||||
collection_renamed: '#6366f1',
|
||||
collection_deleted: '#dc2626',
|
||||
sharing_changed: '#f59e0b',
|
||||
};
|
||||
|
||||
const LABELS: Record<string, string> = {
|
||||
assets_added: 'dashboard.filterAssetsAdded',
|
||||
assets_removed: 'dashboard.filterAssetsRemoved',
|
||||
collection_renamed: 'dashboard.filterRenamed',
|
||||
collection_deleted: 'dashboard.filterDeleted',
|
||||
sharing_changed: 'dashboard.filterSharingChanged',
|
||||
};
|
||||
|
||||
let tooltip = $state<{ x: number; y: number; text: string } | null>(null);
|
||||
|
||||
const maxValue = $derived.by(() => {
|
||||
let max = 0;
|
||||
for (const day of days) {
|
||||
let sum = 0;
|
||||
for (const et of EVENT_TYPES) {
|
||||
sum += (day[et] as number) || 0;
|
||||
}
|
||||
if (sum > max) max = sum;
|
||||
}
|
||||
return Math.max(max, 1);
|
||||
});
|
||||
|
||||
const hasData = $derived(days.some(d => EVENT_TYPES.some(et => (d[et] as number) > 0)));
|
||||
|
||||
// Active event types (ones that actually have data)
|
||||
const activeTypes = $derived(EVENT_TYPES.filter(et => days.some(d => (d[et] as number) > 0)));
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
const d = new Date(dateStr + 'T00:00:00');
|
||||
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
function showTooltip(e: MouseEvent, day: DayData) {
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
const parts: string[] = [];
|
||||
for (const et of EVENT_TYPES) {
|
||||
const v = (day[et] as number) || 0;
|
||||
if (v > 0) parts.push(`${t(LABELS[et])}: ${v} ${v === 1 ? t('dashboard.event') : t('dashboard.events')}`);
|
||||
}
|
||||
if (parts.length === 0) parts.push(`0 ${t('dashboard.events')}`);
|
||||
tooltip = {
|
||||
x: rect.left + rect.width / 2,
|
||||
y: rect.top,
|
||||
text: `${formatDate(day.date)}\n${parts.join('\n')}`,
|
||||
};
|
||||
}
|
||||
|
||||
function hideTooltip() {
|
||||
tooltip = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="chart-wrapper">
|
||||
<div class="chart-header">
|
||||
<h4 class="chart-title">
|
||||
<MdiIcon name="mdiChartBar" size={18} />
|
||||
{t('dashboard.eventActivity')}
|
||||
</h4>
|
||||
<span class="chart-subtitle">{t('dashboard.last14days')}</span>
|
||||
</div>
|
||||
|
||||
{#if !hasData}
|
||||
<div class="chart-empty">
|
||||
<MdiIcon name="mdiChartBoxOutline" size={32} />
|
||||
<span>{t('dashboard.noChartData')}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="chart-body">
|
||||
<div class="chart-bars">
|
||||
{#each days as day, i}
|
||||
{@const total = EVENT_TYPES.reduce((s, et) => s + ((day[et] as number) || 0), 0)}
|
||||
<div
|
||||
class="bar-col"
|
||||
role="img"
|
||||
aria-label="{formatDate(day.date)}: {total} {t('dashboard.events')}"
|
||||
onmouseenter={(e) => showTooltip(e, day)}
|
||||
onmouseleave={hideTooltip}
|
||||
>
|
||||
<div class="bar-stack" style="--max: {maxValue}">
|
||||
{#each EVENT_TYPES as et}
|
||||
{@const v = (day[et] as number) || 0}
|
||||
{#if v > 0}
|
||||
<div
|
||||
class="bar-segment"
|
||||
style="height: {(v / maxValue) * 100}%; background: {COLORS[et]};"
|
||||
></div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<span class="bar-label">{i % 2 === 0 ? formatDate(day.date) : ''}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="chart-legend">
|
||||
{#each activeTypes as et}
|
||||
<span class="legend-item">
|
||||
<span class="legend-dot" style="background: {COLORS[et]};"></span>
|
||||
{t(LABELS[et])}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if tooltip}
|
||||
<div
|
||||
class="chart-tooltip"
|
||||
style="position: fixed; left: {tooltip.x}px; top: {tooltip.y}px; z-index: 9999; transform: translate(-50%, -100%) translateY(-8px);"
|
||||
>
|
||||
{#each tooltip.text.split('\n') as line}
|
||||
<div>{line}</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.chart-wrapper {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.chart-wrapper:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 16px var(--color-glow);
|
||||
}
|
||||
.chart-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.chart-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
.chart-subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-muted-foreground);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.chart-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 2rem 0;
|
||||
color: var(--color-muted-foreground);
|
||||
opacity: 0.5;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.chart-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 3px;
|
||||
height: 120px;
|
||||
}
|
||||
.bar-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
}
|
||||
.bar-stack {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
border-radius: 3px 3px 0 0;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
.bar-segment {
|
||||
width: 100%;
|
||||
min-height: 2px;
|
||||
transition: height 0.5s ease, opacity 0.2s;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.bar-col:hover .bar-segment {
|
||||
opacity: 1;
|
||||
}
|
||||
.bar-label {
|
||||
font-size: 0.55rem;
|
||||
color: var(--color-muted-foreground);
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-muted-foreground);
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.legend-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chart-tooltip {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.7rem;
|
||||
font-family: var(--font-mono);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script lang="ts">
|
||||
let { text = '' } = $props<{ text: string }>();
|
||||
let visible = $state(false);
|
||||
let tooltipStyle = $state('');
|
||||
let btnEl: HTMLButtonElement;
|
||||
|
||||
function show() {
|
||||
if (!btnEl) return;
|
||||
visible = true;
|
||||
const rect = btnEl.getBoundingClientRect();
|
||||
const tooltipWidth = 272;
|
||||
let left = rect.left + rect.width / 2 - tooltipWidth / 2;
|
||||
if (left < 8) left = 8;
|
||||
if (left + tooltipWidth > window.innerWidth - 8) left = window.innerWidth - tooltipWidth - 8;
|
||||
tooltipStyle = `position:fixed; z-index:99999; bottom:${window.innerHeight - rect.top + 8}px; left:${left}px; width:${tooltipWidth}px;`;
|
||||
}
|
||||
|
||||
function hide() {
|
||||
visible = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button type="button" bind:this={btnEl}
|
||||
class="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-bold leading-none
|
||||
border border-[var(--color-border)] bg-[var(--color-muted)] text-[var(--color-muted-foreground)]
|
||||
hover:bg-[var(--color-border)] hover:text-[var(--color-foreground)]
|
||||
transition-colors cursor-help align-middle ml-2 flex-shrink-0"
|
||||
onmouseenter={show}
|
||||
onmouseleave={hide}
|
||||
onfocus={show}
|
||||
onblur={hide}
|
||||
aria-label={text}
|
||||
tabindex="0"
|
||||
>?</button>
|
||||
|
||||
{#if visible}
|
||||
<div role="tooltip" style="{tooltipStyle} background:var(--color-card); color:var(--color-foreground); border:1px solid var(--color-border); box-shadow:0 10px 30px rgba(0,0,0,0.3); padding:0.625rem 0.75rem; border-radius:0.5rem; font-size:0.75rem; white-space:normal; line-height:1.625; pointer-events:none;">
|
||||
{text}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
import MdiIcon from './MdiIcon.svelte';
|
||||
|
||||
let { icon, title = '', onclick, disabled = false, variant = 'default', size = 16, class: className = '' } = $props<{
|
||||
icon: string;
|
||||
title?: string;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
disabled?: boolean;
|
||||
variant?: 'default' | 'danger' | 'success';
|
||||
size?: number;
|
||||
class?: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<button type="button" {title} {onclick} {disabled}
|
||||
class="icon-btn icon-btn-{variant} {className}"
|
||||
>
|
||||
<MdiIcon name={icon} {size} />
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.icon-btn:disabled {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.icon-btn-default {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
.icon-btn-default:hover {
|
||||
color: var(--color-foreground);
|
||||
background: var(--color-muted);
|
||||
}
|
||||
|
||||
.icon-btn-danger {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
.icon-btn-danger:hover {
|
||||
color: var(--color-destructive);
|
||||
background: var(--color-error-bg);
|
||||
box-shadow: 0 0 8px rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.icon-btn-success {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
.icon-btn-success:hover {
|
||||
color: var(--color-success-fg);
|
||||
background: var(--color-success-bg);
|
||||
box-shadow: 0 0 8px rgba(5, 150, 105, 0.15);
|
||||
}
|
||||
</style>
|
||||
@@ -76,6 +76,8 @@
|
||||
<button type="button" bind:this={triggerEl} onclick={toggle}
|
||||
class="icon-grid-trigger {compact ? 'icon-grid-compact' : ''}"
|
||||
class:disabled
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
style="opacity: {disabled ? 0.5 : 1}; cursor: {disabled ? 'default' : 'pointer'};">
|
||||
{#if selected}
|
||||
<span class="icon-grid-trigger-icon"><MdiIcon name={selected.icon} size={compact ? 14 : 18} /></span>
|
||||
@@ -99,11 +101,13 @@
|
||||
class="icon-grid-search" type="text" autocomplete="off"
|
||||
onkeydown={handleKeydown} />
|
||||
{/if}
|
||||
<div class="icon-grid" style="grid-template-columns: repeat({columns}, 1fr);">
|
||||
<div class="icon-grid" style="grid-template-columns: repeat({columns}, 1fr);" role="listbox">
|
||||
{#each filtered as item}
|
||||
<button type="button"
|
||||
class="icon-grid-cell"
|
||||
class:active={String(item.value) === String(value)}
|
||||
role="option"
|
||||
aria-selected={String(item.value) === String(value)}
|
||||
onclick={() => select(item)}>
|
||||
<span class="icon-grid-cell-icon"><MdiIcon name={item.icon} size={22} /></span>
|
||||
<span class="icon-grid-cell-label">{item.label}</span>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
let { lines = 3 } = $props<{ lines?: number }>();
|
||||
</script>
|
||||
|
||||
<div class="space-y-3">
|
||||
{#each Array(lines) as _, i}
|
||||
<div class="loading-bar" style="animation-delay: {i * 100}ms;"></div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.loading-bar {
|
||||
height: 4rem;
|
||||
border-radius: 0.75rem;
|
||||
background: linear-gradient(90deg, var(--color-muted) 25%, var(--color-border) 50%, var(--color-muted) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import MdiIcon from './MdiIcon.svelte';
|
||||
|
||||
let { open = false, title = '', onclose, children } = $props<{
|
||||
open: boolean;
|
||||
title?: string;
|
||||
onclose: () => void;
|
||||
children: import('svelte').Snippet;
|
||||
}>();
|
||||
|
||||
let visible = $state(false);
|
||||
let panelEl: HTMLDivElement;
|
||||
let previouslyFocused: HTMLElement | null = null;
|
||||
|
||||
const uniqueId = `modal-${Math.random().toString(36).slice(2, 9)}`;
|
||||
|
||||
$effect(() => {
|
||||
if (open) {
|
||||
previouslyFocused = document.activeElement as HTMLElement | null;
|
||||
requestAnimationFrame(() => {
|
||||
visible = true;
|
||||
// Focus first focusable element inside the modal
|
||||
requestAnimationFrame(() => {
|
||||
const focusable = panelEl?.querySelector<HTMLElement>(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
focusable?.focus();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
visible = false;
|
||||
// Restore focus to the previously focused element
|
||||
if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
|
||||
previouslyFocused.focus();
|
||||
previouslyFocused = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
onclose();
|
||||
return;
|
||||
}
|
||||
// Focus trap: Tab / Shift+Tab
|
||||
if (e.key === 'Tab' && panelEl) {
|
||||
const focusableElements = panelEl.querySelectorAll<HTMLElement>(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
if (focusableElements.length === 0) return;
|
||||
const first = focusableElements[0];
|
||||
const last = focusableElements[focusableElements.length - 1];
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleBackdropKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onclose();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={open ? handleKeydown : undefined} />
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
class="modal-backdrop"
|
||||
class:visible
|
||||
style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;"
|
||||
onclick={onclose}
|
||||
onkeydown={handleBackdropKeydown}
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
bind:this={panelEl}
|
||||
class="modal-panel"
|
||||
class:visible
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title-{uniqueId}"
|
||||
style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 1rem; 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.5rem 1.5rem 1rem;">
|
||||
<h3 id="modal-title-{uniqueId}" style="font-size: 1.125rem; font-weight: 600;">{title}</h3>
|
||||
<button class="modal-close" onclick={onclose} aria-label="Close">
|
||||
<MdiIcon name="mdiClose" size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<div style="padding: 0 1.5rem 1.5rem; overflow-y: auto;">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.modal-backdrop {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
backdrop-filter: blur(0px);
|
||||
transition: background 0.25s ease, backdrop-filter 0.25s ease;
|
||||
}
|
||||
|
||||
.modal-backdrop.visible {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal-panel {
|
||||
opacity: 0;
|
||||
transform: translateY(12px) scale(0.97);
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.12),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"]) .modal-panel {
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
0 0 48px var(--color-glow),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.03) inset;
|
||||
}
|
||||
|
||||
.modal-panel.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-muted-foreground);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: var(--color-muted);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
let { title, description = '', children } = $props<{
|
||||
title: string;
|
||||
description?: string;
|
||||
children?: import('svelte').Snippet;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="animate-fade-slide-in">
|
||||
<h2 class="text-2xl font-semibold tracking-tight">{title}</h2>
|
||||
{#if description}
|
||||
<p class="text-sm mt-1.5" style="color: var(--color-muted-foreground);">{description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{#if children}
|
||||
<div class="animate-fade-slide-in" style="animation-delay: 60ms;">
|
||||
{@render children()}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -40,32 +40,34 @@
|
||||
}
|
||||
|
||||
/** All searchable entity groups. */
|
||||
const GROUPS = [
|
||||
{ key: 'providers', label: 'nav.providers', icon: 'mdiServer', href: '/providers',
|
||||
mapFn: (e: any) => ({ detail: e.type, icon: e.icon || 'mdiServer' }) },
|
||||
{ key: 'notification_trackers', label: 'nav.notification', icon: 'mdiRadar', href: '/notification-trackers',
|
||||
mapFn: (e: any) => ({ detail: e.enabled ? 'enabled' : 'disabled', icon: e.icon || 'mdiRadar' }) },
|
||||
{ key: 'tracking_configs', label: 'nav.trackingConfigs', icon: 'mdiCog', href: '/tracking-configs',
|
||||
mapFn: (e: any) => ({ detail: e.provider_type, icon: e.icon || 'mdiCog' }) },
|
||||
{ key: 'template_configs', label: 'nav.templateConfigs', icon: 'mdiFileDocumentEdit', href: '/template-configs',
|
||||
mapFn: (e: any) => ({ detail: e.provider_type, icon: e.icon || 'mdiFileDocumentEdit' }) },
|
||||
{ key: 'targets', label: 'nav.targets', icon: 'mdiTarget', href: '/targets',
|
||||
mapFn: (e: any) => ({ detail: e.type, icon: e.icon || 'mdiTarget' }) },
|
||||
{ key: 'telegram_bots', label: 'nav.telegram', icon: 'mdiSendCircle', href: '/bots?tab=telegram',
|
||||
mapFn: (e: any) => ({ detail: `@${e.bot_username || ''}`, icon: e.icon || 'mdiRobot' }) },
|
||||
{ key: 'email_bots', label: 'nav.email', icon: 'mdiEmailOutline', href: '/bots?tab=email',
|
||||
mapFn: (e: any) => ({ detail: e.email || '', icon: e.icon || 'mdiEmailOutline' }) },
|
||||
{ key: 'matrix_bots', label: 'nav.matrix', icon: 'mdiMatrix', href: '/bots?tab=matrix',
|
||||
mapFn: (e: any) => ({ detail: e.display_name || '', icon: e.icon || 'mdiMatrix' }) },
|
||||
{ key: 'command_trackers', label: 'nav.commandTrackers', icon: 'mdiConsoleLine', href: '/command-trackers',
|
||||
mapFn: (e: any) => ({ detail: e.enabled ? 'enabled' : 'disabled', icon: e.icon || 'mdiConsoleLine' }) },
|
||||
{ key: 'command_configs', label: 'nav.commandConfigs', icon: 'mdiCog', href: '/command-configs',
|
||||
mapFn: (e: any) => ({ detail: e.provider_type, icon: e.icon || 'mdiCog' }) },
|
||||
{ key: 'command_template_configs', label: 'nav.cmdTemplateConfigs', icon: 'mdiCodeBracesBox', href: '/command-template-configs',
|
||||
mapFn: (e: any) => ({ detail: e.provider_type, icon: e.icon || 'mdiCodeBracesBox' }) },
|
||||
] as const;
|
||||
type CacheEntity = Record<string, unknown> & { id: number; name: string };
|
||||
|
||||
const cacheMap: Record<string, { items: any[] }> = {
|
||||
const GROUPS: readonly { key: string; label: string; icon: string; href: string; mapFn: (e: CacheEntity) => { detail: string; icon: string } }[] = [
|
||||
{ key: 'providers', label: 'nav.providers', icon: 'mdiServer', href: '/providers',
|
||||
mapFn: (e) => ({ detail: String(e.type || ''), icon: String(e.icon || 'mdiServer') }) },
|
||||
{ key: 'notification_trackers', label: 'nav.notification', icon: 'mdiRadar', href: '/notification-trackers',
|
||||
mapFn: (e) => ({ detail: e.enabled ? 'enabled' : 'disabled', icon: String(e.icon || 'mdiRadar') }) },
|
||||
{ key: 'tracking_configs', label: 'nav.trackingConfigs', icon: 'mdiCog', href: '/tracking-configs',
|
||||
mapFn: (e) => ({ detail: String(e.provider_type || ''), icon: String(e.icon || 'mdiCog') }) },
|
||||
{ key: 'template_configs', label: 'nav.templateConfigs', icon: 'mdiFileDocumentEdit', href: '/template-configs',
|
||||
mapFn: (e) => ({ detail: String(e.provider_type || ''), icon: String(e.icon || 'mdiFileDocumentEdit') }) },
|
||||
{ key: 'targets', label: 'nav.targets', icon: 'mdiTarget', href: '/targets',
|
||||
mapFn: (e) => ({ detail: String(e.type || ''), icon: String(e.icon || 'mdiTarget') }) },
|
||||
{ key: 'telegram_bots', label: 'nav.telegram', icon: 'mdiSendCircle', href: '/bots?tab=telegram',
|
||||
mapFn: (e) => ({ detail: `@${e.bot_username || ''}`, icon: String(e.icon || 'mdiRobot') }) },
|
||||
{ key: 'email_bots', label: 'nav.email', icon: 'mdiEmailOutline', href: '/bots?tab=email',
|
||||
mapFn: (e) => ({ detail: String(e.email || ''), icon: String(e.icon || 'mdiEmailOutline') }) },
|
||||
{ key: 'matrix_bots', label: 'nav.matrix', icon: 'mdiMatrix', href: '/bots?tab=matrix',
|
||||
mapFn: (e) => ({ detail: String(e.display_name || ''), icon: String(e.icon || 'mdiMatrix') }) },
|
||||
{ key: 'command_trackers', label: 'nav.commandTrackers', icon: 'mdiConsoleLine', href: '/command-trackers',
|
||||
mapFn: (e) => ({ detail: e.enabled ? 'enabled' : 'disabled', icon: String(e.icon || 'mdiConsoleLine') }) },
|
||||
{ key: 'command_configs', label: 'nav.commandConfigs', icon: 'mdiCog', href: '/command-configs',
|
||||
mapFn: (e) => ({ detail: String(e.provider_type || ''), icon: String(e.icon || 'mdiCog') }) },
|
||||
{ key: 'command_template_configs', label: 'nav.cmdTemplateConfigs', icon: 'mdiCodeBracesBox', href: '/command-template-configs',
|
||||
mapFn: (e) => ({ detail: String(e.provider_type || ''), icon: String(e.icon || 'mdiCodeBracesBox') }) },
|
||||
];
|
||||
|
||||
const cacheMap = {
|
||||
providers: providersCache,
|
||||
notification_trackers: notificationTrackersCache,
|
||||
tracking_configs: trackingConfigsCache,
|
||||
@@ -77,7 +79,7 @@
|
||||
command_trackers: commandTrackersCache,
|
||||
command_configs: commandConfigsCache,
|
||||
command_template_configs: commandTemplateConfigsCache,
|
||||
};
|
||||
} as unknown as Record<string, { items: { id: number; name: string; [k: string]: unknown }[] }>;
|
||||
|
||||
/** Build flat results from all caches, filtered by query. */
|
||||
const results = $derived.by(() => {
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
<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';
|
||||
|
||||
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
|
||||
style="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;"
|
||||
class="snackbar-container"
|
||||
>
|
||||
{#each snacks as snack (snack.id)}
|
||||
<div
|
||||
in:fly={{ y: 40, duration: 300 }}
|
||||
out:fade={{ duration: 200 }}
|
||||
class="snack-item"
|
||||
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="Dismiss">
|
||||
<MdiIcon name="mdiClose" size={14} />
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.snackbar-container {
|
||||
bottom: 5rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.snackbar-container {
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.snack-item {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.625rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.75rem;
|
||||
border-left: 3px solid var(--snack-accent);
|
||||
background: var(--color-card);
|
||||
border-top: 1px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
: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>
|
||||
Reference in New Issue
Block a user