remove page transitions, use default actions

This commit is contained in:
Benjamin Palko 2025-02-11 09:20:47 -05:00
parent da45bfb2cb
commit a77e75d115
5 changed files with 10 additions and 12 deletions

View file

@ -8,11 +8,11 @@
import { Cog, LogOut, MessageCircleMore, UsersRound } from 'lucide-svelte'; import { Cog, LogOut, MessageCircleMore, UsersRound } from 'lucide-svelte';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import type { PageData } from './$types'; import type { LayoutData } from './$types';
type Props = { type Props = {
children: Snippet; children: Snippet;
data: PageData; data: LayoutData;
}; };
let { children, data }: Props = $props(); let { children, data }: Props = $props();

View file

@ -27,7 +27,7 @@ export const load = async (event) => {
}; };
export const actions = { export const actions = {
update: async (event) => { default: async (event) => {
const form = await event.request.formData(); const form = await event.request.formData();
const tenantId = event.locals.tenant.id; const tenantId = event.locals.tenant.id;

View file

@ -2,11 +2,10 @@
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
import { Button } from '$lib/components/Actions'; import { Button } from '$lib/components/Actions';
import { TextInput } from '$lib/components/DataInput'; import { TextInput } from '$lib/components/DataInput';
import Divider from '$lib/components/Layout/Divider.svelte';
import { messages } from '$lib/i18n'; import { messages } from '$lib/i18n';
import { Fingerprint, KeyRound, PhoneOutgoing } from 'lucide-svelte'; import { Fingerprint, KeyRound, PhoneOutgoing } from 'lucide-svelte';
import { fade } from 'svelte/transition';
import type { ActionData, PageData } from './$types'; import type { ActionData, PageData } from './$types';
import Divider from '$lib/components/Layout/Divider.svelte';
type Props = { type Props = {
data: PageData; data: PageData;
@ -17,18 +16,18 @@
let configs = $derived(form?.configs ?? data.configs); let configs = $derived(form?.configs ?? data.configs);
</script> </script>
<div class="page" transition:fade> <div class="page">
<div class="card w-full max-w-xl bg-base-200 px-4 pt-4 shadow-xl"> <div class="card w-full max-w-xl bg-base-200 px-4 pt-4 shadow-xl">
<div class="card-title justify-center"> <div class="card-title justify-center">
<h2 class="text-2xl font-semibold">{messages.settings_title()}</h2> <h2 class="text-2xl font-semibold">{messages.settings_title()}</h2>
{#if form?.error} {#if form?.error}
<div role="alert" class="alert alert-error absolute -top-20" transition:fade> <div role="alert" class="alert alert-error absolute -top-20">
<i class="fi fi-bs-octagon-xmark h-6 w-6 shrink-0"></i> <i class="fi fi-bs-octagon-xmark h-6 w-6 shrink-0"></i>
<span>{form.error}</span> <span>{form.error}</span>
</div> </div>
{/if} {/if}
</div> </div>
<form id="sms" method="POST" action="?/update" use:enhance> <form id="sms" method="POST" use:enhance>
<div class="card-body"> <div class="card-body">
<Divider /> <Divider />
<!-- Twilio --> <!-- Twilio -->

View file

@ -37,7 +37,7 @@ export const load = async (event) => {
}; };
export const actions = { export const actions = {
push: async (event) => { default: async (event) => {
const form = await event.request.formData(); const form = await event.request.formData();
if (!form.has('phone')) { if (!form.has('phone')) {

View file

@ -7,7 +7,6 @@
import { Link } from '$lib/components/Navigation'; import { Link } from '$lib/components/Navigation';
import { messages } from '$lib/i18n'; import { messages } from '$lib/i18n';
import { CircleX, MessageCircleMore, PhoneOutgoing, TriangleAlert } from 'lucide-svelte'; import { CircleX, MessageCircleMore, PhoneOutgoing, TriangleAlert } from 'lucide-svelte';
import { fade } from 'svelte/transition';
import type { ActionData, PageData } from './$types'; import type { ActionData, PageData } from './$types';
type Props = { type Props = {
@ -25,7 +24,7 @@
<MessageCircleMore size="18" /> {messages.sms_label_message()} <MessageCircleMore size="18" /> {messages.sms_label_message()}
{/snippet} {/snippet}
<div class="page" transition:fade> <div class="page">
<div class="card bg-base-200 px-4 pt-4 shadow-xl"> <div class="card bg-base-200 px-4 pt-4 shadow-xl">
{#if form?.error} {#if form?.error}
<Alert status="error"> <Alert status="error">
@ -49,7 +48,7 @@
<div class="card-title justify-center"> <div class="card-title justify-center">
<h2 class="text-2xl font-semibold">{messages.sms_prompt()}</h2> <h2 class="text-2xl font-semibold">{messages.sms_prompt()}</h2>
</div> </div>
<form id="sms" method="POST" action="?/push" use:enhance> <form id="sms" method="POST" use:enhance>
<div class="card-body"> <div class="card-body">
<TextInput <TextInput
disabled={!data.isTwilioConfigured} disabled={!data.isTwilioConfigured}