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/Image.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import type { HTMLImgAttributes } from "svelte/elements";
-  import { fetch_image_base64 } from "$lib/image";
-
-  interface ImageProps extends HTMLImgAttributes {
-    /** The URL to the image resource to load */
-    src: string;
-  }
-
-  let { src, ...restProps }: ImageProps = $props();
-</script>
-
-{#await fetch_image_base64(src) then data}
-  <img src={data} class="bg-surface-100 transition-opacity" {...restProps} />
-{/await}

src/lib/components/LazyImage.svelte

@@ -47,7 +47,8 @@
 <div
   use:lazyload
   onLazyVisible={lazy_visible_handler}
-  style="aspect-ratio: {imgwidth} / {imgheight}; {containerstyle ?? ''}"
+  style="aspect-ratio: {imgwidth} / {imgheight}; {containerstyle ??
+    ''}; max-width: {imgwidth}px; max-height: {imgheight}px"
 >
   {#if load}
     {#await fetch_image_base64(src) then data}

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>

src/lib/components/form/Dropdown.svelte

@@ -4,7 +4,7 @@
   import type { Action } from "svelte/action";
   import type { HTMLInputAttributes } from "svelte/elements";
   import { v4 as uuid } from "uuid";
-  import { type DropdownOption, Image } from "$lib/components";
+  import { type DropdownOption, LazyImage } from "$lib/components";
 
   interface DropdownProps extends HTMLInputAttributes {
     children: Snippet;
@@ -120,7 +120,14 @@
       <ListBoxItem bind:group={input_variable} {name} value={option.value}>
         <div class="flex flex-nowrap">
           {#if option.icon_url}
-            <Image src={option.icon_url} alt="" class="rounded" style="height: 24px;" />
+            <LazyImage
+              src={option.icon_url}
+              alt=""
+              class="rounded"
+              style="height: 24px;"
+              imgwidth={option.icon_width ?? 0}
+              imgheight={option.icon_height ?? 0}
+            />
           {/if}
           <span class="ml-2">{option.label}</span>
         </div>

src/lib/components/form/Dropdown.ts

@@ -7,4 +7,10 @@ export interface DropdownOption {
 
   /** An optional icon displayed left to the label */
   icon_url?: string;
+
+  /** The icon width. Required if icon_url is set */
+  icon_width?: number;
+
+  /** The icon height. Required if icon_url is set */
+  icon_height?: number;
 }

src/lib/components/index.ts

@@ -1,4 +1,3 @@
-import Image from "./Image.svelte";
 import LazyImage from "./LazyImage.svelte";
 import LoadingIndicator from "./LoadingIndicator.svelte";
 import Table from "./Table.svelte";
@@ -26,7 +25,6 @@ import UserIcon from "./svg/UserIcon.svelte";
 
 export {
   // Components
-  Image,
   LazyImage,
   LoadingIndicator,
   Table,