Lib: Type data passed to cards from the page context

src/lib/components/cards/DriverCard.svelte

@@ -7,7 +7,7 @@
     type ModalStore,
   } from "@skeletonlabs/skeleton";
   import { Button, Input, Card, Dropdown } from "$lib/components";
-  import type { Driver } from "$lib/schema";
+  import type { Driver, SkeletonData } 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";
@@ -15,7 +15,7 @@
 
   interface DriverCardProps {
     /** Data passed from the page context */
-    data: any;
+    data: SkeletonData;
 
     /** The [Driver] object used to prefill values. */
     driver?: Driver;

src/lib/components/cards/RaceCard.svelte

@@ -2,7 +2,7 @@
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import { Button, Card, Input } from "$lib/components";
-  import type { Race } from "$lib/schema";
+  import type { Race, SkeletonData } from "$lib/schema";
   import { format } from "date-fns";
   import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
   import { enhance } from "$app/forms";
@@ -10,7 +10,7 @@
 
   interface RaceCardProps {
     /** Data passed from the page context */
-    data: any;
+    data: SkeletonData;
 
     /** The [Race] object used to prefill values. */
     race?: Race;

src/lib/components/cards/RacePickCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Card, Button, Dropdown } from "$lib/components";
-  import type { Driver, Race, RacePick, Substitution } from "$lib/schema";
+  import type { Driver, Race, RacePick, SkeletonData, 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";
@@ -10,7 +10,7 @@
 
   interface RacePickCardProps {
     /** Data passed from the page context */
-    data: any;
+    data: SkeletonData & { currentrace: Race };
 
     /** The [RacePick] object used to prefill values. */
     racepick?: RacePick;
@@ -111,6 +111,7 @@
               options={driver_dropdown_options(pxx_drivers)}
               {labelwidth}
               {disabled}
+              {required}
             >
               P{data.currentrace?.pxx ?? "XX"}
             </Dropdown>
@@ -124,6 +125,7 @@
               options={driver_dropdown_options(pxx_drivers)}
               {labelwidth}
               {disabled}
+              {required}
             >
               DNF
             </Dropdown>

src/lib/components/cards/SubstitutionCard.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
   import { Card, Button, Dropdown } from "$lib/components";
-  import type { Driver, Race, Substitution } from "$lib/schema";
+  import type { Driver, Race, SkeletonData, 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";
   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;
+    data: SkeletonData;
 
     /** The [Substitution] object used to prefill values. */
     substitution?: Substitution;

src/lib/components/cards/TeamCard.svelte

@@ -2,14 +2,14 @@
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import { Card, Button, Input, LazyImage } from "$lib/components";
-  import type { Team } from "$lib/schema";
+  import type { SkeletonData, 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;
+    data: SkeletonData;
 
     /** The [Team] object used to prefill values. */
     team?: Team;

src/lib/schema.ts

@@ -3,6 +3,20 @@
 
 // Application Data
 
+/**
+ * The data returned from the root layout's [load]-function.
+ */
+export interface SkeletonData {
+  user: User;
+  admin: boolean;
+
+  graphics: Promise<Graphic[]>;
+  teams: Promise<Team[]>;
+  drivers: Promise<Driver[]>;
+  races: Promise<Race[]>;
+  substitutions: Promise<Substitution[]>;
+}
+
 export interface Graphic {
   name: string;
   file: string;