Skeleton: Move seasondata tabs into +layout.svelte

src/routes/+layout.svelte

@@ -73,15 +73,14 @@
     <div class="navbar-end">
       <!-- Admin button -->
       <div class="dropdown dropdown-end mr-2">
-        <div tabindex="0" role="button" class="btn btn-ghost">Admin</div>
+        <div tabindex="0" role="button" class="btn btn-ghost">Data</div>
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <ul
           tabindex="0"
           class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
         >
-          <li><a href="/admin/users">Users</a></li>
+          <li><a href="/data/seasondata/teams">Season Data</a></li>
-          <li><a href="/admin/seasondata/teams">Season Data</a></li>
+          <li><a href="/data/userdata">User Data</a></li>
-          <li><a href="/admin/userdata">User Data</a></li>
         </ul>
       </div>
 
@@ -131,7 +130,7 @@
             tabindex="0"
             class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
           >
-            <h1 class="text-lg">Edit Profile</h1>
+            <h1 class="select-none text-lg">Edit Profile</h1>
             <form method="POST" enctype="multipart/form-data">
               <input type="hidden" name="id" value={data.user.id} />
               <Username

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

@@ -1 +0,0 @@
-<h1>User Management</h1>

src/routes/data/seasondata/+layout.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import type { Snippet } from "svelte";
+
+  let { children }: { children: Snippet } = $props();
+
+  // const tab = $state($page.url.pathname.split("/").at(-1));
+  const get_tab = () => {
+    return $page.url.pathname.split("/").at(-1);
+  };
+</script>
+
+<!-- TODO: Move this + the tablist into the +layout.svelte and select the correct tab dynamically -->
+<!--       This would also allow it to be animated? Maybe? -->
+<h1>Season Data</h1>
+
+<div role="tablist" class="tabs-boxed tabs">
+  <a
+    href="teams"
+    role="tab"
+    class={get_tab() === "teams" ? "tab tab-active" : "tab"}>Teams</a
+  >
+  <a
+    href="drivers"
+    role="tab"
+    class={get_tab() === "drivers" ? "tab tab-active" : "tab"}>Drivers</a
+  >
+  <a
+    href="races"
+    role="tab"
+    class={get_tab() === "races" ? "tab tab-active" : "tab"}>Races</a
+  >
+</div>
+<!-- TODO: End -->
+
+<div>
+  {@render children()}
+</div>

src/routes/data/seasondata/teams/+page.server.ts

@@ -3,7 +3,7 @@ import {
   form_data_clean,
   form_data_ensure_keys,
   form_data_get_and_remove_id,
-} from "$lib/forms";
+} from "$lib/form";
 
 // These "actions" run serverside only, as they're located inside +page.server.ts
 export const actions = {

src/routes/data/seasondata/teams/+page.svelte

@@ -10,17 +10,6 @@
   <title>F11 - Teams</title>
 </svelte:head>
 
-<!-- TODO: Move this + the tablist into the +layout.svelte and select the correct tab dynamically -->
-<!--       This would also allow it to be animated? Maybe? -->
-<h1>Season Data</h1>
-
-<div role="tablist" class="tabs-boxed tabs">
-  <a href="teams" role="tab" class="tab tab-active">Teams</a>
-  <a href="drivers" role="tab" class="tab">Drivers</a>
-  <a href="races" role="tab" class="tab">Races</a>
-</div>
-<!-- TODO: End -->
-
 <div
   class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6"
 >

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

@@ -2,7 +2,7 @@ import {
   form_data_clean,
   form_data_ensure_keys,
   form_data_get_and_remove_id,
-} from "$lib/forms";
+} from "$lib/form";
 import { error, redirect } from "@sveltejs/kit";
 import type { Actions } from "./$types";