From 55819b37afdb9eca18186153841765b3596fa1bd Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 10 Apr 2025 14:52:02 +0200
Subject: [PATCH 1/2] Update reactivity

---
 .../subNavigation.svelte                       | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
index a5af8aac6..52ff26534 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
@@ -14,17 +14,17 @@
     import { isTabletViewport } from '$lib/stores/viewport';
     import { BottomSheet } from '$lib/components';
 
-    $: data = page.data as PageData;
-    $: project = page.params.project;
-    $: databaseId = page.params.database;
-    $: collectionId = page.params.collection;
+    let data = $derived(page.data) as PageData;
+    let project = $derived(page.params.project);
+    let databaseId = $derived(page.params.database);
+    let collectionId = $derived(page.params.collection);
 
-    $: sortedCollections = data?.allCollections?.collections?.sort((a, b) =>
-        a.name.localeCompare(b.name)
+    const sortedCollections = $derived(() =>
+        data?.allCollections?.collections?.slice().sort((a, b) => a.name.localeCompare(b.name))
     );
 
-    $: selectedCollection = sortedCollections?.find(
-        (collection) => collection.$id === collectionId
+    const selectedCollection = $derived(() =>
+        sortedCollections()?.find((collection) => collection.$id === collectionId)
     );
 
     let openBottomSheet = false;
@@ -49,7 +49,7 @@
             <div class="collection-content">
                 {#if data?.allCollections?.total}
                     <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
-                        {#each sortedCollections as collection}
+                        {#each sortedCollections() as collection}
                             {@const href = `${base}/project-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
                             {@const isSelected = collectionId === collection.$id}
                             <li class:is-selected={isSelected}>

From 9ff0a88a7998abfe183eb28681f6517432bafa27 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 10 Apr 2025 15:00:26 +0200
Subject: [PATCH 2/2] use $derived.by

---
 .../collection-[collection]/subNavigation.svelte            | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
index 52ff26534..60fb843ac 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
@@ -19,11 +19,11 @@
     let databaseId = $derived(page.params.database);
     let collectionId = $derived(page.params.collection);
 
-    const sortedCollections = $derived(() =>
+    const sortedCollections = $derived.by(() =>
         data?.allCollections?.collections?.slice().sort((a, b) => a.name.localeCompare(b.name))
     );
 
-    const selectedCollection = $derived(() =>
+    const selectedCollection = $derived.by(() =>
         sortedCollections()?.find((collection) => collection.$id === collectionId)
     );
 
@@ -49,7 +49,7 @@
             <div class="collection-content">
                 {#if data?.allCollections?.total}
                     <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
-                        {#each sortedCollections() as collection}
+                        {#each sortedCollections as collection}
                             {@const href = `${base}/project-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
                             {@const isSelected = collectionId === collection.$id}
                             <li class:is-selected={isSelected}>