notify-bridge/frontend/src/routes/providers/+page.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import { slide } from 'svelte/transition';
	import { api } from '$lib/api';
	import { t } from '$lib/i18n';
	import { providersCache } 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 { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
	import { highlightFromUrl } from '$lib/highlight';
	import type { ServiceProvider } from '$lib/types';

	let providers = $derived(providersCache.items);
	let showForm = $state(false);
	let editing = $state<number | null>(null);
	let form = $state({ name: 'Immich', type: 'immich', url: '', api_key: '', external_domain: '', icon: '' });
	let error = $state('');
	let loadError = $state('');
	let submitting = $state(false);
	let loaded = $state(false);
	let confirmDelete = $state<ServiceProvider | null>(null);

	let health = $state<Record<number, boolean | null>>({});

	onMount(load);
	async function load() {
		try {
			await providersCache.fetch(true);
			loadError = '';
		} catch (err: any) {
			loadError = err.message || t('providers.loadError');
		} finally { loaded = true; highlightFromUrl(); }
		// Ping all providers in background
		for (const p of providers) {
			health = { ...health, [p.id]: null };
			api(`/providers/${p.id}/test`, { method: 'POST' })
				.then((r: any) => { health = { ...health, [p.id]: r.ok }; })
				.catch(() => { health = { ...health, [p.id]: false }; });
		}
	}

	function openNew() {
		form = { name: 'Immich', type: 'immich', url: '', api_key: '', external_domain: '', icon: '' };
		editing = null; showForm = true;
	}
	function edit(p: any) {
		const cfg = p.config || {};
		form = { name: p.name, type: p.type, url: cfg.url || '', api_key: '', external_domain: cfg.external_domain || '', icon: p.icon || '' };
		editing = p.id; showForm = true;
	}

	async function save(e: SubmitEvent) {
		e.preventDefault(); error = ''; submitting = true;
		try {
			const config: any = { url: form.url };
			if (form.api_key) config.api_key = form.api_key;
			if (form.external_domain) config.external_domain = form.external_domain;
			if (editing) {
				await api(`/providers/${editing}`, { method: 'PUT', body: JSON.stringify({ name: form.name, icon: form.icon, config }) });
			} else {
				config.api_key = form.api_key; // required on create
				await api('/providers', { method: 'POST', body: JSON.stringify({ type: form.type, name: form.name, icon: form.icon, config }) });
			}
			showForm = false; editing = null; providersCache.invalidate(); await load();
			snackSuccess(t('snack.providerSaved'));
		} catch (err: any) { error = err.message; snackError(err.message); }
		submitting = false;
	}

	function startDelete(provider: any) { confirmDelete = provider; }
	async function doDelete() {
		if (!confirmDelete) return;
		const id = confirmDelete.id;
		confirmDelete = null;
		try { await api(`/providers/${id}`, { method: 'DELETE' }); providersCache.invalidate(); await load(); snackSuccess(t('snack.providerDeleted')); }
		catch (err: any) { error = err.message; snackError(err.message); }
	}
</script>

<PageHeader title={t('providers.title')} description={t('providers.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('providers.cancel') : t('providers.addProvider')}
	</button>
</PageHeader>

{#if !loaded}
	<Loading />
{:else}

{#if loadError}
	<Card class="mb-6">
		<div class="flex items-center gap-2 text-sm" style="color: var(--color-error-fg);">
			<MdiIcon name="mdiAlertCircle" size={18} />
			{loadError}
		</div>
	</Card>
{/if}

{#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-3">
			<div>
				<label for="prv-type" class="block text-sm font-medium mb-1">{t('providers.type')}</label>
				<select id="prv-type" bind:value={form.type} disabled={!!editing}
					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] disabled:opacity-60">
					<option value="immich">Immich</option>
				</select>
			</div>
			<div>
				<label for="prv-name" class="block text-sm font-medium mb-1">{t('providers.name')}</label>
				<div class="flex gap-2">
					<IconPicker value={form.icon} onselect={(v: string) => form.icon = v} />
					<input id="prv-name" bind:value={form.name} required 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="prv-url" class="block text-sm font-medium mb-1">{t('providers.url')}</label>
				<input id="prv-url" bind:value={form.url} required placeholder={t('providers.urlPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
			</div>
			<div>
				<label for="prv-key" class="block text-sm font-medium mb-1">{editing ? t('providers.apiKeyKeep') : t('providers.apiKey')}</label>
				<input id="prv-key" bind:value={form.api_key} type="password" required={!editing} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
			</div>
			<div>
				<label for="prv-ext" class="block text-sm font-medium mb-1">{t('providers.externalDomain')} <span class="text-xs text-[var(--color-muted-foreground)]">({t('providers.optional')})</span></label>
				<input id="prv-ext" bind:value={form.external_domain} placeholder="https://photos.example.com" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
			</div>
			<button type="submit" disabled={submitting}
				class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">
				{submitting ? t('providers.connecting') : (editing ? t('common.save') : t('providers.addProvider'))}
			</button>
		</form>
	</Card>
	</div>
{/if}

{#if providers.length === 0 && !showForm}
	<Card>
		<EmptyState icon="mdiServer" message={t('providers.noProviders')} />
	</Card>
{:else}
	<div class="space-y-3 stagger-children">
		{#each providers as provider}
			<Card hover entityId={provider.id}>
				<div class="flex items-center justify-between">
					<div class="flex items-center gap-3">
						<div class="health-dot {health[provider.id] === true ? 'online' : health[provider.id] === false ? 'offline' : 'checking'}"></div>
						<span style="color: var(--color-primary);"><MdiIcon name={provider.icon || 'mdiServer'} size={20} /></span>
						<div>
							<div class="flex items-center gap-2">
								<p class="font-medium">{provider.name}</p>
								<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{provider.type}</span>
							</div>
							{#if provider.config?.url}
								<a href={provider.config.url} target="_blank" rel="noopener" class="text-xs text-[var(--color-muted-foreground)] font-mono hover:text-[var(--color-primary)] hover:underline">{provider.config.url}</a>
							{/if}
						</div>
					</div>
					<div class="flex items-center gap-1">
						<IconButton icon="mdiPencil" title={t('common.edit')} onclick={() => edit(provider)} />
						<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => startDelete(provider)} variant="danger" />
					</div>
				</div>
			</Card>
		{/each}
	</div>
{/if}

{/if}

<ConfirmModal open={!!confirmDelete} message={t('providers.confirmDelete')}
	onconfirm={doDelete} oncancel={() => confirmDelete = null} />

<style>
	.health-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		flex-shrink: 0;
		transition: all 0.3s ease;
	}
	.health-dot.online {
		background: #059669;
		box-shadow: 0 0 8px rgba(5, 150, 105, 0.4);
	}
	.health-dot.offline {
		background: #ef4444;
		box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
	}
	.health-dot.checking {
		background: #f59e0b;
		animation: pulseCheck 1.5s ease-in-out infinite;
	}
	@keyframes pulseCheck {
		0%, 100% { box-shadow: 0 0 4px rgba(245, 158, 11, 0.3); }
		50% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.6); }
	}
</style>