Data/Season: Add value formatting functions for substitutions page

This is loading fast and non-lazy, on row-click the card opens

.prettierrc

@@ -1,6 +0,0 @@
-{
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-  "tailwindStylesheet": "./src/app.css",
-  "tailwindConfig": "./tailwind.config.js",
-  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
-}

flake.nix

@@ -125,14 +125,19 @@
         # Use $1 for positional args
         commands = [
           {
-            name = "pycharm";
-            help = "Launch PyCharm Professional";
-            command = "pycharm-professional . &>/dev/null &";
+            name = "pb";
+            help = "Serve PocketBase";
+            command = "pocketbase serve --http 192.168.86.50:8090";
           }
           {
-            name = "db";
-            help = "Launch SQLiteBrowser";
-            command = "sqlitebrowser ./instance/formula10.db &>/dev/null &";
+            name = "dev";
+            help = "Serve Formula 11 (Dev)";
+            command = "npm run dev -- --host --port 5173";
+          }
+          {
+            name = "prod";
+            help = "Serve Formula 11 (Prod)";
+            command = "npm run build && npm run preview -- --host --port 5173";
           }
         ];
       };

package.json

@@ -10,21 +10,32 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
+		"@fsouza/prettierd": "^0.25.4",
+		"@skeletonlabs/skeleton": "^2.10.3",
+		"@skeletonlabs/tw-plugin": "^0.4.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-node": "^5.2.10",
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.1.1",
-		"typescript": "^5.0.0",
-		"vite": "^6.0.0"
-	},
-	"dependencies": {
+		"@tailwindcss/forms": "^0.5.9",
+		"@types/node": "^22.10.2",
+		"@types/uuid": "^10.0.0",
 		"autoprefixer": "^10.4.20",
-		"pocketbase": "^0.22.1",
 		"postcss": "^8.4.49",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"prettier-plugin-tailwindcss": "^0.6.9",
-		"tailwindcss": "^3.4.16"
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.1.1",
+		"tailwindcss": "^3.4.16",
+		"typescript": "^5.0.0",
+		"vite": "^6.0.0"
+	},
+	"dependencies": {
+		"@floating-ui/dom": "^1.6.12",
+		"date-fns": "^4.1.0",
+		"pocketbase": "^0.22.1",
+		"sharp": "^0.33.5",
+		"uuid": "^11.0.3"
 	}
 }

postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    tailwindcss: {},
+    tailwindcss: { config: "./tailwind.config.ts" },
     autoprefixer: {},
   },
-}
+};

prettier.config.js

@@ -0,0 +1,32 @@
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+const config = {
+  // Plugin configs
+  plugins: ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  tailwindStylesheet: "./src/app.css",
+  tailwindConfig: "./tailwind.config.ts",
+
+  // Global formatting options
+  printWidth: 100,
+  tabWidth: 2,
+  tabs: false,
+  semi: true,
+  singleQuote: false,
+  quoteProps: "as-needed",
+  trailingComma: "all",
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: "always",
+
+  // File specific configuration options
+  overrides: [
+    {
+      files: "*.svelte",
+      options: { parser: "svelte" },
+    },
+  ],
+};
+
+export default config;

src/app.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* This class allows to manually simulate the "hover" class */
+.btn-hover {
+  --tw-brightness: brightness(1.15);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
+    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}

src/app.d.ts

@@ -1,13 +1,28 @@
+import type { User } from "$lib/schema";
+import type { PocketBase, RecordModel } from "pocketbase";
+
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
   namespace App {
+    interface Locals {
+      pb: PocketBase;
+      user: User | undefined;
+      admin: boolean;
+    }
+
     // interface Error {}
-        // interface Locals {}
     // interface PageData {}
     // interface PageState {}
     // interface Platform {}
   }
+
+  declare namespace svelteHTML {
+    interface HTMLAttributes<T> {
+      /** This element will be dispatched once an element with [use:lazyload] starts intersecting with the viewport. */
+      onLazyVisible?: (event: CustomEvent) => void;
+    }
+  }
 }
 
-export { };
+export {};

src/app.html

@@ -2,11 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+
+    <!-- Scale the viewport for mobile devices -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Set the iOS Safari header/tab bar color -->
+    <meta name="theme-color" content="#F8D7DA" />
+
+    <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+
+    <!-- SvelteKit inserts the header contents here -->
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover">
+
+  <!-- Prefetch data specified in "load" functions on link hover -->
+  <body data-theme="formula11Theme" data-sveltekit-preload-data="hover">
+    <!-- SvelteKit inserts the body contents here -->
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>

src/hooks.server.ts

@@ -0,0 +1,63 @@
+import type { Graphic, User } from "$lib/schema";
+import type { Handle } from "@sveltejs/kit";
+import PocketBase from "pocketbase";
+
+// This function will run serverside on each request.
+// The event.locals will be passed onto serverside load functions and handlers.
+// We create a new PocketBase client for each request, so it always carries the
+// most recent authentication data.
+// The authenticated PocketBase client will be available in all *.server.ts files.
+export const handle: Handle = async ({ event, resolve }) => {
+  const requestStartTime: number = Date.now();
+
+  event.locals.pb = new PocketBase("http://192.168.86.50:8090");
+
+  // Load the most recent authentication data from a cookie (is updated below)
+  event.locals.pb.authStore.loadFromCookie(event.request.headers.get("cookie") || "");
+
+  if (event.locals.pb.authStore.isValid) {
+    // If the authentication data is valid, we make a "user" object easily available.
+    event.locals.user = structuredClone(event.locals.pb.authStore.model) as User;
+
+    if (event.locals.user) {
+      if (event.locals.pb.authStore.model.avatar) {
+        // Fill in the avatar URL
+        event.locals.user.avatar_url = event.locals.pb.files.getURL(
+          event.locals.pb.authStore.model,
+          event.locals.pb.authStore.model.avatar,
+        );
+      } else {
+        // Fill in the driver_headshot_template URL if no avatar chosen
+        const driver_headshot_template: Graphic = await event.locals.pb
+          .collection("graphics")
+          .getFirstListItem('name="driver_headshot_template"');
+        event.locals.user.avatar_url = event.locals.pb.files.getURL(
+          driver_headshot_template,
+          driver_headshot_template.file,
+        );
+      }
+
+      // Set admin status for easier access
+      event.locals.admin = event.locals.user.admin;
+    }
+  } else {
+    event.locals.user = undefined;
+  }
+
+  // Resolve the request. This is what happens by default.
+  const response = await resolve(event);
+
+  console.log(
+    "=====\n",
+    `Request Date: ${new Date(requestStartTime).toISOString()}\n`,
+    `Method: ${event.request.method}\n`,
+    `Path: ${event.url.pathname}\n`,
+    `Duration: ${Date.now() - requestStartTime}ms\n`,
+    `Status: ${response.status}`,
+  );
+
+  // Store the current authentication data to a cookie, so it can be loaded above.
+  response.headers.set("set-cookie", event.locals.pb.authStore.exportToCookie({ secure: false }));
+
+  return response;
+};

