Lib: Move cards into cards/ directory

src/lib/components/cards/DriverCard.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone, SlideToggle } from "@skeletonlabs/skeleton";
-  import LazyCard from "./LazyCard.svelte";
-  import Button from "./Button.svelte";
+  import { Button, Input, LazyCard, LazyDropdown, type LazyDropdownOption } from "$lib/components";
   import type { Driver } from "$lib/schema";
-  import Input from "./Input.svelte";
-  import LazyDropdown, { type LazyDropdownOption } from "./LazyDropdown.svelte";
   import {
     DRIVER_CARD_ASPECT_HEIGHT,
     DRIVER_CARD_ASPECT_WIDTH,
@@ -118,7 +115,7 @@
         disabled={disable_inputs}
         required={require_inputs}
       >
-        <svelte:fragment slot="message"><b>Upload Headshot</b> or Drag and Drop</svelte:fragment>
+        <svelte:fragment slot="message"><b>Upload Headshot</b></svelte:fragment>
       </FileDropzone>
 
       <!-- Save/Delete buttons -->
@@ -133,14 +130,28 @@
           />
         </div>
         {#if driver}
-          <Button formaction="?/update_driver" color="secondary" disabled={disable_inputs} submit
-            >Save Changes</Button
+          <Button
+            formaction="?/update_driver"
+            color="secondary"
+            disabled={disable_inputs}
+            submit
+            width="w-1/2"
           >
-          <Button color="primary" submit disabled={disable_inputs} formaction="?/delete_driver"
-            >Delete</Button
+            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>Create Driver</Button>
+          <Button formaction="?/create_driver" color="tertiary" submit width="w-full"
+            >Create Driver</Button
+          >
         {/if}
       </div>
     </div>

src/lib/components/cards/LazyCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import LazyImage from "./LazyImage.svelte";
+  import LazyImage from "../LazyImage.svelte";
   import { lazyload } from "$lib/lazyload";
 
   interface CardProps {

src/lib/components/cards/RaceCard.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone } from "@skeletonlabs/skeleton";
-  import LazyCard from "./LazyCard.svelte";
-  import Button from "./Button.svelte";
+  import { Button, LazyCard, Input } from "$lib/components";
   import type { Race } from "$lib/schema";
-  import Input from "./Input.svelte";
   import { format } from "date-fns";
   import {
     RACE_CARD_ASPECT_HEIGHT,
@@ -58,6 +56,8 @@
     sprintquali.value = "";
     sprint.value = "";
   };
+
+  const labelwidth = "80px";
 </script>
 
 <LazyCard
@@ -82,7 +82,7 @@
         name="name"
         value={race?.name ?? ""}
         autocomplete="off"
-        labelwidth="120px"
+        {labelwidth}
         disabled={disable_inputs}
         required={require_inputs}>Name</Input
       >
@@ -91,7 +91,7 @@
         name="step"
         value={race?.step ?? ""}
         autocomplete="off"
-        labelwidth="120px"
+        {labelwidth}
         type="number"
         min={1}
         max={24}
@@ -103,7 +103,7 @@
         name="pxx"
         value={race?.pxx ?? ""}
         autocomplete="off"
-        labelwidth="120px"
+        {labelwidth}
         type="number"
         min={1}
         max={20}
@@ -117,25 +117,25 @@
         name="sprintqualidate"
         value={sprintqualidate ?? ""}
         autocomplete="off"
-        labelwidth="120px"
+        {labelwidth}
         type="datetime-local"
-        disabled={disable_inputs}>Sprint Quali</Input
+        disabled={disable_inputs}>SQuali</Input
       >
       <Input
         id="race_sprintdate_{race?.id ?? 'create'}"
         name="sprintdate"
         value={sprintdate ?? ""}
         autocomplete="off"
-        labelwidth="120px"
+        {labelwidth}
         type="datetime-local"
-        disabled={disable_inputs}>Sprint</Input
+        disabled={disable_inputs}>SRace</Input
       >
       <Input
         id="race_qualidate_{race?.id ?? 'create'}"
         name="qualidate"
         value={qualidate ?? ""}
         autocomplete="off"
-        labelwidth="120px"
+        {labelwidth}
         type="datetime-local"
         disabled={disable_inputs}
         required={require_inputs}>Quali</Input
@@ -145,10 +145,10 @@
         name="racedate"
         value={racedate ?? ""}
         autocomplete="off"
-        labelwidth="120px"
+        {labelwidth}
         type="datetime-local"
         disabled={disable_inputs}
-        required={require_inputs}>Sprint Quali</Input
+        required={require_inputs}>Race</Input
       >
 
       <!-- Headshot upload -->
@@ -161,7 +161,7 @@
         disabled={disable_inputs}
         required={require_inputs}
       >
-        <svelte:fragment slot="message"><b>Upload Pictogram</b> or Drag and Drop</svelte:fragment>
+        <svelte:fragment slot="message"><b>Upload Pictogram</b></svelte:fragment>
       </FileDropzone>
 
       <!-- Save/Delete buttons -->

src/lib/components/cards/SubstitutionCard.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import LazyCard from "./LazyCard.svelte";
-  import Button from "./Button.svelte";
+  import { Button, LazyDropdown, type LazyDropdownOption } from "$lib/components";
   import type { Driver, Substitution } from "$lib/schema";
   import { get_by_value } from "$lib/database";
-  import LazyDropdown, { type LazyDropdownOption } from "./LazyDropdown.svelte";
   import type { Action } from "svelte/action";
   import {
     DRIVER_HEADSHOT_HEIGHT,