Build a custom settings interface

export const SETTINGS = {
	serviceUrl: "serviceUrl",
	refreshMinutes: "refreshMinutes",
} as const;

export const DEFAULTS = {
	serviceUrl: "https://example.com/api",
	refreshMinutes: 30,
} as const;

export const settingsSchema: PluginSettingsSchema = {
	title: "Report service",
	fields: [
		{
			key: SETTINGS.serviceUrl,
			type: "string",
			label: "Service URL",
			description: "HTTPS endpoint used to refresh report data.",
			default: DEFAULTS.serviceUrl,
			placeholder: "https://example.com/api",
		},
		{
			key: SETTINGS.refreshMinutes,
			type: "number",
			label: "Refresh interval",
			description: "Minutes between service requests.",
			default: DEFAULTS.refreshMinutes,
			min: 5,
			max: 240,
			step: 5,
		},
	],
};

<!-- src/ReportServiceSettings.svelte -->
<script lang="ts">
	import {
		FormField,
		NumberInput,
		TextInput,
	} from "phoundry-ui";
	import { DEFAULTS, SETTINGS } from "./settings";

	let {
		plugin,
		settings,
	}: PluginSettingsComponentProps = $props();

	const serviceUrl = $derived(
		settings.get<string>(SETTINGS.serviceUrl) ??
			DEFAULTS.serviceUrl,
	);
	const refreshMinutes = $derived(
		settings.get<number>(SETTINGS.refreshMinutes) ??
			DEFAULTS.refreshMinutes,
	);

	let serviceUrlError = $state("");
	let savingUrl = $state(false);

	async function updateServiceUrl(value: string) {
		const next = value.trim();

		try {
			const url = new URL(next);
			if (url.protocol !== "https:") {
				throw new Error("Use an HTTPS URL.");
			}
		} catch {
			serviceUrlError = "Enter a valid HTTPS URL.";
			return;
		}

		serviceUrlError = "";
		savingUrl = true;
		try {
			await settings.set(SETTINGS.serviceUrl, next);
		} finally {
			savingUrl = false;
		}
	}

	async function updateRefreshMinutes(value: number) {
		if (value < 5 || value > 240) return;
		await settings.set(SETTINGS.refreshMinutes, value);
	}
</script>

<div class="settings-grid" aria-label="{plugin.name} settings">
	<FormField
		id="report-service-url"
		label="Service URL"
		description="HTTPS endpoint used to refresh report data."
		error={serviceUrlError}
	>
		<TextInput
			id="report-service-url"
			aria-describedby="report-service-url-desc"
			value={serviceUrl}
			disabled={savingUrl}
			onchange={updateServiceUrl}
		/>
	</FormField>

	<FormField
		id="report-refresh-minutes"
		label="Refresh interval"
		description="Minutes between service requests."
	>
		<NumberInput
			id="report-refresh-minutes"
			aria-describedby="report-refresh-minutes-desc"
			value={refreshMinutes}
			min={5}
			max={240}
			step={5}
			onchange={updateRefreshMinutes}
		/>
	</FormField>
</div>

<style>
	.settings-grid {
		display: grid;
		gap: 1rem;
		min-width: 0;
	}
</style>

import ReportServiceSettings from "./ReportServiceSettings.svelte";

export default function createPlugin(): PhialsPlugin {
	return {
		id: "example.report-service",
		name: "Report service",
		version: "1.0.0",
		settings: settingsSchema,
		settingsComponent: ReportServiceSettings,
		providers: [
			// Capability providers
		],
	};
}