App: Add TS type information

src/lib/components/Button.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
   import { page } from "$app/stores";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { popup, type PopupSettings } from "@skeletonlabs/skeleton";
 
   const is_at_path = (path: string): boolean => {
     const pathname: string = $page.url.pathname;
@@ -7,40 +10,66 @@
     return pathname === path;
   };
 
+  interface ButtonProps extends HTMLButtonAttributes {
+    children: Snippet;
+
+    /** The main color variant, e.g. "primary" or "secondary". */
+    color?: string | undefined;
+
+    /** Set the button type to "submit" (otherwise "button"). Only if "href" is undefined. */
+    submit?: boolean;
+
+    /** Make the button act as a link. */
+    href?: string | undefined;
+
+    /** Add the "w-full" class to the button. */
+    fullwidth?: boolean;
+
+    /** Enable the button's ":hover" state manually. */
+    activate?: boolean;
+
+    /** Enable the button's ":hover" state if the current URL matches the "href". Only if "href" is defined. */
+    activate_href?: boolean;
+
+    /** The PopupSettings to trigger on click. Only if "href" is undefined. */
+    trigger_popup?: PopupSettings;
+  }
+
   let {
     children,
     color = undefined,
     submit = false,
     href = undefined,
     fullwidth = false,
+    activate = false,
     activate_href = false,
-    activate_button = false,
+    trigger_popup = { event: "click", target: "invalid" },
     ...restProps
-  } = $props();
+  }: ButtonProps = $props();
 </script>
 
 {#if href}
-  <a
-    {href}
-    class="select-none {color ? `btn px-2 variant-filled-${color}` : ''} {fullwidth
-      ? 'w-full'
-      : 'w-auto'}
-    {activate_href && is_at_path(href) ? 'btn-hover' : ''}"
-    draggable="false"
-    {...restProps}
-  >
-    {@render children()}
-  </a>
+  <!-- HACK: Make the button act as a link using a form -->
+  <form action={href} class="contents">
+    <button
+      type="submit"
+      class="btn m-0 select-none px-2 py-2 {color ? `variant-filled-${color}` : ''} {fullwidth
+        ? 'w-full'
+        : 'w-auto'} {activate ? 'btn-hover' : ''} {activate_href && is_at_path(href)
+        ? 'btn-hover'
+        : ''}"
+      draggable="false"
+      {...restProps}>{@render children()}</button
+    >
+  </form>
 {:else}
   <button
     type={submit ? "submit" : "button"}
-    class="select-none {color ? `btn px-2 variant-filled-${color}` : ''} {fullwidth
+    class="btn select-none px-2 py-2 {color ? `variant-filled-${color}` : ''} {fullwidth
       ? 'w-full'
-      : 'w-auto'}
-    {activate_button ? 'btn-hover' : ''}"
+      : 'w-auto'} {activate ? 'btn-hover' : ''}"
     draggable="false"
-    {...restProps}
+    use:popup={trigger_popup}
+    {...restProps}>{@render children()}</button
   >
-    {@render children()}
-  </button>
 {/if}

src/lib/components/Card.svelte

@@ -1,7 +1,45 @@
 <script lang="ts">
-  let { children, fullwidth = false, ...restProps } = $props();
+  import type { Snippet } from "svelte";
+
+  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;
+
+    /** 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,
+    imghidden = false,
+    fullwidth = false,
+    ...restProps
+  }: CardProps = $props();
 </script>
 
-<div class="card bg-white p-2 shadow {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
-  {@render children()}
+<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}
+    <img
+      id={imgid}
+      src={imgsrc}
+      alt="Card header"
+      draggable="false"
+      class="select-none shadow"
+      hidden={imghidden}
+    />
+  {/if}
+  <div class="p-2" {...restProps}>
+    {@render children()}
+  </div>
 </div>

src/lib/components/Input.svelte

@@ -1,9 +1,25 @@
 <script lang="ts">
-  let { children, type = "text", ...restProps } = $props();
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface InputProps extends HTMLInputAttributes {
+    children: Snippet;
+
+    /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
+    labelwidth?: string;
+
+    /** The type of the input element, e.g. "text". */
+    type?: string;
+  }
+
+  let { children, labelwidth = "auto", type = "text", ...restProps }: InputProps = $props();
 </script>
 
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
-  <div class="input-group-shim select-none text-nowrap text-neutral-900">
+  <div
+    class="input-group-shim select-none text-nowrap text-neutral-900"
+    style="width: {labelwidth};"
+  >
     {@render children()}
   </div>
   <input {type} {...restProps} />

