Lib: Fix nullpointer in RacePickCard/SubstitutionCard preview handler

src/lib/components/cards/DriverCard.svelte

@@ -7,138 +7,111 @@
     type ModalStore,
   } from "@skeletonlabs/skeleton";
   import { Button, Input, Card, Dropdown } from "$lib/components";
-  import type { Driver, Team } from "$lib/schema";
+  import type { Driver } 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";
+  import { get_driver_headshot_template } from "$lib/database";
 
   interface DriverCardProps {
+    /** Data passed from the page context */
+    data: any;
+
     /** The [Driver] object used to prefill values. */
-    driver?: Driver | undefined;
-
-    /** The teams (for the dropdown options) */
-    teams: Team[];
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
-
-    /** The [src] of the driver headshot template preview */
-    headshot_template?: string;
-
-    /** The value this component's team select dropdown will bind to */
-    // TODO: Move this into this component? Why am I passing it from the outside?
-    //       This also applies to the other card components...
-    team_select_value: string;
-
-    /** The value this component's active switch will bind to */
-    active_value: boolean;
+    driver?: Driver;
   }
 
-  let {
-    driver = undefined,
-    teams,
-    disable_inputs = false,
-    require_inputs = false,
-    headshot_template = undefined,
-    team_select_value,
-    active_value,
-  }: DriverCardProps = $props();
+  let { data, driver = undefined }: DriverCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     driver = meta.driver;
-    teams = meta.teams;
-    team_select_value = meta.team_select_value;
-    active_value = meta.active_value;
-    disable_inputs = meta.disable_inputs;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    headshot_template = meta.headshot_template;
   }
+
+  const required: boolean = $derived(!driver);
+  const disabled: boolean = $derived(!data.admin);
+  const labelwidth: string = "120px";
+
+  let team_select_value: string = $state(driver?.team ?? "");
+  let active_value: boolean = $state(driver?.active ?? true);
 </script>
 
+{#await data.graphics then graphics}
   <Card
-  imgsrc={driver?.headshot_url ?? headshot_template}
-  imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
+    imgsrc={driver?.headshot_url ?? get_driver_headshot_template(graphics)}
+    imgid="headshot_preview"
     width="w-full sm:w-auto"
     imgwidth={DRIVER_HEADSHOT_WIDTH}
     imgheight={DRIVER_HEADSHOT_HEIGHT}
     imgonclick={(event: Event) => modalStore.close()}
   >
-  <form method="POST" enctype="multipart/form-data" use:enhance>
+    <form
+      method="POST"
+      enctype="multipart/form-data"
+      use:enhance
+      onsubmit={() => modalStore.close()}
+    >
       <!-- This is also disabled, because the ID should only be -->
       <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if driver && !disable_inputs}
