Lib: Remove non-lazy image

We need the width/height anyways to determine the max size, so don't
bother with non-lazy stuff

src/lib/components/cards/Card.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import { Image } from "$lib/components";
+  import { LazyImage } from "$lib/components";
+  import { error } from "@sveltejs/kit";
 
   interface CardProps {
     children: Snippet;
 
     /** The URL for a possible header image. Leave undefined for no header image. Set to empty string for an image not yet loaded. */
-    imgsrc?: string | undefined;
+    imgsrc?: string;
+
+    /** The width of the image. Required if imgsrc is set */
+    imgwidth?: number;
+
+    /** The height of the image. Required if imgsrc is set */
+    imgheight?: number;
 
     /** The id of the header image element for JS access. */
-    imgid?: string | undefined;
+    imgid?: string;
 
     /** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
     imghidden?: boolean;
@@ -21,23 +28,31 @@
   let {
     children,
     imgsrc = undefined,
+    imgwidth = undefined,
+    imgheight = undefined,
     imgid = undefined,
     imghidden = false,
     width = "w-auto",
     ...restProps
   }: CardProps = $props();
+
+  if (imgsrc && (!imgwidth || !imgheight)) {
+    error(400, "imgwidth and imgheight need to be specified when setting an imgsrc!");
+  }
 </script>
 
 <div class="card {width} overflow-hidden bg-white shadow">
   <!-- Allow empty strings for images that only appear after user action -->
   {#if imgsrc !== undefined}
-    <Image
+    <LazyImage
       id={imgid}
       src={imgsrc}
       alt="Card header"
       draggable="false"
       class="select-none shadow"
       hidden={imghidden}
+      imgwidth={imgwidth ?? 0}
+      imgheight={imgheight ?? 0}
     />
   {/if}
 

src/lib/components/cards/DriverCard.svelte

@@ -8,6 +8,7 @@
   } from "@skeletonlabs/skeleton";
   import { Button, Input, Card, Dropdown, type DropdownOption } from "$lib/components";
   import type { Driver } from "$lib/schema";
+  import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
 
   interface DriverCardProps {
     /** The [Driver] object used to prefill values. */
@@ -58,6 +59,8 @@
   imgsrc={driver?.headshot_url ?? headshot_template}
   imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
   width="w-full sm:w-auto"
+  imgwidth={DRIVER_HEADSHOT_WIDTH}
+  imgheight={DRIVER_HEADSHOT_HEIGHT}
 >
   <form method="POST" enctype="multipart/form-data">
     <!-- This is also disabled, because the ID should only be -->

src/lib/components/cards/RaceCard.svelte

@@ -4,6 +4,7 @@
   import { Button, Card, Input } from "$lib/components";
   import type { Race } from "$lib/schema";
   import { format } from "date-fns";
+  import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
 
   interface RaceCardProps {
     /** The [Race] object used to prefill values. */
@@ -66,6 +67,8 @@
   imgsrc={race?.pictogram_url ?? pictogram_template}
   imgid="update_race_pictogram_preview_{race?.id ?? 'create'}"
   width="w-full sm:w-auto"
+  imgwidth={RACE_PICTOGRAM_WIDTH}
+  imgheight={RACE_PICTOGRAM_HEIGHT}
 >
   <form method="POST" enctype="multipart/form-data">
     <!-- This is also disabled, because the ID should only be -->

src/lib/components/cards/SubstitutionCard.svelte

@@ -4,6 +4,7 @@
   import { get_by_value } 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";
 
   interface SubstitutionCardProps {
     /** The [Substitution] object used to prefill values. */
@@ -93,6 +94,8 @@
     headshot_template}
   imgid="update_substitution_headshot_preview_{substitution?.id ?? 'create'}"
   width="w-full sm:w-auto"
+  imgwidth={DRIVER_HEADSHOT_WIDTH}
+  imgheight={DRIVER_HEADSHOT_HEIGHT}
 >
   <form method="POST" enctype="multipart/form-data">
     <!-- This is also disabled, because the ID should only be -->

src/lib/components/cards/TeamCard.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
-  import { Card, Button, Input, Image } from "$lib/components";
+  import { Card, Button, Input, LazyImage } from "$lib/components";
   import type { Team } from "$lib/schema";
+  import { TEAM_BANNER_HEIGHT, TEAM_BANNER_WIDTH } from "$lib/config";
 
   interface TeamCardProps {
     /** The [Team] object used to prefill values. */
@@ -49,6 +50,8 @@
   imgsrc={team?.banner_url ?? banner_template}
   imgid="update_team_banner_preview_{team?.id ?? 'create'}"
   width="w-full sm:w-auto"
+  imgwidth={TEAM_BANNER_WIDTH}
+  imgheight={TEAM_BANNER_HEIGHT}
 >
   <form method="POST" enctype="multipart/form-data">
     <!-- This is also disabled, because the ID should only be -->
@@ -78,6 +81,7 @@
         value={team?.color ?? ""}
         {labelwidth}
         autocomplete="off"
+        placeholder="Enter as '#XXXXXX'"
         disabled={disable_inputs}
         required={require_inputs}
         onchange={(event: Event) => {
@@ -116,10 +120,11 @@
         <svelte:fragment slot="message">
           <div class="inline-flex flex-nowrap items-center gap-2">
             <b>Upload Logo</b>
-            <Image
+            <LazyImage
               src={team?.logo_url ?? logo_template}
               id="update_team_logo_preview_{team?.id ?? 'create'}"
-              style="width: 32px; height: 32px;"
+              imgwidth={32}
+              imgheight={32}
             />
           </div>
         </svelte:fragment>