src/lib/database.ts

@@ -0,0 +1,7 @@
+/**
+ * Retrieve an arbitrary object with a matching ID from an Array.
+ * Supposed to use on collections returned by the PocketBase API.
+ */
+export const get_by_id = <T extends object>(objects: Array<T>, id: string): T | undefined => {
+  return objects.find((o: T) => ("id" in o ? o.id === id : false));
+};

src/lib/form.ts

@@ -36,13 +36,13 @@ export const form_data_clean = (data: FormData): FormData => {
 /**
  * Throws SvelteKit error(400) if form_data does not contain key.
  */
-export const form_data_ensure_key = (data: FormData, key: string) => {
+export const form_data_ensure_key = (data: FormData, key: string): void => {
   if (!data.get(key)) error(400, `Key "${key}" missing from form_data!`);
 };
 
 /**
  * Throws SvelteKit error(400) if form_data does not contain all keys.
  */
-export const form_data_ensure_keys = (data: FormData, keys: string[]) => {
+export const form_data_ensure_keys = (data: FormData, keys: string[]): void => {
   keys.map((key) => form_data_ensure_key(data, key));
 };

src/lib/image.ts

@@ -1,8 +1,9 @@
 /**
- * Use this on <Avatar> components.
+ * Obtain an onchange event handler that updates an <Avatar> component
+ * with a new image uploaded via a file input element.
  */
-export const get_avatar_preview_event_handler = (id: string) => {
-  const handler = (event: Event) => {
+export const get_avatar_preview_event_handler = (id: string): ((event: Event) => void) => {
+  const handler = (event: Event): void => {
     const target: HTMLInputElement = event.target as HTMLInputElement;
     const files: FileList | null = target.files;
 
@@ -11,6 +12,7 @@ export const get_avatar_preview_event_handler = (id: string) => {
       const preview: HTMLImageElement = document.querySelector(
         `#${id} > img:first-of-type`,
       ) as HTMLImageElement;
+
       if (preview) {
         preview.src = src;
         preview.hidden = false;
@@ -22,16 +24,18 @@ export const get_avatar_preview_event_handler = (id: string) => {
 };
 
 /**
- * Use this on raw <img> elements.
+ * Obtain an onchange event handler that updates an <img> element
+ * with a new image uploaded via a file input element.
  */
-export const get_image_preview_event_handler = (id: string) => {
-  const handler = (event: Event) => {
+export const get_image_preview_event_handler = (id: string): ((event: Event) => void) => {
+  const handler = (event: Event): void => {
     const target: HTMLInputElement = event.target as HTMLInputElement;
     const files: FileList | null = target.files;
 
     if (files && files.length > 0) {
       const src: string = URL.createObjectURL(files[0]);
       const preview: HTMLImageElement = document.getElementById(id) as HTMLImageElement;
+
       if (preview) {
         preview.src = src;
         preview.hidden = false;

src/lib/schema.ts

@@ -0,0 +1,21 @@
+export interface Team {
+  id: string;
+  name: string;
+  logo: string;
+  logo_url?: string;
+}
+
+export interface Driver {
+  id: string;
+  firstname: string;
+  lastname: string;
+  code: string;
+  headshot: string;
+  headshot_url?: string;
+  team: string;
+  active: boolean;
+}
+
+export interface Race {}
+
+export interface Substitution {}