From 49f44aba47322072d6aeef3f05eaa997fddd41b7 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 27 Mar 2025 14:36:59 +0100
Subject: [PATCH] Improve empty state for collection indexes page

---
 .../collection-[collection]/+layout.svelte    |  1 +
 .../indexes/+page.svelte                      | 33 +++++++------------
 2 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index 8f491cb2b..6fdc41016 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/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}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 0436f12b9..c04b73365 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/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} />