Merge pull request #2342 from appwrite/fix-SER-361-Create-project-disabled-on-new-org

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

@@ -80,10 +80,13 @@
     }
 
     $: projectCreationDisabled =
-        (isCloud && getServiceLimit('projects') <= data.allProjectsCount) ||
+        (isCloud && getServiceLimit('projects') <= data.projects.total) ||
         (isCloud && $readOnly && !GRACE_PERIOD_OVERRIDE) ||
         !$canWriteProjects;
 
+    $: reachedProjectLimit = isCloud && getServiceLimit('projects') <= data.projects.total;
+    $: projectsLimit = getServiceLimit('projects');
+
     $: $registerCommands([
         {
             label: 'Create project',
@@ -129,13 +132,27 @@
         <SearchQuery bind:this={searchQuery} placeholder="Search by name or ID" />
 
         {#if $canWriteProjects}
-            <Button
-                on:click={handleCreateProject}
-                event="create_project"
-                disabled={projectCreationDisabled}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Create project
-            </Button>
+            {#if projectCreationDisabled && reachedProjectLimit}
+                <Tooltip placement="bottom">
+                    <div>
+                        <Button event="create_project" disabled>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Create project
+                        </Button>
+                    </div>
+                    <span slot="tooltip">
+                        You have reached your limit of {projectsLimit} projects.
+                    </span>
+                </Tooltip>
+            {:else}
+                <Button
+                    on:click={handleCreateProject}
+                    event="create_project"
+                    disabled={projectCreationDisabled}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create project
+                </Button>
+            {/if}
         {/if}
     </Layout.Stack>