Migrate from DaisyUI to SkeletonUI

src/lib/components/Button.svelte

@@ -1,20 +1,24 @@
 <script lang="ts">
   let {
-    id = "",
+    children,
-    name = "",
-    formaction = "",
-    label,
     color,
-    disabled = false,
+    submit = false,
+    href = undefined,
+    fullwidth = false,
+    ...restProps
   } = $props();
 </script>
 
-<!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
+{#if href}
-<button
+  <a {href} class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
-  {id}
+    {@render children()}
-  {name}
+  </a>
-  {formaction}
+{:else}
-  {disabled}
+  <button
-  class="btn btn-{color}"
+    type={submit ? "submit" : "button"}
-  style="--tw-bg-opacity: 1">{label}</button
+    class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}"
->
+    {...restProps}
+  >
+    {@render children()}
+  </button>
+{/if}

src/lib/components/Card.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children, fullwidth = false, ...restProps } = $props();
+</script>
+
+<div class="card bg-white p-2 shadow {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
+  {@render children()}
+</div>

src/lib/components/FileInput.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  let {
-    id,
-    name,
-    label,
-    accept = "*",
-    onchange = undefined,
-    disabled = false,
-    required = false,
-  } = $props();
-</script>
-
-{#if disabled}
-  <!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
-  <label
-    for={id}
-    class="btn btn-disabled mt-2 w-full"
-    style="--tw-bg-opacity: 1">{label}</label
-  >
-{:else}
-  <label for={id} class="btn btn-ghost input-bordered mt-2 w-full"
-    >{label}</label
-  >
-{/if}
-<input
-  {id}
-  {name}
-  class="file-input file-input-bordered file-input-ghost"
-  type="file"
-  hidden
-  {disabled}
-  {required}
-  {onchange}
-  {accept}
-/>

src/lib/components/Input.svelte

@@ -1,29 +1,10 @@
 <script lang="ts">
-  let {
+  let { children, type = "text", ...restProps } = $props();
-    id,
-    name,
-    label,
-    placeholder = "",
-    type = "text",
-    value = "",
-    disabled = false,
-    required = false,
-  } = $props();
 </script>
 
-<label
+<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
-  for={id}
+  <div class="input-group-shim select-none text-neutral-900">
-  class="input input-bordered mt-2 flex !cursor-default select-none items-center gap-2"
+    {@render children()}
->
+  </div>
-  {label}
+  <input {type} {...restProps} />
-  <input
+</div>
-    {id}
-    {name}
-    {type}
-    class={disabled ? "pointer-events-none grow !cursor-default" : "grow"}
-    {disabled}
-    {required}
-    {placeholder}
-    {value}
-  />
-</label>

src/lib/components/Password.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  let { id, name, disabled = false } = $props();
-</script>
-
-<label for={id} class="input input-bordered mt-2 flex items-center gap-2">
-  <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>
-  <input
-    {id}
-    {name}
-    type="password"
-    class="grow"
-    {disabled}
-    required
-    placeholder="Password"
-  />
-</label>

src/lib/components/Username.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  let { id, name, value = "", disabled = false } = $props();
-</script>
-
-<label for={id} class="input input-bordered mt-2 flex items-center gap-2">
-  <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>
-  <input
-    {id}
-    {name}
-    type="text"
-    class="grow"
-    {value}
-    {disabled}
-    required
-    placeholder="Username"
-  />
-</label>

src/lib/components/index.ts

@@ -1,7 +1,9 @@
-import FileInput from "./FileInput.svelte";
 import Input from "./Input.svelte";
-import Password from "./Password.svelte";
-import Username from "./Username.svelte";
 import Button from "./Button.svelte";
+import Card from "./Card.svelte";
 
-export { FileInput, Input, Username, Password, Button };
+import MenuDrawerIcon from "./svg/MenuDrawerIcon.svelte";
+import UserIcon from "./svg/UserIcon.svelte";
+import PasswordIcon from "./svg/PasswordIcon.svelte";
+
+export { Input, Button, Card, MenuDrawerIcon, UserIcon, PasswordIcon };

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/image.ts

@@ -1,11 +1,37 @@
-export const get_image_preview_event_handler = (id: string) => {
+/**
-  const handler = (event) => {
+ * Use this on <Avatar> components.
-    const target = event.target;
+ */
-    const files = target.files;
+export const get_avatar_preview_event_handler = (id: string) => {
+  const handler = (event: Event) => {
+    const target: HTMLInputElement = event.target as HTMLInputElement;
+    const files: FileList | null = target.files;
 
-    if (files.length > 0) {
+    if (files && files.length > 0) {
-      const src = URL.createObjectURL(files[0]);
+      const src: string = URL.createObjectURL(files[0]);
-      const preview = document.getElementById(id) as HTMLImageElement;
+      const preview: HTMLImageElement = document.querySelector(
+        `#${id} > img:first-of-type`,
+      ) as HTMLImageElement;
+      if (preview) {
+        preview.src = src;
+        preview.hidden = false;
+      }
+    }
+  };
+
+  return handler;
+};
+
+/**
+ * Use this on raw <img> elements.
+ */
+export const get_image_preview_event_handler = (id: string) => {
+  const handler = (event: Event) => {
+    const target: HTMLInputElement = event.target as HTMLInputElement;
+    const files: FileList | null = target.files;
+
+    if (files && files.length > 0) {
+      const src: string = URL.createObjectURL(files[0]);
+      const preview: HTMLImageElement = document.getElementById(id) as HTMLImageElement;
       if (preview) {
         preview.src = src;
         preview.hidden = false;

src/routes/+layout.svelte

@@ -2,182 +2,221 @@
   import "../app.css";
   import type { Snippet } from "svelte";
   import type { LayoutData } from "./$types";
-  import { FileInput, Password, Username } from "$lib/components";
+  import { Button, MenuDrawerIcon, UserIcon, Input, PasswordIcon, Card } from "$lib/components";
-  import { get_image_preview_event_handler } from "$lib/image";
+  import { get_avatar_preview_event_handler, get_image_preview_event_handler } from "$lib/image";
+  import {
+    AppBar,
+    popup,
+    storePopup,
+    type PopupSettings,
+    initializeStores,
+    Drawer,
+    getDrawerStore,
+    type DrawerSettings,
+    Avatar,
+    FileDropzone,
+  } from "@skeletonlabs/skeleton";
+  import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 
   let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+  // Drawer config
+  initializeStores();
+  const drawerStore = getDrawerStore();
+
+  const menu_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "menu_drawer",
+      position: "top",
+      height: "auto",
+      padding: "lg:px-96",
+    };
+    drawerStore.open(drawerSettings);
+  };
+
+  const data_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "data_drawer",
+      position: "top",
+      height: "auto",
+      padding: "lg:px-96",
+    };
+    drawerStore.open(drawerSettings);
+  };
+
+  const login_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "login_drawer",
+      position: "top",
+      height: "auto",
+      padding: "lg:px-96",
+    };
+    drawerStore.open(drawerSettings);
+  };
+
+  const profile_drawer = () => {
+    const drawerSettings: DrawerSettings = {
+      id: "profile_drawer",
+      position: "top",
+      height: "auto",
+      padding: "lg:px-96",
+    };
+    drawerStore.open(drawerSettings);
+  };
+
+  const close_drawer = () => drawerStore.close();
+
+  // Popups config
+  storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+  // Example: https://www.skeleton.dev/utilities/popups
+  // const data_popup_settings: PopupSettings = {
+  //   event: "click",
+  //   target: "data_popup",
+  //   placement: "bottom",
+  //   middleware: {
+  //     offset: { mainAxis: 22, crossAxis: 0 },
+  //     // shift: { mainAxis: true, crossAxis: false },
+  //   },
+  // };
 </script>
 
+<Drawer>
+  {#if $drawerStore.id === "menu_drawer"}
+    <!-- Menu Drawer -->
+    <!-- Menu Drawer -->
+    <!-- Menu Drawer -->
+    <div class="p-2 pt-0 *:mt-2">
+      <Button href="/racepicks" onclick={close_drawer} color="surface" fullwidth>Race Picks</Button>
+      <Button href="/seasonpicks" onclick={close_drawer} color="surface" fullwidth
+        >Season Picks
+      </Button>
+      <Button href="/leaderboard" onclick={close_drawer} color="surface" fullwidth
+        >Leaderboard
+      </Button>
+      <Button href="/statistics" onclick={close_drawer} color="surface" fullwidth
+        >Statistics
+      </Button>
+      <Button href="/rules" onclick={close_drawer} color="surface" fullwidth>Rules</Button>
+    </div>
+  {:else if $drawerStore.id === "data_drawer"}
+    <!-- Data Drawer -->
+    <!-- Data Drawer -->
+    <!-- Data Drawer -->
+    <div class="p-2 pt-0 *:mt-2">
+      <Button href="/data/seasondata/teams" onclick={close_drawer} color="surface" fullwidth
+        >Season</Button
+      >
+      <Button href="/data/userdata" onclick={close_drawer} color="surface" fullwidth>Users</Button>
+    </div>
+  {:else if $drawerStore.id === "login_drawer"}
+    <!-- Login Drawer -->
+    <!-- Login Drawer -->
+    <!-- Login Drawer -->
+    <div class="p-2">
+      <h4 class="h4 select-none">Enter Username and Password</h4>
+      <form method="POST" class="*:mt-2">
+        <Input name="username" placeholder="Username" required>
+          <UserIcon />
+        </Input>
+        <Input name="password" type="password" placeholder="Password" required
+          ><PasswordIcon />
+        </Input>
+        <div class="flex justify-end gap-2">
+          <Button formaction="/user?/login" onclick={close_drawer} color="tertiary" submit
+            >Login</Button
+          >
+          <Button formaction="/user?/create" onclick={close_drawer} color="tertiary" submit
+            >Register</Button
+          >
+        </div>
+      </form>
+    </div>
+  {:else if $drawerStore.id === "profile_drawer"}
+    <!-- Profile Drawer -->
+    <!-- Profile Drawer -->
+    <!-- Profile Drawer -->
+    <div class="p-2">
+      <h4 class="h4 select-none">Edit Profile</h4>
+      <form method="POST" enctype="multipart/form-data" class="*:mt-2">
+        <input type="hidden" name="id" value={data.user.id} />
+        <Input name="username" value={data.user.username} placeholder="Username"><UserIcon /></Input
+        >
+        <FileDropzone
+          name="avatar"
+          onchange={get_avatar_preview_event_handler("user_avatar_preview")}
+        >
+          <svelte:fragment slot="message"><b>Upload Avatar</b> or Drag and Drop</svelte:fragment>
+        </FileDropzone>
+        <div class="flex justify-end gap-2">
+          <Button formaction="/user?/update" onclick={close_drawer} color="secondary" submit
+            >Save Changes</Button
+          >
+          <Button formaction="/user?/logout" onclick={close_drawer} color="primary" submit
+            >Logout</Button
+          >
+        </div>
+      </form>
+    </div>
+  {/if}
+</Drawer>
+
 <nav>
   <!-- TODO: Make this stick to the top somehow. -->
-  <!--       Fixed breaks the flexbox and sticky doesn't work. -->
+  <!--       Fixed breaks flexbox and sticky doesn't work. -->
-  <div class="navbar h-16 bg-primary shadow">
+  <AppBar
-    <div class="navbar-start">
+    slotDefault="place-self-center"
-      <!-- Side menu be visible on low width devices -->
+    slotTrail="place-content-end"
-      <div class="dropdown">
+    background="bg-primary-500"
-        <!-- Side menu open/close icon -->
+    shadow="shadow"
-        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+    padding="p-2"
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
   >
-            <path
+    <svelte:fragment slot="lead">
-              stroke-linecap="round"
+      <!-- Navigation drawer -->
-              stroke-linejoin="round"
+      <button
-              stroke-width="2"
+        class="variant-filled-primary btn p-2 lg:hidden"
-              d="M4 6h16M4 12h8m-8 6h16"
+        style="height: 44px;"
-            />
+        onclick={menu_drawer}
-          </svg>
-        </div>
-
-        <!-- Side menu navigation items -->
-        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-        <ul
-          tabindex="0"
-          class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
       >
-          <li><a draggable="false" href="/racepicks">Race Picks</a></li>
+        <MenuDrawerIcon />
-          <li><a draggable="false" href="/seasonpicks">Season Picks</a></li>
+      </button>
-          <li><a draggable="false" href="/leaderboard">Leaderboard</a></li>
-          <li><a draggable="false" href="/statistics">Statistics</a></li>
-          <li><a draggable="false" href="/rules">Rules</a></li>
-        </ul>
-      </div>
 
       <!-- Site logo -->
-      <a href="/" draggable="false" class="btn btn-ghost select-none text-xl"
+      <a
-        >Formula 11</a
+        href="/"
+        draggable="false"
+        class="variant-filled-primary btn ml-2 select-none p-2 text-xl lg:ml-0">Formula 11</a
       >
+    </svelte:fragment>
+
+    <!-- Large navigation -->
+    <div class="hidden lg:block">
+      <a href="/racepicks" class="variant-filled-primary btn p-2">Race Picks</a>
+      <a href="/seasonpicks" class="variant-filled-primary btn p-2">Season Picks</a>
+      <a href="/leaderboard" class="variant-filled-primary btn p-2">Leaderboard</a>
+      <a href="/statistics" class="variant-filled-primary btn p-2">Statistics</a>
+      <a href="/rules" class="variant-filled-primary btn p-2">Rules</a>
     </div>
 
-    <!-- Centered navigation -->
+    <svelte:fragment slot="trail">
-    <div class="navbar-center hidden lg:flex">
+      <!-- Data drawer -->
-      <ul class="menu menu-horizontal px-1">
+      <Button color="primary" onclick={data_drawer}>Data</Button>
-        <li>
-          <a draggable="false" class="btn btn-ghost btn-sm" href="/racepicks"
-            >Race Picks</a
-          >
-        </li>
-        <li>
-          <a draggable="false" class="btn btn-ghost btn-sm" href="/seasonpicks"
-            >Season Picks</a
-          >
-        </li>
-        <li>
-          <a draggable="false" class="btn btn-ghost btn-sm" href="/leaderboard"
-            >Leaderboard</a
-          >
-        </li>
-        <li>
-          <a draggable="false" class="btn btn-ghost btn-sm" href="/statistics"
-            >Statistics</a
-          >
-        </li>
-        <li>
-          <a draggable="false" class="btn btn-ghost btn-sm" href="/rules"
-            >Rules</a
-          >
-        </li>
-      </ul>
-    </div>
 
-    <div class="navbar-end">
+      <!-- Login/Profile drawer -->
-      <!-- Admin button -->
-      <div class="dropdown dropdown-end mr-2">
-        <div tabindex="0" role="button" class="btn btn-ghost">Data</div>
-        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-        <ul
-          tabindex="0"
-          class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
-        >
-          <li>
-            <a draggable="false" href="/data/seasondata/teams">Season Data</a>
-          </li>
-          <li><a draggable="false" href="/data/userdata">User Data</a></li>
-        </ul>
-      </div>
-
-      <!-- Login/profile stuff -->
       {#if !data.user}
-        <!-- No user is logged in  -->
+        <Button color="primary" onclick={login_drawer}>Login</Button>
-        <div class="dropdown dropdown-end">
-          <div tabindex="0" role="button" class="btn btn-ghost m-1">Login</div>
-          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-          <div
-            tabindex="0"
-            class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
-          >
-            <h1 class="text-lg">Enter Username and Password</h1>
-            <form method="POST">
-              <Username id="signin_username" name="username" />
-              <Password id="signin_password" name="password" />
-              <div class="card-actions mt-2 justify-end">
-                <button
-                  formaction="/user?/create"
-                  type="button"
-                  class="btn btn-accent">Register</button
-                >
-                <button
-                  formaction="/user?/login"
-                  type="submit"
-                  class="btn btn-accent">Login</button
-                >
-              </div>
-            </form>
-          </div>
-        </div>
       {:else}
-        <!-- The user is logged in -->
+        <Avatar
-        <div class="dropdown dropdown-end">
-          <div tabindex="0" role="button" class="avatar ml-2 mr-2">
-            <div class="mask mask-squircle w-10">
-              <img
           id="user_avatar_preview"
           src={data.user.avatar_url}
-                alt="User avatar"
+          rounded="rounded-full"
-                class="select-none"
+          width="w-10"
-                draggable="false"
+          onclick={profile_drawer}
+          cursor="cursor-pointer"
         />
-            </div>
-          </div>
-          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-          <div
-            tabindex="0"
-            class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
-          >
-            <h1 class="select-none text-lg">Edit Profile</h1>
-            <form method="POST" enctype="multipart/form-data">
-              <input type="hidden" name="id" value={data.user.id} />
-              <Username
-                id="update_username"
-                name="username"
-                value={data.user.username}
-              />
-              <FileInput
-                id="update_avatar"
-                name="avatar"
-                label="Upload Avatar"
-                onchange={get_image_preview_event_handler(
-                  "user_avatar_preview",
-                )}
-              />
-              <div class="card-actions mt-2 justify-end">
-                <button formaction="/user?/update" class="btn btn-secondary"
-                  >Save Changes</button
-                >
-                <button formaction="/user?/logout" class="btn btn-primary"
-                  >Logout</button
-                >
-              </div>
-            </form>
-          </div>
-        </div>
       {/if}
-    </div>
+    </svelte:fragment>
-  </div>
+  </AppBar>
 </nav>
 
 <!-- Each child's contents will be inserted here -->

src/routes/data/seasondata/+layout.svelte

@@ -1,34 +1,31 @@
 <script lang="ts">
-  import { page } from "$app/stores";
+  import { navigating, page } from "$app/stores";
+  import { Tab, TabGroup } from "@skeletonlabs/skeleton";
   import type { Snippet } from "svelte";
 
   let { children }: { children: Snippet } = $props();
 
-  // This has to be a function, so $page access is deferred to route switches
+  let current_tab: number = $state(0);
-  const get_tab = () => {
+  const tabs: { [tab: string]: number } = {
-    return $page.url.pathname.split("/").at(-1);
+    teams: 0,
+    drivers: 1,
+    races: 2,
   };
+
+  navigating.subscribe((nav) => {
+    if (!nav?.to?.url) return;
+
+    current_tab = tabs[nav.to.url.toString().split("/").at(-1) || "teams"];
+  });
 </script>
 
 <h1>Season Data</h1>
 
-<div role="tablist" class="tabs-boxed tabs">
+<TabGroup justify="justify-center">
-  <a
+  <a href="teams"> <Tab bind:group={current_tab} name="teams" value={0}>Teams</Tab></a>
-    href="teams"
+  <a href="drivers"><Tab bind:group={current_tab} name="drivers" value={1}>Drivers</Tab></a>
-    role="tab"
+  <a href="races"><Tab bind:group={current_tab} name="races" value={2}>Races</Tab></a>
-    class={get_tab() === "teams" ? "tab tab-active" : "tab"}>Teams</a
+</TabGroup>
-  >
-  <a
-    href="drivers"
-    role="tab"
-    class={get_tab() === "drivers" ? "tab tab-active" : "tab"}>Drivers</a
-  >
-  <a
-    href="races"
-    role="tab"
-    class={get_tab() === "races" ? "tab tab-active" : "tab"}>Races</a
-  >
-</div>
 
 <div>
   {@render children()}

src/routes/data/seasondata/teams/+page.server.ts

@@ -1,9 +1,5 @@
 import type { Actions, PageServerLoad } from "./$types";
-import {
+import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
-  form_data_clean,
-  form_data_ensure_keys,
-  form_data_get_and_remove_id,
-} from "$lib/form";
 
 // These "actions" run serverside only, as they're located inside +page.server.ts
 export const actions = {

src/routes/data/seasondata/teams/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { PageData } from "./$types";
-  import { Input, FileInput, Button } from "$lib/components";
+  import { Input, Button, Card } from "$lib/components";
   import { get_image_preview_event_handler } from "$lib/image";
+  import { FileDropzone } from "@skeletonlabs/skeleton";
 
   let { data }: { data: PageData } = $props();
 </script>
@@ -10,71 +11,55 @@
   <title>F11 - Teams</title>
 </svelte:head>
 
-<div
+<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
-  class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6"
->
   <!-- List all teams inside the database -->
   {#each data.teams as team}
-    <div class="card card-bordered card-compact shadow">
+    <Card>
       <!-- Logo display -->
-      <figure>
       <img
         id="update_team_logo_preview_{team.id}"
         src={team.logo_url}
         alt="Logo of {team.name} F1 team."
         draggable="false"
-          class="select-none"
+        class="select-none rounded-container-token"
       />
-      </figure>
 
       <form method="POST" enctype="multipart/form-data">
         <input name="id" type="hidden" value={team.id} />
 
-        <div class="card-body gap-0 !p-2 !pt-0">
+        <div class="*:mt-2">
-          <Input
+          <Input id="team_name_{team.id}" name="name" value={team.name} disabled={!data.admin}
-            id="team_name_{team.id}"
+            >Name</Input
-            name="name"
+          >
-            value={team.name}
-            label="Name:"
-            disabled={!data.admin}
-          />
 
           <!-- Logo upload -->
-          <FileInput
+          <FileDropzone
-            id="team_logo_{team.id}"
             name="logo"
-            label="Upload Logo"
+            id="team_logo_{team.id}"
-            onchange={get_image_preview_event_handler(
+            onchange={get_image_preview_event_handler(`update_team_logo_preview_${team.id}`)}
-              `update_team_logo_preview_${team.id}`,
-            )}
             disabled={!data.admin}
-          />
+          >
+            <svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
+          </FileDropzone>
 
           <!-- Buttons -->
-          <div class="card-actions mt-2 justify-end">
+          <div class="flex justify-end gap-2">
-            <Button
+            <Button formaction="?/update" color="secondary" disabled={!data.admin} submit
-              formaction="?/update"
+              >Save Changes</Button
-              color="secondary"
+            >
-              label="Save Changes"
+            <Button formaction="?/delete" color="primary" disabled={!data.admin} submit
-              disabled={!data.admin}
+              >Delete</Button
-            />
+            >
-            <Button
-              formaction="?/delete"
-              color="primary"
-              label="Delete"
-              disabled={!data.admin}
-            />
           </div>
         </div>
       </form>
-    </div>
+    </Card>
   {/each}
 
   <!-- Add a new team -->
   {#if data.admin}
-    <div class="card card-bordered card-compact shadow">
+    <Card>
       <!-- Logo preview -->
-      <figure>
       <img
         id="create_team_logo_preview"
         src=""
@@ -83,36 +68,33 @@
         draggable="false"
         hidden
       />
-      </figure>
       <form method="POST" enctype="multipart/form-data">
-        <div class="card-body">
+        <div class="*:mt-2">
-          <h2 class="card-title select-none">Add a New Team</h2>
+          <h4 class="h4 select-none">Add a New Team</h4>
 
           <!-- Team name input -->
-          <Input id="team_name_create" name="name" label="Name:" required />
+          <Input id="team_name_create" name="name" required>Name</Input>
 
           <!-- Logo upload -->
-          <FileInput
+          <FileDropzone
-            id="team_logo_create"
             name="logo"
-            label="Upload Logo"
+            id="team_logo_create"
-            onchange={get_image_preview_event_handler(
+            onchange={get_image_preview_event_handler("create_team_logo_preview")}
-              "create_team_logo_preview",
+            disabled={!data.admin}
-            )}
             required
-          />
+          >
+            <svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
+          </FileDropzone>
 
           <!-- Buttons -->
-          <div class="card-actions justify-end">
+          <div class="flex justify-end gap-2">
             <!-- By specifying the formaction on the button (instead of action on the form), -->
             <!-- we can have multiple buttons with different actions in a single form. -->
 
-            <button formaction="?/create" class="btn btn-secondary"
+            <Button formaction="?/create" color="secondary" submit>Create</Button>
-              >Create</button
-            >
           </div>
         </div>
       </form>
-    </div>
+    </Card>
   {/if}
 </div>