From 913db2a5252e26ad9f0c0537169ea2d702635dae Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Tue, 18 Aug 2026 13:58:26 +0100
Subject: [PATCH] fix(dashboard): repair certificates tab handler so main can
 build (#929)

* fix(dashboard): repair certificates tab handler so main can build

#854 left a duplicated, unclosed handleActiveTabChange that made the dashboard production build fail with a Svelte parse error. Keep the active tab in local state and sync the query string with replaceState so UnsavedChanges is not triggered.

Co-authored-by: best <best@classroomio.com>

* fix(dashboard): resync certificate tab when the course page is reused

SvelteKit reuses courses/[id]/certificates across course ids, so a one-time tab initializer could stick. Resync from page.url in $effect.pre without reading local tab state, since replaceState does not update page.url.

Co-authored-by: best <best@classroomio.com>

---------
---
 .../courses/[id]/certificates/+page.svelte    | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.svelte
index 29649f93..981e5e19 100644
--- a/apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import { goto } from '$app/navigation';
+  import { replaceState } from '$app/navigation';
   import { resolve } from '$app/paths';
   import { CertificatesPage } from '$features/course/pages';
   import * as Page from '@cio/ui/base/page';
@@ -18,9 +18,15 @@
 
   let errors = $state<Record<string, string>>({});
 
-  const certificateActiveTab = $derived.by(() => {
-    const tabInParam = page.url.searchParams.get('tab');
-    return tabInParam === 'settings' ? 'settings' : 'design';
+  function normalizeCertificateTab(tab: string | null) {
+    return tab === 'settings' ? 'settings' : 'design';
+  }
+
+  // replaceState does not update page.url; local state handles tab clicks, this resyncs on navigation.
+  let certificateActiveTab = $state(normalizeCertificateTab(page.url.searchParams.get('tab')));
+
+  $effect.pre(() => {
+    certificateActiveTab = normalizeCertificateTab(page.url.searchParams.get('tab'));
   });
 
   let hasUnsavedChanges = $state(false);
@@ -144,12 +150,17 @@
   }
 
   function handleActiveTabChange(tab: string) {
+    const nextTab = normalizeCertificateTab(tab);
+
+    if (nextTab === certificateActiveTab) {
+      return;
+    }
+
+    certificateActiveTab = nextTab;
+
     const url = new URL(page.url);
-    url.searchParams.set('tab', tab);
-  function handleActiveTabChange(tab: string) {
-    const url = new URL(page.url);
-    url.searchParams.set('tab', tab);
-    replaceState(url, {});
+    url.searchParams.set('tab', nextTab);
+    replaceState(resolve(`${url.pathname}${url.search}`, {}), page.state);
   }
 </script>