Add race results link to layout

src/lib/components/Dropdown.svelte

@@ -90,7 +90,8 @@
   {#if action}
     <input
       use:popup={popup_settings}
-      type="text"
+      type="button"
+      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()}
@@ -100,7 +101,8 @@
   {:else}
     <input
       use:popup={popup_settings}
-      type="text"
+      type="button"
+      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}
@@ -109,13 +111,26 @@
   {/if}
 </div>
 
-<div data-popup={popup_id} class="card z-10 w-auto p-2 shadow">
+<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}
-        >{option.label}</ListBoxItem
-      >
+      <ListBoxItem bind:group={input_variable} {name} value={option.value}>
+        <div class="flex flex-nowrap">
+          {#if option.icon_url}
+            <img
+              src={option.icon_url}
+              alt=""
+              class="mr-2 rounded"
+              style="height: 24px; max-width: 64px;"
+            />
+          {/if}
+          {option.label}
+        </div>
+      </ListBoxItem>
     {/each}
   </ListBox>
-  <div class="bg-surface-100-800-token arrow"></div>
 </div>

src/routes/+layout.svelte

@@ -108,6 +108,9 @@
     <!-- Data Drawer -->
     <!-- Data Drawer -->
     <div class="flex flex-col gap-2 p-2">
+      <Button href="/data/raceresult" onclick={close_drawer} color="surface" fullwidth
+        >Race Results</Button
+      >
       <Button href="/data/season" onclick={close_drawer} color="surface" fullwidth>Season</Button>
       <Button href="/data/user" onclick={close_drawer} color="surface" fullwidth>Users</Button>
     </div>

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

@@ -46,7 +46,10 @@ export const actions = {
     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", "active"]);
+    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");
 
     await locals.pb.collection("drivers").create(data);
 

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

@@ -45,12 +45,16 @@
 
   // All options to create a <Dropdown> component for the teams
   const team_dropdown_options: DropdownOption[] = data.teams.map((team: Team) => {
-    return { label: team.name, value: team.id } as DropdownOption;
+    return { label: team.name, value: team.id, icon_url: team.logo_url } as DropdownOption;
   });
 
   // All options to create a <Dropdown> component for the drivers
   const driver_dropdown_options: DropdownOption[] = data.drivers.map((driver: Driver) => {
-    return { label: driver.code, value: driver.id } as DropdownOption;
+    return {
+      label: driver.code,
+      value: driver.id,
+      icon_url: driver.headshot_url,
+    } as DropdownOption;
   });
 
   // All options to create a <Dropdown> component for the races
@@ -85,11 +89,6 @@
       <!-- Teams Tab -->
       <!-- Teams Tab -->
       <div 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}
-          <TeamCard {team} disable_inputs={!data.admin} />
-        {/each}
-
         <!-- Add a new team -->
         {#if data.admin}
           <TeamCard
@@ -97,23 +96,17 @@
             require_inputs
           />
         {/if}
+
+        <!-- List all teams inside the database -->
+        {#each data.teams as team}
+          <TeamCard {team} disable_inputs={!data.admin} />
+        {/each}
       </div>
     {:else if current_tab === 1}
       <!-- Drivers Tab -->
       <!-- Drivers Tab -->
       <!-- Drivers Tab -->
       <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
-        <!-- List all drivers inside the database -->
-        {#each data.drivers as driver}
-          <DriverCard
-            {driver}
-            disable_inputs={!data.admin}
-            team_select_value={update_driver_team_select_values[driver.id]}
-            team_select_options={team_dropdown_options}
-            active_value={update_driver_active_values[driver.id]}
-          />
-        {/each}
-
         <!-- Add a new driver -->
         {#if data.admin}
           <DriverCard
@@ -124,41 +117,39 @@
             require_inputs
           />
         {/if}
+
+        <!-- List all drivers inside the database -->
+        {#each data.drivers as driver}
+          <DriverCard
+            {driver}
+            disable_inputs={!data.admin}
+            team_select_value={update_driver_team_select_values[driver.id]}
+            team_select_options={team_dropdown_options}
+            active_value={update_driver_active_values[driver.id]}
+          />
+        {/each}
       </div>
     {:else if current_tab === 2}
       <!-- Races Tab -->
       <!-- Races Tab -->
       <!-- Races Tab -->
       <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-3 2xl:grid-cols-5">
-        {#each data.races as race}
-          <RaceCard {race} disable_inputs={!data.admin} />
-        {/each}
-
         {#if data.admin}
           <RaceCard
             pictogram_template={get_by_value(data.graphics, "name", "race_template")?.file_url}
             require_inputs
           />
         {/if}
+
+        {#each data.races as race}
+          <RaceCard {race} disable_inputs={!data.admin} />
+        {/each}
       </div>
     {:else if current_tab === 3}
       <!-- Substitutions Tab -->
       <!-- Substitutions Tab -->
       <!-- Substitutions Tab -->
       <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
-        {#each data.substitutions as substitution}
-          <SubstitutionCard
-            {substitution}
-            drivers={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}
-            disable_inputs={!data.admin}
-          />
-        {/each}
-
         {#if data.admin}
           <SubstitutionCard
             drivers={data.drivers}
@@ -171,6 +162,19 @@
             require_inputs
           />
         {/if}
+
+        {#each data.substitutions as substitution}
+          <SubstitutionCard
+            {substitution}
+            drivers={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}
+            disable_inputs={!data.admin}
+          />
+        {/each}
       </div>
     {/if}
   </svelte:fragment>