Merge branch 'main' of github.com:appwrite/appwrite-console-poc into usability-fixes

src/lib/components/cardContainer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { Empty } from '$lib/components';
+    import { cardLimit } from '$lib/stores/layout';
+
+    export let offset = 0;
+    export let limit = $cardLimit;
+    export let total = 0;
+</script>
+
+<ul
+    class="grid-box common-section u-margin-block-start-32"
+    style={`--grid-gap:1.5rem; --grid-item-size:${total > 3 ? '22rem' : '25rem'};`}>
+    <slot />
+
+    {#if total < limit + offset && total % 2 !== 0 && total % 4 !== 0}
+        <Empty isButton on:click>
+            <slot name="empty" />
+        </Empty>
+    {/if}
+</ul>

src/lib/components/empty.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { app } from '$lib/stores/app';
+    import { Button } from '$lib/elements/forms';
     import EmptyLight from '$lib/images/empty-light.svg';
     import EmptyDark from '$lib/images/empty-dark.svg';
 
@@ -12,17 +13,48 @@
         on:click
         class="card u-grid u-cross-center u-width-full-line dashed"
         class:common-section={single}>
-        <div class="u-flex u-flex-vertical u-cross-center">
-            {#if $app.themeInUse === 'dark'}
-                <img src={EmptyDark} alt="create" aria-hidden="true" />
-            {:else}
-                <img src={EmptyLight} alt="create" aria-hidden="true" />
-            {/if}
-            <slot />
-        </div>
+        {#if single}
+            <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
+                {#if $app.themeInUse === 'dark'}
+                    <img src={EmptyDark} alt="create" aria-hidden="true" />
+                {:else}
+                    <img src={EmptyLight} alt="create" aria-hidden="true" />
+                {/if}
+                <slot />
+            </div>
+        {:else}
+            <div class="u-flex u-cross-center u-flex-vertical">
+                <div class="common-section">
+                    <Button secondary round>
+                        <i class="icon-plus" />
+                    </Button>
+                </div>
+                <div class="common-section">
+                    <slot />
+                </div>
+            </div>
+        {/if}
     </button>
 {:else}
     <article class="card u-grid u-cross-center u-width-full-line" class:common-section={single}>
-        <slot />
+        {#if single}
+            <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
+                {#if $app.themeInUse === 'dark'}
+                    <img src={EmptyDark} alt="create" aria-hidden="true" />
+                {:else}
+                    <img src={EmptyLight} alt="create" aria-hidden="true" />
+                {/if}
+                <slot />
+            </div>
+        {:else}
+            <div class="common-section">
+                <Button secondary round>
+                    <i class="icon-plus" />
+                </Button>
+            </div>
+            <div class="common-section">
+                <slot />
+            </div>
+        {/if}
     </article>
 {/if}

src/lib/components/emptySearch.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { app } from '$lib/stores/app';
+    import Light from '$lib/images/search-light.svg';
+    import Dark from '$lib/images/search-dark.svg';
+    import Pagination from './pagination.svelte';
+</script>
+
+<article class="card u-grid u-cross-center u-width-full-line common-section">
+    <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
+        {#if $app.themeInUse === 'dark'}
+            <img src={Dark} alt="create" aria-hidden="true" />
+        {:else}
+            <img src={Light} alt="create" aria-hidden="true" />
+        {/if}
+        <slot />
+    </div>
+</article>
+
+<div class="u-flex u-margin-block-start-32 u-main-space-between">
+    <p class="text">Total results: 0</p>
+    <Pagination limit={1} offset={0} sum={0} />
+</div>

src/lib/components/index.ts

@@ -2,6 +2,7 @@ export { default as Modal } from './modal.svelte';
 export { default as Pagination } from './pagination.svelte';
 export { default as Card } from './card.svelte';
 export { default as CardGrid } from './cardGrid.svelte';
+export { default as CardContainer } from './cardContainer.svelte';
 export { default as InnerModal } from './innerModal.svelte';
 export { default as Tile } from './tile.svelte';
 export { default as Tiles } from './tiles.svelte';
@@ -12,6 +13,7 @@ export { default as UploadBox } from './uploadBox.svelte';
 export { default as List } from './list.svelte';
 export { default as ListItem } from './listItem.svelte';
 export { default as Empty } from './empty.svelte';
+export { default as EmptySearch } from './emptySearch.svelte';
 export { default as DropList } from './dropList.svelte';
 export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';

src/routes/console/account/organizations/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { GridItem1, Empty, Pagination, AvatarGroup } from '$lib/components';
+    import { GridItem1, Empty, Pagination, AvatarGroup, CardContainer } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import CreateOrganization from '../../_createOrganization.svelte';
@@ -45,11 +45,10 @@
     </div>
 
     {#if $organizationList?.teams?.length}
-        <ul
-            class="grid-box common-section u-margin-block-start-32"
-            style={`--grid-gap:1.5rem; --grid-item-size:${
-                $organizationList.total > 3 ? '22rem' : '25rem'
-            };`}>
+        <CardContainer
+            total={$organizationList.total}
+            {offset}
+            on:click={() => (addOrganization = true)}>
             {#each $organizationList.teams as organization, index}
                 {@const avatarList = getMemberships(organization.$id)}
                 {#if index >= offset && index < $cardLimit + offset}
@@ -67,12 +66,10 @@
                     </GridItem1>
                 {/if}
             {/each}
-            {#if $organizationList?.total < $cardLimit + offset && ($organizationList?.total % 2 !== 0 || $organizationList?.total % 4 === 0)}
-                <Empty isButton on:click={() => (addOrganization = true)}>
-                    <p>Create a new organization</p>
-                </Empty>
-            {/if}
-        </ul>
+            <svelte:fragment slot="empty">
+                <p>Create a new organization</p>
+            </svelte:fragment>
+        </CardContainer>
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$organizationList?.total}</p>

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

@@ -13,6 +13,7 @@
     import CreateOrganization from '../_createOrganization.svelte';
     import CreateProject from './_createProject.svelte';
     import { cardLimit } from '$lib/stores/layout';
+    import CardContainer from '$lib/components/cardContainer.svelte';
 
     let projects: Models.Project[] = [];
     $: organizationId = $page.params.organization;
@@ -78,11 +79,7 @@
     </div>
 
     {#if $projectList?.total}
-        <ul
-            class="grid-box common-section u-margin-block-start-32"
-            style={`--grid-gap:1.5rem; --grid-item-size:${
-                projects.length > 3 ? '22rem' : '25rem'
-            };`}>
+        <CardContainer total={projects.length} {offset} on:click={() => (showCreate = true)}>
             {#each $projectList.projects as project, index}
                 {#if index >= offset && index < $cardLimit + offset}
                     <GridItem1 href={`${base}/console/project-${project.$id}`}>
@@ -112,12 +109,10 @@
                     </GridItem1>
                 {/if}
             {/each}
-            {#if projects.length < $cardLimit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
-                <Empty isButton on:click={() => (showCreate = true)}>
-                    <p>Create a new project</p>
-                </Empty>
-            {/if}
-        </ul>
+            <svelte:fragment slot="empty">
+                <p>Create a new project</p>
+            </svelte:fragment>
+        </CardContainer>
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {projects.length}</p>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { sdkForProject } from '$lib/stores/sdk';
-    import { Empty, Pagination, Avatar, Copy, Search } from '$lib/components';
+    import { Empty, EmptySearch, Pagination, Avatar, Copy, Search } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -35,7 +35,7 @@
 
     $: if (search) offset = 0;
     $: usersList.load(
-        [Query.limit($pageLimit), Query.offset(offset), Query.orderDesc('$internalId')],
+        [Query.limit($pageLimit), Query.offset(offset), Query.orderDesc('$createdAt')],
         search
     );
 </script>
@@ -129,21 +129,13 @@
             <Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
         </div>
     {:else if search}
-        <Empty single>
-            <div class="u-flex u-flex-vertical">
+        <EmptySearch>
+            <div class="u-text-center">
                 <b>Sorry, we couldn’t find ‘{search}’</b>
-                <div class="common-section">
-                    <p>There are no users that match your search.</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary on:click={() => (search = '')}>Clear Search</Button>
-                </div>
+                <p>There are no users that match your search.</p>
             </div>
-        </Empty>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$usersList.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
-        </div>
+            <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+        </EmptySearch>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
             <div

src/routes/console/project-[project]/authentication/teams/+page.svelte

@@ -11,7 +11,7 @@
         TableCell
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Avatar, Search } from '$lib/components';
+    import { Empty, EmptySearch, Pagination, Avatar, Search } from '$lib/components';
     import Create from '../_createTeam.svelte';
     import { goto } from '$app/navigation';
     import { event } from '$lib/actions/analytics';
@@ -34,7 +34,7 @@
 
     $: if (search) offset = 0;
     $: teamsList.load(
-        [Query.limit($pageLimit), Query.offset(offset), Query.orderDesc('$internalId')],
+        [Query.limit($pageLimit), Query.offset(offset), Query.orderDesc('$createdAt')],
         search
     );
 </script>
@@ -84,21 +84,13 @@
             <Pagination limit={$pageLimit} bind:offset sum={$teamsList.total} />
         </div>
     {:else if search}
-        <Empty single>
-            <div class="common-section ">
+        <EmptySearch>
+            <div class="u-text-center">
                 <b>Sorry, we couldn’t find ‘{search}’</b>
-            </div>
-            <div class="common-section">
                 <p>There are no teams that match your search.</p>
             </div>
-            <div class="common-section">
-                <Button secondary on:click={() => (search = '')}>Clear Search</Button>
-            </div>
-        </Empty>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$teamsList.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$teamsList.total} />
-        </div>
+            <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+        </EmptySearch>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
             <div

src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Pagination, Empty, Avatar, Search } from '$lib/components';
+    import { Pagination, Empty, EmptySearch, Avatar, Search } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -106,23 +106,13 @@
             <Pagination limit={$pageLimit} bind:offset sum={$memberships.total} />
         </div>
     {:else if search}
-        <Empty>
-            <div class="u-flex u-flex-vertical">
+        <EmptySearch>
+            <div class="u-text-center">
                 <b>Sorry, we couldn’t find ‘{search}’</b>
-                <div class="common-section">
-                    <p>There are no members that match your search.</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary on:click={() => (search = '')}>Clear Search</Button>
-                </div>
+                <p>There are no members that match your search.</p>
             </div>
-        </Empty>
-        <div
-            class="u-flex u-margin-block-start-32
- u-main-space-between">
-            <p class="text">Total results: {$memberships.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$memberships.total} />
-        </div>
+            <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+        </EmptySearch>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Add your first member to get started</p>

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

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, GridItem1 } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1, CardContainer } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -34,9 +34,7 @@
     </div>
 
     {#if $databaseList?.total}
-        <div
-            class="grid-box common-section"
-            style={` --grid-item-size:${$databaseList.total > 3 ? '22rem' : '25rem'};`}>
+        <CardContainer total={$databaseList.total} {offset} on:click={() => (showCreate = true)}>
             {#each $databaseList.databases as database}
                 <GridItem1
                     href={`${base}/console/project-${project}/databases/database/${database.$id}`}>
@@ -48,12 +46,10 @@
                     </Copy>
                 </GridItem1>
             {/each}
-            {#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= $cardLimit}
-                <Empty isButton on:click={() => (showCreate = true)}>
-                    <p>Create a new database</p>
-                </Empty>
-            {/if}
-        </div>
+            <svelte:fragment slot="empty">
+                <p>Create a new database</p>
+            </svelte:fragment>
+        </CardContainer>
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$databaseList.total}</p>

src/routes/console/project-[project]/databases/database/[database]/+page.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, GridItem1 } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1, CardContainer } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -12,7 +12,6 @@
     import { cardLimit } from '$lib/stores/layout';
 
     let showCreate = false;
-    let search = '';
     let offset = 0;
 
     const project = $page.params.project;
@@ -24,8 +23,7 @@
         );
     };
 
-    $: collections.load(databaseId, [Query.limit($cardLimit), Query.offset(offset)], search);
-    $: if (search) offset = 0;
+    $: collections.load(databaseId, [Query.limit($cardLimit), Query.offset(offset)]);
 </script>
 
 <Container>
@@ -39,9 +37,7 @@
     </div>
 
     {#if $collections?.total}
-        <div
-            class="grid-box common-section"
-            style={` --grid-item-size:${$collections.total > 3 ? '22rem' : '25rem'};`}>
+        <CardContainer total={$collections.total} {offset} on:click={() => (showCreate = true)}>
             {#each $collections.collections as collection}
                 <GridItem1
                     href={`${base}/console/project-${project}/databases/database/${databaseId}/collection/${collection.$id}`}>
@@ -62,33 +58,15 @@
                     </Copy>
                 </GridItem1>
             {/each}
-            {#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= $cardLimit}
-                <Empty isButton on:click={() => (showCreate = true)}>
-                    <p>Create a new collection</p>
-                </Empty>
-            {/if}
-        </div>
+            <svelte:fragment slot="empty">
+                <p>Create a new collection</p>
+            </svelte:fragment>
+        </CardContainer>
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$collections.total}</p>
             <Pagination limit={$cardLimit} bind:offset sum={$collections.total} />
         </div>
-    {:else if search}
-        <Empty>
-            <div class="u-flex u-flex-vertical">
-                <b>Sorry, we couldn’t find ‘{search}’</b>
-                <div class="common-section">
-                    <p>There are no collections that match your search.</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary on:click={() => (search = '')}>Clear Search</Button>
-                </div>
-            </div>
-        </Empty>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$collections?.total}</p>
-            <Pagination limit={$cardLimit} bind:offset sum={$collections?.total} />
-        </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Create your first collection to get started</p>

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

@@ -1,6 +1,13 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Empty, Pagination, Search, DropList, DropListItem } from '$lib/components';
+    import {
+        Empty,
+        EmptySearch,
+        Pagination,
+        Search,
+        DropList,
+        DropListItem
+    } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import {
@@ -140,21 +147,13 @@
             <Pagination limit={$pageLimit} bind:offset sum={$indexList?.total} />
         </div>
     {:else if search}
-        <Empty>
-            <div class="u-flex u-flex-vertical">
+        <EmptySearch>
+            <div class="u-text-center">
                 <b>Sorry, we couldn’t find ‘{search}’</b>
-                <div class="common-section">
-                    <p>There are no indexes that match your search.</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary on:click={() => (search = '')}>Clear Search</Button>
-                </div>
+                <p>There are no indexes that match your search.</p>
             </div>
-        </Empty>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$indexList?.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$indexList?.total} />
-        </div>
+            <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+        </EmptySearch>
     {:else if $collection.indexes?.length}
         <Empty isButton single on:click={() => (showCreateIndex = true)}>
             <p>Create your first attribute to get started</p>

src/routes/console/project-[project]/databases/database/[database]/store.ts

@@ -6,17 +6,13 @@ import { cachedStore } from '$lib/helpers/cache';
 export const collections = cachedStore<
     Models.CollectionList,
     {
-        load: (databaseId: string, queries: string[], search: string) => Promise<void>;
+        load: (databaseId: string, queries: string[]) => Promise<void>;
         total: (databaseId: string, id: string) => Promise<Record<string, unknown>>;
     }
 >('collections', function ({ set }) {
     return {
-        load: async (databaseId, queries, search) => {
-            const response = await sdkForProject.databases.listCollections(
-                databaseId,
-                queries,
-                search
-            );
+        load: async (databaseId, queries) => {
+            const response = await sdkForProject.databases.listCollections(databaseId, queries);
             set(response);
         },
         total: async (databaseId, id) => {

src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte

@@ -136,16 +136,14 @@
                 </p>
             </svelte:fragment>
         </CardGrid>
-        <Form>
-            <CardGrid>
-                <h6 class="heading-level-7">API Key Secret</h6>
-                <svelte:fragment slot="aside">
-                    <FormList>
-                        <Secret bind:value={secret} />
-                    </FormList>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
+
+        <CardGrid>
+            <h6 class="heading-level-7">API Key Secret</h6>
+            <svelte:fragment slot="aside">
+                <Secret bind:value={secret} />
+            </svelte:fragment>
+        </CardGrid>
+
         <Form on:submit={updateName}>
             <CardGrid>
                 <h6 class="heading-level-7">Update Name</h6>

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

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, GridItem1 } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1, CardContainer } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -13,7 +13,6 @@
     import { cardLimit } from '$lib/stores/layout';
 
     let showCreate = false;
-    let search = '';
     let offset = 0;
 
     const project = $page.params.project;
@@ -22,8 +21,7 @@
         await goto(`${base}/console/project-${project}/storage/bucket/${event.detail.$id}`);
     };
 
-    $: bucketList.load([Query.limit($cardLimit), Query.offset(offset)], search);
-    $: if (search) offset = 0;
+    $: bucketList.load([Query.limit($cardLimit), Query.offset(offset)]);
 </script>
 
 <Container>
@@ -36,11 +34,7 @@
     </div>
 
     {#if $bucketList?.total}
-        <ul
-            class="grid-box common-section u-margin-block-start-32"
-            style={`--grid-gap:1.5rem; --grid-item-size:${
-                $bucketList.total > 3 ? '22rem' : '25rem'
-            };`}>
+        <CardContainer total={$bucketList.total} {offset} on:click={() => (showCreate = true)}>
             {#each $bucketList.buckets as bucket}
                 <GridItem1 href={`${base}/console/project-${project}/storage/bucket/${bucket.$id}`}>
                     <svelte:fragment slot="eyebrow">XX Files</svelte:fragment>
@@ -81,33 +75,15 @@
                     </svelte:fragment>
                 </GridItem1>
             {/each}
-            {#if $bucketList?.total < $cardLimit + offset && ($bucketList?.total % 2 !== 0 || $bucketList?.total % 4 === 0)}
-                <Empty isButton on:click={() => (showCreate = true)}>
-                    <p>Add a new bucket</p>
-                </Empty>
-            {/if}
-        </ul>
+            <svelte:fragment slot="empty">
+                <p>Add a new bucket</p>
+            </svelte:fragment>
+        </CardContainer>
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$bucketList.total}</p>
             <Pagination limit={$cardLimit} bind:offset sum={$bucketList.total} />
         </div>
-    {:else if search}
-        <Empty>
-            <div class="u-flex u-flex-vertical">
-                <b>Sorry, we couldn’t find ‘{search}’</b>
-                <div class="common-section">
-                    <p>There are no buckets that match your search.</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary on:click={() => (search = '')}>Clear Search</Button>
-                </div>
-            </div>
-        </Empty>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$bucketList?.total}</p>
-            <Pagination limit={$cardLimit} bind:offset sum={$bucketList?.total} />
-        </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Add your first bucket to get started</p>

src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte

@@ -5,6 +5,7 @@
     import { Button } from '$lib/elements/forms';
     import {
         Empty,
+        EmptySearch,
         Pagination,
         Avatar,
         Search,
@@ -179,21 +180,13 @@
             <Pagination limit={$pageLimit} bind:offset sum={$files.total} />
         </div>
     {:else if search}
-        <Empty>
-            <div class="u-flex u-flex-vertical">
+        <EmptySearch>
+            <div class="u-text-center">
                 <b>Sorry, we couldn’t find ‘{search}’</b>
-                <div class="common-section">
-                    <p>There are no files that match your search.</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary on:click={() => (search = '')}>Clear Search</Button>
-                </div>
+                <p>There are no files that match your search.</p>
             </div>
-        </Empty>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$files?.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$files?.total} />
-        </div>
+            <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+        </EmptySearch>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Upload some files to get started</p>

src/routes/console/project-[project]/storage/store.ts

@@ -5,12 +5,12 @@ import { cachedStore } from '$lib/helpers/cache';
 export const bucketList = cachedStore<
     Models.BucketList,
     {
-        load: (queries: string[], search: string) => Promise<void>;
+        load: (queries: string[]) => Promise<void>;
     }
 >('bucketList', function ({ set }) {
     return {
-        load: async (queries, search) => {
-            const response = await sdkForProject.storage.listBuckets(queries, search);
+        load: async (queries) => {
+            const response = await sdkForProject.storage.listBuckets(queries);
             set(response);
         }
     };