feat: create card plan limit, add tooltip to disabled button for plan limit

src/lib/components/cardContainer.svelte

@@ -3,10 +3,13 @@
     import { Empty } from '$lib/components';
     import { CARD_LIMIT } from '$lib/constants';
     import { preferences } from '$lib/stores/preferences';
+    import { isCloud } from '$lib/system';
+    import CardPlanLimit from './cardPlanLimit.svelte';
 
     export let offset = 0;
     export let total = 0;
     export let event: string = null;
+    export let service: string = '';
 
     $: limit = preferences.get($page.route)?.limit ?? CARD_LIMIT;
 </script>
@@ -18,8 +21,12 @@
     <slot />
 
     {#if total > 3 ? total < limit + offset : total % 2 !== 0}
-        <Empty on:click target={event}>
-            <slot name="empty" />
-        </Empty>
+        {#if isCloud && !!service}
+            <CardPlanLimit {service} />
+        {:else}
+            <Empty on:click target={event}>
+                <slot name="empty" />
+            </Empty>
+        {/if}
     {/if}
 </ul>

src/lib/components/cardPlanLimit.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { wizard } from '$lib/stores/wizard';
+    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+
+    export let service: string = '';
+</script>
+
+<article class="card u-grid u-cross-center u-width-full-line">
+    <div class="u-flex u-flex-vertical u-gap-24 u-main-center u-cross-center">
+        <p class="text u-text-center">Upgrade your plan add more {service}</p>
+        <Button secondary on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
+            Change plan
+        </Button>
+    </div>
+</article>

src/lib/components/index.ts

@@ -57,3 +57,4 @@ export { default as ProgressBar } from './progressBar.svelte';
 export { default as ProgressBarBig } from './progressBarBig.svelte';
 export { default as ProjectUsage } from './projectUsage.svelte';
 export { default as CreditCardInfo } from './creditCardInfo.svelte';
+export { default as CardPlanLimit } from './cardPlanLimit.svelte';

src/lib/layout/containerHeader.svelte

@@ -65,13 +65,19 @@
     </div>
 
     <slot>
-        <Button
-            on:click={buttonMethod}
-            event={buttonEvent}
-            disabled={limit !== 'unlimited' && total >= limit}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">{buttonText}</span>
-        </Button>
+        <div
+            use:tooltip={{
+                content: `Upgrade to add more ${title.toLocaleLowerCase()}`,
+                disabled: total < limit || limit === 'unlimited'
+            }}>
+            <Button
+                on:click={buttonMethod}
+                event={buttonEvent}
+                disabled={limit !== 'unlimited' && total >= limit}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">{buttonText}</span>
+            </Button>
+        </div>
     </slot>
 </div>
 

src/routes/console/project-[project]/settings/webhooks/+page.svelte

@@ -50,7 +50,7 @@
                 <TableCellHead width={180}>POST URL</TableCellHead>
                 <TableCellHead width={80}>Events</TableCellHead>
             </TableHeader>
-            <TableBody>
+            <TableBody service="webhooks">
                 {#each data.webhooks.webhooks as webhook}
                     <TableRowLink
                         href={`${base}/console/project-${projectId}/settings/webhooks/${webhook.$id}`}>