Users: Display driver headshot template if user doesn't have avatar

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

@@ -3,7 +3,7 @@ import type { LayoutServerLoad } from "./$types";
 
 // This "load" function runs serverside only, as it's located inside +layout.server.ts
 export const load: LayoutServerLoad = async ({ fetch, locals }) => {
-  // TODO: Duplicated code from racepicks/+page.server.ts
+  // TODO: Duplicated code from racepicks/+page.server.ts + users/+page.server.ts
   const fetch_graphics = async (): Promise<Graphic[]> => {
     const graphics: Graphic[] = await locals.pb
       .collection("graphics")

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

@@ -1,4 +1,4 @@
-import type { User } from "$lib/schema";
+import type { Graphic, User } from "$lib/schema";
 import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ fetch, locals }) => {
@@ -14,7 +14,21 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
     return users;
   };
 
+  // TODO: Duplicated code from data/season/+layout.server.ts + racepicks/+page.server.ts
+  const fetch_graphics = async (): Promise<Graphic[]> => {
+    const graphics: Graphic[] = await locals.pb
+      .collection("graphics")
+      .getFullList({ fetch: fetch });
+
+    graphics.map((graphic: Graphic) => {
+      graphic.file_url = locals.pb.files.getURL(graphic, graphic.file);
+    });
+
+    return graphics;
+  };
+
   return {
     users: await fetch_users(),
+    graphics: await fetch_graphics(),
   };
 };

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

@@ -2,6 +2,7 @@
   import { Table, type TableColumn } from "$lib/components";
   import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
+  import { get_by_value } from "$lib/database";
 
   let { data }: { data: PageData } = $props();
 
@@ -19,14 +20,8 @@
     {
       data_value_name: "avatar_url",
       label: "Avatar",
-      valuefun: async (value: string): Promise<string> => {
-        if (value) {
-          return `<img class='rounded-full w-10' src='${value}'/>`;
-        }
-
-        // The line height matches h-10 (40px)
-        return `<div class='rounded-full w-10 h-10 bg-surface-500 text-center align-middle' style='line-height: 40px;'>None</div>`;
-      },
+      valuefun: async (value: string): Promise<string> =>
+        `<img class='rounded-full w-10 bg-surface-400' src='${value ? value : get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url}'/>`,
     },
     {
       data_value_name: "admin",

src/routes/racepicks/+page.server.ts

@@ -80,7 +80,7 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
     return races;
   };
 
-  // TODO: Duplicated code from data/season/+layout.server.ts
+  // TODO: Duplicated code from data/season/+layout.server.ts + users/+page.server.ts
   const fetch_graphics = async (): Promise<Graphic[]> => {
     const graphics: Graphic[] = await locals.pb
       .collection("graphics")

src/routes/racepicks/+page.svelte

@@ -101,7 +101,7 @@
                 Step {data.currentrace.step}: {data.currentrace.name}
               </span>
               <span class="">Race: {data.currentrace.racedate}</span>
-              <!-- TODO: Countdown -->
+              <!-- TODO: Countdown to next sq/sr/q/race -->
             </div>
             <div class="card w-full p-2 shadow">
               <span class="text-nowrap font-bold">Track Layout:</span>