src/routes/app/sms/+page.svelte

@@ -1,43 +1,59 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
 	import { Button } from '$lib/components/Actions';
 	import { Textarea, TextInput } from '$lib/components/DataInput';
-	import { fade } from 'svelte/transition';
+	import { Alert } from '$lib/components/Feedback';
-	import type { ActionData } from './$types';
+	import { Link } from '$lib/components/Navigation';
 	import { messages } from '$lib/i18n';
+	import { CircleX, MessageCircleMore, PhoneOutgoing, TriangleAlert } from 'lucide-svelte';
+	import { fade } from 'svelte/transition';
+	import type { ActionData, PageData } from './$types';
 
 	type Props = {
+		data: PageData;
 		form: ActionData;
 	};
-	let { form }: Props = $props();
+	let { data, form }: Props = $props();
+	let isConfigMissing = $derived(!data.configs);
 </script>
 
 {#snippet PhoneLabel()}
-	<i class="fi fi-sr-phone-flip"></i> {messages.sms_label_phone()}
+	<PhoneOutgoing size="18" /> {messages.sms_label_phone()}
 {/snippet}
 
 {#snippet MessageLabel()}
-	<i class="fi fi-sr-comment-alt"></i> {messages.sms_label_message()}
+	<MessageCircleMore size="18" /> {messages.sms_label_message()}
-{/snippet}
-
-{#snippet alert(message: string)}
-	<div role="alert" class="alert alert-error absolute -top-20" transition:fade>
-		<i class="fi fi-bs-octagon-xmark h-6 w-6 shrink-0"></i>
-		<span>{message}</span>
-	</div>
 {/snippet}
 
 <div class="page" transition:fade>
 	<div class="card bg-base-200 px-4 pt-4 shadow-xl">
+		{#if form?.error}
+			<Alert status="error">
+				{#snippet icon()}
+					<CircleX />
+				{/snippet}
+				<span>{form.error}</span>
+			</Alert>
+		{:else if isConfigMissing}
+			<Alert status="warning">
+				{#snippet icon()}
+					<TriangleAlert />
+				{/snippet}
+				<span>
+					Twilio must be configured on the <Link onclick={() => goto('/app/settings')}
+						>Settings</Link
+					> page
+				</span>
+			</Alert>
+		{/if}
 		<div class="card-title justify-center">
 			<h2 class="text-2xl font-semibold">{messages.sms_prompt()}</h2>
-			{#if form?.error}
-				{@render alert(form.error)}
-			{/if}
 		</div>
 		<form id="sms" method="POST" action="?/push" use:enhance>
 			<div class="card-body">
 				<TextInput
+					disabled={isConfigMissing}
 					type="tel"
 					name="phone"
 					label={PhoneLabel}
@@ -46,6 +62,7 @@
 					fade
 				/>
 				<Textarea
+					disabled={isConfigMissing}
 					label={MessageLabel}
 					size="lg"
 					error={form?.error}
@@ -55,7 +72,9 @@
 				/>
 			</div>
 			<div class="card-actions justify-center px-8 pb-4">
-				<Button type="submit" variant="outline" full>{messages.sms_button_submit()}</Button>
+				<Button disabled={isConfigMissing} type="submit" variant="outline" full>
+					{messages.sms_button_submit()}
+				</Button>
 			</div>
 		</form>
 	</div>