refactor: rework time and active to use shared navigator

app/src/routes/(time)/active/[courseid]/+layout.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import "../../../../app.postcss";
+  import TimeNavigator from "$lib/ui/navigators/TimeNavigator.svelte";
+
+  export let data: any;
+  let { supabase, session } = data;
+  $: ({ supabase, session } = data);
+</script>
+
+<TimeNavigator subTitle={"Students Online Now"} {supabase} {session}>
+  <slot />
+</TimeNavigator>

app/src/routes/(time)/active/[courseid]/+page.svelte

@@ -1,34 +1,12 @@
 <script lang="ts">
-  import "../../../../app.postcss";
-  import { AppShell } from "@skeletonlabs/skeleton";
-  import HomeFooter from "$lib/ui/navigators/footers/HomeFooter.svelte";
-  import LayoutMenu from "$lib/ui/navigators/menus/LayoutMenu.svelte";
-  import MainNavigator from "$lib/ui/navigators/MainNavigator.svelte";
-  import TutorsTitle from "$lib/ui/navigators/titles/TutorsTitle.svelte";
   import { studentsOnlineList } from "./stores";
   import StudentCard from "./StudentCard.svelte";
 </script>
 
-<AppShell class="h-screen">
-  <svelte:fragment slot="header">
-    <MainNavigator>
-      <svelte:fragment slot="lead">
-        <TutorsTitle title="Tutors Live Stream" subtitle="online now" />
-      </svelte:fragment>
-      <svelte:fragment slot="trail">
-        <span class="divider-vertical h-10 hidden lg:block" />
-        <LayoutMenu />
-      </svelte:fragment>
-    </MainNavigator>
-  </svelte:fragment>
-  <div class="bg-surface-100-800-token mx-auto mb-2 place-items-center overflow-hidden rounded-xl p-4">
-    <div class="flex flex-wrap justify-center">
-      {#each $studentsOnlineList as studentLo}
-        <StudentCard lo={studentLo} />
-      {/each}
-    </div>
+<div class="bg-surface-100-800-token mx-auto mb-2 place-items-center overflow-hidden rounded-xl p-4">
+  <div class="flex flex-wrap justify-center">
+    {#each $studentsOnlineList as studentLo}
+      <StudentCard lo={studentLo} />
+    {/each}
   </div>
-  <svelte:fragment slot="pageFooter">
-    <HomeFooter />
-  </svelte:fragment>
-</AppShell>
+</div>

app/src/routes/(time)/time/[courseid]/+layout.server.ts

@@ -0,0 +1,5 @@
+export const load = async ({ locals: { getSession } }) => {
+  return {
+    session: await getSession()
+  };
+};

app/src/routes/(time)/time/[courseid]/+layout.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import "../../../../app.postcss";
+  import TimeNavigator from "$lib/ui/navigators/TimeNavigator.svelte";
+
+  export let data: any;
+  let { supabase, session } = data;
+  $: ({ supabase, session } = data);
+</script>
+
+<TimeNavigator subTitle={"Tutors Time Data"} {supabase} {session}>
+  <slot />
+</TimeNavigator>

app/src/routes/(time)/time/[courseid]/+layout.ts

@@ -0,0 +1,19 @@
+import { createSupabaseLoadClient } from "@supabase/auth-helpers-sveltekit";
+import type { Database } from "../DatabaseDefinitions";
+
+export const load = async ({ fetch, data, depends }) => {
+  depends("supabase:auth");
+
+  const supabase = createSupabaseLoadClient<Database>({
+    supabaseUrl: import.meta.env.VITE_PUBLIC_SUPABASE_URL,
+    supabaseKey: import.meta.env.VITE_PUBLIC_SUPABASE_ANON_KEY,
+    event: { fetch },
+    serverSession: data.session
+  });
+
+  const {
+    data: { session }
+  } = await supabase.auth.getSession();
+
+  return { supabase, session };
+};

app/src/routes/(time)/time/[courseid]/[...userid]/+page.svelte → app/src/routes/(time)/time/[courseid]/+page.svelte

@@ -8,9 +8,8 @@
   import InstructorCalendarTime from "$lib/ui/time/InstructorCalendarTime.svelte";
   import CalendarTime from "$lib/ui/time/CalendarTime.svelte";
 
-  import type { PageData } from "./$types";
+  export let data: any;
 
-  export let data: PageData;
   const storeTab: Writable<string> = writable("Labs");
   let pinBuffer = "";
   let instructorMode = false;