From 2a7fa7c8a4e77f27f20677c34366005628f9bb3c Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 1 May 2025 13:21:05 +0200
Subject: [PATCH] Fix: reactivity of collections header

---
 .../collection-[collection]/header.svelte     | 92 +++++++++++--------
 1 file changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/header.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
index e4b58dfd1..d56f8e5ef 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
@@ -8,46 +8,58 @@
     import { collection } from './store';
     import { isTabletViewport } from '$lib/stores/viewport';
 
-    $: projectId = page.params.project;
-    $: databaseId = page.params.database;
-    $: collectionId = page.params.collection;
-    $: path = `${base}/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`;
-    $: tabs = [
-        {
-            href: path,
-            title: 'Documents',
-            event: 'documents',
-            hasChildren: true
-        },
-        {
-            href: `${path}/attributes`,
-            title: 'Attributes',
-            event: 'attributes'
-        },
-        {
-            href: `${path}/indexes`,
-            title: 'Indexes',
-            event: 'indexes'
-        },
-        {
-            href: `${path}/activity`,
-            title: 'Activity',
-            event: 'activity',
-            hasChildren: true
-        },
-        {
-            href: `${path}/usage`,
-            title: 'Usage',
-            event: 'usage',
-            hasChildren: true
-        },
-        {
-            href: `${path}/settings`,
-            title: 'Settings',
-            event: 'settings',
-            disabled: !$canWriteCollections
-        }
-    ].filter((tab) => !tab.disabled);
+    let projectId = $derived.by(() => {
+        return page.params.project;
+    });
+    let databaseId = $derived.by(() => {
+        return page.params.database;
+    });
+    let collectionId = $derived.by(() => {
+        return page.params.collection;
+    });
+
+    let path = $derived.by(() => {
+        return `${base}/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`;
+    });
+
+    let tabs = $derived.by(() => {
+        return [
+            {
+                href: path,
+                title: 'Documents',
+                event: 'documents',
+                hasChildren: true
+            },
+            {
+                href: `${path}/attributes`,
+                title: 'Attributes',
+                event: 'attributes'
+            },
+            {
+                href: `${path}/indexes`,
+                title: 'Indexes',
+                event: 'indexes'
+            },
+            {
+                href: `${path}/activity`,
+                title: 'Activity',
+                event: 'activity',
+                hasChildren: true
+            },
+            {
+                href: `${path}/usage`,
+                title: 'Usage',
+                event: 'usage',
+                hasChildren: true
+            },
+            {
+                href: `${path}/settings`,
+                title: 'Settings',
+                event: 'settings',
+                disabled: !$canWriteCollections
+            }
+        ].filter((tab) => !tab.disabled);
+    });
 </script>
 
 <div style:margin-top={$isTabletViewport ? '48px' : 0}>