Lib: Simplify RaceCard

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

@@ -2,12 +2,31 @@
   import { Button, Table, type TableColumn } from "$lib/components";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import { get_by_value, get_race_pictogram_template } from "$lib/database";
+  import { get_by_value } from "$lib/database";
   import type { Race } from "$lib/schema";
 
   let { data }: { data: PageData } = $props();
 
-  const races_columns: TableColumn[] = [
+  const modalStore: ModalStore = getModalStore();
+
+  const race_handler = async (event: Event, id?: string) => {
+    const race: Race | undefined = get_by_value(await data.races, "id", id ?? "Invalid");
+
+    if (id && !race) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "raceCard",
+      meta: {
+        data,
+        race,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const races_columns: TableColumn[] = $derived([
     {
       data_value_name: "name",
       label: "Name",
@@ -35,46 +54,14 @@
       label: "Race",
       valuefun: async (value: string): Promise<string> => value.slice(0, -5),
     },
-  ];
-
-  const modalStore: ModalStore = getModalStore();
-
-  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,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_race_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceCard",
-      meta: {
-        disable_inputs: !data.admin,
-        require_inputs: true,
-        pictogram_template: get_race_pictogram_template(await data.graphics),
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
+  ]);
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_race_handler} shadow>
+  <Button width="w-full" color="tertiary" onclick={race_handler} shadow>
     <span class="font-bold">Create New Race</span>
   </Button>
 </div>
 {#await data.races then races}
-  <Table data={races} columns={races_columns} handler={races_handler} />
+  <Table data={races} columns={races_columns} handler={race_handler} />
 {/await}