From df5bf3b78973c9736defb0764d1b080b32f45af3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 14 Apr 2025 11:45:16 +0200
Subject: [PATCH] fix: card contaner, disable card instead of removing it

---
 src/lib/components/cardContainer.svelte                     | 6 +++---
 src/lib/components/empty.svelte                             | 3 ++-
 .../(console)/organization-[organization]/+page.svelte      | 2 +-
 .../databases/database-[database]/grid.svelte               | 2 +-
 .../(console)/project-[project]/databases/grid.svelte       | 2 +-
 .../(console)/project-[project]/functions/+page.svelte      | 2 +-
 src/routes/(console)/project-[project]/storage/grid.svelte  | 2 +-
 7 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/cardContainer.svelte b/src/lib/components/cardContainer.svelte
index 7a8410ddb..ac5223a6d 100644
--- a/src/lib/components/cardContainer.svelte
+++ b/src/lib/components/cardContainer.svelte
@@ -7,7 +7,7 @@
     import { isCloud } from '$lib/system';
     import CardPlanLimit from './cardPlanLimit.svelte';
 
-    export let showEmpty = true;
+    export let disableEmpty = true;
     export let offset = 0;
     export let total = 0;
     export let event: string = null;
@@ -25,8 +25,8 @@
     {#if total > 3 ? total < limit + offset : total % 2 !== 0}
         {#if isCloud && serviceId && total >= planLimit}
             <CardPlanLimit {service} />
-        {:else if showEmpty}
-            <Empty on:click target={event}>
+        {:else}
+            <Empty on:click target={event} disabled={disableEmpty}>
                 <slot name="empty" />
             </Empty>
         {/if}
diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte
index 4f850c186..aebffa965 100644
--- a/src/lib/components/empty.svelte
+++ b/src/lib/components/empty.svelte
@@ -9,6 +9,7 @@
     export let href: string = null;
     export let allowCreate = true;
     export let description = 'Need a hand? Learn more in our documentation.';
+    export let disabled = false;
     export let src: string = null;
 
     function track() {
@@ -47,7 +48,7 @@
         </Empty>
     </Card.Base>
 {:else}
-    <Card.Button on:click on:click={track} aria-label="create">
+    <Card.Button on:click on:click={track} aria-label="create" {disabled}>
         <Layout.Stack justifyContent="center" alignItems="center" gap="m">
             <Avatar size="s"><Icon icon={IconPlus} size="s" /></Avatar>
             <Typography.Text variation="m-400" align="center"><slot /></Typography.Text>
diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte
index c91e02be7..a70c03ce1 100644
--- a/src/routes/(console)/organization-[organization]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/+page.svelte
@@ -175,7 +175,7 @@
 
     {#if data.projects.total}
         <CardContainer
-            showEmpty={$canWriteProjects}
+            disableEmpty={!$canWriteProjects}
             total={data.projects.total}
             offset={data.offset}
             on:click={handleCreateProject}>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/grid.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/grid.svelte
index 6457b1354..a3ea156e8 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/grid.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/grid.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <CardContainer
-    showEmpty={$canWriteCollections}
+    disableEmpty={!$canWriteCollections}
     total={data.collections.total}
     on:click={() => (showCreate = true)}
     event="collection">
diff --git a/src/routes/(console)/project-[project]/databases/grid.svelte b/src/routes/(console)/project-[project]/databases/grid.svelte
index 17a1b5435..2045fcde8 100644
--- a/src/routes/(console)/project-[project]/databases/grid.svelte
+++ b/src/routes/(console)/project-[project]/databases/grid.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <CardContainer
-    showEmpty={$canWriteDatabases}
+    disableEmpty={!$canWriteDatabases}
     total={data.databases.total}
     on:click={() => (showCreate = true)}
     event="database"
diff --git a/src/routes/(console)/project-[project]/functions/+page.svelte b/src/routes/(console)/project-[project]/functions/+page.svelte
index 1d64235f4..db6eb692d 100644
--- a/src/routes/(console)/project-[project]/functions/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/+page.svelte
@@ -88,7 +88,7 @@
     {#if data.functions.total}
         <CardContainer
             {offset}
-            showEmpty={$canWriteFunctions}
+            disableEmpty={!$canWriteFunctions}
             event="functions"
             total={data.functions.total}
             service="functions"
diff --git a/src/routes/(console)/project-[project]/storage/grid.svelte b/src/routes/(console)/project-[project]/storage/grid.svelte
index 461f49fad..6d6fffae5 100644
--- a/src/routes/(console)/project-[project]/storage/grid.svelte
+++ b/src/routes/(console)/project-[project]/storage/grid.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <CardContainer
-    showEmpty={$canWriteBuckets}
+    disableEmpty={!$canWriteBuckets}
     total={data.buckets.total}
     offset={data.offset}
     event="bucket"