alexei.dolgolyov
fab6169cf9
- UI: command-template-configs now resolves slot variables against the active provider first (varsRef[provider_type][slot]) before falling back to shared entries, so provider-specific slots like /search, /status, /repos, /issues, /boards show the Variables button and autocomplete. - Backend: /search, /find, /person, /place now normalize raw Immich API responses through build_asset_dict, extracting city/country from exifInfo and mapping isFavorite -> is_favorite so templates render location and favorite indicators. - Telegram: extract build_telegram_asset_entry into a shared helper so the notification dispatcher and command media groups agree on video typing and /video/playback URLs; videos no longer render as still thumbnails in /latest /random /favorites media mode. - Commands: send_media_group now reuses the same Telegram file_id caches as the notification dispatcher, avoiding re-upload churn for repeated commands.
518 lines
19 KiB
Svelte
518 lines
19 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { slide } from 'svelte/transition';
|
|
import { api, getBlockedBy, type BlockedByDetail } from '$lib/api';
|
|
import BlockedByModal from '$lib/components/BlockedByModal.svelte';
|
|
import { t } from '$lib/i18n';
|
|
import { sanitizePreview } from '$lib/sanitize';
|
|
import { commandTemplateConfigsCache, supportedLocalesCache } from '$lib/stores/caches.svelte';
|
|
import PageHeader from '$lib/components/PageHeader.svelte';
|
|
import Card from '$lib/components/Card.svelte';
|
|
import Loading from '$lib/components/Loading.svelte';
|
|
import IconPicker from '$lib/components/IconPicker.svelte';
|
|
import MdiIcon from '$lib/components/MdiIcon.svelte';
|
|
import EmptyState from '$lib/components/EmptyState.svelte';
|
|
import ConfirmModal from '$lib/components/ConfirmModal.svelte';
|
|
import IconButton from '$lib/components/IconButton.svelte';
|
|
import IconGridSelect from '$lib/components/IconGridSelect.svelte';
|
|
import { providerTypeItems as providerTypeItemsFn, providerTypeFilterItems } from '$lib/grid-items';
|
|
import Modal from '$lib/components/Modal.svelte';
|
|
import JinjaEditor from '$lib/components/JinjaEditor.svelte';
|
|
import CollapsibleSlot from '$lib/components/CollapsibleSlot.svelte';
|
|
import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
|
|
import { highlightFromUrl } from '$lib/highlight';
|
|
import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
|
|
|
|
interface CmdTemplateConfig {
|
|
id: number;
|
|
user_id: number;
|
|
provider_type: string;
|
|
name: string;
|
|
description: string;
|
|
icon: string;
|
|
slots: Record<string, Record<string, string>>;
|
|
created_at: string;
|
|
}
|
|
|
|
interface SlotDef {
|
|
name: string;
|
|
description: string;
|
|
}
|
|
|
|
let LOCALES = $derived(supportedLocalesCache.items);
|
|
|
|
let allCmdTplConfigs = $state<CmdTemplateConfig[]>([]);
|
|
let filterText = $state('');
|
|
let filterType = $state('');
|
|
let effectiveType = $derived(globalProviderFilter.providerType || filterType);
|
|
let configs = $derived(allCmdTplConfigs.filter(c =>
|
|
(!filterText || c.name.toLowerCase().includes(filterText.toLowerCase())) &&
|
|
(!effectiveType || c.provider_type === effectiveType)
|
|
));
|
|
let loaded = $state(false);
|
|
let showForm = $state(false);
|
|
let editing = $state<number | null>(null);
|
|
let error = $state('');
|
|
let confirmDelete = $state<{ id: number; onconfirm: () => Promise<void> } | null>(null);
|
|
let slotPreview = $state<Record<string, string>>({});
|
|
let slotErrors = $state<Record<string, string>>({});
|
|
let slotErrorLines = $state<Record<string, number | null>>({});
|
|
let slotErrorTypes = $state<Record<string, string>>({});
|
|
let validateTimers: Record<string, ReturnType<typeof setTimeout>> = {};
|
|
/** Clean up validate timers on unmount */
|
|
onMount(() => {
|
|
return () => {
|
|
for (const timer of Object.values(validateTimers)) clearTimeout(timer);
|
|
};
|
|
});
|
|
let varsRef = $state<Record<string, any>>({});
|
|
let showVarsFor = $state<string | null>(null);
|
|
let activeLocale = $state<string>('en');
|
|
let expandedSlots = $state<Set<string>>(new Set());
|
|
let slotFilter = $state('');
|
|
let showPreviewFor = $state<Set<string>>(new Set());
|
|
|
|
function toggleSlot(key: string) {
|
|
const next = new Set(expandedSlots);
|
|
if (next.has(key)) next.delete(key); else next.add(key);
|
|
expandedSlots = next;
|
|
}
|
|
|
|
function togglePreview(key: string) {
|
|
const next = new Set(showPreviewFor);
|
|
if (next.has(key)) next.delete(key); else next.add(key);
|
|
showPreviewFor = next;
|
|
}
|
|
|
|
function getSlotStatus(key: string): 'empty' | 'valid' | 'error' | 'warning' {
|
|
if (slotErrors[key] && slotErrorTypes[key] !== 'undefined') return 'error';
|
|
if (slotErrors[key] && slotErrorTypes[key] === 'undefined') return 'warning';
|
|
if (getSlotValue(key)) return 'valid';
|
|
return 'empty';
|
|
}
|
|
|
|
const defaultForm = () => ({
|
|
provider_type: '',
|
|
name: '',
|
|
description: '',
|
|
icon: '',
|
|
slots: {} as Record<string, Record<string, string>>,
|
|
});
|
|
let form = $state(defaultForm());
|
|
|
|
// Provider capabilities
|
|
let allCapabilities = $state<Record<string, any>>({});
|
|
let providerTypes = $derived(Object.keys(allCapabilities));
|
|
let commandSlots = $derived<SlotDef[]>(
|
|
allCapabilities[form.provider_type]?.command_slots || []
|
|
);
|
|
let filteredCmdSlots = $derived(
|
|
slotFilter
|
|
? commandSlots.filter(s => s.name.toLowerCase().includes(slotFilter.toLowerCase()) || s.description.toLowerCase().includes(slotFilter.toLowerCase()))
|
|
: commandSlots
|
|
);
|
|
|
|
/** Get slot template for current locale, with fallback. */
|
|
function getSlotValue(slotName: string): string {
|
|
return form.slots[slotName]?.[activeLocale] || '';
|
|
}
|
|
|
|
/** Resolve variable reference for a slot, preferring provider-specific over shared. */
|
|
function getVarsFor(slotName: string) {
|
|
const providerVars = varsRef[form.provider_type];
|
|
return providerVars?.[slotName] ?? varsRef[slotName];
|
|
}
|
|
|
|
let modalVars = $derived(showVarsFor ? getVarsFor(showVarsFor) : null);
|
|
|
|
/** Set slot template for current locale (immutable update). */
|
|
function setSlotValue(slotName: string, value: string) {
|
|
form.slots = {
|
|
...form.slots,
|
|
[slotName]: { ...(form.slots[slotName] || {}), [activeLocale]: value }
|
|
};
|
|
}
|
|
|
|
onMount(load);
|
|
|
|
async function load() {
|
|
try {
|
|
const [cfgs, caps, vars] = await Promise.all([
|
|
commandTemplateConfigsCache.fetch(true),
|
|
api('/providers/capabilities'),
|
|
api('/command-template-configs/variables'),
|
|
supportedLocalesCache.fetch(),
|
|
]);
|
|
allCmdTplConfigs = cfgs;
|
|
allCapabilities = caps;
|
|
varsRef = vars;
|
|
} catch (err: any) {
|
|
error = err.message || t('common.loadError');
|
|
snackError(error);
|
|
} finally {
|
|
loaded = true;
|
|
highlightFromUrl();
|
|
}
|
|
}
|
|
|
|
function validateSlot(slotKey: string, template: string, immediate = false) {
|
|
if (validateTimers[slotKey]) clearTimeout(validateTimers[slotKey]);
|
|
if (!template) {
|
|
slotErrors = { ...slotErrors, [slotKey]: '' };
|
|
slotErrorLines = { ...slotErrorLines, [slotKey]: null };
|
|
slotErrorTypes = { ...slotErrorTypes, [slotKey]: '' };
|
|
const { [slotKey]: _, ...rest } = slotPreview;
|
|
slotPreview = rest;
|
|
return;
|
|
}
|
|
|
|
const doValidate = async () => {
|
|
try {
|
|
const res = await api('/command-template-configs/preview-raw', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ template }),
|
|
});
|
|
slotErrors = { ...slotErrors, [slotKey]: res.error || '' };
|
|
slotErrorLines = { ...slotErrorLines, [slotKey]: res.error_line || null };
|
|
slotErrorTypes = { ...slotErrorTypes, [slotKey]: res.error_type || '' };
|
|
if (res.rendered) {
|
|
slotPreview = { ...slotPreview, [slotKey]: res.rendered };
|
|
} else {
|
|
const { [slotKey]: _, ...rest } = slotPreview;
|
|
slotPreview = rest;
|
|
}
|
|
} catch {
|
|
slotErrors = { ...slotErrors, [slotKey]: '' };
|
|
}
|
|
};
|
|
if (immediate) doValidate();
|
|
else validateTimers[slotKey] = setTimeout(doValidate, 800);
|
|
}
|
|
|
|
function refreshAllPreviews() {
|
|
for (const slot of commandSlots) {
|
|
const template = getSlotValue(slot.name);
|
|
if (template) validateSlot(slot.name, template, true);
|
|
}
|
|
}
|
|
|
|
function openNew() {
|
|
form = defaultForm();
|
|
const typesWithCmdSlots = providerTypes.filter(t => (allCapabilities[t]?.command_slots?.length || 0) > 0);
|
|
if (typesWithCmdSlots.length > 0) form.provider_type = typesWithCmdSlots[0];
|
|
editing = null;
|
|
showForm = true;
|
|
activeLocale = 'en';
|
|
slotPreview = {};
|
|
slotErrors = {};
|
|
expandedSlots = new Set();
|
|
showPreviewFor = new Set();
|
|
slotFilter = '';
|
|
}
|
|
|
|
function edit(c: CmdTemplateConfig) {
|
|
// Deep copy nested slots
|
|
const slotsCopy: Record<string, Record<string, string>> = {};
|
|
for (const [k, v] of Object.entries(c.slots)) {
|
|
slotsCopy[k] = { ...v };
|
|
}
|
|
form = {
|
|
provider_type: c.provider_type,
|
|
name: c.name,
|
|
description: c.description || '',
|
|
icon: c.icon || '',
|
|
slots: slotsCopy,
|
|
};
|
|
editing = c.id;
|
|
showForm = true;
|
|
activeLocale = 'en';
|
|
slotPreview = {};
|
|
slotErrors = {};
|
|
expandedSlots = new Set();
|
|
showPreviewFor = new Set();
|
|
slotFilter = '';
|
|
setTimeout(() => refreshAllPreviews(), 100);
|
|
}
|
|
|
|
async function save(e: SubmitEvent) {
|
|
e.preventDefault();
|
|
error = '';
|
|
try {
|
|
if (editing) {
|
|
await api(`/command-template-configs/${editing}`, { method: 'PUT', body: JSON.stringify(form) });
|
|
} else {
|
|
await api('/command-template-configs', { method: 'POST', body: JSON.stringify(form) });
|
|
}
|
|
showForm = false;
|
|
editing = null;
|
|
await load();
|
|
snackSuccess(t('snack.cmdTemplateSaved'));
|
|
} catch (err: any) {
|
|
error = err.message;
|
|
snackError(err.message);
|
|
}
|
|
}
|
|
|
|
function clone(c: CmdTemplateConfig) {
|
|
const slotsCopy: Record<string, Record<string, string>> = {};
|
|
for (const [k, v] of Object.entries(c.slots)) {
|
|
slotsCopy[k] = { ...v };
|
|
}
|
|
form = {
|
|
provider_type: c.provider_type,
|
|
name: `${c.name} (Copy)`,
|
|
description: c.description || '',
|
|
icon: c.icon || '',
|
|
slots: slotsCopy,
|
|
};
|
|
editing = null;
|
|
showForm = true;
|
|
activeLocale = 'en';
|
|
slotPreview = {};
|
|
slotErrors = {};
|
|
expandedSlots = new Set();
|
|
showPreviewFor = new Set();
|
|
slotFilter = '';
|
|
setTimeout(() => refreshAllPreviews(), 100);
|
|
}
|
|
|
|
let blockedBy = $state<BlockedByDetail | null>(null);
|
|
function remove(id: number) {
|
|
confirmDelete = {
|
|
id,
|
|
onconfirm: async () => {
|
|
try {
|
|
await api(`/command-template-configs/${id}`, { method: 'DELETE' });
|
|
await load();
|
|
snackSuccess(t('snack.cmdTemplateDeleted'));
|
|
} catch (err: any) {
|
|
const bb = getBlockedBy(err);
|
|
if (bb) { blockedBy = bb; return; }
|
|
error = err.message;
|
|
snackError(err.message);
|
|
} finally {
|
|
confirmDelete = null;
|
|
}
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<PageHeader title={t('cmdTemplateConfig.title')} description={t('cmdTemplateConfig.description')}>
|
|
<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
|
|
class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
|
|
{showForm ? t('common.cancel') : t('cmdTemplateConfig.newConfig')}
|
|
</button>
|
|
</PageHeader>
|
|
|
|
{#if !loaded}<Loading />{:else}
|
|
|
|
{#if showForm}
|
|
<div in:slide={{ duration: 200 }}>
|
|
<Card class="mb-6">
|
|
{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
|
|
<form onsubmit={save} class="space-y-5">
|
|
<div>
|
|
<label for="ct-name" class="block text-sm font-medium mb-1">{t('cmdTemplateConfig.name')}</label>
|
|
<div class="flex gap-2">
|
|
<IconPicker value={form.icon} onselect={(v: string) => form.icon = v} />
|
|
<input id="ct-name" bind:value={form.name} required placeholder={t('cmdTemplateConfig.namePlaceholder')}
|
|
class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="ct-desc" class="block text-sm font-medium mb-1">{t('common.description')}</label>
|
|
<input id="ct-desc" bind:value={form.description} placeholder={t('cmdTemplateConfig.descriptionPlaceholder')}
|
|
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
|
|
{#if !editing}
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">{t('templateConfig.providerType')}</label>
|
|
<IconGridSelect items={providerTypeItemsFn()} bind:value={form.provider_type} columns={2} />
|
|
</div>
|
|
{:else}
|
|
<div>
|
|
<span class="block text-sm font-medium mb-1">{t('templateConfig.providerType')}</span>
|
|
<span class="text-sm text-[var(--color-muted-foreground)]">{allCapabilities[form.provider_type]?.display_name || form.provider_type}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
<fieldset class="border border-[var(--color-border)] rounded-md p-3">
|
|
<legend class="text-sm font-medium px-1">{t('cmdTemplateConfig.commandResponses')}</legend>
|
|
<p class="text-xs text-[var(--color-muted-foreground)] mb-2">{t('cmdTemplateConfig.commandResponsesHint')}</p>
|
|
|
|
<!-- Locale tabs -->
|
|
<div class="flex gap-1 mb-3 border-b border-[var(--color-border)]">
|
|
{#each LOCALES as loc}
|
|
<button type="button"
|
|
class="px-3 py-1.5 text-xs font-medium rounded-t-md transition-colors {activeLocale === loc ? 'bg-[var(--color-primary)] text-[var(--color-primary-foreground)]' : 'text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)]'}"
|
|
onclick={() => { activeLocale = loc; refreshAllPreviews(); }}>
|
|
{loc.toUpperCase()}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- Slot filter -->
|
|
{#if commandSlots.length > 4}
|
|
<div class="mb-3">
|
|
<input type="text" bind:value={slotFilter} placeholder={t('templateConfig.filterSlots')}
|
|
class="w-full px-3 py-1.5 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="space-y-2">
|
|
{#each filteredCmdSlots as slot}
|
|
<CollapsibleSlot
|
|
label={slot.name}
|
|
description="/{slot.name} — {slot.description}"
|
|
expanded={expandedSlots.has(slot.name)}
|
|
status={getSlotStatus(slot.name)}
|
|
ontoggle={() => toggleSlot(slot.name)}
|
|
>
|
|
<div class="flex items-center justify-end gap-2 mb-2">
|
|
{#if slotPreview[slot.name] && !slotErrors[slot.name]}
|
|
<button type="button" onclick={() => togglePreview(slot.name)}
|
|
class="text-xs px-2 py-0.5 rounded-md transition-colors {showPreviewFor.has(slot.name) ? 'bg-[var(--color-primary)] text-[var(--color-primary-foreground)]' : 'text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)]'}">
|
|
{t('templateConfig.preview')}
|
|
</button>
|
|
{/if}
|
|
{#if getVarsFor(slot.name)}
|
|
<button type="button" onclick={() => showVarsFor = slot.name}
|
|
class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templateConfig.variables')}</button>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if showPreviewFor.has(slot.name) && slotPreview[slot.name] && !slotErrors[slot.name]}
|
|
<div class="p-2 bg-[var(--color-muted)] rounded text-sm mb-2">
|
|
<pre class="whitespace-pre-wrap text-xs">{@html sanitizePreview(slotPreview[slot.name])}</pre>
|
|
</div>
|
|
{:else}
|
|
<JinjaEditor
|
|
value={getSlotValue(slot.name)}
|
|
onchange={(v: string) => { setSlotValue(slot.name, v); validateSlot(slot.name, v); }}
|
|
rows={3}
|
|
errorLine={slotErrorLines[slot.name] || null}
|
|
variables={getVarsFor(slot.name) || undefined}
|
|
/>
|
|
{/if}
|
|
|
|
{#if slotErrors[slot.name]}
|
|
{#if slotErrorTypes[slot.name] === 'undefined'}
|
|
<p class="mt-1 text-xs" style="color: #d97706;">⚠ {t('common.undefinedVar')}: {slotErrors[slot.name]}</p>
|
|
{:else}
|
|
<p class="mt-1 text-xs" style="color: var(--color-error-fg);">✕ {t('common.syntaxError')}: {slotErrors[slot.name]}{slotErrorLines[slot.name] ? ` (${t('common.line')} ${slotErrorLines[slot.name]})` : ''}</p>
|
|
{/if}
|
|
{/if}
|
|
</CollapsibleSlot>
|
|
{/each}
|
|
</div>
|
|
</fieldset>
|
|
|
|
<button type="submit" class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
|
|
{editing ? t('common.save') : t('common.create')}
|
|
</button>
|
|
</form>
|
|
</Card>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if !showForm && allCmdTplConfigs.length > 0}
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<input type="text" bind:value={filterText} placeholder={t('common.filterByName')}
|
|
class="flex-1 px-3 py-1.5 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
{#if !globalProviderFilter.id}
|
|
<div class="w-48">
|
|
<IconGridSelect items={providerTypeFilterItems()} bind:value={filterType} columns={2} compact />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if allCmdTplConfigs.length === 0 && !showForm}
|
|
<Card>
|
|
<EmptyState icon="mdiConsoleLine" message={t('cmdTemplateConfig.noConfigs')} />
|
|
</Card>
|
|
{:else if configs.length === 0 && !showForm}
|
|
<Card>
|
|
<EmptyState icon="mdiFilterOff" message={t('common.noFilterResults')} />
|
|
</Card>
|
|
{:else}
|
|
<div class="space-y-3 stagger-children">
|
|
{#each configs as config}
|
|
<Card hover entityId={config.id}>
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<span style="color: var(--color-primary);"><MdiIcon name={config.icon || 'mdiConsoleLine'} size={20} /></span>
|
|
<p class="font-medium">{config.name}</p>
|
|
<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{config.provider_type}</span>
|
|
{#if config.user_id === 0}
|
|
<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{t('common.system')}</span>
|
|
{/if}
|
|
<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{Object.keys(config.slots).length} {t('templateConfig.slots')}</span>
|
|
</div>
|
|
{#if config.description}
|
|
<p class="text-sm text-[var(--color-muted-foreground)] mt-1">{config.description}</p>
|
|
{/if}
|
|
</div>
|
|
<div class="flex items-center gap-1 ml-4">
|
|
<IconButton icon="mdiContentCopy" title={t('common.clone')} onclick={() => clone(config)} />
|
|
<IconButton icon="mdiPencil" title={t('common.edit')} onclick={() => edit(config)} />
|
|
<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => remove(config.id)} variant="danger" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{/if}
|
|
|
|
<ConfirmModal open={confirmDelete !== null} message={t('cmdTemplateConfig.confirmDelete')}
|
|
onconfirm={() => confirmDelete?.onconfirm()} oncancel={() => confirmDelete = null} />
|
|
|
|
<BlockedByModal open={!!blockedBy} detail={blockedBy} onclose={() => blockedBy = null} />
|
|
|
|
<!-- Variables reference modal -->
|
|
<Modal open={showVarsFor !== null} title="{t('templateConfig.variables')}: /{showVarsFor || ''}" onclose={() => showVarsFor = null}>
|
|
{#if showVarsFor && modalVars}
|
|
<p class="text-sm text-[var(--color-muted-foreground)] mb-3">{modalVars.description}</p>
|
|
<div class="space-y-1">
|
|
<p class="text-xs font-medium mb-1">{t('templateConfig.variables')}:</p>
|
|
{#each Object.entries(modalVars.variables || {}) as [name, desc]}
|
|
<div class="flex items-start gap-2 text-sm">
|
|
<code class="text-xs bg-[var(--color-muted)] px-1 py-0.5 rounded font-mono whitespace-nowrap">{'{{ ' + name + ' }}'}</code>
|
|
<span class="text-xs text-[var(--color-muted-foreground)]">{desc}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{#each [
|
|
['asset_fields', 'asset', 'Asset fields'],
|
|
['album_fields', 'album', 'Album fields'],
|
|
['command_fields', 'cmd', 'Command fields'],
|
|
['event_fields', 'event', 'Event fields'],
|
|
['repo_fields', 'repo', 'Repository fields'],
|
|
['issue_fields', 'issue', 'Issue fields'],
|
|
['pr_fields', 'pr', 'Pull request fields'],
|
|
['commit_fields', 'c', 'Commit fields'],
|
|
['board_fields', 'board', 'Board fields'],
|
|
['card_fields', 'card', 'Card fields'],
|
|
['list_fields', 'lst', 'List fields'],
|
|
['device_fields', 'd', 'Device fields'],
|
|
] as [fieldKey, prefix, title]}
|
|
{#if modalVars[fieldKey]}
|
|
<div class="mt-3 pt-3 border-t border-[var(--color-border)]">
|
|
<p class="text-xs font-medium mb-1">{title} <span class="font-normal text-[var(--color-muted-foreground)]">(use {prefix}.field)</span>:</p>
|
|
{#each Object.entries(modalVars[fieldKey]) as [name, desc]}
|
|
<div class="flex items-start gap-2 text-sm">
|
|
<code class="text-xs bg-[var(--color-muted)] px-1 py-0.5 rounded font-mono whitespace-nowrap">{'{{ ' + prefix + '.' + name + ' }}'}</code>
|
|
<span class="text-xs text-[var(--color-muted-foreground)]">{desc}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
{/if}
|
|
</Modal>
|