Improve empty state for collection indexes page

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte

@@ -211,6 +211,7 @@
 {#if $createAttributeArgs.showCreate}
     <CreateAttribute {...$createAttributeArgs} />
 {/if}
+
 {#if $showCreateIndex}
     <CreateIndex bind:showCreateIndex={$showCreateIndex} />
 {/if}

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte

@@ -38,7 +38,6 @@
     let showOverview = false;
     let showDelete = false;
     let showCreateAttribute = false;
-    let showCreateDropdown = false;
     let selectedAttribute: Option['name'] = null;
     let showFailed = false;
     let error = '';
@@ -153,18 +152,8 @@
                 on:click={() => (showCreateIndex = true)} />
         {/if}
     {:else}
-        <Empty
-            single
-            target="attribute"
-            allowCreate={$canWriteCollections}
-            on:click={() => (showCreateDropdown = true)}>
-            <div class="u-text-center">
-                <Typography.Title size="s">Create an attribute to get started.</Typography.Title>
-                <p class="body-text-2 u-bold u-margin-block-start-4">
-                    Need a hand? Learn more in our documentation.
-                </p>
-            </div>
-            <div class="u-flex u-gap-16 u-main-center">
+        <Empty single target="attribute">
+            <svelte:fragment slot="actions">
                 <Button
                     external
                     href="https://appwrite.io/docs/products/databases/collections#attributes"
@@ -173,19 +162,15 @@
                     ariaLabel={`create {target}`}>Documentation</Button>
                 {#if $canWriteCollections}
                     <CreateAttributeDropdown
+                        bind:selectedOption={selectedAttribute}
                         bind:showCreate={showCreateAttribute}
-                        bind:selectedOption={selectedAttribute}>
-                        <Button
-                            secondary
-                            event="create_attribute"
-                            on:click={() => {
-                                showCreateDropdown = !showCreateDropdown;
-                            }}>
+                        let:toggle>
+                        <Button secondary event="create_attribute" on:click={toggle}>
                             Create attribute
                         </Button>
                     </CreateAttributeDropdown>
                 {/if}
-            </div>
+            </svelte:fragment>
         </Empty>
     {/if}
 </Container>
@@ -197,6 +182,10 @@
     <Overview bind:showOverview {selectedIndex} />
 {/if}
 
-<CreateAttribute bind:showCreate={showCreateAttribute} bind:selectedOption={selectedAttribute} />
+{#if showCreateAttribute}
+    <CreateAttribute
+        bind:showCreate={showCreateAttribute}
+        bind:selectedOption={selectedAttribute} />
+{/if}
 
 <FailedModal bind:show={showFailed} title="Create index" header="Creation failed" {error} />