src/lib/components/Image.svelte

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from "svelte/elements";
+  import { lazyload } from "$lib/lazyload";
+  import { fetch_image_base64 } from "$lib/image";
+
+  interface LazyImageProps extends HTMLImgAttributes {
+    /** The URL to the image resource to lazyload */
+    src: string;
+
+    /** 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;
+
+    /** Optional extra style for the <img> element  */
+    imgstyle?: string;
+
+    /** Optional extra style for the lazy <div> container */
+    containerstyle?: string;
+  }
+
+  let {
+    src,
+    imgwidth,
+    imgheight,
+    imgstyle = undefined,
+    containerstyle = undefined,
+    ...restProps
+  }: LazyImageProps = $props();
+
+  // Once the image is visible, this will be set to true, triggering the loading
+  let load: boolean = $state(false);
+
+  const lazy_visible_handler = () => {
+    load = true;
+  };
+
+  // Once the image component is mounted (e.g. when the image has loaded),
+  // transition the opacity to fade-in the image
+  const img_opacity_handler = (node: HTMLElement) => {
+    setTimeout(() => (node.style.opacity = "1"), 20);
+  };
+</script>
+
+<!-- Show a correctly sized div so the layout doesn't jump. -->
+<div
+  use:lazyload
+  onLazyVisible={lazy_visible_handler}
+  style="aspect-ratio: {imgwidth} / {imgheight}; {containerstyle ?? ''}"
+>
+  {#if load}
+    {#await fetch_image_base64(src) then data}
+      <img
+        src={data}
+        use:img_opacity_handler
+        class="bg-surface-100 transition-opacity"
+        style="opacity: 0; transition-duration: 300ms; {imgstyle ?? ''}"
+        {...restProps}
+      />
+    {/await}
+  {/if}
+</div>

src/lib/components/LoadingIndicator.svelte

@@ -0,0 +1,62 @@
+<!-- https://www.sveltelab.dev/dc0nf9id4ust2vw -->
+
+<script lang="ts">
+  import { navigating } from "$app/stores";
+
+  let loading: string = $state("no");
+  let percentage: number = $state(0);
+
+  $effect(() => {
+    if ($navigating) {
+      loading = "yes";
+    } else {
+      loading = "closing";
+      setTimeout(() => {
+        loading = "no";
+      }, 300);
+    }
+  });
+
+  $effect(() => {
+    if (loading === "closing") {
+      percentage = 1;
+    }
+  });
+
+  const load = (_node: HTMLElement) => {
+    let timeout: NodeJS.Timeout;
+    const handle = () => {
+      if (percentage < 0.7) {
+        percentage += Math.random() * 0.3;
+
+        // Let's call ourselves recursively to fill the loading bar
+        timeout = setTimeout(handle, Math.random() * 1000);
+      }
+    };
+
+    handle();
+
+    return {
+      destroy() {
+        clearTimeout(timeout);
+        percentage = 0;
+      },
+    };
+  };
+</script>
+
+{#if loading !== "no"}
+  <div
+    class="fixed inset-0 bottom-auto z-50 h-1 bg-error-500"
+    use:load
+    style:--percentage={percentage}
+  ></div>
+{/if}
+
+<style>
+  div {
+    transform-origin: left;
+    transform: scaleX(calc(var(--percentage) * 100%));
+    transition: transform 250ms;
+  }
+</style>

src/lib/components/Table.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { type TableColumn } from "$lib/components";
+
+  interface TableProps {
+    /** The data that is displayed inside the table. Any array of arbitrary key-value objects. */
+    data: any[];
+
+    /** The columns the table should have. */
+    columns: TableColumn[];
+
+    /** An optional function handling clicking on a table row */
+    handler?: (event: Event, id: string) => Promise<void>;
+  }
+
+  let { data, columns, handler = undefined }: TableProps = $props();
+</script>
+
+<div class="table-container bg-white shadow">
+  <table class="table table-interactive table-compact bg-white">
+    <thead>
+      <tr class="bg-white">
+        {#each columns as col}
+          <th class="!px-3">{col.label}</th>
+        {/each}
+      </tr>
+    </thead>
+
+    <tbody>
+      {#each data as row}
+        <tr
+          onclick={async (event: Event) => {
+            if (handler) await handler(event, row.id);
+          }}
+        >
+          {#each columns as col}
+            {#if col.valuefun}
+              <td class="!align-middle">
+                {#await col.valuefun(row[col.data_value_name]) then value}{@html value}{/await}
+              </td>
+            {:else}
+              <td class="!align-middle">{row[col.data_value_name]}</td>
+            {/if}
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>

src/lib/components/Table.ts

@@ -0,0 +1,10 @@
+export interface TableColumn {
+  /** The name of the property containing the value. */
+  data_value_name: string;
+
+  /** The columnname for this property. */
+  label: string;
+
+  /** Any function to further customize the displayed value. May return HTML. */
+  valuefun?: (value: any) => Promise<string>;
+}

src/lib/components/cards/Card.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Image } from "$lib/components";
+
+  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;
+
+    /** The width class for the card, defaults to [w-auto] */
+    width?: string;
+  }
+
+  let {
+    children,
+    imgsrc = undefined,
+    imgid = undefined,
+    imghidden = false,
+    width = "w-auto",
+    ...restProps
+  }: CardProps = $props();
+</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
+      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/cards/DriverCard.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { get_image_preview_event_handler } from "$lib/image";
+  import {
+    FileDropzone,
+    getModalStore,
+    SlideToggle,
+    type ModalStore,
+  } from "@skeletonlabs/skeleton";
+  import { Button, Input, Card, Dropdown, type DropdownOption } from "$lib/components";
+  import type { Driver } from "$lib/schema";
+
+  interface DriverCardProps {
+    /** The [Driver] object used to prefill values. */
+    driver?: Driver | undefined;
+
+    /** Disable all inputs if [true] */
+    disable_inputs?: boolean;
+
+    /** Require all inputs if [true] */
+    require_inputs?: boolean;
+
+    /** The [src] of the driver headshot template preview */
+    headshot_template?: string;
+
+    /** The value this component's team select dropdown will bind to */
+    team_select_value: string;
+
+    /** The options this component's team select dropdown will display */
+    team_select_options: DropdownOption[];
+
+    /** The value this component's active switch will bind to */
+    active_value: boolean;
+  }
+
+  let {
+    driver = undefined,
+    disable_inputs = false,
+    require_inputs = false,
+    headshot_template = undefined,
+    team_select_value,
+    team_select_options,
+    active_value,
+  }: DriverCardProps = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    driver = meta.driver;
+    team_select_value = meta.team_select_value;
+    team_select_options = meta.team_select_options;
+    active_value = meta.active_value;
+  }
+</script>
+
+<Card
+  imgsrc={driver?.headshot_url ?? headshot_template}
+  imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
+  width="w-full sm:w-auto"
+>
+  <form method="POST" enctype="multipart/form-data">
+    <!-- This is also disabled, because the ID should only be -->
+    <!-- "leaked" to users that are allowed to use the inputs -->
+    {#if driver && !disable_inputs}
+      <input name="id" type="hidden" value={driver.id} />
+    {/if}
+
+    <div class="flex flex-col gap-2">
+      <!-- Driver name input -->
+      <Input
+        id="driver_first_name_{driver?.id ?? 'create'}"
+        name="firstname"
+        value={driver?.firstname ?? ""}
+        autocomplete="off"
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}
+        >First Name
+      </Input>
+      <Input
+        id="driver_last_name_{driver?.id ?? 'create'}"
+        name="lastname"
+        value={driver?.lastname ?? ""}
+        autocomplete="off"
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}
+        >Last Name
+      </Input>
+      <Input
+        id="driver_code_{driver?.id ?? 'create'}"
+        name="code"
+        value={driver?.code ?? ""}
+        autocomplete="off"
+        minlength={3}
+        maxlength={3}
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}
+        >Driver Code
+      </Input>
+
+      <!-- Driver team input -->
+      <Dropdown
+        name="team"
+        input_variable={team_select_value}
+        options={team_select_options}
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}
+      >
+        Team
+      </Dropdown>
+
+      <!-- Headshot upload -->
+      <FileDropzone
+        name="headshot"
+        id="driver_headshot_{driver?.id ?? 'create'}"
+        onchange={get_image_preview_event_handler(
+          `update_driver_headshot_preview_${driver?.id ?? "create"}`,
+        )}
+        disabled={disable_inputs}
+        required={require_inputs}
+      >
+        <svelte:fragment slot="message"><b>Upload Headshot</b></svelte:fragment>
+      </FileDropzone>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex items-center justify-end gap-2">
+        <div class="mr-auto">
+          <SlideToggle
+            name="active"
+            background="bg-primary-500"
+            active="bg-tertiary-500"
+            bind:checked={active_value}
+            disabled={disable_inputs}
+          />
+        </div>
+        {#if driver}
+          <Button
+            formaction="?/update_driver"
+            color="secondary"
+            disabled={disable_inputs}
+            submit
+            width="w-1/2"
+          >
+            Save
+          </Button>
+          <Button
+            color="primary"
+            submit
+            disabled={disable_inputs}
+            formaction="?/delete_driver"
+            width="w-1/2"
+          >
+            Delete
+          </Button>
+        {:else}
+          <Button formaction="?/create_driver" color="tertiary" submit width="w-full">
+            Create Driver
+          </Button>
+        {/if}
+      </div>
+    </div>
+  </form>
+</Card>

src/lib/components/cards/LazyCard.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { LazyImage } from "$lib/components";
+  import { lazyload } from "$lib/lazyload";
+
+  interface LazyCardProps {
+    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;
+
+    /** The aspect ratio width used to reserve card space (while its loading) */
+    cardwidth: number;
+
+    /** The aspect ratio height used to reserve card space (while its loading) */
+    cardheight: number;
+  }
+
+  let {
+    children,
+    imgsrc = undefined,
+    imgid = undefined,
+    imgwidth,
+    imgheight,
+    imghidden = false,
+    cardwidth,
+    cardheight,
+    ...restProps
+  }: LazyCardProps = $props();
+
+  let load: boolean = $state(false);
+
+  const lazy_visible_handler = () => {
+    load = true;
+  };
+</script>
+
+<div
+  use:lazyload
+  onLazyVisible={lazy_visible_handler}
+  style="aspect-ratio: {cardwidth} / {cardheight};"
+>
+  <div class="card w-full overflow-hidden bg-white shadow">
+    <!-- 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}
+
+    <!-- Only lazyload children, as the image is already lazy (also the image fade would break) -->
+    {#if load}
+      <div class="p-2" {...restProps}>
+        {@render children()}
+      </div>
+    {/if}
+  </div>
+</div>

src/lib/components/cards/RaceCard.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+  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 { format } from "date-fns";
+
+  interface RaceCardProps {
+    /** The [Race] object used to prefill values. */
+    race?: Race | undefined;
+
+    /** Disable all inputs if [true] */
+    disable_inputs?: boolean;
+
+    /** Require all inputs if [true] */
+    require_inputs?: boolean;
+
+    /** The [src] of the race pictogram template preview */
+    pictogram_template?: string;
+  }
+
+  let {
+    race = undefined,
+    disable_inputs = false,
+    require_inputs = false,
+    pictogram_template = "",
+  }: RaceCardProps = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    race = meta.race;
+  }
+
+  // Dates have to be formatted to datetime-local format
+  const dateformat: string = "yyyy-MM-dd'T'HH:mm";
+  const sprintqualidate: string | undefined =
+    race && race.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined;
+  const sprintdate: string | undefined =
+    race && race.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined;
+  const qualidate: string | undefined = race
+    ? format(new Date(race.qualidate), dateformat)
+    : undefined;
+  const racedate: string | undefined = race
+    ? format(new Date(race.racedate), dateformat)
+    : undefined;
+
+  const clear_sprint = () => {
+    const sprintquali: HTMLInputElement = document.getElementById(
+      `race_sprintqualidate_${race?.id ?? "create"}`,
+    ) as HTMLInputElement;
+    const sprint: HTMLInputElement = document.getElementById(
+      `race_sprintdate_${race?.id ?? "create"}`,
+    ) as HTMLInputElement;
+
+    sprintquali.value = "";
+    sprint.value = "";
+  };
+
+  const labelwidth = "80px";
+</script>
+
+<Card
+  imgsrc={race?.pictogram_url ?? pictogram_template}
+  imgid="update_race_pictogram_preview_{race?.id ?? 'create'}"
+  width="w-full sm:w-auto"
+>
+  <form method="POST" enctype="multipart/form-data">
+    <!-- This is also disabled, because the ID should only be -->
+    <!-- "leaked" to users that are allowed to use the inputs -->
+    {#if race && !disable_inputs}
+      <input name="id" type="hidden" value={race.id} />
+    {/if}
+
+    <div class="flex flex-col gap-2">
+      <!-- Driver name input -->
+      <Input
+        id="race_name_{race?.id ?? 'create'}"
+        name="name"
+        value={race?.name ?? ""}
+        autocomplete="off"
+        {labelwidth}
+        disabled={disable_inputs}
+        required={require_inputs}>Name</Input
+      >
+      <Input
+        id="race_step_{race?.id ?? 'create'}"
+        name="step"
+        value={race?.step ?? ""}
+        autocomplete="off"
+        {labelwidth}
+        type="number"
+        min={1}
+        max={24}
+        disabled={disable_inputs}
+        required={require_inputs}>Step</Input
+      >
+      <Input
+        id="race_pxx_{race?.id ?? 'create'}"
+        name="pxx"
+        value={race?.pxx ?? ""}
+        autocomplete="off"
+        {labelwidth}
+        type="number"
+        min={1}
+        max={20}
+        disabled={disable_inputs}
+        required={require_inputs}>PXX</Input
+      >
+
+      <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
+      <Input
+        id="race_sprintqualidate_{race?.id ?? 'create'}"
+        name="sprintqualidate"
+        value={sprintqualidate ?? ""}
+        autocomplete="off"
+        {labelwidth}
+        type="datetime-local"
+        disabled={disable_inputs}>SQuali</Input
+      >
+      <Input
+        id="race_sprintdate_{race?.id ?? 'create'}"
+        name="sprintdate"
+        value={sprintdate ?? ""}
+        autocomplete="off"
+        {labelwidth}
+        type="datetime-local"
+        disabled={disable_inputs}>SRace</Input
+      >
+      <Input
+        id="race_qualidate_{race?.id ?? 'create'}"
+        name="qualidate"
+        value={qualidate ?? ""}
+        autocomplete="off"
+        {labelwidth}
+        type="datetime-local"
+        disabled={disable_inputs}
+        required={require_inputs}>Quali</Input
+      >
+      <Input
+        id="race_racedate_{race?.id ?? 'create'}"
+        name="racedate"
+        value={racedate ?? ""}
+        autocomplete="off"
+        {labelwidth}
+        type="datetime-local"
+        disabled={disable_inputs}
+        required={require_inputs}>Race</Input
+      >
+
+      <!-- Headshot upload -->
+      <FileDropzone
+        name="pictogram"
+        id="race_pictogram_{race?.id ?? 'create'}"
+        onchange={get_image_preview_event_handler(
+          `update_race_pictogram_preview_${race?.id ?? "create"}`,
+        )}
+        disabled={disable_inputs}
+        required={require_inputs}
+      >
+        <svelte:fragment slot="message"><b>Upload Pictogram</b></svelte:fragment>
+      </FileDropzone>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex justify-end gap-2">
+        <Button onclick={clear_sprint} color="secondary" disabled={disable_inputs} width="w-1/3">
+          Remove Sprint
+        </Button>
+        {#if race}
+          <Button
+            formaction="?/update_race"
+            color="secondary"
+            disabled={disable_inputs}
+            submit
+            width="w-1/3"
+          >
+            Save Changes
+          </Button>
+          <Button
+            color="primary"
+            submit
+            disabled={disable_inputs}
+            formaction="?/delete_race"
+            width="w-1/3"
+          >
+            Delete
+          </Button>
+        {:else}
+          <Button formaction="?/create_race" color="tertiary" submit width="w-1/2"
+            >Create Race</Button
+          >
+        {/if}
+      </div>
+    </div>
+  </form>
+</Card>

src/lib/components/cards/SubstitutionCard.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import { Card, Button, Dropdown, type DropdownOption } from "$lib/components";
+  import type { Driver, Substitution } from "$lib/schema";
+  import { get_by_value } from "$lib/database";
+  import type { Action } from "svelte/action";
+  import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
+
+  interface SubstitutionCardProps {
+    /** The [Substitution] object used to prefill values. */
+    substitution?: Substitution | undefined;
+
+    /** The drivers (to display the headshot) */
+    drivers: Driver[];
+
+    /** Disable all inputs if [true] */
+    disable_inputs?: boolean;
+
+    /** Require all inputs if [true] */
+    require_inputs?: boolean;
+
+    /** The [src] of the driver headshot template preview */
+    headshot_template?: string;
+
+    /** The value this component's substitute select dropdown will bind to */
+    substitute_select_value: string;
+
+    /** The value this component's driver select dropdown will bind to */
+    driver_select_value: string;
+
+    /** The value this component's race select dropdown will bind to */
+    race_select_value: string;
+
+    /** The options this component's substitute/driver select dropdowns will display */
+    driver_select_options: DropdownOption[];
+
+    /** The options this component's race select dropdown will display */
+    race_select_options: DropdownOption[];
+  }
+
+  let {
+    substitution = undefined,
+    drivers,
+    disable_inputs = false,
+    require_inputs = false,
+    headshot_template = "",
+    substitute_select_value,
+    driver_select_value,
+    race_select_value,
+    driver_select_options,
+    race_select_options,
+  }: SubstitutionCardProps = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    substitution = meta.substitution;
+    drivers = meta.drivers;
+    substitute_select_value = meta.substitute_select_value;
+    driver_select_value = meta.driver_select_value;
+    race_select_value = meta.race_select_value;
+    driver_select_options = meta.driver_select_options;
+    race_select_options = meta.race_select_options;
+  }
+
+  // This action is used on the <Dropdown> element.
+  // It will trigger once the Dropdown's <input> elements is mounted.
+  // This way we'll receive a reference to the object so we can register our event handler.
+  const register_substitute_preview_handler: Action = (node: HTMLElement) => {
+    node.addEventListener("DropdownChange", update_substitute_preview);
+  };
+
+  // This event handler is registered to the Dropdown's <input> element through the action above.
+  const update_substitute_preview = (event: Event) => {
+    const target: HTMLInputElement = event.target as HTMLInputElement;
+
+    // The option "label" gets put into the Dropdown's input value,
+    // so we need to lookup the driver by "code".
+    const src: string = get_by_value(drivers, "code", target.value)?.headshot_url || "";
+    if (src) {
+      const preview: HTMLImageElement = document.getElementById(
+        `update_substitution_headshot_preview_${substitution?.id ?? "create"}`,
+      ) as HTMLImageElement;
+
+      if (preview) preview.src = src;
+    }
+  };
+</script>
+
+<Card
+  imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
+    headshot_template}
+  imgid="update_substitution_headshot_preview_{substitution?.id ?? 'create'}"
+  width="w-full sm:w-auto"
+>
+  <form method="POST" enctype="multipart/form-data">
+    <!-- This is also disabled, because the ID should only be -->
+    <!-- "leaked" to users that are allowed to use the inputs -->
+    {#if substitution && !disable_inputs}
+      <input name="id" type="hidden" value={substitution.id} />
+    {/if}
+
+    <div class="flex flex-col gap-2">
+      <!-- Substitute select -->
+      <Dropdown
+        name="substitute"
+        input_variable={substitute_select_value}
+        action={register_substitute_preview_handler}
+        options={driver_select_options}
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}
+      >
+        Substitute
+      </Dropdown>
+
+      <!-- Driver select -->
+      <Dropdown
+        name="for"
+        input_variable={driver_select_value}
+        options={driver_select_options}
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}
+      >
+        For
+      </Dropdown>
+
+      <!-- Race select -->
+      <Dropdown
+        name="race"
+        input_variable={race_select_value}
+        options={race_select_options}
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}
+      >
+        Race
+      </Dropdown>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex justify-end gap-2">
+        {#if substitution}
+          <Button
+            formaction="?/update_substitution"
+            color="secondary"
+            disabled={disable_inputs}
+            submit
+            width="w-1/2"
+          >
+            Save Changes
+          </Button>
+          <Button
+            color="primary"
+            submit
+            disabled={disable_inputs}
+            formaction="?/delete_substitution"
+            width="w-1/2"
+          >
+            Delete
+          </Button>
+        {:else}
+          <Button formaction="?/create_substitution" color="tertiary" submit width="w-full">
+            Create Substitution
+          </Button>
+        {/if}
+      </div>
+    </div>
+  </form>
+</Card>

src/lib/components/cards/TeamCard.svelte

@@ -0,0 +1,153 @@
+<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 type { Team } from "$lib/schema";
+
+  interface TeamCardProps {
+    /** The [Team] object used to prefill values. */
+    team?: Team | undefined;
+
+    /** Disable all inputs if [true] */
+    disable_inputs?: boolean;
+
+    /** Require all inputs if [true] */
+    require_inputs?: boolean;
+
+    /** The [src] of the team banner template preview */
+    banner_template?: string;
+
+    /** The [src] of the team logo template preview */
+    logo_template?: string;
+  }
+
+  let {
+    team = undefined,
+    disable_inputs = false,
+    require_inputs = false,
+    banner_template = "",
+    logo_template = "",
+  }: TeamCardProps = $props();
+
+  const labelwidth: string = "110px";
+
+  let colorpreview: string = $state(team?.color ?? "white");
+
+  const modalStore: ModalStore = getModalStore();
+  if ($modalStore[0].meta) {
+    const meta = $modalStore[0].meta;
+
+    team = meta.team;
+  }
+</script>
+
+<Card
+  imgsrc={team?.banner_url ?? banner_template}
+  imgid="update_team_banner_preview_{team?.id ?? 'create'}"
+  width="w-full sm:w-auto"
+>
+  <form method="POST" enctype="multipart/form-data">
+    <!-- This is also disabled, because the ID should only be -->
+    <!-- "leaked" to users that are allowed to use the inputs -->
+    {#if team && !disable_inputs}
+      <input name="id" type="hidden" value={team.id} />
+    {/if}
+
+    <div class="flex flex-col gap-2">
+      <!-- Team name input -->
+      <Input
+        id="team_name_{team?.id ?? 'create'}"
+        name="name"
+        value={team?.name ?? ""}
+        {labelwidth}
+        autocomplete="off"
+        disabled={disable_inputs}
+        required={require_inputs}
+      >
+        Name
+      </Input>
+
+      <!-- Team color input -->
+      <Input
+        id="team_color_{team?.id ?? 'create'}"
+        name="color"
+        value={team?.color ?? ""}
+        {labelwidth}
+        autocomplete="off"
+        disabled={disable_inputs}
+        required={require_inputs}
+        onchange={(event: Event) => {
+          colorpreview = (event.target as HTMLInputElement).value;
+        }}
+      >
+        Color
+        <span class="badge ml-2 border" style="color: {colorpreview}; background: {colorpreview}"
+          >C</span
+        >
+      </Input>
+
+      <!-- Banner upload -->
+      <FileDropzone
+        name="banner"
+        id="team_banner_{team?.id ?? 'create'}"
+        onchange={get_image_preview_event_handler(
+          `update_team_banner_preview_${team?.id ?? "create"}`,
+        )}
+        disabled={disable_inputs}
+        required={require_inputs}
+      >
+        <svelte:fragment slot="message"><b>Upload Banner</b></svelte:fragment>
+      </FileDropzone>
+
+      <!-- Logo upload -->
+      <FileDropzone
+        name="logo"
+        id="team_logo_{team?.id ?? 'create'}"
+        onchange={get_image_preview_event_handler(
+          `update_team_logo_preview_${team?.id ?? "create"}`,
+        )}
+        disabled={disable_inputs}
+        required={require_inputs}
+      >
+        <svelte:fragment slot="message">
+          <div class="inline-flex flex-nowrap items-center gap-2">
+            <b>Upload Logo</b>
+            <Image
+              src={team?.logo_url ?? logo_template}
+              id="update_team_logo_preview_{team?.id ?? 'create'}"
+              style="width: 32px; height: 32px;"
+            />
+          </div>
+        </svelte:fragment>
+      </FileDropzone>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex justify-end gap-2">
+        {#if team}
+          <Button
+            formaction="?/update_team"
+            color="secondary"
+            disabled={disable_inputs}
+            submit
+            width="w-1/2"
+          >
+            Save
+          </Button>
+          <Button
+            color="primary"
+            submit
+            disabled={disable_inputs}
+            formaction="?/delete_team"
+            width="w-1/2"
+          >
+            Delete
+          </Button>
+        {:else}
+          <Button formaction="?/create_team" color="tertiary" submit width="w-full"
+            >Create Team</Button
+          >
+        {/if}
+      </div>
+    </div>
+  </form>
+</Card>

src/lib/components/form/Button.svelte

@@ -0,0 +1,75 @@
+<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;
+    // console.log(pathname);
+    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 a width class to the button. */
+    width?: string;
+
+    /** 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,
+    width = "w-auto",
+    activate = false,
+    activate_href = false,
+    trigger_popup = { event: "click", target: "invalid" },
+    ...restProps
+  }: ButtonProps = $props();
+</script>
+
+{#if href}
+  <!-- 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}`
+        : ''} {width} {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="btn select-none px-2 py-2 {color ? `variant-filled-${color}` : ''} {width} {activate
+      ? 'btn-hover'
+      : ''}"
+    draggable="false"
+    use:popup={trigger_popup}
+    {...restProps}>{@render children()}</button
+  >
+{/if}

src/lib/components/form/Dropdown.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { ListBox, ListBoxItem, popup, type PopupSettings } from "@skeletonlabs/skeleton";
+  import type { Snippet } from "svelte";
+  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";
+
+  interface DropdownProps extends HTMLInputAttributes {
+    children: Snippet;
+
+    /** Placeholder for the empty input element */
+    placeholder?: string;
+
+    /** Form name of the input element, to reference input data after form submission */
+    name?: string;
+
+    /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
+    labelwidth?: string;
+
+    /** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
+    input_variable: string;
+
+    /** Any action to bind to the input element */
+    action?: Action;
+
+    /** The ID of the popup to trigger. UUID by default. */
+    popup_id?: string;
+
+    /** The [PopupSettings] object for the popup to trigger. */
+    popup_settings?: PopupSettings;
+
+    /** The options this autocomplete component allows to choose from.
+     * Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
+     */
+    options: DropdownOption[];
+  }
+
+  let {
+    children,
+    placeholder = "",
+    name = "",
+    labelwidth = "auto",
+    input_variable,
+    action = undefined,
+    popup_id = uuid(),
+    popup_settings = {
+      event: "click",
+      target: popup_id,
+      placement: "bottom",
+      closeQuery: ".listbox-item",
+    },
+    options,
+    ...restProps
+  }: DropdownProps = $props();
+
+  /** Find the "label" of an option by its "value" */
+  const get_label = (value: string): string | undefined => {
+    return options.find((o) => o.value === value)?.label;
+  };
+
+  // Use an action to fill the "input" variable
+  // required to dispatch the custom event using $effect
+  let input: HTMLInputElement | undefined = undefined;
+  const obtain_input: Action = (node: HTMLElement) => {
+    input = node as HTMLInputElement;
+  };
+
+  // This will run everyting "input_variable" changes.
+  // The event is fired when the input's value is updated via JavaScript.
+  $effect(() => {
+    // Just list this so SvelteKit picks it up as dependency
+    input_variable;
+
+    if (input) input.dispatchEvent(new CustomEvent("DropdownChange"));
+  });
+</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"
+    style="width: {labelwidth};"
+  >
+    {@render children()}
+  </div>
+  <!-- TODO: How to assign use: conditionally? I don't wan't to repeat the entire input... -->
+  {#if action}
+    <input
+      use:popup={popup_settings}
+      type="button"
+      autocomplete="off"
+      style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
+      use:obtain_input
+      use:action
+      onkeypress={(event: Event) => event.preventDefault()}
+      value={get_label(input_variable) ?? placeholder}
+      {...restProps}
+    />
+  {:else}
+    <input
+      use:popup={popup_settings}
+      type="button"
+      autocomplete="off"
+      style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
+      use:obtain_input
+      onkeypress={(event: Event) => event.preventDefault()}
+      value={get_label(input_variable) ?? placeholder}
+      {...restProps}
+    />
+  {/if}
+</div>
+
+<div
+  data-popup={popup_id}
+  class="card z-10 w-auto overflow-y-scroll p-2 shadow"
+  style="max-height: 350px;"
+>
+  <ListBox>
+    {#each options as option}
+      <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;" />
+          {/if}
+          <span class="ml-2">{option.label}</span>
+        </div>
+      </ListBoxItem>
+    {/each}
+  </ListBox>
+</div>

src/lib/components/form/Dropdown.ts

@@ -0,0 +1,10 @@
+export interface DropdownOption {
+  /** The label displayed in the list of options. */
+  label: string;
+
+  /** The value assigned to the dropdown value variable */
+  value: string;
+
+  /** An optional icon displayed left to the label */
+  icon_url?: string;
+}

src/lib/components/form/Input.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  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"
+    style="width: {labelwidth};"
+  >
+    {@render children()}
+  </div>
+  <input {type} {...restProps} />
+</div>

src/lib/components/form/LazyDropdown.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import { ListBox, ListBoxItem, popup, type PopupSettings } from "@skeletonlabs/skeleton";
+  import type { Snippet } from "svelte";
+  import type { Action } from "svelte/action";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { v4 as uuid } from "uuid";
+  import { type LazyDropdownOption, LazyImage } from "$lib/components";
+
+  interface LazyDropdownProps extends HTMLInputAttributes {
+    children: Snippet;
+
+    /** Placeholder for the empty input element */
+    placeholder?: string;
+
+    /** Form name of the input element, to reference input data after form submission */
+    name?: string;
+
+    /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
+    labelwidth?: string;
+
+    /** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
+    input_variable: string;
+
+    /** Any action to bind to the input element */
+    action?: Action;
+
+    /** The ID of the popup to trigger. UUID by default. */
+    popup_id?: string;
+
+    /** The [PopupSettings] object for the popup to trigger. */
+    popup_settings?: PopupSettings;
+
+    /** The options this autocomplete component allows to choose from.
+     * Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
+     */
+    options: LazyDropdownOption[];
+  }
+
+  let {
+    children,
+    placeholder = "",
+    name = "",
+    labelwidth = "auto",
+    input_variable,
+    action = undefined,
+    popup_id = uuid(),
+    popup_settings = {
+      event: "click",
+      target: popup_id,
+      placement: "bottom",
+      closeQuery: ".listbox-item",
+    },
+    options,
+    ...restProps
+  }: LazyDropdownProps = $props();
+
+  /** Find the "label" of an option by its "value" */
+  const get_label = (value: string): string | undefined => {
+    return options.find((o) => o.value === value)?.label;
+  };
+
+  // Use an action to fill the "input" variable
+  // required to dispatch the custom event using $effect
+  let input: HTMLInputElement | undefined = undefined;
+  const obtain_input: Action = (node: HTMLElement) => {
+    input = node as HTMLInputElement;
+  };
+
+  // This will run everyting "input_variable" changes.
+  // The event is fired when the input's value is updated via JavaScript.
+  $effect(() => {
+    // Just list this so SvelteKit picks it up as dependency
+    input_variable;
+
+    if (input) input.dispatchEvent(new CustomEvent("DropdownChange"));
+  });
+
+  let load: boolean = $state(false);
+
+  const lazy_click_handler = () => {
+    load = true;
+  };
+</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"
+    style="width: {labelwidth};"
+  >
+    {@render children()}
+  </div>
+  <!-- TODO: How to assign use: conditionally? I don't wan't to repeat the entire input... -->
+  {#if action}
+    <input
+      use:popup={popup_settings}
+      type="button"
+      autocomplete="off"
+      style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
+      use:obtain_input
+      use:action
+      onmousedown={lazy_click_handler}
+      onkeypress={(event: Event) => event.preventDefault()}
+      value={get_label(input_variable) ?? placeholder}
+      {...restProps}
+    />
+  {:else}
+    <input
+      use:popup={popup_settings}
+      type="button"
+      autocomplete="off"
+      style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
+      use:obtain_input
+      onmousedown={lazy_click_handler}
+      onkeypress={(event: Event) => event.preventDefault()}
+      value={get_label(input_variable) ?? placeholder}
+      {...restProps}
+    />
+  {/if}
+</div>
+
+<div
+  data-popup={popup_id}
+  class="card z-10 w-auto overflow-y-scroll p-2 shadow"
+  style="max-height: 350px;"
+>
+  {#if load}
+    <ListBox>
+      {#each options as option}
+        <ListBoxItem bind:group={input_variable} {name} value={option.value}>
+          <div class="flex flex-nowrap">
+            {#if option.icon_url}
+              <LazyImage
+                src={option.icon_url}
+                alt=""
+                imgwidth={option.icon_width ?? 1}
+                imgheight={option.icon_height ?? 1}
+                class="rounded"
+                imgstyle="height: 24px;"
+                containerstyle="height: 24px;"
+              />
+            {/if}
+            <span class="ml-2">{option.label}</span>
+          </div>
+        </ListBoxItem>
+      {/each}
+    </ListBox>
+  {/if}
+</div>

src/lib/components/form/LazyDropdown.ts

@@ -0,0 +1,18 @@
+import { type DropdownOption } from "$lib/components";
+
+export interface LazyDropdownOption extends DropdownOption {
+  /** The label displayed in the list of options. */
+  label: string;
+
+  /** The value assigned to the dropdown value variable */
+  value: string;
+
+  /** An optional icon displayed left to the label */
+  icon_url?: string;
+
+  /** The aspect ratio width of the optional icon */
+  icon_width?: number;
+
+  /** The aspect ratio height of the optional icon */
+  icon_height?: number;
+}

src/lib/components/form/Search.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import {
+    Autocomplete,
+    popup,
+    type AutocompleteOption,
+    type PopupSettings,
+  } from "@skeletonlabs/skeleton";
+  import type { Snippet } from "svelte";
+  import { v4 as uuid } from "uuid";
+
+  interface SearchProps {
+    children: Snippet;
+
+    /** Placeholder for the empty input element */
+    placeholder?: string;
+
+    /** Form name of the input element, to reference input data after form submission */
+    name?: string;
+
+    /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
+    labelwidth?: string;
+
+    /** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
+    input_variable: string;
+
+    /** The ID of the input element. UUID by default. */
+    input_id?: string;
+
+    /** The ID of the popup to trigger. UUID by default. */
+    popup_id?: string;
+
+    /** The [PopupSettings] object for the popup to trigger. */
+    popup_settings?: PopupSettings;
+
+    /** The event handler updating the [input_variable] after selection. */
+    selection_handler?: (event: CustomEvent<AutocompleteOption<string>>) => void;
+
+    /** The options this autocomplete component allows to choose from.
+     * Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
+     */
+    options: AutocompleteOption<string, unknown>[];
+  }
+
+  let {
+    children,
+    placeholder = "",
+    name = "",
+    labelwidth = "auto",
+    input_variable,
+    input_id = uuid(),
+    popup_id = uuid(),
+    popup_settings = {
+      event: "focus-click",
+      target: popup_id,
+      placement: "bottom",
+    },
+    selection_handler = (event: CustomEvent<AutocompleteOption<string>>): void => {
+      input_variable = event.detail.label;
+    },
+    options,
+  }: SearchProps = $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"
+    style="width: {labelwidth};"
+  >
+    {@render children()}
+  </div>
+  <input
+    id={input_id}
+    type="search"
+    {placeholder}
+    {name}
+    bind:value={input_variable}
+    use:popup={popup_settings}
+  />
+</div>
+
+<div data-popup={popup_id} class="card z-10 w-auto p-2 shadow" tabindex="-1">
+  <Autocomplete bind:input={input_variable} {options} on:selection={selection_handler} />
+</div>

src/lib/components/index.ts

@@ -0,0 +1,58 @@
+import Image from "./Image.svelte";
+import LazyImage from "./LazyImage.svelte";
+import LoadingIndicator from "./LoadingIndicator.svelte";
+import Table from "./Table.svelte";
+
+import Button from "./form/Button.svelte";
+import Dropdown from "./form/Dropdown.svelte";
+import Input from "./form/Input.svelte";
+import LazyDropdown from "./form/LazyDropdown.svelte";
+import Search from "./form/Search.svelte";
+
+import Card from "./cards/Card.svelte";
+import DriverCard from "./cards/DriverCard.svelte";
+import LazyCard from "./cards/LazyCard.svelte";
+import RaceCard from "./cards/RaceCard.svelte";
+import SubstitutionCard from "./cards/SubstitutionCard.svelte";
+import TeamCard from "./cards/TeamCard.svelte";
+
+import type { DropdownOption } from "./form/Dropdown";
+import type { LazyDropdownOption } from "./form/LazyDropdown";
+import type { TableColumn } from "./Table";
+
+import MenuDrawerIcon from "./svg/MenuDrawerIcon.svelte";
+import PasswordIcon from "./svg/PasswordIcon.svelte";
+import UserIcon from "./svg/UserIcon.svelte";
+
+export {
+  // Components
+  Image,
+  LazyImage,
+  LoadingIndicator,
+  Table,
+
+  // Form
+  Button,
+  Dropdown,
+  Input,
+  LazyDropdown,
+  Search,
+
+  // Cards
+  Card,
+  DriverCard,
+  LazyCard,
+  RaceCard,
+  SubstitutionCard,
+  TeamCard,
+
+  // Types
+  type DropdownOption,
+  type LazyDropdownOption,
+  type TableColumn,
+
+  // SVG
+  MenuDrawerIcon,
+  PasswordIcon,
+  UserIcon,
+};

src/lib/components/svg/MenuDrawerIcon.svelte

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="mt-1 h-6 w-6"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="currentColor"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M4 6h16M4 12h8m-8 6h16"
+  />
+</svg>

src/lib/components/svg/PasswordIcon.svelte

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  fill="currentColor"
+  class="h-4 w-4 opacity-70"
+>
+  <path
+    fill-rule="evenodd"
+    d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+    clip-rule="evenodd"
+  />
+</svg>

src/lib/components/svg/UserIcon.svelte

@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  fill="currentColor"
+  class="h-4 w-4 opacity-70"
+>
+  <path
+    d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
+  />
+</svg>

src/lib/config.ts

@@ -0,0 +1,34 @@
+// Many aspect ratios are predefined here.
+// This is terrible, since they need to be updated if the HTML changes.
+// I tried to determine these dynamically by loading a "sample" element
+// and measuring its width/height, but this was not reliable:
+// When changing the viewport size, measured heights were no longer accurate.
+
+// Image aspect ratios
+export const AVATAR_WIDTH: number = 256;
+export const AVATAR_HEIGHT: number = 256;
+
+export const TEAM_BANNER_WIDTH: number = 512;
+export const TEAM_BANNER_HEIGHT: number = 288;
+
+export const TEAM_LOGO_WIDTH: number = 96;
+export const TEAM_LOGO_HEIGHT: number = 96;
+
+export const DRIVER_HEADSHOT_WIDTH: number = 512;
+export const DRIVER_HEADSHOT_HEIGHT: number = 512;
+
+export const RACE_PICTOGRAM_WIDTH: number = 512;
+export const RACE_PICTOGRAM_HEIGHT: number = 384;
+
+// Card aspect ratios
+// export const TEAM_CARD_ASPECT_WIDTH: number = 413;
+// export const TEAM_CARD_ASPECT_HEIGHT: number = 438;
+
+// export const DRIVER_CARD_ASPECT_WIDTH: number = 411;
+// export const DRIVER_CARD_ASPECT_HEIGHT: number = 769;
+
+// export const RACE_CARD_ASPECT_WIDTH: number = 497;
+// export const RACE_CARD_ASPECT_HEIGHT: number = 879;
+
+// export const SUBSTITUTION_CARD_ASPECT_WIDTH: number = 413;
+// export const SUBSTITUTION_CARD_ASPECT_HEIGHT: number = 625;

src/lib/database.ts

@@ -0,0 +1,11 @@
+/**
+ * Select an element from an [objects] array where [key] matches [value].
+ * Supposed to be used on collections returned by the [PocketBase] client.
+ */
+export const get_by_value = <T extends object>(
+  objects: T[],
+  key: keyof T,
+  value: string,
+): T | undefined => {
+  return objects.find((o: T) => (key in o ? o[key] === value : false));
+};

src/lib/form.ts

@@ -0,0 +1,70 @@
+import { error } from "@sveltejs/kit";
+
+/**
+ * Obtain the value of the key "id" and remove it from the FormData.
+ * Throws SvelteKit error(400) if "id" is not found.
+ */
+export const form_data_get_and_remove_id = (data: FormData): string => {
+  const id: string | undefined = data.get("id")?.toString();
+  if (!id) error(400, "Missing ID");
+  data.delete("id");
+  return id;
+};
+
+/**
+ * Remove empty fields (even whitespace) and empty files from FormData objects.
+ * Keys listed in [except] won't be removed although they are empty.
+ */
+export const form_data_clean = (data: FormData, except: string[] = []): FormData => {
+  let delete_keys: string[] = [];
+
+  for (const [key, value] of data.entries()) {
+    if (
+      !except.includes(key) &&
+      (value === null ||
+        value === undefined ||
+        (typeof value === "string" && value.trim() === "") ||
+        (typeof value === "object" && "size" in value && value.size === 0))
+    ) {
+      delete_keys.push(key);
+    }
+  }
+
+  delete_keys.forEach((key) => {
+    data.delete(key);
+  });
+
+  return data;
+};
+
+/**
+ * Throws SvelteKit error(400) if form_data does not contain key.
+ */
+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[]): void => {
+  keys.map((key) => form_data_ensure_key(data, key));
+};
+
+/**
+ * Modify a single [FormData] element to satisfy PocketBase's date format.
+ * Date format: 2024-12-31 12:00:00.000Z
+ */
+export const form_data_fix_date = (data: FormData, key: string): boolean => {
+  const value: string | undefined = data.get(key)?.toString();
+  if (!value) return false;
+
+  const date: string = new Date(value).toISOString();
+  data.set(key, date);
+
+  return true;
+};
+
+export const form_data_fix_dates = (data: FormData, keys: string[]): boolean[] => {
+  return keys.map((key) => form_data_fix_date(data, key));
+};

src/lib/image.ts

@@ -0,0 +1,85 @@
+import { browser } from "$app/environment";
+
+/**
+ * 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): ((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.querySelector(
+        `#${id} > img:first-of-type`,
+      ) as HTMLImageElement;
+
+      if (preview) {
+        preview.src = src;
+        preview.hidden = false;
+      }
+    }
+  };
+
+  return handler;
+};
+
+/**
+ * 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): ((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;
+      }
+    }
+  };
+
+  return handler;
+};
+
+/**
+ * Convert a binary [Blob] to base64 string.
+ * Can only be called clientside from a browser as it depends on FileReader!
+ */
+export const blob_to_base64 = (blob: Blob): Promise<string> => {
+  if (!browser) {
+    console.error("Can't call blob_to_base64 on server (FileReader is not available)!");
+  }
+
+  return new Promise((resolve, _) => {
+    const reader = new FileReader();
+
+    // This is fired once the file read has ended
+    reader.onloadend = () => resolve(reader.result?.toString() ?? "");
+
+    reader.readAsDataURL(blob);
+  });
+};
+
+/**
+ * Fetch an image from an URL using a fetch function [f] and return as base64 string .
+ * Can be called client- and server-side.
+ */
+export const fetch_image_base64 = async (url: string, f: Function = fetch): Promise<string> => {
+  if (browser) {
+    return await f(url)
+      .then((response: Response) => response.blob())
+      .then((blob: Blob) => blob_to_base64(blob));
+  }
+
+  // On the server
+  const response: Response = await f(url);
+  const buffer: Buffer = Buffer.from(await response.arrayBuffer());
+  return buffer.toString("base64");
+};

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/lib/lazyload.ts

@@ -0,0 +1,35 @@
+// https://www.alexschnabl.com/blog/articles/lazy-loading-images-and-components-in-svelte-and-sveltekit-using-typescript
+
+let observer: IntersectionObserver;
+
+const getObserver = () => {
+  if (observer) return;
+
+  observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.dispatchEvent(new CustomEvent("LazyVisible"));
+      }
+    });
+  });
+};
+
+/**
+ * Use this as an action on elements that should be only loaded when moved into view.
+ * Note that if the element's size is 0 on mount, multiple elements could be in-view that
+ * would be out-of-view with their correct size.
+ * This happens for <div> elements without content for example.
+ */
+export const lazyload = (node: HTMLElement) => {
+  // The observer determines if the element is visible on screen
+  getObserver();
+
+  // If the element is visible, the "LazyVisible" event will be dispatched
+  observer.observe(node);
+
+  return {
+    destroy() {
+      observer.unobserve(node);
+    },
+  };
+};

src/lib/schema.ts

@@ -0,0 +1,54 @@
+export interface Graphic {
+  name: string;
+  file: string;
+  file_url?: string;
+}
+
+export interface User {
+  id: string;
+  username: string;
+  avatar: string;
+  avatar_url?: string;
+  admin: boolean;
+}
+
+export interface Team {
+  id: string;
+  name: string;
+  banner: string;
+  banner_url?: string;
+  logo: string;
+  logo_url?: string;
+  color: string;
+}
+
+export interface Driver {
+  id: string;
+  code: string;
+  firstname: string;
+  lastname: string;
+  headshot: string;
+  headshot_url?: string;
+  team: string;
+  active: boolean;
+}
+
+export interface Race {
+  id: string;
+  name: string;
+  step: number;
+  pictogram: string;
+  pictogram_url?: string;
+  pxx: number;
+  sprintqualidate: string;
+  sprintdate: string;
+  qualidate: string;
+  racedate: string;
+}
+
+export interface Substitution {
+  id: string;
+  substitute: string;
+  for: string;
+  race: string;
+}

src/lib/server/image.ts

@@ -0,0 +1,23 @@
+import sharp from "sharp";
+
+/**
+ * Convert any [ArrayBuffer] containing image data to an [avif] [Blob].
+ * Also allows downscaling and lossy compression.
+ * Set either [width] or [height] to downscale while keeping the aspect ratio.
+ */
+export const image_to_avif = async (
+  data: ArrayBuffer,
+  width: number | undefined = undefined,
+  height: number | undefined = undefined,
+  quality: number = 50,
+  effort: number = 4,
+): Promise<Blob> => {
+  const compressed: Buffer = await sharp(data)
+    .resize(width, height)
+    .avif({ quality: quality, effort: effort })
+    .toBuffer();
+
+  console.log(`image_to_avif: ${data.byteLength} Bytes -> ${compressed.length} Bytes`);
+
+  return new Blob([compressed]);
+};

src/routes/+layout.server.ts

@@ -0,0 +1,19 @@
+import type { LayoutServerLoad } from "./$types";
+
+// On each page load (every route), this function runs serverside.
+// The "locals.user" object is only available on the server,
+// since it's populated inside hooks.server.ts per request.
+// It will populate the "user" attribute of each page's "data" object,
+// so each page has access to the current user (or knows if no one is signed in).
+export const load: LayoutServerLoad = ({ locals }) => {
+  if (locals.user) {
+    return {
+      user: locals.user,
+      admin: locals.user.admin,
+    };
+  }
+
+  return {
+    user: undefined,
+  };
+};

src/routes/+layout.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+  import "../app.css";
+
+  import type { Snippet } from "svelte";
+  import type { LayoutData } from "./$types";
+  import { page } from "$app/stores";
+
+  import {
+    Button,
+    MenuDrawerIcon,
+    UserIcon,
+    Input,
+    PasswordIcon,
+    LoadingIndicator,
+    DriverCard,
+    TeamCard,
+    RaceCard,
+    SubstitutionCard,
+  } from "$lib/components";
+  import { get_avatar_preview_event_handler } from "$lib/image";
+
+  import {
+    AppBar,
+    storePopup,
+    initializeStores,
+    Drawer,
+    getDrawerStore,
+    Modal,
+    getModalStore,
+    type DrawerSettings,
+    Avatar,
+    FileDropzone,
+    type DrawerStore,
+    type ModalStore,
+    type ModalComponent,
+  } from "@skeletonlabs/skeleton";
+  import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
+
+  let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+  // Init skeleton stores for drawer + modal
+  initializeStores();
+
+  // Modal config
+  const modalStore: ModalStore = getModalStore();
+  const modalRegistry: Record<string, ModalComponent> = {
+    // Card data (e.g. team, driver etc.) is passed using $modalStore[0].meta
+    teamCard: { ref: TeamCard },
+    driverCard: { ref: DriverCard },
+    raceCard: { ref: RaceCard },
+    substitutionCard: { ref: SubstitutionCard },
+  };
+
+  // Drawer config
+  const drawerStore: DrawerStore = getDrawerStore();
+  let drawerOpen: boolean = false;
+  let drawerId: string = "";
+  drawerStore.subscribe((settings: DrawerSettings) => {
+    drawerOpen = settings.open ?? false;
+    drawerId = settings.id ?? "";
+  });
+
+  const toggle_drawer = (settings: DrawerSettings) => {
+    if (drawerOpen) {
+      if (drawerId === settings.id) {
+        // We clicked the same button to close the drawer
+        drawerStore.close();
+      } else {
+        // We clicked another button to open another drawer
+        drawerStore.close();
+        setTimeout(() => drawerStore.open(settings), 175);
+      }
+    } else {
+      drawerStore.open(settings);
+    }
+  };
+
+  const close_drawer = () => drawerStore.close();
+
+  const drawer_settings_base: DrawerSettings = {
+    position: "top",
+    height: "auto",
+    padding: "lg:px-96 pt-14", // pt-14 is 56px, so its missing 4px for the 60px navbar...
+    bgDrawer: "bg-surface-100",
+    duration: 150,
+  };
+
+  const menu_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "menu_drawer",
+      ...drawer_settings_base,
+    };
+    toggle_drawer(drawerSettings);
+  };
+
+  const data_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "data_drawer",
+      ...drawer_settings_base,
+    };
+    toggle_drawer(drawerSettings);
+  };
+
+  const login_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "login_drawer",
+      ...drawer_settings_base,
+    };
+    toggle_drawer(drawerSettings);
+  };
+
+  const profile_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "profile_drawer",
+      ...drawer_settings_base,
+    };
+    toggle_drawer(drawerSettings);
+  };
+
+  // Popups config
+  storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+</script>
+
+<LoadingIndicator />
+
+<Modal components={modalRegistry} regionBackdrop="!overflow-y-scroll" />
+
+<Drawer zIndex="z-30">
+  <!-- Use p-3 because the drawer has a 5px overlap with the navbar -->
+  {#if $drawerStore.id === "menu_drawer"}
+    <!-- Menu Drawer -->
+    <!-- Menu Drawer -->
+    <!-- Menu Drawer -->
+    <div class="flex flex-col gap-2 p-2 pt-3">
+      <Button href="/racepicks" onclick={close_drawer} color="surface" width="w-full">
+        Race Picks
+      </Button>
+      <Button href="/seasonpicks" onclick={close_drawer} color="surface" width="w-full">
+        Season Picks
+      </Button>
+      <Button href="/leaderboard" onclick={close_drawer} color="surface" width="w-full">
+        Leaderboard
+      </Button>
+      <Button href="/statistics" onclick={close_drawer} color="surface" width="w-full">
+        Statistics
+      </Button>
+      <Button href="/rules" onclick={close_drawer} color="surface" width="w-full">Rules</Button>
+    </div>
+  {:else if $drawerStore.id === "data_drawer"}
+    <!-- Data Drawer -->
+    <!-- Data Drawer -->
+    <!-- Data Drawer -->
+    <div class="flex flex-col gap-2 p-2 pt-3">
+      <Button href="/data/raceresult" onclick={close_drawer} color="surface" width="w-full"
+        >Race Results
+      </Button>
+      <Button href="/data/season" onclick={close_drawer} color="surface" width="w-full"
+        >Season</Button
+      >
+      <Button href="/data/user" onclick={close_drawer} color="surface" width="w-full">Users</Button>
+    </div>
+  {:else if $drawerStore.id === "login_drawer"}
+    <!-- Login Drawer -->
+    <!-- Login Drawer -->
+    <!-- Login Drawer -->
+    <div class="flex flex-col gap-2 p-2 pt-3">
+      <h4 class="h4 select-none">Enter Username and Password</h4>
+      <form method="POST" class="contents">
+        <!-- Supply the pathname so the form can redirect to the current page. -->
+        <input type="hidden" name="redirect_url" value={$page.url.pathname} />
+        <Input name="username" placeholder="Username" autocomplete="username" required
+          ><UserIcon />
+        </Input>
+        <Input name="password" type="password" placeholder="Password" autocomplete="off" required
+          ><PasswordIcon />
+        </Input>
+        <div class="flex justify-end gap-2">
+          <Button formaction="/profile?/login" onclick={close_drawer} color="tertiary" submit
+            >Login
+          </Button>
+          <Button
+            formaction="/profile?/create_profile"
+            onclick={close_drawer}
+            color="tertiary"
+            submit
+            >Register
+          </Button>
+        </div>
+      </form>
+    </div>
+  {:else if $drawerStore.id === "profile_drawer" && data.user}
+    <!-- Profile Drawer -->
+    <!-- Profile Drawer -->
+    <!-- Profile Drawer -->
+    <div class="flex flex-col gap-2 p-2 pt-3">
+      <h4 class="h4 select-none">Edit Profile</h4>
+      <form method="POST" enctype="multipart/form-data" class="contents">
+        <!-- Supply the pathname so the form can redirect to the current page. -->
+        <input type="hidden" name="redirect_url" value={$page.url.pathname} />
+        <input type="hidden" name="id" value={data.user.id} />
+        <Input
+          name="username"
+          value={data.user.username}
+          placeholder="Username"
+          autocomplete="username"
+        >
+          <UserIcon />
+        </Input>
+        <FileDropzone
+          name="avatar"
+          onchange={get_avatar_preview_event_handler("user_avatar_preview")}
+        >
+          <svelte:fragment slot="message"><b>Upload Avatar</b></svelte:fragment>
+        </FileDropzone>
+        <div class="flex justify-end gap-2">
+          <Button
+            formaction="/profile?/update_profile"
+            onclick={close_drawer}
+            color="secondary"
+            submit
+          >
+            Save Changes
+          </Button>
+          <Button formaction="/profile?/logout" onclick={close_drawer} color="primary" submit>
+            Logout
+          </Button>
+        </div>
+      </form>
+    </div>
+  {/if}
+</Drawer>
+
+<nav>
+  <div class="fixed left-0 right-0 top-0 z-40">
+    <AppBar
+      slotDefault="place-self-center"
+      slotTrail="place-content-end"
+      background="bg-primary-500"
+      shadow="shadow"
+      padding="p-2"
+    >
+      <svelte:fragment slot="lead">
+        <div class="flex gap-2">
+          <!-- Navigation drawer -->
+          <div class="lg:hidden">
+            <Button color="primary" onclick={menu_drawer}>
+              <MenuDrawerIcon />
+            </Button>
+          </div>
+
+          <!-- Site logo -->
+          <Button href="/" color="primary"><span class="text-xl font-bold">Formula 11</span></Button
+          >
+        </div>
+      </svelte:fragment>
+
+      <!-- Large navigation -->
+      <div class="hidden gap-2 lg:flex">
+        <Button href="/racepicks" color="primary" activate_href>Race Picks</Button>
+        <Button href="/seasonpicks" color="primary" activate_href>Season Picks</Button>
+        <Button href="/leaderboard" color="primary" activate_href>Leaderboard</Button>
+        <Button href="/statistics" color="primary" activate_href>Statistics</Button>
+        <Button href="/rules" color="primary" activate_href>Rules</Button>
+      </div>
+
+      <svelte:fragment slot="trail">
+        <div class="flex gap-2">
+          <!-- Data drawer -->
+          <Button
+            color="primary"
+            onclick={data_drawer}
+            activate={$page.url.pathname.startsWith("/data")}>Data</Button
+          >
+
+          {#if !data.user}
+            <!-- Login drawer -->
+            <Button color="primary" onclick={login_drawer}>Login</Button>
+          {:else}
+            <!-- Profile drawer -->
+            <Avatar
+              id="user_avatar_preview"
+              src={data.user.avatar_url}
+              rounded="rounded-full"
+              width="w-10"
+              background="bg-primary-50"
+              onclick={profile_drawer}
+              cursor="cursor-pointer"
+            />
+          {/if}
+        </div>
+      </svelte:fragment>
+    </AppBar>
+  </div>
+</nav>
+
+<!-- Each child's contents will be inserted here -->
+<div class="p-2" style="margin-top: 60px;">
+  {@render children()}
+</div>

src/routes/+page.svelte

@@ -1,2 +1,5 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<svelte:head>
+  <title>F11 - Formula 11</title>
+</svelte:head>
+
+<h1>Formula 11</h1>

src/routes/data/season/+page.server.ts

@@ -0,0 +1,317 @@
+import type { ActionData, Actions, PageServerLoad } from "./$types";
+import {
+  form_data_clean,
+  form_data_ensure_keys,
+  form_data_fix_dates,
+  form_data_get_and_remove_id,
+} from "$lib/form";
+import type { Team, Driver, Race, Substitution, Graphic } from "$lib/schema";
+import { image_to_avif } from "$lib/server/image";
+import {
+  DRIVER_HEADSHOT_HEIGHT,
+  DRIVER_HEADSHOT_WIDTH,
+  RACE_PICTOGRAM_HEIGHT,
+  RACE_PICTOGRAM_WIDTH,
+  TEAM_BANNER_HEIGHT,
+  TEAM_BANNER_WIDTH,
+  TEAM_LOGO_HEIGHT,
+  TEAM_LOGO_WIDTH,
+} from "$lib/config";
+
+// These "actions" run serverside only, as they're located inside +page.server.ts
+export const actions = {
+  create_team: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["name", "banner", "logo", "color"]);
+
+    // Compress banner
+    const banner_avif: Blob = await image_to_avif(
+      await (data.get("banner") as File).arrayBuffer(),
+      TEAM_BANNER_WIDTH,
+      TEAM_BANNER_HEIGHT,
+    );
+    data.set("banner", banner_avif);
+
+    // Compress logo
+    const logo_avif: Blob = await image_to_avif(
+      await (data.get("logo") as File).arrayBuffer(),
+      TEAM_LOGO_WIDTH,
+      TEAM_LOGO_HEIGHT,
+    );
+    data.set("logo", logo_avif);
+
+    await locals.pb.collection("teams").create(data);
+
+    return { tab: 0 };
+  },
+
+  update_team: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    if (data.has("banner")) {
+      // Compress banner
+      const banner_avif: Blob = await image_to_avif(
+        await (data.get("banner") as File).arrayBuffer(),
+        TEAM_BANNER_WIDTH,
+        TEAM_BANNER_HEIGHT,
+      );
+      data.set("banner", banner_avif);
+    }
+
+    if (data.has("logo")) {
+      // Compress logo
+      const logo_avif: Blob = await image_to_avif(
+        await (data.get("logo") as File).arrayBuffer(),
+        TEAM_LOGO_WIDTH,
+        TEAM_LOGO_HEIGHT,
+      );
+      data.set("logo", logo_avif);
+    }
+
+    await locals.pb.collection("teams").update(id, data);
+
+    return { tab: 0 };
+  },
+
+  delete_team: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("teams").delete(id);
+
+    return { tab: 0 };
+  },
+
+  create_driver: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["firstname", "lastname", "code", "team", "headshot"]);
+
+    // The toggle switch will report "on" or nothing
+    data.set("active", data.has("active") ? "true" : "false");
+
+    // Compress headshot
+    const headshot_avif: Blob = await image_to_avif(
+      await (data.get("headshot") as File).arrayBuffer(),
+      DRIVER_HEADSHOT_WIDTH,
+      DRIVER_HEADSHOT_HEIGHT,
+    );
+
+    data.set("headshot", headshot_avif);
+
+    await locals.pb.collection("drivers").create(data);
+
+    return { tab: 1 };
+  },
+
+  update_driver: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    // The toggle switch will report "on" or nothing
+    data.set("active", data.has("active") ? "true" : "false");
+
+    if (data.has("headshot")) {
+      // Compress headshot
+      const headshot_avif: Blob = await image_to_avif(
+        await (data.get("headshot") as File).arrayBuffer(),
+        DRIVER_HEADSHOT_WIDTH,
+        DRIVER_HEADSHOT_HEIGHT,
+      );
+
+      data.set("headshot", headshot_avif);
+    }
+
+    await locals.pb.collection("drivers").update(id, data);
+
+    return { tab: 1 };
+  },
+
+  delete_driver: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("drivers").delete(id);
+
+    return { tab: 1 };
+  },
+
+  create_race: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["name", "step", "pictogram", "pxx", "qualidate", "racedate"]);
+    form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
+
+    // Compress pictogram
+    const pictogram_avif: Blob = await image_to_avif(
+      await (data.get("pictogram") as File).arrayBuffer(),
+      RACE_PICTOGRAM_WIDTH,
+      RACE_PICTOGRAM_HEIGHT,
+    );
+
+    data.set("pictogram", pictogram_avif);
+
+    await locals.pb.collection("races").create(data);
+
+    return { tab: 2 };
+  },
+
+  update_race: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    // Do not remove empty sprint dates so they can be cleared by updating the record
+    const data: FormData = form_data_clean(await request.formData(), [
+      "sprintqualidate",
+      "sprintdate",
+    ]);
+    form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
+    const id: string = form_data_get_and_remove_id(data);
+
+    if (data.has("pictogram")) {
+      // Compress pictogram
+      const pictogram_avif: Blob = await image_to_avif(
+        await (data.get("pictogram") as File).arrayBuffer(),
+        RACE_PICTOGRAM_WIDTH,
+        RACE_PICTOGRAM_HEIGHT,
+      );
+
+      data.set("pictogram", pictogram_avif);
+    }
+
+    await locals.pb.collection("races").update(id, data);
+
+    return { tab: 2 };
+  },
+
+  delete_race: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("races").delete(id);
+
+    return { tab: 2 };
+  },
+
+  create_substitution: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["substitute", "for", "race"]);
+
+    await locals.pb.collection("substitutions").create(data);
+
+    return { tab: 3 };
+  },
+
+  update_substitution: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("substitutions").update(id, data);
+
+    return { tab: 3 };
+  },
+
+  delete_substitution: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("substitutions").delete(id);
+
+    return { tab: 3 };
+  },
+} satisfies Actions;
+
+// This "load" function runs serverside only, as it's located inside +page.server.ts
+export const load: PageServerLoad = async ({ fetch, locals }) => {
+  const fetch_graphics = async (): Promise<Graphic[]> => {
+    const graphics: Graphic[] = await locals.pb
+      .collection("graphics")
+      .getFullList({ fetch: fetch });
+
+    graphics.map((graphic: Graphic) => {
+      graphic.file_url = locals.pb.files.getURL(graphic, graphic.file);
+    });
+
+    return graphics;
+  };
+
+  const fetch_teams = async (): Promise<Team[]> => {
+    const teams: Team[] = await locals.pb.collection("teams").getFullList({
+      sort: "+name",
+      fetch: fetch,
+    });
+
+    teams.map((team: Team) => {
+      team.banner_url = locals.pb.files.getURL(team, team.banner);
+      team.logo_url = locals.pb.files.getURL(team, team.logo);
+    });
+
+    return teams;
+  };
+
+  const fetch_drivers = async (): Promise<Driver[]> => {
+    const drivers: Driver[] = await locals.pb.collection("drivers").getFullList({
+      sort: "+code",
+      fetch: fetch,
+    });
+
+    drivers.map((driver: Driver) => {
+      driver.headshot_url = locals.pb.files.getURL(driver, driver.headshot);
+    });
+
+    return drivers;
+  };
+
+  const fetch_races = async (): Promise<Race[]> => {
+    const races: Race[] = await locals.pb.collection("races").getFullList({
+      sort: "+step",
+      fetch: fetch,
+    });
+
+    races.map((race: Race) => {
+      race.pictogram_url = locals.pb.files.getURL(race, race.pictogram);
+    });
+
+    return races;
+  };
+
+  const fetch_substitutions = async (): Promise<Substitution[]> => {
+    // TODO: Sort by race step (does the race need to be expanded for this?)
+    const substitutions: Substitution[] = await locals.pb.collection("substitutions").getFullList({
+      fetch: fetch,
+    });
+
+    return substitutions;
+  };
+
+  return {
+    // Graphics and teams are awaited, since those are visible on page load.
+    graphics: await fetch_graphics(),
+    teams: await fetch_teams(),
+
+    // The rest is streamed gradually, since the user has to switch tabs to need them.
+    drivers: fetch_drivers(),
+    races: fetch_races(),
+    substitutions: fetch_substitutions(),
+  };
+};

