Merge pull request #2657 from appwrite/fix-pagination

Author: ItzNotABug

src/routes/(console)/organization-[organization]/+page.svelte

@@ -35,21 +35,47 @@
         IconReact,
         IconUnity
     } from '@appwrite.io/pink-icons-svelte';
+    import type { PageProps } from './$types';
     import { getPlatformInfo } from '$lib/helpers/platform';
     import CreateProjectCloud from './createProjectCloud.svelte';
     import { currentPlan, regions as regionsStore } from '$lib/stores/organization';
     import SelectProjectCloud from '$lib/components/billing/alerts/selectProjectCloud.svelte';
     import ArchiveProject from '$lib/components/archiveProject.svelte';
 
-    export let data;
+    let { data }: PageProps = $props();
 
-    let showCreate = false;
-    let addOrganization = false;
-    let showSelectProject = false;
-    let showCreateProjectCloud = false;
-    let freePlanAlertDismissed = false;
+    let showCreate = $state(false);
+    let addOrganization = $state(false);
+    let showSelectProject = $state(false);
+    let showCreateProjectCloud = $state(false);
+    let freePlanAlertDismissed = $state(false);
 
-    let searchQuery: SearchQuery;
+    let searchQuery: SearchQuery | null = $state(null);
+
+    const projectCreationDisabled = $derived.by(() => {
+        return (
+            (isCloud &&
+                getServiceLimit('projects', null, data.currentPlan) <= data.projects.total) ||
+            (isCloud && $readOnly && !GRACE_PERIOD_OVERRIDE) ||
+            !$canWriteProjects
+        );
+    });
+
+    const reachedProjectLimit = $derived.by(() => {
+        return (
+            isCloud && getServiceLimit('projects', null, data.currentPlan) <= data.projects.total
+        );
+    });
+
+    const projectsLimit = $derived.by(() => {
+        return getServiceLimit('projects', null, data.currentPlan);
+    });
+
+    const projectsToArchive = $derived.by(() => {
+        return isCloud
+            ? data.projects.projects.filter((project) => project.status === 'archived')
+            : [];
+    });
 
     function filterPlatforms(platforms: { name: string; icon: string }[]) {
         return platforms.filter(
@@ -82,28 +108,6 @@
         }
     }
 
-    $: projectCreationDisabled =
-        (isCloud && getServiceLimit('projects', null, data.currentPlan) <= data.projects.total) ||
-        (isCloud && $readOnly && !GRACE_PERIOD_OVERRIDE) ||
-        !$canWriteProjects;
-
-    $: reachedProjectLimit =
-        isCloud && getServiceLimit('projects', null, data.currentPlan) <= data.projects.total;
-    $: projectsLimit = getServiceLimit('projects', null, data.currentPlan);
-
-    $: $registerCommands([
-        {
-            label: 'Create project',
-            callback: () => {
-                showCreate = true;
-            },
-            keys: ['c'],
-            disabled: projectCreationDisabled,
-            group: 'projects',
-            icon: IconPlus
-        }
-    ]);
-
     function dismissFreePlanAlert() {
         freePlanAlertDismissed = true;
         const notificationId = `freePlanAlert_${data.organization.$id}`;
@@ -132,14 +136,24 @@
         return project.status === 'archived';
     }
 
-    $: projectsToArchive = isCloud
-        ? data.projects.projects.filter((project) => project.status === 'archived')
-        : [];
-
-    $: activeProjects = data.projects.projects.filter((project) => project.status !== 'archived');
     function clearSearch() {
         searchQuery?.clearInput();
     }
+
+    $effect(() => {
+        $registerCommands([
+            {
+                label: 'Create project',
+                callback: () => {
+                    showCreate = true;
+                },
+                keys: ['c'],
+                disabled: projectCreationDisabled,
+                group: 'projects',
+                icon: IconPlus
+            }
+        ]);
+    });
 </script>
 
 <SelectProjectCloud
@@ -221,13 +235,13 @@
         </Alert.Inline>
     {/if}
 
-    {#if activeProjects.length > 0}
+    {#if data.projects.total > 0}
         <CardContainer
             disableEmpty={!$canWriteProjects}
-            total={activeProjects.length}
+            total={data.projects.total}
             offset={data.offset}
             on:click={handleCreateProject}>
-            {#each activeProjects as project}
+            {#each data.projects.projects as project}
                 {@const platforms = filterPlatforms(
                     project.platforms.map((platform) => getPlatformInfo(platform.type))
                 )}
@@ -309,7 +323,7 @@
         name="Projects"
         limit={data.limit}
         offset={data.offset}
-        total={activeProjects.length} />
+        total={data.projects.total} />
 
     <!-- Archived Projects Section -->
     <ArchiveProject