feat(frontend): group targets by bot, redesign backup settings
Targets page: collapse targets under a per-bot header (BotGroupHeader) with a count chip and an "Open bot" cross-link. Receivers are hidden by default and expand per group; non-bot types fall back to a "Direct delivery" group. Telegram "Add receiver" now opens the EntitySelect chat palette directly instead of an inline form — EntitySelect grew a bindable `open` flag, `showTrigger`, and an `onclose` cancel signal. Backup settings page: split the monolithic +page into focused panels (BackupHero, BackupLedger, ExportPanel, ImportPanel, PendingStrip, ScheduleCassette) and introduce a stepwise export/import flow with category groups, secrets handling, conflict policy, and validation gating. New i18n keys in both locales cover the bot grouping labels and the backup step copy.
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick } from 'svelte';
|
||||
import { SvelteSet } from 'svelte/reactivity';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { page } from '$app/state';
|
||||
import { api, getBlockedBy, type BlockedByDetail } from '$lib/api';
|
||||
import BlockedByModal from '$lib/components/BlockedByModal.svelte';
|
||||
@@ -13,7 +15,6 @@
|
||||
import EmptyState from '$lib/components/EmptyState.svelte';
|
||||
import ConfirmModal from '$lib/components/ConfirmModal.svelte';
|
||||
import IconButton from '$lib/components/IconButton.svelte';
|
||||
import CrossLink from '$lib/components/CrossLink.svelte';
|
||||
import { chatActionItems } from '$lib/grid-items';
|
||||
import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
|
||||
import { highlightFromUrl } from '$lib/highlight';
|
||||
@@ -22,6 +23,7 @@
|
||||
|
||||
import TargetForm from './TargetForm.svelte';
|
||||
import ReceiverSection from './ReceiverSection.svelte';
|
||||
import BotGroupHeader from './BotGroupHeader.svelte';
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
@@ -164,6 +166,20 @@
|
||||
let confirmDeleteReceiver = $state<{ targetId: number; receiver: TargetReceiver } | null>(null);
|
||||
let receiverTesting = $state<Record<number, boolean>>({});
|
||||
|
||||
// Per-target expansion state for the receivers section. Hidden by default.
|
||||
let expandedTargets = $state<Set<number>>(new SvelteSet());
|
||||
|
||||
function isExpanded(id: number): boolean {
|
||||
return expandedTargets.has(id);
|
||||
}
|
||||
function toggleExpanded(id: number) {
|
||||
if (expandedTargets.has(id)) expandedTargets.delete(id);
|
||||
else expandedTargets.add(id);
|
||||
}
|
||||
function expandTarget(id: number) {
|
||||
if (!expandedTargets.has(id)) expandedTargets.add(id);
|
||||
}
|
||||
|
||||
// ── Effects ──
|
||||
|
||||
// Reset form when switching target type tabs
|
||||
@@ -179,6 +195,98 @@
|
||||
|
||||
onMount(load);
|
||||
|
||||
// ── Bot grouping ──
|
||||
|
||||
type TargetGroup = {
|
||||
key: string;
|
||||
type: string;
|
||||
name: string;
|
||||
subtitle: string | null;
|
||||
icon: string;
|
||||
typeBadge: string | null;
|
||||
botHref: string | null;
|
||||
botEntityId: number | null;
|
||||
muted: boolean;
|
||||
targets: NotificationTarget[];
|
||||
};
|
||||
|
||||
const BOT_TYPES = new Set<string>(['telegram', 'email', 'matrix']);
|
||||
|
||||
const groupedTargets = $derived.by<TargetGroup[]>(() => {
|
||||
const groups = new Map<string, TargetGroup>();
|
||||
for (const tgt of targets) {
|
||||
const isBotType = BOT_TYPES.has(tgt.type);
|
||||
const botId = isBotType ? getBotEntityId(tgt) : null;
|
||||
const key = isBotType
|
||||
? (botId ? `${tgt.type}:${botId}` : `${tgt.type}:nobot`)
|
||||
: `${tgt.type}:direct`;
|
||||
|
||||
let group = groups.get(key);
|
||||
if (!group) {
|
||||
const typeBadge = TARGET_TYPE_DEFAULT_NAMES[tgt.type as TargetType] || tgt.type;
|
||||
let icon = TYPE_ICONS[tgt.type] || 'mdiTarget';
|
||||
let name = '';
|
||||
let subtitle: string | null = null;
|
||||
let muted = false;
|
||||
|
||||
if (isBotType && botId) {
|
||||
if (tgt.type === 'telegram') {
|
||||
const bot = telegramBots.find(b => b.id === botId);
|
||||
name = bot?.name || getBotName(tgt) || t('targets.groupBotMissing');
|
||||
subtitle = bot?.bot_username ? `@${bot.bot_username}` : null;
|
||||
icon = bot?.icon || 'mdiSend';
|
||||
} else if (tgt.type === 'email') {
|
||||
const bot = emailBots.find(b => b.id === botId);
|
||||
name = bot?.name || getBotName(tgt) || t('targets.groupBotMissing');
|
||||
subtitle = bot?.email || null;
|
||||
icon = bot?.icon || 'mdiEmailOutline';
|
||||
} else if (tgt.type === 'matrix') {
|
||||
const bot = matrixBots.find(b => b.id === botId);
|
||||
name = bot?.name || getBotName(tgt) || t('targets.groupBotMissing');
|
||||
subtitle = bot?.display_name || bot?.homeserver_url || null;
|
||||
icon = bot?.icon || 'mdiMatrix';
|
||||
}
|
||||
} else if (isBotType) {
|
||||
name = t('targets.groupNoBot');
|
||||
subtitle = TARGET_TYPE_DEFAULT_NAMES[tgt.type as TargetType] || tgt.type;
|
||||
muted = true;
|
||||
} else {
|
||||
name = TARGET_TYPE_DEFAULT_NAMES[tgt.type as TargetType] || tgt.type;
|
||||
subtitle = t('targets.groupDirect');
|
||||
muted = true;
|
||||
}
|
||||
|
||||
group = {
|
||||
key,
|
||||
type: tgt.type,
|
||||
name,
|
||||
subtitle,
|
||||
icon,
|
||||
typeBadge,
|
||||
botHref: isBotType && botId ? getBotHref(tgt) : null,
|
||||
botEntityId: isBotType ? botId : null,
|
||||
muted,
|
||||
targets: [],
|
||||
};
|
||||
groups.set(key, group);
|
||||
}
|
||||
group.targets.push(tgt);
|
||||
}
|
||||
|
||||
const rank = (g: TargetGroup) => {
|
||||
if (g.type === 'broadcast') return 4;
|
||||
if (g.muted && BOT_TYPES.has(g.type)) return 2; // bot-type without bot
|
||||
if (g.muted) return 3; // direct delivery (webhook/discord/slack/ntfy)
|
||||
return 1; // bot-linked
|
||||
};
|
||||
|
||||
return [...groups.values()].sort((a, b) => {
|
||||
const ra = rank(a), rb = rank(b);
|
||||
if (ra !== rb) return ra - rb;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
});
|
||||
|
||||
const headerPills = $derived.by(() => {
|
||||
const pills: Array<{ label: string; tone: 'mint' | 'sky' | 'orchid' }> = [];
|
||||
if (activeType) {
|
||||
@@ -216,6 +324,16 @@
|
||||
} catch (e) { console.warn('Failed to load bot chats:', e); }
|
||||
}
|
||||
|
||||
// Active discovery — actually polls Telegram getUpdates and persists any new chats.
|
||||
// Fired when the chat picker opens so the user sees the freshest list without a manual click.
|
||||
async function discoverReceiverBotChats(botId: number) {
|
||||
if (!botId) return;
|
||||
try {
|
||||
const data = await api<TelegramChat[]>(`/telegram-bots/${botId}/chats/discover`, { method: 'POST' });
|
||||
receiverBotChats = { ...receiverBotChats, [botId]: data };
|
||||
} catch (e) { console.warn('Failed to discover bot chats:', e); }
|
||||
}
|
||||
|
||||
// ── Target CRUD ──
|
||||
|
||||
function openNew() {
|
||||
@@ -341,15 +459,27 @@
|
||||
|
||||
// ── Receiver CRUD ──
|
||||
|
||||
function openReceiverForm(targetId: number, targetType: string) {
|
||||
async function openReceiverForm(targetId: number, targetType: string) {
|
||||
// Force a remount of any picker palette when the same target is reopened
|
||||
// after a prior attempt left addingReceiverForTarget unchanged (e.g. save failure).
|
||||
if (addingReceiverForTarget === targetId) {
|
||||
addingReceiverForTarget = null;
|
||||
await tick();
|
||||
}
|
||||
addingReceiverForTarget = targetId;
|
||||
expandTarget(targetId);
|
||||
receiverHeadersError = '';
|
||||
if (targetType === 'telegram') {
|
||||
receiverForm = { chat_id: '' };
|
||||
// Load bot chats for the target's bot
|
||||
// Show what we have immediately (cached list), then actively discover in the
|
||||
// background so any newly-added chats appear in the palette as soon as
|
||||
// Telegram returns them.
|
||||
const tgt = allTargets.find(t => t.id === targetId);
|
||||
const botId = tgt?.config?.bot_id;
|
||||
if (botId && !receiverBotChats[botId]) loadReceiverBotChats(botId);
|
||||
if (botId) {
|
||||
if (!receiverBotChats[botId]) loadReceiverBotChats(botId);
|
||||
discoverReceiverBotChats(botId);
|
||||
}
|
||||
} else if (targetType === 'email') {
|
||||
receiverForm = { email: '' };
|
||||
} else if (targetType === 'webhook') {
|
||||
@@ -510,53 +640,84 @@
|
||||
<EmptyState icon="mdiFilterOff" message={t('common.noFilterResults')} />
|
||||
</Card>
|
||||
{:else}
|
||||
<div class="space-y-3 stagger-children">
|
||||
{#each targets as target (target.id)}
|
||||
<Card hover entityId={target.id}>
|
||||
<!-- Target header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span style="color: var(--color-primary);"><MdiIcon name={target.icon || TYPE_ICONS[target.type] || 'mdiTarget'} size={20} /></span>
|
||||
<p class="font-medium">{target.name}</p>
|
||||
{#if !activeType}<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.type}</span>{/if}
|
||||
{#if target.type === 'broadcast' && target.child_targets?.length}
|
||||
<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.child_targets.length} {t('targets.childTargets')}</span>
|
||||
{:else if target.type !== 'broadcast' && (target.receivers || []).length > 0}
|
||||
<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{(target.receivers || []).length} {t('targets.receivers')}</span>
|
||||
{/if}
|
||||
{#if getBotName(target)}<CrossLink href={getBotHref(target)} icon="mdiRobot" label={getBotName(target) ?? ''} entityId={getBotEntityId(target)} />{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<IconButton icon="mdiPencil" title={t('common.edit')} onclick={() => edit(target)} />
|
||||
<IconButton icon="mdiSend" title={t('targets.test')} onclick={() => test(target.id)} />
|
||||
<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => confirmDelete = target} variant="danger" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Receivers list -->
|
||||
<ReceiverSection
|
||||
{target}
|
||||
typeIcons={TYPE_ICONS}
|
||||
{addingReceiverForTarget}
|
||||
bind:receiverForm
|
||||
{receiverSubmitting}
|
||||
{receiverHeadersError}
|
||||
{receiverBotChats}
|
||||
{receiverTesting}
|
||||
{receiverLabel}
|
||||
onopenReceiverForm={openReceiverForm}
|
||||
onsaveReceiver={saveReceiver}
|
||||
oncancelReceiver={() => addingReceiverForTarget = null}
|
||||
ontoggleReceiver={toggleReceiver}
|
||||
onremoveReceiver={(targetId, recv) => confirmDeleteReceiver = { targetId, receiver: recv }}
|
||||
ontestReceiver={testReceiver}
|
||||
onloadBotChats={loadReceiverBotChats}
|
||||
onchangeReceiverForm={(f) => receiverForm = f}
|
||||
ontoggleBroadcastChild={toggleBroadcastChild}
|
||||
<div class="targets-list">
|
||||
{#each groupedTargets as group (group.key)}
|
||||
<section class="target-group">
|
||||
<BotGroupHeader
|
||||
icon={group.icon}
|
||||
name={group.name}
|
||||
subtitle={group.subtitle}
|
||||
targetCount={group.targets.length}
|
||||
typeBadge={!activeType ? group.typeBadge : null}
|
||||
botHref={group.botHref}
|
||||
botEntityId={group.botEntityId}
|
||||
muted={group.muted}
|
||||
/>
|
||||
</Card>
|
||||
<div class="target-group__items stagger-children">
|
||||
{#each group.targets as target (target.id)}
|
||||
{@const expanded = isExpanded(target.id)}
|
||||
{@const childCount = target.type === 'broadcast' ? (target.child_targets?.length || 0) : (target.receivers || []).length}
|
||||
{@const childLabel = target.type === 'broadcast' ? t('targets.childTargets') : t('targets.receivers')}
|
||||
<Card hover entityId={target.id}>
|
||||
<!-- Target header (clickable to toggle receiver visibility) -->
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="target-summary"
|
||||
aria-expanded={expanded}
|
||||
aria-controls={`target-body-${target.id}`}
|
||||
onclick={() => toggleExpanded(target.id)}
|
||||
>
|
||||
<span class="target-summary__chevron" class:open={expanded} aria-hidden="true">
|
||||
<MdiIcon name="mdiChevronRight" size={16} />
|
||||
</span>
|
||||
<span class="target-summary__icon"><MdiIcon name={target.icon || TYPE_ICONS[target.type] || 'mdiTarget'} size={20} /></span>
|
||||
<span class="target-summary__name">{target.name}</span>
|
||||
{#if childCount > 0}
|
||||
<span class="target-summary__count">
|
||||
<span class="target-summary__count-num">{childCount}</span>
|
||||
<span class="target-summary__count-label">{childLabel}</span>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="target-summary__count target-summary__count--empty">{t('targets.noReceivers')}</span>
|
||||
{/if}
|
||||
</button>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<IconButton icon="mdiPencil" title={t('common.edit')} onclick={() => edit(target)} />
|
||||
<IconButton icon="mdiSend" title={t('targets.test')} onclick={() => test(target.id)} />
|
||||
<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => confirmDelete = target} variant="danger" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Receivers list (collapsible) -->
|
||||
{#if expanded}
|
||||
<div id={`target-body-${target.id}`} transition:slide={{ duration: 180 }}>
|
||||
<ReceiverSection
|
||||
{target}
|
||||
typeIcons={TYPE_ICONS}
|
||||
{addingReceiverForTarget}
|
||||
bind:receiverForm
|
||||
{receiverSubmitting}
|
||||
{receiverHeadersError}
|
||||
{receiverBotChats}
|
||||
{receiverTesting}
|
||||
{receiverLabel}
|
||||
onopenReceiverForm={openReceiverForm}
|
||||
onsaveReceiver={saveReceiver}
|
||||
oncancelReceiver={() => addingReceiverForTarget = null}
|
||||
ontoggleReceiver={toggleReceiver}
|
||||
onremoveReceiver={(targetId, recv) => confirmDeleteReceiver = { targetId, receiver: recv }}
|
||||
ontestReceiver={testReceiver}
|
||||
onloadBotChats={loadReceiverBotChats}
|
||||
onchangeReceiverForm={(f) => receiverForm = f}
|
||||
ontoggleBroadcastChild={toggleBroadcastChild}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -578,3 +739,105 @@
|
||||
/>
|
||||
|
||||
<BlockedByModal open={!!blockedBy} detail={blockedBy} onclose={() => blockedBy = null} />
|
||||
|
||||
<style>
|
||||
.targets-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.target-group {
|
||||
display: block;
|
||||
}
|
||||
.target-group__items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
padding-left: 0.85rem;
|
||||
border-left: 1px dashed color-mix(in srgb, var(--color-rule-strong) 70%, transparent);
|
||||
margin-left: 0.55rem;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.target-group__items {
|
||||
padding-left: 0.4rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.target-summary {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.1rem 0.25rem 0.1rem 0;
|
||||
margin: -0.1rem 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
border-radius: 8px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.target-summary:hover {
|
||||
background: var(--color-glass-strong);
|
||||
}
|
||||
.target-summary:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.target-summary__chevron {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-muted-foreground);
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
|
||||
}
|
||||
.target-summary__chevron.open {
|
||||
transform: rotate(90deg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.target-summary__icon {
|
||||
color: var(--color-primary);
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.target-summary__name {
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
.target-summary__count {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-muted-foreground);
|
||||
padding: 0.12rem 0.45rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.target-summary__count-num {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
.target-summary__count-label {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.target-summary__count--empty {
|
||||
font-style: italic;
|
||||
font-family: inherit;
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-muted-foreground);
|
||||
background: transparent;
|
||||
padding: 0.12rem 0.2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user