refactor: consolidate query logic and eliminate N+1 instructor loads

web/src/routes/+layout.svelte

@@ -2,44 +2,26 @@
 import "overlayscrollbars/overlayscrollbars.css";
 import "./layout.css";
 import { onMount } from "svelte";
-import { OverlayScrollbars } from "overlayscrollbars";
 import { Tooltip } from "bits-ui";
 import ThemeToggle from "$lib/components/ThemeToggle.svelte";
 import { themeStore } from "$lib/stores/theme.svelte";
+import { useOverlayScrollbars } from "$lib/composables/useOverlayScrollbars.svelte";
 
 let { children } = $props();
 
+useOverlayScrollbars(() => document.body, {
+  scrollbars: {
+    autoHide: "leave",
+    autoHideDelay: 800,
+  },
+});
+
 onMount(() => {
   themeStore.init();
 
-  // Enable theme transitions now that the page has rendered with the correct theme.
-  // Without this delay, the initial paint would animate from light to dark colors.
   requestAnimationFrame(() => {
     document.documentElement.classList.remove("no-transition");
   });
-
-  const osInstance = OverlayScrollbars(document.body, {
-    scrollbars: {
-      autoHide: "leave",
-      autoHideDelay: 800,
-      theme: themeStore.isDark ? "os-theme-dark" : "os-theme-light",
-    },
-  });
-
-  const unwatch = $effect.root(() => {
-    $effect(() => {
-      osInstance.options({
-        scrollbars: {
-          theme: themeStore.isDark ? "os-theme-dark" : "os-theme-light",
-        },
-      });
-    });
-  });
-
-  return () => {
-    unwatch();
-    osInstance.destroy();
-  };
 });
 </script>
 

web/src/routes/+page.svelte

@@ -12,6 +12,7 @@ import type { SortingState } from "@tanstack/table-core";
 import SearchFilters from "$lib/components/SearchFilters.svelte";
 import CourseTable from "$lib/components/CourseTable.svelte";
 import Pagination from "$lib/components/Pagination.svelte";
+import Footer from "$lib/components/Footer.svelte";
 
 let { data } = $props();
 
@@ -240,23 +241,6 @@ function handlePageChange(newOffset: number) {
     {/if}
 
     <!-- Footer -->
-    <div class="flex justify-center items-center gap-2 mt-auto pt-6 pb-4">
-      {#if __APP_VERSION__}
-        <span class="text-xs text-muted-foreground">v{__APP_VERSION__}</span>
-        <div class="w-px h-3 bg-muted-foreground opacity-30"></div>
-      {/if}
-      <a
-        href="https://github.com/Xevion/banner"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-xs text-muted-foreground no-underline hover:underline"
-      >
-        GitHub
-      </a>
-      <div class="w-px h-3 bg-muted-foreground opacity-30"></div>
-      <a href="/health" class="text-xs text-muted-foreground no-underline hover:underline">
-        Status
-      </a>
-    </div>
+    <Footer />
   </div>
 </div>

web/src/routes/health/+page.svelte

@@ -13,6 +13,7 @@ import {
   XCircle,
 } from "@lucide/svelte";
 import SimpleTooltip from "$lib/components/SimpleTooltip.svelte";
+import Footer from "$lib/components/Footer.svelte";
 import { type ServiceStatus, type ServiceInfo, type StatusResponse, client } from "$lib/api";
 import { relativeTime } from "$lib/time";
 
@@ -61,7 +62,6 @@ let statusState = $state({ mode: "loading" } as StatusState);
 let now = $state(new Date());
 
 const isLoading = $derived(statusState.mode === "loading");
-const hasResponse = $derived(statusState.mode === "response");
 const shouldShowSkeleton = $derived(statusState.mode === "loading" || statusState.mode === "error");
 
 const overallHealth: ServiceStatus | "Unreachable" = $derived(
@@ -304,20 +304,9 @@ onMount(() => {
   </div>
 
   <!-- Footer -->
-  <div class="flex justify-center items-center gap-2 mt-3">
-    {#if __APP_VERSION__}
-      <span class="text-xs text-muted-foreground">v{__APP_VERSION__}</span>
-      <div class="w-px h-3 bg-muted-foreground opacity-30"></div>
-    {/if}
-    <a
-      href={hasResponse && statusState.mode === "response" && statusState.status.commit
-        ? `https://github.com/Xevion/banner/commit/${statusState.status.commit}`
-        : "https://github.com/Xevion/banner"}
-      target="_blank"
-      rel="noopener noreferrer"
-      class="text-xs text-muted-foreground no-underline hover:underline"
-    >
-      GitHub
-    </a>
-  </div>
+  <Footer
+    commitHash={statusState.mode === "response" ? statusState.status.commit : undefined}
+    showStatusLink={false}
+    class="mt-3 pt-0 pb-0"
+  />
 </div>