src/routes/data/season/+page.svelte

@@ -0,0 +1,320 @@
+<script lang="ts">
+  import type { Driver, Race, Substitution, Team } from "$lib/schema";
+  import { type PageData, type ActionData } from "./$types";
+  import {
+    getModalStore,
+    Tab,
+    TabGroup,
+    type ModalSettings,
+    type ModalStore,
+  } from "@skeletonlabs/skeleton";
+
+  import { Table, type LazyDropdownOption, type TableColumn } from "$lib/components";
+  import { get_by_value } from "$lib/database";
+  import {
+    DRIVER_HEADSHOT_HEIGHT,
+    DRIVER_HEADSHOT_WIDTH,
+    RACE_PICTOGRAM_HEIGHT,
+    RACE_PICTOGRAM_WIDTH,
+    TEAM_BANNER_HEIGHT,
+    TEAM_BANNER_WIDTH,
+  } from "$lib/config";
+
+  let { data, form }: { data: PageData; form: ActionData } = $props();
+
+  let current_tab: number = $state(0);
+  if (form?.tab) {
+    // console.log(`Form returned current_tab=${form.current_tab}`);
+    current_tab = form.tab;
+  }
+
+  // Values for driver cards
+  let update_driver_team_select_values: { [key: string]: string } = $state({}); // <driver.id, team.id>
+  let update_driver_active_values: { [key: string]: boolean } = $state({});
+  data.drivers.then((drivers: Driver[]) =>
+    drivers.forEach((driver: Driver) => {
+      update_driver_team_select_values[driver.id] = driver.team;
+      update_driver_active_values[driver.id] = driver.active;
+    }),
+  );
+  update_driver_team_select_values["create"] = "";
+  update_driver_active_values["create"] = true;
+
+  // Values for substitution cards
+  const update_substitution_substitute_select_values: { [key: string]: string } = $state({});
+  const update_substitution_for_select_values: { [key: string]: string } = $state({});
+  const update_substitution_race_select_values: { [key: string]: string } = $state({});
+  data.substitutions.then((substitutions: Substitution[]) =>
+    substitutions.forEach((substitution: Substitution) => {
+      update_substitution_substitute_select_values[substitution.id] = substitution.substitute;
+      update_substitution_for_select_values[substitution.id] = substitution.for;
+      update_substitution_race_select_values[substitution.id] = substitution.race;
+    }),
+  );
+  update_substitution_substitute_select_values["create"] = "";
+  update_substitution_for_select_values["create"] = "";
+  update_substitution_race_select_values["create"] = "";
+
+  // All options to create a <Dropdown> component for the teams
+  const team_dropdown_options: LazyDropdownOption[] = [];
+  data.teams.forEach((team: Team) => {
+    team_dropdown_options.push({
+      label: team.name,
+      value: team.id,
+      icon_url: team.logo_url,
+      icon_width: TEAM_BANNER_WIDTH,
+      icon_height: TEAM_BANNER_HEIGHT,
+    });
+  });
+
+  // All options to create a <Dropdown> component for the drivers
+  const driver_dropdown_options: LazyDropdownOption[] = [];
+  data.drivers.then((drivers: Driver[]) =>
+    drivers.forEach((driver: Driver) => {
+      driver_dropdown_options.push({
+        label: driver.code,
+        value: driver.id,
+        icon_url: driver.headshot_url,
+        icon_width: DRIVER_HEADSHOT_WIDTH,
+        icon_height: DRIVER_HEADSHOT_HEIGHT,
+      });
+    }),
+  );
+
+  // All options to create a <Dropdown> component for the races
+  const race_dropdown_options: LazyDropdownOption[] = [];
+  data.races.then((races: Race[]) =>
+    races.forEach((race: Race) => {
+      race_dropdown_options.push({
+        label: race.name,
+        value: race.id,
+        icon_url: race.pictogram_url,
+        icon_width: RACE_PICTOGRAM_WIDTH,
+        icon_height: RACE_PICTOGRAM_HEIGHT,
+      });
+    }),
+  );
+
+  const modalStore: ModalStore = getModalStore();
+
+  const teams_columns: TableColumn[] = [
+    {
+      data_value_name: "name",
+      label: "Name",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "color",
+      label: "Color",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`,
+    },
+  ];
+
+  const teams_handler = async (event: Event, id: string) => {
+    const team: Team | undefined = get_by_value(data.teams, "id", id);
+    if (!team) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "teamCard",
+      meta: {
+        team: team,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const drivers_columns: TableColumn[] = [
+    {
+      data_value_name: "code",
+      label: "Driver Code",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    { data_value_name: "firstname", label: "First Name" },
+    { data_value_name: "lastname", label: "Last Name" },
+    {
+      data_value_name: "team",
+      label: "Team",
+      valuefun: async (value: string): Promise<string> => {
+        const team: Team | undefined = get_by_value(data.teams, "id", value);
+        return team
+          ? `<span class='badge border mr-2' style='color: ${team.color}; background: ${team.color};'>C</span>${team.name}`
+          : "<span class='badge variant-filled-primary'>Invalid</span>";
+      },
+    },
+    {
+      data_value_name: "active",
+      label: "Active",
+      valuefun: async (value: boolean): Promise<string> =>
+        `<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
+    },
+  ];
+
+  /** Shows the DriverCard modal to edit the clicked driver */
+  const drivers_handler = async (event: Event, id: string) => {
+    const driver: Driver | undefined = get_by_value(await data.drivers, "id", id);
+    if (!driver) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "driverCard",
+      meta: {
+        driver: driver,
+        team_select_value: update_driver_team_select_values[driver.id],
+        team_select_options: team_dropdown_options,
+        active_value: update_driver_active_values[driver.id],
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const races_columns: TableColumn[] = [
+    {
+      data_value_name: "name",
+      label: "Name",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    { data_value_name: "step", label: "Step" },
+    {
+      data_value_name: "sprintqualidate",
+      label: "Sprint Quali",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+    {
+      data_value_name: "sprintdate",
+      label: "Sprint Race",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+    {
+      data_value_name: "qualidate",
+      label: "Quali",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+    {
+      data_value_name: "racedate",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> => value.slice(0, -5),
+    },
+  ];
+
+  const races_handler = async (event: Event, id: string) => {
+    const race: Race | undefined = get_by_value(await data.races, "id", id);
+    if (!race) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "raceCard",
+      meta: {
+        race: race,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const substitutions_columns: TableColumn[] = [
+    {
+      data_value_name: "substitute",
+      label: "Substitute",
+      valuefun: async (value: string): Promise<string> => {
+        const substitute = get_by_value(await data.drivers, "id", value)?.code ?? "Invalid";
+        return `<span class='badge variant-filled-surface'>${substitute}</span>`;
+      },
+    },
+    {
+      data_value_name: "for",
+      label: "For",
+      valuefun: async (value: string): Promise<string> =>
+        get_by_value(await data.drivers, "id", value)?.code ?? "Invalid",
+    },
+    {
+      data_value_name: "race",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> =>
+        get_by_value(await data.races, "id", value)?.name ?? "Invalid",
+    },
+  ];
+
+  const substitutions_handler = async (event: Event, id: string) => {
+    const substitution: Substitution | undefined = get_by_value(await data.substitutions, "id", id);
+    if (!substitution) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "substitutionCard",
+      meta: {
+        substitution: substitution,
+        drivers: await data.drivers,
+        substitute_select_value: update_substitution_substitute_select_values[substitution.id],
+        driver_select_value: update_substitution_for_select_values[substitution.id],
+        race_select_value: update_substitution_race_select_values[substitution.id],
+        driver_select_options: driver_dropdown_options,
+        race_select_options: race_dropdown_options,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+</script>
+
+<svelte:head>
+  <title>F11 - Season Data</title>
+</svelte:head>
+
+<TabGroup
+  justify="justify-center"
+  active="variant-filled-primary"
+  hover="hover:variant-filled-primary"
+  regionList="gap-2 shadow rounded-bl-container-token rounded-br-container-token p-2 pt-3 bg-white fixed left-2 right-2 top-14 z-10"
+  regionPanel="!mt-14"
+  rounded="rounded-container-token"
+  border="border-none"
+  padding="p-2"
+>
+  <Tab bind:group={current_tab} name="teams" value={0}>Teams</Tab>
+  <Tab bind:group={current_tab} name="drivers" value={1}>Drivers</Tab>
+  <Tab bind:group={current_tab} name="races" value={2}>Races</Tab>
+  <Tab bind:group={current_tab} name="substitutions" value={3}>Substitutions</Tab>
+
+  <svelte:fragment slot="panel">
+    {#if current_tab === 0}
+      <!-- Teams Tab -->
+      <!-- Teams Tab -->
+      <!-- Teams Tab -->
+      <!-- TODO: Add team -->
+      <Table data={data.teams} columns={teams_columns} handler={teams_handler} />
+    {:else if current_tab === 1}
+      <!-- Drivers Tab -->
+      <!-- Drivers Tab -->
+      <!-- Drivers Tab -->
+      <!-- TODO: Add driver -->
+      {#await data.drivers then drivers}
+        <Table data={drivers} columns={drivers_columns} handler={drivers_handler} />
+      {/await}
+    {:else if current_tab === 2}
+      <!-- Races Tab -->
+      <!-- Races Tab -->
+      <!-- Races Tab -->
+      {#await data.races then races}
+        <Table data={races} columns={races_columns} handler={races_handler} />
+      {/await}
+    {:else if current_tab === 3}
+      <!-- Substitutions Tab -->
+      <!-- Substitutions Tab -->
+      <!-- Substitutions Tab -->
+      {#await data.substitutions then substitutions}
+        <Table
+          data={substitutions}
+          columns={substitutions_columns}
+          handler={substitutions_handler}
+        />
+      {/await}
+    {/if}
+  </svelte:fragment>
+</TabGroup>

src/routes/data/user/+page.svelte

@@ -0,0 +1 @@
+<h1>User Data</h1>

src/routes/leaderboard/+page.svelte

@@ -0,0 +1 @@
+<h1>Leaderboard</h1>

src/routes/profile/+page.server.ts

@@ -0,0 +1,87 @@
+import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
+import { error, redirect } from "@sveltejs/kit";
+import type { Actions } from "./$types";
+import { image_to_avif } from "$lib/server/image";
+import { AVATAR_HEIGHT, AVATAR_WIDTH } from "$lib/config";
+
+export const actions = {
+  create_profile: async ({ request, locals }): Promise<void> => {
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["username", "password", "redirect_url"]);
+
+    // Confirm password lol
+    await locals.pb.collection("users").create({
+      username: data.get("username")?.toString(),
+      password: data.get("password")?.toString(),
+      passwordConfirm: data.get("password")?.toString(),
+      admin: false,
+    });
+
+    // Directly login after registering
+    await locals.pb
+      .collection("users")
+      .authWithPassword(data.get("username")?.toString(), data.get("password")?.toString());
+
+    redirect(303, data.get("redirect_url")?.toString() ?? "/");
+  },
+
+  // TODO: PocketBase API rule: Only the active user should be able to modify itself
+  update_profile: async ({ request, locals }): Promise<void> => {
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["redirect_url"]);
+    const id: string = form_data_get_and_remove_id(data);
+
+    if (data.has("avatar")) {
+      // Compress image
+      const compressed: Blob = await image_to_avif(
+        await (data.get("avatar") as File).arrayBuffer(),
+        AVATAR_WIDTH,
+        AVATAR_HEIGHT,
+      );
+
+      // At most 20kB
+      if (compressed.size > 20000) {
+        error(400, "Avatar too large!");
+      }
+
+      data.set("avatar", compressed);
+    }
+
+    await locals.pb.collection("users").update(id, data);
+
+    redirect(303, data.get("redirect_url")?.toString() ?? "/");
+  },
+
+  login: async ({ request, locals }) => {
+    if (locals.user) {
+      error(400, "Already logged in!");
+    }
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["username", "password", "redirect_url"]);
+
+    try {
+      await locals.pb
+        .collection("users")
+        .authWithPassword(data.get("username")?.toString(), data.get("password")?.toString());
+    } catch (err) {
+      error(400, "Failed to login!");
+    }
+
+    redirect(303, data.get("redirect_url")?.toString() ?? "/");
+  },
+
+  logout: async ({ request, locals }) => {
+    if (!locals.user) {
+      error(400, "Not logged in!");
+    }
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["redirect_url"]);
+
+    locals.pb.authStore.clear();
+    locals.user = undefined;
+
+    redirect(303, data.get("redirect_url")?.toString() ?? "/");
+  },
+} satisfies Actions;

src/routes/racepicks/+page.svelte

@@ -0,0 +1 @@
+<h1>Race Picks</h1>

src/routes/rules/+page.svelte

@@ -0,0 +1 @@
+<h1>Rules</h1>

src/routes/seasonpicks/+page.svelte

@@ -0,0 +1 @@
+<h1>Season Picks</h1>

src/routes/statistics/+page.svelte

@@ -0,0 +1 @@
+<h1>Statistics</h1>

static/f1_logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 30" version="1.1" class="injected-svg js-svg-inject">
+    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
+    <title>Logos / F1-logo red</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M101.086812,30 L101.711812,30 L101.711812,27.106875 L101.722437,27.106875 L102.761812,30 L103.302437,30 L104.341812,27.106875 L104.352437,27.106875 L104.352437,30 L104.977437,30 L104.977437,26.25125 L104.063687,26.25125 L103.055562,29.18625 L103.044937,29.18625 L102.011187,26.25125 L101.086812,26.25125 L101.086812,30 Z M97.6274375,26.818125 L98.8136875,26.818125 L98.8136875,30 L99.4699375,30 L99.4699375,26.818125 L100.661812,26.818125 L100.661812,26.25125 L97.6274375,26.25125 L97.6274375,26.818125 Z M89.9999375,30 L119.999937,0 L101.943687,0 L71.9443125,30 L89.9999375,30 Z M85.6986875,13.065 L49.3818125,13.065 C38.3136875,13.065 36.3768125,13.651875 31.6361875,18.3925 C27.2024375,22.82625 20.0005625,30 20.0005625,30 L35.7324375,30 L39.4855625,26.246875 C41.9530625,23.779375 43.2255625,23.52375 48.4068125,23.52375 L75.2405625,23.52375 L85.6986875,13.065 Z M31.1518125,16.253125 C27.8774375,19.3425 20.7530625,26.263125 16.9130625,30 L-6.25e-05,30 C-6.25e-05,30 13.5524375,16.486875 21.0849375,9.0725 C28.8455625,1.685 32.7143125,0 46.9486875,0 L98.7643125,0 L87.5449375,11.21875 L48.0011875,11.21875 C37.9993125,11.21875 35.7518125,11.911875 31.1518125,16.253125 Z" id="path-1"/>
+    </defs>
+    <g id="Logos-/-F1-logo-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Page-1">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"/>
+            </mask>
+            <use id="Fill-1" fill="#EE0000" xlink:href="#path-1"/>
+        </g>
+    </g>
+</svg>

static/favicon.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 60" version="1.1" class="injected-svg js-svg-inject">
+    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
+    <title>Logos / F1-logo red</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M101.086812,30 L101.711812,30 L101.711812,27.106875 L101.722437,27.106875 L102.761812,30 L103.302437,30 L104.341812,27.106875 L104.352437,27.106875 L104.352437,30 L104.977437,30 L104.977437,26.25125 L104.063687,26.25125 L103.055562,29.18625 L103.044937,29.18625 L102.011187,26.25125 L101.086812,26.25125 L101.086812,30 Z M97.6274375,26.818125 L98.8136875,26.818125 L98.8136875,30 L99.4699375,30 L99.4699375,26.818125 L100.661812,26.818125 L100.661812,26.25125 L97.6274375,26.25125 L97.6274375,26.818125 Z M89.9999375,30 L119.999937,0 L101.943687,0 L71.9443125,30 L89.9999375,30 Z M85.6986875,13.065 L49.3818125,13.065 C38.3136875,13.065 36.3768125,13.651875 31.6361875,18.3925 C27.2024375,22.82625 20.0005625,30 20.0005625,30 L35.7324375,30 L39.4855625,26.246875 C41.9530625,23.779375 43.2255625,23.52375 48.4068125,23.52375 L75.2405625,23.52375 L85.6986875,13.065 Z M31.1518125,16.253125 C27.8774375,19.3425 20.7530625,26.263125 16.9130625,30 L-6.25e-05,30 C-6.25e-05,30 13.5524375,16.486875 21.0849375,9.0725 C28.8455625,1.685 32.7143125,0 46.9486875,0 L98.7643125,0 L87.5449375,11.21875 L48.0011875,11.21875 C37.9993125,11.21875 35.7518125,11.911875 31.1518125,16.253125 Z" id="path-1"/>
+    </defs>
+    <g id="Logos-/-F1-logo-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Page-1">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"/>
+            </mask>
+            <use id="Fill-1" fill="#EE0000" xlink:href="#path-1"/>
+        </g>
+    </g>
+</svg>

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from "@sveltejs/adapter-auto";
+import adapter from "@sveltejs/adapter-node";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */

tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./src/**/*.{html,js,svelte,ts}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

tailwind.config.ts

@@ -0,0 +1,37 @@
+import type { Config } from "tailwindcss";
+import { skeleton } from "@skeletonlabs/tw-plugin";
+import { join } from "path";
+import { formula11Theme } from "./tailwind.formula11";
+import forms from "@tailwindcss/forms";
+
+const config = {
+  content: [
+    "./src/**/*.{html,js,svelte,ts}",
+    join(require.resolve("@skeletonlabs/skeleton"), "../**/*.{html,js,svelte,ts}"),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    forms,
+    skeleton({
+      themes: {
+        custom: [formula11Theme],
+      },
+    }),
+  ],
+  safelist: [
+    // List all patterns that are used dynamically, e.g. class="variant-filled-{color}"
+    {
+      pattern: /variant-filled-+/,
+    },
+    {
+      pattern: /w-full/,
+    },
+    {
+      pattern: /w-auto/,
+    },
+  ],
+} satisfies Config;
+
+export default config;

tailwind.formula11.ts

@@ -0,0 +1,101 @@
+import type { CustomThemeConfig } from "@skeletonlabs/tw-plugin";
+
+export const formula11Theme: CustomThemeConfig = {
+  name: "formula11Theme",
+  properties: {
+    // =~= Theme Properties =~=
+    "--theme-font-family-base": `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
+    "--theme-font-family-heading": `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
+    "--theme-font-color-base": "0 0 0",
+    "--theme-font-color-dark": "255 255 255",
+    "--theme-rounded-base": "8px",
+    "--theme-rounded-container": "8px",
+    "--theme-border-base": "1px",
+    // =~= Theme On-X Colors =~=
+    "--on-primary": "0 0 0",
+    "--on-secondary": "0 0 0",
+    "--on-tertiary": "0 0 0",
+    "--on-success": "var(--color-primary-50)",
+    "--on-warning": "0 0 0",
+    "--on-error": "255 255 255",
+    "--on-surface": "0 0 0",
+    // =~= Theme Colors  =~=
+    // primary | #F8D7DA
+    "--color-primary-50": "254 249 249", // #fef9f9
+    "--color-primary-100": "254 247 248", // #fef7f8
+    "--color-primary-200": "253 245 246", // #fdf5f6
+    "--color-primary-300": "252 239 240", // #fceff0
+    "--color-primary-400": "250 227 229", // #fae3e5
+    "--color-primary-500": "248 215 218", // #F8D7DA
+    "--color-primary-600": "223 194 196", // #dfc2c4
+    "--color-primary-700": "186 161 164", // #baa1a4
+    "--color-primary-800": "149 129 131", // #958183
+    "--color-primary-900": "122 105 107", // #7a696b
+    // secondary | #FFF3CD
+    "--color-secondary-50": "255 253 248", // #fffdf8
+    "--color-secondary-100": "255 253 245", // #fffdf5
+    "--color-secondary-200": "255 252 243", // #fffcf3
+    "--color-secondary-300": "255 250 235", // #fffaeb
+    "--color-secondary-400": "255 247 220", // #fff7dc
+    "--color-secondary-500": "255 243 205", // #FFF3CD
+    "--color-secondary-600": "230 219 185", // #e6dbb9
+    "--color-secondary-700": "191 182 154", // #bfb69a
+    "--color-secondary-800": "153 146 123", // #99927b
+    "--color-secondary-900": "125 119 100", // #7d7764
+    // tertiary | #D1E7DD
+    "--color-tertiary-50": "248 251 250", // #f8fbfa
+    "--color-tertiary-100": "246 250 248", // #f6faf8
+    "--color-tertiary-200": "244 249 247", // #f4f9f7
+    "--color-tertiary-300": "237 245 241", // #edf5f1
+    "--color-tertiary-400": "223 238 231", // #dfeee7
+    "--color-tertiary-500": "209 231 221", // #D1E7DD
+    "--color-tertiary-600": "188 208 199", // #bcd0c7
+    "--color-tertiary-700": "157 173 166", // #9dada6
+    "--color-tertiary-800": "125 139 133", // #7d8b85
+    "--color-tertiary-900": "102 113 108", // #66716c
+    // success | #198754
+    "--color-success-50": "221 237 229", // #ddede5
+    "--color-success-100": "209 231 221", // #d1e7dd
+    "--color-success-200": "198 225 212", // #c6e1d4
+    "--color-success-300": "163 207 187", // #a3cfbb
+    "--color-success-400": "94 171 135", // #5eab87
+    "--color-success-500": "25 135 84", // #198754
+    "--color-success-600": "23 122 76", // #177a4c
+    "--color-success-700": "19 101 63", // #13653f
+    "--color-success-800": "15 81 50", // #0f5132
+    "--color-success-900": "12 66 41", // #0c4229
+    // warning | #FFC107
+    "--color-warning-50": "255 246 218", // #fff6da
+    "--color-warning-100": "255 243 205", // #fff3cd
+    "--color-warning-200": "255 240 193", // #fff0c1
+    "--color-warning-300": "255 230 156", // #ffe69c
+    "--color-warning-400": "255 212 81", // #ffd451
+    "--color-warning-500": "255 193 7", // #FFC107
+    "--color-warning-600": "230 174 6", // #e6ae06
+    "--color-warning-700": "191 145 5", // #bf9105
+    "--color-warning-800": "153 116 4", // #997404
+    "--color-warning-900": "125 95 3", // #7d5f03
+    // error | #DC3545
+    "--color-error-50": "250 225 227", // #fae1e3
+    "--color-error-100": "248 215 218", // #f8d7da
+    "--color-error-200": "246 205 209", // #f6cdd1
+    "--color-error-300": "241 174 181", // #f1aeb5
+    "--color-error-400": "231 114 125", // #e7727d
+    "--color-error-500": "220 53 69", // #DC3545
+    "--color-error-600": "198 48 62", // #c6303e
+    "--color-error-700": "165 40 52", // #a52834
+    "--color-error-800": "132 32 41", // #842029
+    "--color-error-900": "108 26 34", // #6c1a22
+    // surface | #DDDDDD
+    "--color-surface-50": "250 250 250", // #fafafa
+    "--color-surface-100": "248 248 248", // #f8f8f8
+    "--color-surface-200": "247 247 247", // #f7f7f7
+    "--color-surface-300": "241 241 241", // #f1f1f1
+    "--color-surface-400": "231 231 231", // #e7e7e7
+    "--color-surface-500": "221 221 221", // #DDDDDD
+    "--color-surface-600": "199 199 199", // #c7c7c7
+    "--color-surface-700": "166 166 166", // #a6a6a6
+    "--color-surface-800": "133 133 133", // #858585
+    "--color-surface-900": "108 108 108", // #6c6c6c
+  },
+};

vite.config.ts

@@ -1,6 +1,11 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
 
 export default defineConfig({
-	plugins: [sveltekit()]
+  plugins: [sveltekit()],
+  build: {
+    rollupOptions: {
+      external: ["sharp"],
+    },
+  },
 });