+      {#if driver && !disabled}
         <input name="id" type="hidden" value={driver.id} />
       {/if}
 
       <div class="flex flex-col gap-2">
         <!-- Driver name input -->
-      <Input
-        id="driver_first_name_{driver?.id ?? 'create'}"
-        name="firstname"
-        value={driver?.firstname ?? ""}
-        autocomplete="off"
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
-        >First Name
+        <Input name="firstname" value={driver?.firstname ?? ""} {labelwidth} {disabled} {required}>
+          First Name
         </Input>
         <Input
-        id="driver_last_name_{driver?.id ?? 'create'}"
           name="lastname"
           value={driver?.lastname ?? ""}
           autocomplete="off"
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
-        >Last Name
+          {labelwidth}
+          {disabled}
+          {required}
+        >
+          Last Name
         </Input>
         <Input
-        id="driver_code_{driver?.id ?? 'create'}"
           name="code"
           value={driver?.code ?? ""}
           autocomplete="off"
           minlength={3}
           maxlength={3}
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
-        >Driver Code
+          {labelwidth}
+          {disabled}
+          {required}
+        >
+          Driver Code
         </Input>
 
         <!-- Driver team input -->
+        {#await data.teams then teams}
           <Dropdown
             name="team"
             input_variable={team_select_value}
             options={team_dropdown_options(teams)}
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
+            {labelwidth}
+            {disabled}
+            {required}
           >
             Team
           </Dropdown>
+        {/await}
 
         <!-- Headshot upload -->
         <FileDropzone
           name="headshot"
-        id="driver_headshot_{driver?.id ?? 'create'}"
-        onchange={get_image_preview_event_handler(
-          `update_driver_headshot_preview_${driver?.id ?? "create"}`,
-        )}
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        <svelte:fragment slot="message"
-          ><span class="font-bold">Upload Headshot</span></svelte:fragment
+          onchange={get_image_preview_event_handler("headshot_preview")}
+          {disabled}
+          {required}
         >
+          <svelte:fragment slot="message">
+            <span class="font-bold">Upload Headshot</span>
+          </svelte:fragment>
         </FileDropzone>
 
         <!-- Save/Delete buttons -->
@@ -149,39 +122,18 @@
               background="bg-primary-500"
               active="bg-tertiary-500"
               bind:checked={active_value}
-            disabled={disable_inputs}
+              {disabled}
             />
           </div>
           {#if driver}
-          <Button
-            formaction="?/update_driver"
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
+            <Button formaction="?/update_driver" color="secondary" {disabled} submit width="w-1/2">
               Save
             </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_driver"
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
+            <Button formaction="?/delete_driver" color="primary" {disabled} submit width="w-1/2">
               Delete
             </Button>
           {:else}
-          <Button
-            formaction="?/create_driver"
-            color="tertiary"
-            submit
-            width="w-full"
-            disabled={disable_inputs}
-            onclick={() => modalStore.close()}
-          >
+            <Button formaction="?/create_driver" color="tertiary" {disabled} submit width="w-full">
               Create Driver
             </Button>
           {/if}
@@ -189,3 +141,4 @@
       </div>
     </form>
   </Card>
+{/await}

src/lib/components/cards/RaceCard.svelte

@@ -6,210 +6,188 @@
   import { format } from "date-fns";
   import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
   import { enhance } from "$app/forms";
+  import { get_race_pictogram_template } from "$lib/database";
 
   interface RaceCardProps {
+    /** Data passed from the page context */
+    data: any;
+
     /** The [Race] object used to prefill values. */
-    race?: Race | undefined;
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
-
-    /** The [src] of the race pictogram template preview */
-    pictogram_template?: string;
+    race?: Race;
   }
 
-  let {
-    race = undefined,
-    disable_inputs = false,
-    require_inputs = false,
-    pictogram_template = "",
-  }: RaceCardProps = $props();
+  let { data, race = undefined }: RaceCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     race = meta.race;
-    disable_inputs = meta.disable_inputs;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    pictogram_template = meta.pictogram_template;
   }
 
+  const clear_sprint = () => {
+    (document.getElementById("sqdate") as HTMLInputElement).value = "";
+    (document.getElementById("sdate") as HTMLInputElement).value = "";
+  };
+
+  const required: boolean = $derived(!race);
+  const disabled: boolean = $derived(!data.admin);
+  const labelwidth = "80px";
+
   // Dates have to be formatted to datetime-local format
   const dateformat: string = "yyyy-MM-dd'T'HH:mm";
-  const sprintqualidate: string | undefined =
-    race && race.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined;
-  const sprintdate: string | undefined =
-    race && race.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined;
-  const qualidate: string | undefined = race
-    ? format(new Date(race.qualidate), dateformat)
-    : undefined;
-  const racedate: string | undefined = race
-    ? format(new Date(race.racedate), dateformat)
-    : undefined;
-
-  const clear_sprint = () => {
-    const sprintquali: HTMLInputElement = document.getElementById(
-      `race_sprintqualidate_${race?.id ?? "create"}`,
-    ) as HTMLInputElement;
-    const sprint: HTMLInputElement = document.getElementById(
-      `race_sprintdate_${race?.id ?? "create"}`,
-    ) as HTMLInputElement;
-
-    sprintquali.value = "";
-    sprint.value = "";
-  };
-
-  const labelwidth = "80px";
+  const sprintqualidate: string | undefined = $derived(
+    race?.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined,
+  );
+  const sprintdate: string | undefined = $derived(
+    race?.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined,
+  );
+  const qualidate: string | undefined = $derived(
+    race ? format(new Date(race.qualidate), dateformat) : undefined,
+  );
+  const racedate: string | undefined = $derived(
+    race ? format(new Date(race.racedate), dateformat) : undefined,
+  );
 </script>
 
+{#await data.graphics then graphics}
   <Card
-  imgsrc={race?.pictogram_url ?? pictogram_template}
-  imgid="update_race_pictogram_preview_{race?.id ?? 'create'}"
+    imgsrc={race?.pictogram_url ?? get_race_pictogram_template(graphics)}
+    imgid="pictogram_preview"
     width="w-full sm:w-auto"
     imgwidth={RACE_PICTOGRAM_WIDTH}
     imgheight={RACE_PICTOGRAM_HEIGHT}
     imgonclick={(event: Event) => modalStore.close()}
   >
-  <form method="POST" enctype="multipart/form-data" use:enhance>
+    <form
+      method="POST"
+      enctype="multipart/form-data"
+      use:enhance
+      onsubmit={() => modalStore.close()}
+    >
       <!-- This is also disabled, because the ID should only be -->
       <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if race && !disable_inputs}
+      {#if race && !disabled}
         <input name="id" type="hidden" value={race.id} />
       {/if}
 
       <div class="flex flex-col gap-2">
         <!-- Driver name input -->
         <Input
-        id="race_name_{race?.id ?? 'create'}"
           name="name"
           value={race?.name ?? ""}
           autocomplete="off"
           {labelwidth}
-        disabled={disable_inputs}
-        required={require_inputs}>Name</Input
+          {disabled}
+          {required}
         >
+          Name
+        </Input>
         <Input
-        id="race_step_{race?.id ?? 'create'}"
           name="step"
           value={race?.step ?? ""}
           autocomplete="off"
-        {labelwidth}
           type="number"
           min={1}
           max={24}
-        disabled={disable_inputs}
-        required={require_inputs}>Step</Input
+          {labelwidth}
+          {disabled}
+          {required}
         >
+          Step
+        </Input>
         <Input
-        id="race_pxx_{race?.id ?? 'create'}"
           name="pxx"
           value={race?.pxx ?? ""}
           autocomplete="off"
-        {labelwidth}
           type="number"
           min={1}
           max={20}
-        disabled={disable_inputs}
-        required={require_inputs}>PXX</Input
+          {labelwidth}
+          {disabled}
+          {required}
         >
+          PXX
+        </Input>
 
         <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
         <Input
-        id="race_sprintqualidate_{race?.id ?? 'create'}"
+          id="sqdate"
           name="sprintqualidate"
           value={sprintqualidate ?? ""}
           autocomplete="off"
-        {labelwidth}
           type="datetime-local"
-        disabled={disable_inputs}>SQuali</Input
+          {labelwidth}
+          {disabled}
         >
+          SQuali
+        </Input>
         <Input
-        id="race_sprintdate_{race?.id ?? 'create'}"
+          id="sdate"
           name="sprintdate"
           value={sprintdate ?? ""}
           autocomplete="off"
-        {labelwidth}
           type="datetime-local"
-        disabled={disable_inputs}>SRace</Input
+          {labelwidth}
+          {disabled}
         >
+          SRace
+        </Input>
         <Input
-        id="race_qualidate_{race?.id ?? 'create'}"
           name="qualidate"
           value={qualidate ?? ""}
           autocomplete="off"
-        {labelwidth}
           type="datetime-local"
-        disabled={disable_inputs}
-        required={require_inputs}>Quali</Input
+          {labelwidth}
+          {disabled}
+          {required}
         >
+          Quali
+        </Input>
         <Input
-        id="race_racedate_{race?.id ?? 'create'}"
           name="racedate"
           value={racedate ?? ""}
           autocomplete="off"
-        {labelwidth}
           type="datetime-local"
-        disabled={disable_inputs}
-        required={require_inputs}>Race</Input
+          {labelwidth}
+          {disabled}
+          {required}
         >
+          Race
+        </Input>
 
         <!-- Headshot upload -->
         <FileDropzone
           name="pictogram"
-        id="race_pictogram_{race?.id ?? 'create'}"
-        onchange={get_image_preview_event_handler(
-          `update_race_pictogram_preview_${race?.id ?? "create"}`,
-        )}
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        <svelte:fragment slot="message"
-          ><span class="font-bold">Upload Pictogram</span></svelte:fragment
+          onchange={get_image_preview_event_handler("pictogram_preview")}
+          {disabled}
+          {required}
         >
+          <svelte:fragment slot="message">
+            <span class="font-bold">Upload Pictogram</span>
+          </svelte:fragment>
         </FileDropzone>
 
         <!-- Save/Delete buttons -->
         <div class="flex justify-end gap-2">
-        <Button onclick={clear_sprint} color="secondary" disabled={disable_inputs} width="w-1/3">
+          <Button
+            onclick={clear_sprint}
+            color="secondary"
+            {disabled}
+            width={race ? "w-1/3" : "w-1/2"}
+          >
             Remove Sprint
           </Button>
           {#if race}
-          <Button
-            formaction="?/update_race"
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/3"
-            onclick={() => modalStore.close()}
-          >
+            <Button formaction="?/update_race" color="secondary" {disabled} submit width="w-1/3">
               Save Changes
             </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_race"
-            width="w-1/3"
-            onclick={() => modalStore.close()}
-          >
+            <Button formaction="?/delete_race" color="primary" {disabled} submit width="w-1/3">
               Delete
             </Button>
           {:else}
-          <Button
-            formaction="?/create_race"
-            color="tertiary"
-            submit
-            width="w-1/2"
-            disabled={disable_inputs}
-            onclick={() => modalStore.close()}
-          >
+            <Button formaction="?/create_race" color="tertiary" {disabled} submit width="w-1/2">
               Create Race
             </Button>
           {/if}
@@ -217,3 +195,4 @@
       </div>
     </form>
   </Card>
+{/await}

src/lib/components/cards/RacePickCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Card, Button, Dropdown } from "$lib/components";
-  import type { Driver, Race, RacePick, User } from "$lib/schema";
-  import { get_by_value } from "$lib/database";
+  import type { Driver, Race, RacePick, Substitution } from "$lib/schema";
+  import { get_by_value, get_driver_headshot_template } from "$lib/database";
   import type { Action } from "svelte/action";
   import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
@@ -9,122 +9,125 @@
   import { enhance } from "$app/forms";
 
   interface RacePickCardProps {
+    /** Data passed from the page context */
+    data: any;
+
     /** The [RacePick] object used to prefill values. */
-    racepick?: RacePick | undefined;
-
-    /** The [Race] object containing the place to guess */
-    currentrace: Race | null;
-
-    /** The [User] currently logged in */
-    user?: User;
-
-    /** The drivers (to display the headshot) */
-    drivers: Driver[];
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** The [src] of the driver headshot template preview */
-    headshot_template?: string;
-
-    /** The value this component's pxx select dropdown will bind to */
-    pxx_select_value: string;
-
-    /** The value this component's dnf select dropdown will bind to */
-    dnf_select_value: string;
+    racepick?: RacePick;
   }
 
-  let {
-    racepick = undefined,
-    currentrace = null,
-    user = undefined,
-    drivers,
-    disable_inputs = false,
-    headshot_template = "",
-    pxx_select_value,
-    dnf_select_value,
-  }: RacePickCardProps = $props();
+  let { data, racepick = undefined }: RacePickCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     racepick = meta.racepick;
-    currentrace = meta.currentrace;
-    user = meta.user;
-    drivers = meta.drivers;
-    disable_inputs = meta.disable_inputs;
-    headshot_template = meta.headshot_template;
-    pxx_select_value = meta.pxx_select_value;
-    dnf_select_value = meta.dnf_select_value;
   }
 
-  // This action is used on the <Dropdown> element.
-  // It will trigger once the Dropdown's <input> elements is mounted.
-  // This way we'll receive a reference to the object so we can register our event handler.
+  // This is executed on mount of the element specifying the "action"
   const register_pxx_preview_handler: Action = (node: HTMLElement) => {
     node.addEventListener("DropdownChange", update_pxx_preview);
   };
 
   // This event handler is registered to the Dropdown's <input> element through the action above.
-  const update_pxx_preview = (event: Event) => {
+  const update_pxx_preview = async (event: Event) => {
     const target: HTMLInputElement = event.target as HTMLInputElement;
 
-    // The option "label" gets put into the Dropdown's input value,
-    // so we need to lookup the driver by "code".
-    const src: string = get_by_value(drivers, "code", target.value)?.headshot_url || "";
-    if (src) {
-      const preview: HTMLImageElement = document.getElementById(
-        `update_substitution_headshot_preview_${racepick?.id ?? "create"}`,
-      ) as HTMLImageElement;
+    const src: string =
+      get_by_value<Driver>(await data.drivers, "code", target.value)?.headshot_url || "";
+    const img = document.getElementById("headshot_preview") as HTMLImageElement;
 
-      if (preview) preview.src = src;
-    }
+    // Can be null if lazyimg not loaded
+    if (img) img.src = src;
   };
+
+  const required: boolean = $derived(!racepick);
+  const disabled: boolean = $derived(!data.admin);
+  const labelwidth: string = "60px";
+
+  const active_drivers_and_substitutes: Promise<Driver[]> = $derived.by(async () => {
+    if (!data.currentrace) return [];
+
+    let drivers: Driver[] = await data.drivers;
+    let substitutions: Substitution[] = await data.substitutions;
+
+    let active_and_substitutes: Driver[] = drivers.filter((driver: Driver) => driver.active);
+
+    substitutions
+      .filter((substitution: Substitution) => substitution.race === data.currentrace?.id)
+      .forEach((substitution: Substitution) => {
+        const for_index = active_and_substitutes.findIndex(
+          (driver: Driver) => driver.id === substitution.for,
+        );
+        const sub_index = drivers.findIndex(
+          (driver: Driver) => driver.id === substitution.substitute,
+        );
+
+        active_and_substitutes[for_index] = drivers[sub_index];
+      });
+
+    return active_and_substitutes.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code));
+  });
+
+  let pxx_select_value: string = $state(racepick?.pxx ?? "");
+  let dnf_select_value: string = $state(racepick?.dnf ?? "");
 </script>
 
+{#await data.graphics then graphics}
+  {#await data.drivers then drivers}
     <Card
-  imgsrc={get_by_value(drivers, "id", racepick?.pxx ?? "")?.headshot_url ?? headshot_template}
-  imgid="update_substitution_headshot_preview_{racepick?.id ?? 'create'}"
+      imgsrc={get_by_value<Driver>(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
+        get_driver_headshot_template(graphics)}
+      imgid="headshot_preview"
       width="w-full sm:w-auto"
       imgwidth={DRIVER_HEADSHOT_WIDTH}
       imgheight={DRIVER_HEADSHOT_HEIGHT}
       imgonclick={(event: Event) => modalStore.close()}
     >
-  <form method="POST" enctype="multipart/form-data" use:enhance>
+      <form
+        method="POST"
+        enctype="multipart/form-data"
+        use:enhance
+        onsubmit={() => modalStore.close()}
+      >
         <!-- This is also disabled, because the ID should only be -->
         <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if racepick && !disable_inputs}
+        {#if racepick && !disabled}
           <input name="id" type="hidden" value={racepick.id} />
         {/if}
 
-    <input name="user" type="hidden" value={user?.id} />
-    <input name="race" type="hidden" value={currentrace?.id} />
+        <input name="user" type="hidden" value={data.user?.id} />
+        <input name="race" type="hidden" value={data.currentrace?.id} />
 
         <div class="flex flex-col gap-2">
           <!-- PXX select -->
+          {#await active_drivers_and_substitutes then pxx_drivers}
             <Dropdown
               name="pxx"
               input_variable={pxx_select_value}
               action={register_pxx_preview_handler}
-        options={driver_dropdown_options(drivers)}
-        labelwidth="60px"
-        disabled={disable_inputs}
+              options={driver_dropdown_options(pxx_drivers)}
+              {labelwidth}
+              {disabled}
             >
-        P{currentrace?.pxx ?? "XX"}
+              P{data.currentrace?.pxx ?? "XX"}
             </Dropdown>
+          {/await}
 
           <!-- DNF select -->
+          {#await active_drivers_and_substitutes then pxx_drivers}
             <Dropdown
               name="dnf"
               input_variable={dnf_select_value}
-        options={driver_dropdown_options(drivers)}
-        labelwidth="60px"
-        disabled={disable_inputs}
+              options={driver_dropdown_options(pxx_drivers)}
+              {labelwidth}
+              {disabled}
             >
               DNF
             </Dropdown>
+          {/await}
 
           <!-- Save/Delete buttons -->
           <div class="flex justify-end gap-2">
@@ -132,20 +135,18 @@
               <Button
                 formaction="?/update_racepick"
                 color="secondary"
-            disabled={disable_inputs}
+                {disabled}
                 submit
                 width="w-1/2"
-            onclick={() => modalStore.close()}
               >
                 Save Changes
               </Button>
               <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
                 formaction="?/delete_racepick"
+                color="primary"
+                {disabled}
+                submit
                 width="w-1/2"
-            onclick={() => modalStore.close()}
               >
                 Delete
               </Button>
@@ -153,9 +154,9 @@
               <Button
                 formaction="?/create_racepick"
                 color="tertiary"
+                {disabled}
                 submit
                 width="w-full"
-            onclick={() => modalStore.close()}
               >
                 Make Pick
               </Button>
@@ -164,3 +165,5 @@
         </div>
       </form>
     </Card>
+  {/await}
+{/await}

src/lib/components/cards/SubstitutionCard.svelte

@@ -1,114 +1,82 @@
 <script lang="ts">
   import { Card, Button, Dropdown } from "$lib/components";
   import type { Driver, Race, Substitution } from "$lib/schema";
-  import { get_by_value } from "$lib/database";
+  import { get_by_value, get_driver_headshot_template } from "$lib/database";
   import type { Action } from "svelte/action";
   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";
+  import { sub } from "date-fns";
 
   interface SubstitutionCardProps {
+    /** Data passed from the page context */
+    data: any;
+
     /** The [Substitution] object used to prefill values. */
-    substitution?: Substitution | undefined;
-
-    /** The drivers (to display the headshot) */
-    drivers: Driver[];
-
-    races: Race[];
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
-
-    /** The [src] of the driver headshot template preview */
-    headshot_template?: string;
-
-    /** The value this component's substitute select dropdown will bind to */
-    substitute_select_value: string;
-
-    /** The value this component's driver select dropdown will bind to */
-    driver_select_value: string;
-
-    /** The value this component's race select dropdown will bind to */
-    race_select_value: string;
+    substitution?: Substitution;
   }
 
-  let {
-    substitution = undefined,
-    drivers,
-    races,
-    disable_inputs = false,
-    require_inputs = false,
-    headshot_template = "",
-    substitute_select_value,
-    driver_select_value,
-    race_select_value,
-  }: SubstitutionCardProps = $props();
-
-  const active_drivers = (drivers: Driver[]): Driver[] =>
-    drivers.filter((driver: Driver) => driver.active);
-
-  const inactive_drivers = (drivers: Driver[]): Driver[] =>
-    drivers.filter((driver: Driver) => !driver.active);
+  let { data, substitution = undefined }: SubstitutionCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     substitution = meta.substitution;
-    drivers = meta.drivers;
-    races = meta.races;
-    disable_inputs = meta.disable_inputs;
-    substitute_select_value = meta.substitute_select_value;
-    driver_select_value = meta.driver_select_value;
-    race_select_value = meta.race_select_value;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    headshot_template = meta.headshot_template;
   }
 
-  // This action is used on the <Dropdown> element.
-  // It will trigger once the Dropdown's <input> elements is mounted.
-  // This way we'll receive a reference to the object so we can register our event handler.
-  const register_substitute_preview_handler: Action = (node: HTMLElement) => {
+  // This is executed on mount of the element specifying the "action"
+  const register_substitute_preview_handler: Action = (node: HTMLElement) =>
     node.addEventListener("DropdownChange", update_substitute_preview);
-  };
 
   // This event handler is registered to the Dropdown's <input> element through the action above.
-  const update_substitute_preview = (event: Event) => {
+  const update_substitute_preview = async (event: Event) => {
     const target: HTMLInputElement = event.target as HTMLInputElement;
 
-    // The option "label" gets put into the Dropdown's input value,
-    // so we need to lookup the driver by "code".
-    const src: string = get_by_value(drivers, "code", target.value)?.headshot_url || "";
-    if (src) {
-      const preview: HTMLImageElement = document.getElementById(
-        `update_substitution_headshot_preview_${substitution?.id ?? "create"}`,
-      ) as HTMLImageElement;
+    const src: string =
+      get_by_value<Driver>(await data.drivers, "code", target.value)?.headshot_url ?? "";
+    const img = document.getElementById("headshot_preview") as HTMLImageElement;
 
-      if (preview) preview.src = src;
-    }
+    // Can be null if lazyimage hasn't loaded
+    if (img) img.src = src;
   };
+
+  const active_drivers = (drivers: Driver[]): Driver[] =>
+    drivers.filter((driver: Driver) => driver.active);
+  const inactive_drivers = (drivers: Driver[]): Driver[] =>
+    drivers.filter((driver: Driver) => !driver.active);
+
+  const required: boolean = $derived(!substitution);
+  const disabled: boolean = $derived(!data.admin);
+  const labelwidth: string = "120px";
+
+  let substitute_select_value: string = $state(substitution?.substitute ?? "");
+  let driver_select_value: string = $state(substitution?.for ?? "");
+  let race_select_value: string = $state(substitution?.race ?? "");
 </script>
 
+{#await data.graphics then graphics}
+  {#await data.drivers then drivers}
     <Card
-  imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
-    headshot_template}
-  imgid="update_substitution_headshot_preview_{substitution?.id ?? 'create'}"
+      imgsrc={get_by_value<Driver>(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
+        get_driver_headshot_template(graphics)}
+      imgid="headshot_preview"
       width="w-full sm:w-auto"
       imgwidth={DRIVER_HEADSHOT_WIDTH}
       imgheight={DRIVER_HEADSHOT_HEIGHT}
       imgonclick={(event: Event) => modalStore.close()}
     >
-  <form method="POST" enctype="multipart/form-data" use:enhance>
+      <form
+        method="POST"
+        enctype="multipart/form-data"
+        use:enhance
+        onsubmit={() => modalStore.close()}
+      >
         <!-- This is also disabled, because the ID should only be -->
         <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if substitution && !disable_inputs}
+        {#if substitution && !disabled}
           <input name="id" type="hidden" value={substitution.id} />
         {/if}
 
@@ -119,9 +87,9 @@
             input_variable={substitute_select_value}
             action={register_substitute_preview_handler}
             options={driver_dropdown_options(inactive_drivers(drivers))}
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
+            {labelwidth}
+            {disabled}
+            {required}
           >
             Substitute
           </Dropdown>
@@ -131,24 +99,26 @@
             name="for"
             input_variable={driver_select_value}
             options={driver_dropdown_options(active_drivers(drivers))}
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
+            {labelwidth}
+            {disabled}
+            {required}
           >
             For
           </Dropdown>
 
           <!-- Race select -->
+          {#await data.races then races}
             <Dropdown
               name="race"
               input_variable={race_select_value}
               options={race_dropdown_options(races)}
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
+              {labelwidth}
+              {disabled}
+              {required}
             >
               Race
             </Dropdown>
+          {/await}
 
           <!-- Save/Delete buttons -->
           <div class="flex justify-end gap-2">
@@ -156,20 +126,18 @@
               <Button
                 formaction="?/update_substitution"
                 color="secondary"
-            disabled={disable_inputs}
+                {disabled}
                 submit
                 width="w-1/2"
-            onclick={() => modalStore.close()}
               >
                 Save Changes
               </Button>
               <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
                 formaction="?/delete_substitution"
+                color="primary"
+                {disabled}
+                submit
                 width="w-1/2"
-            onclick={() => modalStore.close()}
               >
                 Delete
               </Button>
@@ -177,10 +145,9 @@
               <Button
                 formaction="?/create_substitution"
                 color="tertiary"
+                {disabled}
                 submit
                 width="w-full"
-            disabled={disable_inputs}
-            onclick={() => modalStore.close()}
               >
                 Create Substitution
               </Button>
@@ -189,3 +156,5 @@
         </div>
       </form>
     </Card>
+  {/await}
+{/await}

src/lib/components/cards/TeamCard.svelte

@@ -5,95 +5,81 @@
   import type { Team } from "$lib/schema";
   import { TEAM_BANNER_HEIGHT, TEAM_BANNER_WIDTH } from "$lib/config";
   import { enhance } from "$app/forms";
+  import { get_team_banner_template, get_team_logo_template } from "$lib/database";
 
   interface TeamCardProps {
+    /** Data from the page context */
+    data: any;
+
     /** The [Team] object used to prefill values. */
-    team?: Team | undefined;
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
-
-    /** The [src] of the team banner template preview */
-    banner_template?: string;
-
-    /** The [src] of the team logo template preview */
-    logo_template?: string;
+    team?: Team;
   }
 
-  let {
-    team = undefined,
-    disable_inputs = false,
-    require_inputs = false,
-    banner_template = "",
-    logo_template = "",
-  }: TeamCardProps = $props();
+  let { data, team = undefined }: TeamCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     team = meta.team;
-    disable_inputs = meta.disable_inputs;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    banner_template = meta.banner_template;
-    logo_template = meta.logo_template;
   }
 
+  const required: boolean = $derived(!team);
+  const disabled: boolean = $derived(!data.admin);
   const labelwidth: string = "110px";
 
-  let colorpreview: string = $state(team?.color ?? "white");
+  let colorpreview: string = $state(team?.color ?? "Invalid");
 </script>
 
+{#await data.graphics then graphics}
   <Card
-  imgsrc={team?.banner_url ?? banner_template}
-  imgid="update_team_banner_preview_{team?.id ?? 'create'}"
+    imgsrc={team?.banner_url ?? get_team_banner_template(graphics)}
+    imgid="banner_preview"
     width="w-full sm:w-auto"
     imgwidth={TEAM_BANNER_WIDTH}
     imgheight={TEAM_BANNER_HEIGHT}
     imgonclick={(event: Event) => modalStore.close()}
   >
-  <form method="POST" enctype="multipart/form-data" use:enhance>
+    <form
+      method="POST"
+      enctype="multipart/form-data"
+      use:enhance
+      onsubmit={() => modalStore.close()}
+    >
       <!-- This is also disabled, because the ID should only be -->
       <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if team && !disable_inputs}
+      {#if team && !disabled}
         <input name="id" type="hidden" value={team.id} />
       {/if}
 
       <div class="flex flex-col gap-2">
         <!-- Team name input -->
         <Input
-        id="team_name_{team?.id ?? 'create'}"
           name="name"
           value={team?.name ?? ""}
-        {labelwidth}
           autocomplete="off"
-        disabled={disable_inputs}
-        required={require_inputs}
+          {labelwidth}
+          {disabled}
+          {required}
         >
           Name
         </Input>
 
         <!-- Team color input -->
         <Input
-        id="team_color_{team?.id ?? 'create'}"
           name="color"
           value={team?.color ?? ""}
-        {labelwidth}
           autocomplete="off"
           placeholder="Enter as '#XXXXXX'"
-        disabled={disable_inputs}
-        required={require_inputs}
           minlength={7}
           maxlength={7}
-        onchange={(event: Event) => {
+          oninput={(event: Event) => {
             colorpreview = (event.target as HTMLInputElement).value;
           }}
+          {labelwidth}
+          {disabled}
+          {required}
         >
           Color
           <span class="badge ml-2 border" style="color: {colorpreview}; background: {colorpreview}">
@@ -104,34 +90,28 @@
         <!-- Banner upload -->
         <FileDropzone
           name="banner"
-        id="team_banner_{team?.id ?? 'create'}"
-        onchange={get_image_preview_event_handler(
-          `update_team_banner_preview_${team?.id ?? "create"}`,
-        )}
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        <svelte:fragment slot="message"
-          ><span class="font-bold">Upload Banner</span></svelte:fragment
+          onchange={get_image_preview_event_handler("banner_preview")}
+          {disabled}
+          {required}
         >
+          <svelte:fragment slot="message">
+            <span class="font-bold">Upload Banner</span>
+          </svelte:fragment>
         </FileDropzone>
 
         <!-- Logo upload -->
         <FileDropzone
           name="logo"
-        id="team_logo_{team?.id ?? 'create'}"
-        onchange={get_image_preview_event_handler(
-          `update_team_logo_preview_${team?.id ?? "create"}`,
-        )}
-        disabled={disable_inputs}
-        required={require_inputs}
+          onchange={get_image_preview_event_handler("logo_preview")}
+          {disabled}
+          {required}
         >
           <svelte:fragment slot="message">
             <div class="inline-flex flex-nowrap items-center gap-2">
               <span class="font-bold">Upload Logo</span>
               <LazyImage
-              src={team?.logo_url ?? logo_template}
-              id="update_team_logo_preview_{team?.id ?? 'create'}"
+                src={team?.logo_url ?? get_team_logo_template(graphics)}
+                id="logo_preview"
                 imgwidth={32}
                 imgheight={32}
               />
@@ -142,35 +122,14 @@
         <!-- Save/Delete buttons -->
         <div class="flex justify-end gap-2">
           {#if team}
-          <Button
-            formaction="?/update_team"
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
+            <Button formaction="?/update_team" color="secondary" {disabled} submit width="w-1/2">
               Save
             </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_team"
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
+            <Button formaction="?/delete_team" color="primary" {disabled} submit width="w-1/2">
               Delete
             </Button>
           {:else}
-          <Button
-            formaction="?/create_team"
-            color="tertiary"
-            submit
-            width="w-full"
-            disabled={disable_inputs}
-            onclick={() => modalStore.close()}
-          >
+            <Button formaction="?/create_team" color="tertiary" {disabled} submit width="w-full">
               Create Team
             </Button>
           {/if}
@@ -178,3 +137,4 @@
       </div>
     </form>
   </Card>
+{/await}

src/lib/dropdown.ts

@@ -9,16 +9,11 @@ import {
   TEAM_BANNER_WIDTH,
 } from "$lib/config";
 
-let team_dropdown_opts: DropdownOption[] | null = null;
-
 /**
  * Generates a list of [DropdownOptions] for a <Dropdown> component.
- * Cached until page reload.
  */
-export const team_dropdown_options = (teams: Team[]): DropdownOption[] => {
-  if (!team_dropdown_opts) {
-    console.log("team_dropdown_options");
-    team_dropdown_opts = teams.map((team: Team) => {
+export const team_dropdown_options = (teams: Team[]): DropdownOption[] =>
+  teams.map((team: Team) => {
     return {
       label: team.name,
       value: team.id,
@@ -27,17 +22,12 @@ export const team_dropdown_options = (teams: Team[]): DropdownOption[] => {
       icon_height: TEAM_BANNER_HEIGHT,
     };
   });
-  }
-
-  return team_dropdown_opts;
-};
 
 /**
  * Generates a list of [DropdownOptions] for a <Dropdown> component.
- * Not cached, because drivers are often filtered by active/inactive.
  */
-export const driver_dropdown_options = (drivers: Driver[]): DropdownOption[] => {
-  return drivers.map((driver: Driver) => {
+export const driver_dropdown_options = (drivers: Driver[]): DropdownOption[] =>
+  drivers.map((driver: Driver) => {
     return {
       label: driver.code,
       value: driver.id,
@@ -46,18 +36,12 @@ export const driver_dropdown_options = (drivers: Driver[]): DropdownOption[] =>
       icon_height: DRIVER_HEADSHOT_HEIGHT,
     };
   });
-};
-
-let race_dropdown_opts: DropdownOption[] | null = null;
 
 /**
  * Generates a list of [DropdownOptions] for a <Dropdown> component.
- * Cached until page reload.
  */
-export const race_dropdown_options = (races: Race[]): DropdownOption[] => {
-  if (!race_dropdown_opts) {
-    console.log("race_dropdown_options");
-    race_dropdown_opts = races.map((race: Race) => {
+export const race_dropdown_options = (races: Race[]): DropdownOption[] =>
+  races.map((race: Race) => {
     return {
       label: race.name,
       value: race.id,
@@ -66,7 +50,3 @@ export const race_dropdown_options = (races: Race[]): DropdownOption[] => {
       icon_height: RACE_PICTOGRAM_HEIGHT,
     };
   });
-  }
-
-  return race_dropdown_opts;
-};

src/routes/data/season/drivers/+page.svelte

@@ -1,24 +1,31 @@
 <script lang="ts">
   import { Button, type TableColumn, Table } from "$lib/components";
-  import { get_by_value, get_driver_headshot_template } from "$lib/database";
+  import { get_by_value } from "$lib/database";
   import type { Driver, Team } from "$lib/schema";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
 
   let { data }: { data: PageData } = $props();
 
-  const update_driver_team_select_values: { [key: string]: string } = $state({}); // <driver.id, team.id>
-  const update_driver_active_values: { [key: string]: boolean } = $state({});
-  data.drivers.then((drivers: Driver[]) =>
-    drivers.forEach((driver: Driver) => {
-      update_driver_team_select_values[driver.id] = driver.team;
-      update_driver_active_values[driver.id] = driver.active;
-    }),
-  );
-  update_driver_team_select_values["create"] = "";
-  update_driver_active_values["create"] = true;
+  const modalStore: ModalStore = getModalStore();
+  const driver_handler = async (event: Event, id?: string) => {
+    const driver: Driver | undefined = get_by_value(await data.drivers, "id", id ?? "Invalid");
 
-  const drivers_columns: TableColumn[] = [
+    if (id && !driver) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "driverCard",
+      meta: {
+        data,
+        driver,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const drivers_columns: TableColumn[] = $derived([
     {
       data_value_name: "code",
       label: "Driver Code",
@@ -32,9 +39,7 @@
       label: "Team",
       valuefun: async (value: string): Promise<string> => {
         const team: Team | undefined = get_by_value(await data.teams, "id", value);
-        return team
-          ? `<span class='badge border mr-2' style='color: ${team.color}; background: ${team.color};'>C</span>${team.name}`
-          : "<span class='badge variant-filled-primary'>Invalid</span>";
+        return `<span class='badge border mr-2' style='color: ${team?.color ?? "#FFFFFF"}; background: ${team?.color ?? "#FFFFFF"};'>C</span>${team?.name ?? "Invalid"}`;
       },
     },
     {
@@ -43,53 +48,14 @@
       valuefun: async (value: boolean): Promise<string> =>
         `<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
     },
-  ];
-
-  const modalStore: ModalStore = getModalStore();
-
-  /** Shows the DriverCard modal to edit the clicked driver */
-  const drivers_handler = async (event: Event, id: string) => {
-    const driver: Driver | undefined = get_by_value(await data.drivers, "id", id);
-    if (!driver) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "driverCard",
-      meta: {
-        driver: driver,
-        teams: await data.teams,
-        team_select_value: update_driver_team_select_values[driver.id],
-        active_value: update_driver_active_values[driver.id],
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_driver_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "driverCard",
-      meta: {
-        teams: await data.teams,
-        team_select_value: update_driver_team_select_values["create"],
-        active_value: update_driver_active_values["create"],
-        disable_inputs: !data.admin,
-        require_inputs: true,
-        headshot_template: get_driver_headshot_template(await data.graphics),
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
+  ]);
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_driver_handler} shadow>
+  <Button width="w-full" color="tertiary" onclick={driver_handler} shadow>
     <span class="font-bold">Create New Driver</span>
   </Button>
 </div>
 {#await data.drivers then drivers}
-  <Table data={drivers} columns={drivers_columns} handler={drivers_handler} />
+  <Table data={drivers} columns={drivers_columns} handler={driver_handler} />
 {/await}

src/routes/data/season/races/+page.svelte

@@ -2,12 +2,31 @@
   import { Button, Table, type TableColumn } from "$lib/components";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import { get_by_value, get_race_pictogram_template } from "$lib/database";
+  import { get_by_value } from "$lib/database";
   import type { Race } from "$lib/schema";
 
   let { data }: { data: PageData } = $props();
 
-  const races_columns: TableColumn[] = [
+  const modalStore: ModalStore = getModalStore();
+
+  const race_handler = async (event: Event, id?: string) => {
+    const race: Race | undefined = get_by_value(await data.races, "id", id ?? "Invalid");
+
+    if (id && !race) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "raceCard",
+      meta: {
+        data,
+        race,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const races_columns: TableColumn[] = $derived([
     {
       data_value_name: "name",
       label: "Name",
@@ -35,46 +54,14 @@
       label: "Race",
       valuefun: async (value: string): Promise<string> => value.slice(0, -5),
     },
-  ];
-
-  const modalStore: ModalStore = getModalStore();
-
-  const races_handler = async (event: Event, id: string) => {
-    const race: Race | undefined = get_by_value(await data.races, "id", id);
-    if (!race) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceCard",
-      meta: {
-        race: race,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_race_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceCard",
-      meta: {
-        disable_inputs: !data.admin,
-        require_inputs: true,
-        pictogram_template: get_race_pictogram_template(await data.graphics),
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
+  ]);
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_race_handler} shadow>
+  <Button width="w-full" color="tertiary" onclick={race_handler} shadow>
     <span class="font-bold">Create New Race</span>
   </Button>
 </div>
 {#await data.races then races}
-  <Table data={races} columns={races_columns} handler={races_handler} />
+  <Table data={races} columns={races_columns} handler={race_handler} />
 {/await}

src/routes/data/season/substitutions/+page.svelte

@@ -1,28 +1,35 @@
 <script lang="ts">
-  import { get_by_value, get_driver_headshot_template } from "$lib/database";
+  import { get_by_value } from "$lib/database";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import type { Driver, Race, Substitution } from "$lib/schema";
+  import type { Race, Substitution } from "$lib/schema";
   import { Button, Table, type TableColumn } from "$lib/components";
 
   let { data }: { data: PageData } = $props();
 
-  // TODO: Cleanup
-  const update_substitution_substitute_select_values: { [key: string]: string } = $state({});
-  const update_substitution_for_select_values: { [key: string]: string } = $state({});
-  const update_substitution_race_select_values: { [key: string]: string } = $state({});
-  data.substitutions.then((substitutions: Substitution[]) =>
-    substitutions.forEach((substitution: Substitution) => {
-      update_substitution_substitute_select_values[substitution.id] = substitution.substitute;
-      update_substitution_for_select_values[substitution.id] = substitution.for;
-      update_substitution_race_select_values[substitution.id] = substitution.race;
-    }),
+  const modalStore: ModalStore = getModalStore();
+  const substitution_handler = async (event: Event, id?: string) => {
+    const substitution: Substitution | undefined = get_by_value(
+      await data.substitutions,
+      "id",
+      id ?? "Invalid",
     );
-  update_substitution_substitute_select_values["create"] = "";
-  update_substitution_for_select_values["create"] = "";
-  update_substitution_race_select_values["create"] = "";
 
-  const substitutions_columns: TableColumn[] = [
+    if (id && !substitution) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "substitutionCard",
+      meta: {
+        data,
+        substitution,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const substitutions_columns: TableColumn[] = $derived([
     {
       data_value_name: "expand",
       label: "Step",
@@ -49,56 +56,14 @@
       valuefun: async (value: string): Promise<string> =>
         get_by_value(await data.races, "id", value)?.name ?? "Invalid",
     },
-  ];
-
-  const modalStore: ModalStore = getModalStore();
-
-  const substitutions_handler = async (event: Event, id: string) => {
-    const substitution: Substitution | undefined = get_by_value(await data.substitutions, "id", id);
-    if (!substitution) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "substitutionCard",
-      meta: {
-        substitution: substitution,
-        drivers: await data.drivers,
-        races: await data.races,
-        substitute_select_value: update_substitution_substitute_select_values[substitution.id],
-        driver_select_value: update_substitution_for_select_values[substitution.id],
-        race_select_value: update_substitution_race_select_values[substitution.id],
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_substitution_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "substitutionCard",
-      meta: {
-        drivers: await data.drivers,
-        races: await data.races,
-        substitute_select_value: update_substitution_substitute_select_values["create"],
-        driver_select_value: update_substitution_for_select_values["create"],
-        disable_inputs: !data.admin,
-        race_select_value: update_substitution_race_select_values["create"],
-        require_inputs: true,
-        headshot_template: get_driver_headshot_template(await data.graphics),
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
+  ]);
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_substitution_handler} shadow>
+  <Button width="w-full" color="tertiary" onclick={substitution_handler} shadow>
     <span class="font-bold">Create New Substitution</span>
   </Button>
 </div>
 {#await data.substitutions then substitutions}
-  <Table data={substitutions} columns={substitutions_columns} handler={substitutions_handler} />
+  <Table data={substitutions} columns={substitutions_columns} handler={substitution_handler} />
 {/await}

src/routes/data/season/teams/+page.svelte

@@ -3,11 +3,30 @@
   import type { Team } from "$lib/schema";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import { get_by_value, get_team_banner_template, get_team_logo_template } from "$lib/database";
+  import { get_by_value } from "$lib/database";
 
   let { data }: { data: PageData } = $props();
 
-  const teams_columns: TableColumn[] = [
+  const modalStore: ModalStore = getModalStore();
+  const team_handler = async (event: Event, id?: string) => {
+    const team: Team | undefined = get_by_value(await data.teams, "id", id ?? "Invalid");
+
+    // If we expect to find a team but don't, abort
+    if (id && !team) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "teamCard",
+      meta: {
+        data,
+        team,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const teams_columns: TableColumn[] = $derived([
     {
       data_value_name: "name",
       label: "Name",
@@ -20,47 +39,14 @@
       valuefun: async (value: string): Promise<string> =>
         `<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`,
     },
-  ];
-
-  const modalStore: ModalStore = getModalStore();
-
-  const teams_handler = async (event: Event, id: string) => {
-    const team: Team | undefined = get_by_value(await data.teams, "id", id);
-    if (!team) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "teamCard",
-      meta: {
-        team: team,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_team_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "teamCard",
-      meta: {
-        banner_template: get_team_banner_template(await data.graphics),
-        logo_template: get_team_logo_template(await data.graphics),
-        require_inputs: true,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
+  ]);
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_team_handler} shadow>
+  <Button width="w-full" color="tertiary" onclick={team_handler} shadow>
     <span class="font-bold">Create New Team</span>
   </Button>
 </div>
 {#await data.teams then teams}
-  <Table data={teams} columns={teams_columns} handler={teams_handler} />
+  <Table data={teams} columns={teams_columns} handler={team_handler} />
 {/await}

src/routes/racepicks/+page.svelte

@@ -19,71 +19,46 @@
     RACE_PICTOGRAM_HEIGHT,
     RACE_PICTOGRAM_WIDTH,
   } from "$lib/config";
-  import type { CurrentPickedUser, Driver, RacePick, Substitution } from "$lib/schema";
+  import type { CurrentPickedUser, RacePick } from "$lib/schema";
   import { get_by_value, get_driver_headshot_template } from "$lib/database";
   import { format } from "date-fns";
 
   let { data }: { data: PageData } = $props();
 
-  let currentpick = (): RacePick | undefined =>
+  const racepick: RacePick | undefined = $derived(
     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 ?? "");
-
-  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 === data.currentrace?.id)
-      .forEach((substitution: Substitution) => {
-        const for_index = active_and_substitutes.findIndex(
-          (driver: Driver) => driver.id === substitution.for,
+    )[0] ?? undefined,
   );
-        const sub_index = drivers.findIndex(
-          (driver: Driver) => driver.id === substitution.substitute,
-        );
-
-        active_and_substitutes[for_index] = drivers[sub_index];
-      });
-
-    return active_and_substitutes.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code));
-  };
 
   const modalStore: ModalStore = getModalStore();
-  const create_guess_handler = async (event: Event) => {
+  const racepick_handler = async (event: Event) => {
     const modalSettings: ModalSettings = {
       type: "component",
       component: "racePickCard",
       meta: {
-        racepick: currentpick(),
-        currentrace: data.currentrace,
-        user: data.user,
-        drivers: active_drivers_and_substitutes(await data.drivers, await data.substitutions),
-        disable_inputs: false, // TODO: Datelock
-        headshot_template: get_driver_headshot_template(await data.graphics),
-        pxx_select_value: pxx_select_value,
-        dnf_select_value: dnf_select_value,
+        data,
+        racepick,
       },
     };
 
     modalStore.trigger(modalSettings);
   };
 
-  const pickedusers = data.currentpickedusers.filter(
+  // Users that have already picked the current race
+  let pickedusers: CurrentPickedUser[] = $derived(
+    data.currentpickedusers.filter(
       (currentpickeduser: CurrentPickedUser) => currentpickeduser.picked,
+    ),
   );
-  const outstandingusers = data.currentpickedusers.filter(
+
+  // Users that didn't already pick the current race
+  let outstandingusers: CurrentPickedUser[] = $derived(
+    data.currentpickedusers.filter(
       (currentpickeduser: CurrentPickedUser) => !currentpickeduser.picked,
+    ),
   );
 
   const dateformat: string = "dd.MM' 'HH:mm";
@@ -109,7 +84,7 @@
         <!-- Show information about the next race -->
         <div class="justify-center gap-2 lg:flex">
           <div class="mt-2 flex gap-2">
-            <div class="card flex w-full flex-col p-2 shadow">
+            <div class="card flex w-full min-w-40 flex-col p-2 shadow">
               <span class="font-bold">
                 Step {data.currentrace.step}: {data.currentrace.name}
               </span>
@@ -138,13 +113,13 @@
                 <Countdown date={data.currentrace.racedate} extraclass="font-bold" />
               </div>
             </div>
-            <div class="card w-full p-2 shadow">
-              <span class="text-nowrap font-bold">Track Layout:</span>
+            <div class="card w-full min-w-40 p-2 shadow">
+              <h1 class="mb-2 text-nowrap font-bold">Track Layout:</h1>
               <LazyImage
                 src={data.currentrace.pictogram_url ?? "Invalid"}
                 imgwidth={RACE_PICTOGRAM_WIDTH}
                 imgheight={RACE_PICTOGRAM_HEIGHT}
-                containerstyle="height: 115px; margin: auto;"
+                containerstyle="height: 105px; margin: auto;"
                 imgstyle="background: transparent;"
               />
             </div>
@@ -153,36 +128,36 @@
           <!-- Only show the userguess if signed in -->
           {#if data.user}
             <div class="mt-2 flex gap-2">
-              <div class="card w-full p-2 pb-0 shadow">
+              <div class="card w-full min-w-40 p-2 pb-0 shadow">
                 <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
                 {#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", racepick?.pxx ?? "")?.headshot_url ??
                         get_driver_headshot_template(graphics)}
                       imgwidth={DRIVER_HEADSHOT_WIDTH}
                       imgheight={DRIVER_HEADSHOT_HEIGHT}
                       containerstyle="height: 115px; margin: auto;"
                       imgclass="bg-transparent cursor-pointer"
                       hoverzoom
-                      onclick={create_guess_handler}
+                      onclick={racepick_handler}
                     />
                   {/await}
                 {/await}
               </div>
-              <div class="card w-full p-2 pb-0 shadow">
+              <div class="card w-full min-w-40 p-2 pb-0 shadow">
                 <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
                 {#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", racepick?.dnf ?? "")?.headshot_url ??
                         get_driver_headshot_template(graphics)}
                       imgwidth={DRIVER_HEADSHOT_WIDTH}
                       imgheight={DRIVER_HEADSHOT_HEIGHT}
                       containerstyle="height: 115px; margin: auto;"
                       imgclass="bg-transparent cursor-pointer"
                       hoverzoom
-                      onclick={create_guess_handler}
+                      onclick={racepick_handler}
                     />
                   {/await}
                 {/await}
@@ -192,7 +167,7 @@
 
           <!-- Show users that have and have not picked yet -->
           <div class="mt-2 flex gap-2">
-            <div class="card w-full p-2 shadow">
+            <div class="card w-full min-w-40 p-2 shadow">
               <h1 class="text-nowrap font-bold">
                 Picked ({pickedusers.length}/{data.currentpickedusers.length}):
               </h1>
@@ -210,7 +185,7 @@
                 {/await}
               </div>
             </div>
-            <div class="card w-full p-2 shadow">
+            <div class="card w-full min-w-40 p-2 shadow">
               <h1 class="text-nowrap font-bold">
                 Outstanding ({outstandingusers.length}/{data.currentpickedusers.length}):
               </h1>
@@ -399,12 +374,3 @@
     {/each}
   </div>
 </div>
-
-<!-- "Table" of past guesses (not an actual table this time): -->
-<!-- - Left column (rounded div column with race information: name, step, pxx) -->
-<!--   - Show full result on-click? -->
-<!-- - Rounded middle block (rest of width) with guesses: -->
-<!--   - Just avatar at the top (reduce width) with points below, username on hover? -->
-<!--   - Color-coded compact pxx + dnf picks (with podium + skull icons to differentiate?) -->
-
-<!-- Make 2 variations (races as rows and races as columns) + settings toggle? -->