Skeleton: Use progressive form enhancement for register/login

src/lib/components/cards/DriverCard.svelte

@@ -10,6 +10,7 @@
   import type { Driver, Team } from "$lib/schema";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
   import { team_dropdown_options } from "$lib/dropdown";
+  import { enhance } from "$app/forms";
 
   interface DriverCardProps {
     /** The [Driver] object used to prefill values. */
@@ -71,7 +72,7 @@
   imgheight={DRIVER_HEADSHOT_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
 >
-  <form method="POST" enctype="multipart/form-data">
+  <form method="POST" enctype="multipart/form-data" use:enhance>
     <!-- This is also disabled, because the ID should only be -->
     <!-- "leaked" to users that are allowed to use the inputs -->
     {#if driver && !disable_inputs}
@@ -158,6 +159,7 @@
             disabled={disable_inputs}
             submit
             width="w-1/2"
+            onclick={() => modalStore.close()}
           >
             Save
           </Button>
@@ -167,6 +169,7 @@
             disabled={disable_inputs}
             formaction="?/delete_driver"
             width="w-1/2"
+            onclick={() => modalStore.close()}
           >
             Delete
           </Button>
@@ -177,6 +180,7 @@
             submit
             width="w-full"
             disabled={disable_inputs}
+            onclick={() => modalStore.close()}
           >
             Create Driver
           </Button>

src/lib/components/cards/RaceCard.svelte

@@ -5,6 +5,7 @@
   import type { Race } from "$lib/schema";
   import { format } from "date-fns";
   import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
+  import { enhance } from "$app/forms";
 
   interface RaceCardProps {
     /** The [Race] object used to prefill values. */
@@ -76,7 +77,7 @@
   imgheight={RACE_PICTOGRAM_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
 >
-  <form method="POST" enctype="multipart/form-data">
+  <form method="POST" enctype="multipart/form-data" use:enhance>
     <!-- This is also disabled, because the ID should only be -->
     <!-- "leaked" to users that are allowed to use the inputs -->
     {#if race && !disable_inputs}
@@ -186,6 +187,7 @@
             disabled={disable_inputs}
             submit
             width="w-1/3"
+            onclick={() => modalStore.close()}
           >
             Save Changes
           </Button>
@@ -195,6 +197,7 @@
             disabled={disable_inputs}
             formaction="?/delete_race"
             width="w-1/3"
+            onclick={() => modalStore.close()}
           >
             Delete
           </Button>
@@ -205,6 +208,7 @@
             submit
             width="w-1/2"
             disabled={disable_inputs}
+            onclick={() => modalStore.close()}
           >
             Create Race
           </Button>

src/lib/components/cards/RacePickCard.svelte

@@ -6,6 +6,7 @@
   import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
   import { driver_dropdown_options } from "$lib/dropdown";
+  import { enhance } from "$app/forms";
 
   interface RacePickCardProps {
     /** The [RacePick] object used to prefill values. */
@@ -91,7 +92,7 @@
   imgheight={DRIVER_HEADSHOT_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
 >
-  <form method="POST" enctype="multipart/form-data">
+  <form method="POST" enctype="multipart/form-data" use:enhance>
     <!-- This is also disabled, because the ID should only be -->
     <!-- "leaked" to users that are allowed to use the inputs -->
     {#if racepick && !disable_inputs}
@@ -134,6 +135,7 @@
             disabled={disable_inputs}
             submit
             width="w-1/2"
+            onclick={() => modalStore.close()}
           >
             Save Changes
           </Button>
@@ -143,11 +145,18 @@
             disabled={disable_inputs}
             formaction="?/delete_racepick"
             width="w-1/2"
+            onclick={() => modalStore.close()}
           >
             Delete
           </Button>
         {:else}
-          <Button formaction="?/create_racepick" color="tertiary" submit width="w-full">
+          <Button
+            formaction="?/create_racepick"
+            color="tertiary"
+            submit
+            width="w-full"
+            onclick={() => modalStore.close()}
+          >
             Make Pick
           </Button>
         {/if}

src/lib/components/cards/RaceResultCard.svelte

@@ -10,6 +10,7 @@
   import type { Driver, Race, RaceResult } from "$lib/schema";
   import { get_by_value } from "$lib/database";
   import { race_dropdown_options } from "$lib/dropdown";
+  import { enhance } from "$app/forms";
 
   interface RaceResultCardProps {
     /** The [RaceResult] object used to prefill values. */
@@ -146,7 +147,7 @@
 </script>
 
 <Card width="w-full sm:w-[512px]">
-  <form method="POST" enctype="multipart/form-data">
+  <form method="POST" enctype="multipart/form-data" use:enhance>
     <!-- This is also disabled, because the ID should only be -->
     <!-- "leaked" to users that are allowed to use the inputs -->
     {#if result2 && !disable_inputs2}
@@ -224,6 +225,7 @@
             disabled={disable_inputs2}
             submit
             width="w-1/2"
+            onclick={() => modalStore.close()}
           >
             Save
           </Button>
@@ -233,6 +235,7 @@
             disabled={disable_inputs2}
             formaction="?/delete_raceresult"
             width="w-1/2"
+            onclick={() => modalStore.close()}
           >
             Delete
           </Button>
@@ -243,6 +246,7 @@
             submit
             width="w-full"
             disabled={disable_inputs2}
+            onclick={() => modalStore.close()}
           >
             Create Result
           </Button>

src/lib/components/cards/SubstitutionCard.svelte

@@ -6,6 +6,7 @@
   import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
   import { driver_dropdown_options, race_dropdown_options } from "$lib/dropdown";
+  import { enhance } from "$app/forms";
 
   interface SubstitutionCardProps {
     /** The [Substitution] object used to prefill values. */
@@ -104,7 +105,7 @@
   imgheight={DRIVER_HEADSHOT_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
 >
-  <form method="POST" enctype="multipart/form-data">
+  <form method="POST" enctype="multipart/form-data" use:enhance>
     <!-- This is also disabled, because the ID should only be -->
     <!-- "leaked" to users that are allowed to use the inputs -->
     {#if substitution && !disable_inputs}
@@ -158,6 +159,7 @@
             disabled={disable_inputs}
             submit
             width="w-1/2"
+            onclick={() => modalStore.close()}
           >
             Save Changes
           </Button>
@@ -167,6 +169,7 @@
             disabled={disable_inputs}
             formaction="?/delete_substitution"
             width="w-1/2"
+            onclick={() => modalStore.close()}
           >
             Delete
           </Button>
@@ -177,6 +180,7 @@
             submit
             width="w-full"
             disabled={disable_inputs}
+            onclick={() => modalStore.close()}
           >
             Create Substitution
           </Button>

src/lib/components/cards/TeamCard.svelte

@@ -4,6 +4,7 @@
   import { Card, Button, Input, LazyImage } from "$lib/components";
   import type { Team } from "$lib/schema";
   import { TEAM_BANNER_HEIGHT, TEAM_BANNER_WIDTH } from "$lib/config";
+  import { enhance } from "$app/forms";
 
   interface TeamCardProps {
     /** The [Team] object used to prefill values. */
@@ -57,7 +58,7 @@
   imgheight={TEAM_BANNER_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
 >
-  <form method="POST" enctype="multipart/form-data">
+  <form method="POST" enctype="multipart/form-data" use:enhance>
     <!-- This is also disabled, because the ID should only be -->
     <!-- "leaked" to users that are allowed to use the inputs -->
     {#if team && !disable_inputs}
@@ -147,6 +148,7 @@
             disabled={disable_inputs}
             submit
             width="w-1/2"
+            onclick={() => modalStore.close()}
           >
             Save
           </Button>
@@ -156,6 +158,7 @@
             disabled={disable_inputs}
             formaction="?/delete_team"
             width="w-1/2"
+            onclick={() => modalStore.close()}
           >
             Delete
           </Button>
@@ -166,6 +169,7 @@
             submit
             width="w-full"
             disabled={disable_inputs}
+            onclick={() => modalStore.close()}
           >
             Create Team
           </Button>

src/routes/+layout.svelte

@@ -38,6 +38,7 @@
     type ModalComponent,
   } from "@skeletonlabs/skeleton";
   import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
+  import { enhance } from "$app/forms";
 
   let { data, children }: { data: LayoutData; children: Snippet } = $props();
 
@@ -180,7 +181,7 @@
     <!-- Login Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
       <h4 class="h4 select-none">Enter Username and Password</h4>
-      <form method="POST" class="contents">
+      <form method="POST" class="contents" use:enhance>
         <!-- Supply the pathname so the form can redirect to the current page. -->
         <input type="hidden" name="redirect_url" value={$page.url.pathname} />
         <Input name="username" placeholder="Username" autocomplete="username" required>
@@ -220,7 +221,7 @@
     <!-- Profile Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
       <h4 class="h4 select-none">Edit Profile</h4>
-      <form method="POST" enctype="multipart/form-data" class="contents">
+      <form method="POST" enctype="multipart/form-data" class="contents" use:enhance>
         <!-- Supply the pathname so the form can redirect to the current page. -->
         <input type="hidden" name="redirect_url" value={$page.url.pathname} />
         <input type="hidden" name="id" value={data.user.id} />

src/routes/racepicks/+page.svelte

@@ -25,24 +25,26 @@
 
   let { data }: { data: PageData } = $props();
 
-  const currentpick: RacePick | undefined =
+  let currentpick = (): RacePick | undefined =>
     data.racepicks.filter(
       (racepick: RacePick) =>
         racepick.expand.user.username === data.user?.username &&
         racepick.race === data.currentrace?.id,
     )[0] ?? undefined;
 
-  let pxx_select_value: string = $state(currentpick?.pxx ?? "");
-  let dnf_select_value: string = $state(currentpick?.dnf ?? "");
+  let pxx_select_value: string = $state(currentpick()?.pxx ?? "");
+  let dnf_select_value: string = $state(currentpick()?.dnf ?? "");
 
   const active_drivers_and_substitutes = (
     drivers: Driver[],
     substitutions: Substitution[],
   ): Driver[] => {
+    if (!data.currentrace) return [];
+
     let active_and_substitutes: Driver[] = drivers.filter((driver: Driver) => driver.active);
 
     substitutions
-      .filter((substitution: Substitution) => substitution.race === currentpick.race)
+      .filter((substitution: Substitution) => substitution.race === data.currentrace?.id)
       .forEach((substitution: Substitution) => {
         const for_index = active_and_substitutes.findIndex(
           (driver: Driver) => driver.id === substitution.for,
@@ -63,7 +65,7 @@
       type: "component",
       component: "racePickCard",
       meta: {
-        racepick: currentpick,
+        racepick: currentpick(),
         currentrace: data.currentrace,
         user: data.user,
         drivers: active_drivers_and_substitutes(await data.drivers, await data.substitutions),
@@ -156,7 +158,7 @@
                 {#await data.graphics then graphics}
                   {#await data.drivers then drivers}
                     <LazyImage
-                      src={get_by_value(drivers, "id", currentpick?.pxx ?? "")?.headshot_url ??
+                      src={get_by_value(drivers, "id", currentpick()?.pxx ?? "")?.headshot_url ??
                         get_driver_headshot_template(graphics)}
                       imgwidth={DRIVER_HEADSHOT_WIDTH}
                       imgheight={DRIVER_HEADSHOT_HEIGHT}
@@ -173,7 +175,7 @@
                 {#await data.graphics then graphics}
                   {#await data.drivers then drivers}
                     <LazyImage
-                      src={get_by_value(drivers, "id", currentpick?.dnf ?? "")?.headshot_url ??
+                      src={get_by_value(drivers, "id", currentpick()?.dnf ?? "")?.headshot_url ??
                         get_driver_headshot_template(graphics)}
                       imgwidth={DRIVER_HEADSHOT_WIDTH}
                       imgheight={DRIVER_HEADSHOT_HEIGHT}