From 769008c98b69b49b9e478f93867997329d30be19 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Wed, 18 Dec 2024 14:59:06 +0100
Subject: [PATCH] Lib: Move cards into cards/ directory

---
 .../components/{ => cards}/DriverCard.svelte  | 31 +++++++++++++------
 .../components/{ => cards}/LazyCard.svelte    |  2 +-
 .../components/{ => cards}/RaceCard.svelte    | 28 ++++++++---------
 .../{ => cards}/SubstitutionCard.svelte       |  3 +-
 4 files changed, 37 insertions(+), 27 deletions(-)
 rename src/lib/components/{ => cards}/DriverCard.svelte (85%)
 rename src/lib/components/{ => cards}/LazyCard.svelte (97%)
 rename src/lib/components/{ => cards}/RaceCard.svelte (90%)
 rename src/lib/components/{ => cards}/SubstitutionCard.svelte (97%)

diff --git a/src/lib/components/DriverCard.svelte b/src/lib/components/cards/DriverCard.svelte
similarity index 85%
rename from src/lib/components/DriverCard.svelte
rename to src/lib/components/cards/DriverCard.svelte
index 652c9db..648f715 100644
--- a/src/lib/components/DriverCard.svelte
+++ b/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>
diff --git a/src/lib/components/LazyCard.svelte b/src/lib/components/cards/LazyCard.svelte
similarity index 97%
rename from src/lib/components/LazyCard.svelte
rename to src/lib/components/cards/LazyCard.svelte
index 52b4c2a..9615298 100644
--- a/src/lib/components/LazyCard.svelte
+++ b/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 {
diff --git a/src/lib/components/RaceCard.svelte b/src/lib/components/cards/RaceCard.svelte
similarity index 90%
rename from src/lib/components/RaceCard.svelte
rename to src/lib/components/cards/RaceCard.svelte
index f59247c..0503fb3 100644
--- a/src/lib/components/RaceCard.svelte
+++ b/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 -->
diff --git a/src/lib/components/SubstitutionCard.svelte b/src/lib/components/cards/SubstitutionCard.svelte
similarity index 97%
rename from src/lib/components/SubstitutionCard.svelte
rename to src/lib/components/cards/SubstitutionCard.svelte
index 6476f2a..0979f88 100644
--- a/src/lib/components/SubstitutionCard.svelte
+++ b/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,