Lib: Update lazy components (dropdown + card now lazy)

src/lib/components/LazyCard.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import LazyImage from "./LazyImage.svelte";
+  import { lazyload } from "$lib/lazyload";
+
+  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;
+
+    /** The id of the header image element for JS access. */
+    imgid?: string | undefined;
+
+    /** The aspect ratio width used to reserve image space (while its loading) */
+    imgwidth: number;
+
+    /** The aspect ratio height used to reserve image space (while its loading) */
+    imgheight: number;
+
+    /** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
+    imghidden?: boolean;
+
+    /** Enable to give the card the "w-full" class. */
+    fullwidth?: boolean;
+  }
+
+  let {
+    children,
+    imgsrc = undefined,
+    imgid = undefined,
+    imgwidth,
+    imgheight,
+    imghidden = false,
+    fullwidth = false,
+    ...restProps
+  }: CardProps = $props();
+
+  let load: boolean = $state(false);
+
+  const lazy_visible_handler = () => {
+    load = true;
+  };
+</script>
+
+<div use:lazyload onLazyVisible={lazy_visible_handler}>
+  {#if load}
+    <div class="card overflow-hidden bg-white shadow {fullwidth ? 'w-full' : 'w-auto'}">
+      <!-- Allow empty strings for images that only appear after user action -->
+      {#if imgsrc !== undefined}
+        <LazyImage
+          id={imgid}
+          src={imgsrc}
+          {imgwidth}
+          {imgheight}
+          alt="Card header"
+          draggable="false"
+          class="select-none shadow"
+          hidden={imghidden}
+        />
+      {/if}
+      <div class="p-2" {...restProps}>
+        {@render children()}
+      </div>
+    </div>
+  {/if}
+</div>