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/lib/images/empty-light.svg

@@ -1 +1 @@
-<svg width="148" height="105" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><path d="M38.51 23.233a4.012 4.012 0 0 1 3.407-4.568l24.203-3.399a3.99 3.99 0 0 1 2.932.746l5.139 3.812a3.99 3.99 0 0 1 1.576 2.673l5.38 39.95a4.012 4.012 0 0 1-3.41 4.506l-28.033 3.995a3.988 3.988 0 0 1-4.508-3.355l-6.686-44.36Z" fill="#fff"/></g><path d="m43.643 23.837 23.556-3.523a3.988 3.988 0 0 1 4.549 3.445l1.943 15.343-27.278 3.888-2.77-19.153Z" fill="url(#b)"/><path d="m49.09 26.97 2.732-.358 1.666 12.379-2.73.358L49.09 26.97Z" fill="url(#c)"/><path d="m54.31 30.946 2.731-.358 1.06 7.835-2.73.359-1.06-7.836Z" fill="url(#d)"/><path d="m58.79 28.826 2.73-.359 1.148 9.366-2.73.358-1.149-9.365Z" fill="url(#e)"/><path d="m63.839 32.53 2.73-.358.688 4.966-2.73.359-.688-4.967Z" fill="url(#f)"/><path d="m68.395 22.448-.656-7.41 8.032 5.866-7.376 1.544Z" fill="#DFE1EE"/><path d="m76.953 83.571 30.488 6.946H35.578L.5 83.571h76.453Z" fill="url(#g)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M54.995 53.8c-.774-.608-1.715-.94-2.63-.928l-20.301.26c-2.172.029-3.526 1.927-2.886 4.046.536 1.775 2.302 3.089 4.121 3.065l20.3-.27c3.266-.044 4.162-4.004 1.396-6.173Zm53.289 9.991c-.051-2.388-2.297-4.507-4.743-4.475l-68.852.917c-2.417.032-3.917 2.153-3.19 4.51l6.938 22.468c.604 1.959 2.559 3.401 4.567 3.371l62.391-.934c1.975-.03 3.405-1.477 3.364-3.406l-.475-22.45Z" fill="#C4C6D7"/><path d="m76.92 24.531-2.066 27.784-6.884-.926-2.754-3.705 2.634-16.48a6 6 0 0 1 5.925-5.052h2.227l.918-1.62Z" fill="url(#h)" fill-opacity=".6"/><g filter="url(#i)"><path d="M71.955 27.705a3.975 3.975 0 0 1 4.343-3.602l28.228 2.718a4.024 4.024 0 0 1 3.616 4.369l-3.97 43.59a3.976 3.976 0 0 1-4.343 3.603l-28.228-2.718a4.025 4.025 0 0 1-3.616-4.369l3.97-43.59Z" fill="#fff"/></g><rect width="26.622" height="1.389" rx=".695" transform="rotate(4.056 -376.174 1105.033) skewX(.071)" fill="#E8E9F0"/><rect width="13.33" height="1.389" rx=".695" transform="rotate(4.056 -428.89 1100.632) skewX(.071)" fill="#E8E9F0"/><path d="m106.608 47.684-36.114-1.389-.459 4.4h36.573v-3.01Z" fill="url(#j)" fill-opacity=".5"/><path d="M60.826 41.236a1.83 1.83 0 0 0-1.46-.73H37.218c-1.014 0-1.836.83-1.836 1.853l3.672 46.306c0 1.023.822 1.852 1.836 1.852h67.01c1.014 0 1.836-.83 1.836-1.852l3.672-36.119a1.844 1.844 0 0 0-1.836-1.852H68.878a1.83 1.83 0 0 1-1.46-.73l-6.592-8.728Z" fill="url(#k)"/><ellipse cx="74.166" cy="85.655" rx="11.245" ry="11.345" fill="url(#l)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M74.395 81.997c.305 0 .551.249.551.556v2.778H77.7c.304 0 .55.249.55.556a.553.553 0 0 1-.55.555h-2.754v2.779a.553.553 0 0 1-.55.555.553.553 0 0 1-.551-.555v-2.779H71.09a.553.553 0 0 1-.551-.555c0-.307.247-.556.55-.556h2.755v-2.778c0-.307.246-.556.55-.556Z" fill="#FCFCFF"/><defs><linearGradient id="b" x1="44.102" y1="4.157" x2="36.884" y2="51.275" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#B4B6CA"/></linearGradient><linearGradient id="c" x1="50.491" y1="26.786" x2="52.116" y2="39.171" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="d" x1="55.7" y1="30.764" x2="56.729" y2="38.603" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="e" x1="60.125" y1="28.651" x2="61.353" y2="38.006" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="f" x1="65.227" y1="32.348" x2="65.88" y2="37.319" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="g" x1="90.689" y1="96.769" x2="24.23" y2="74.494" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset=".992" stop-color="#C4C6D7" stop-opacity=".1"/></linearGradient><linearGradient id="h" x1="65.216" y1="47.453" x2="69.652" y2="17.597" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#A3A8BD" stop-opacity="0"/></linearGradient><linearGradient id="j" x1="98.951" y1="-33.583" x2="84.242" y2="51.577" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#C4C6D7" stop-opacity=".37"/></linearGradient><linearGradient id="k" x1="4.171" y1="9.482" x2="114.21" y2="101.365" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#F2F2F8"/></linearGradient><linearGradient id="l" x1="58.561" y1="78.246" x2="77.573" y2="100.538" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#C4C6D7"/></linearGradient><filter id="a" x="15.465" y="4.227" width="74.718" height="87.761" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127Line truncated
+<svg width="215" height="124" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><path d="M51.026 21.99a4 4 0 0 1 3.403-4.564l34.588-4.814a4 4 0 0 1 2.921.739l7.84 5.765a4 4 0 0 1 1.595 2.684l7.504 55.25a4 4 0 0 1-3.404 4.498l-40.516 5.724a4 4 0 0 1-4.514-3.36L51.026 21.99Z" fill="#fff"/></g><path d="m58.15 24.141 33.152-4.913a4 4 0 0 1 4.554 3.45l2.793 21.857-36.765 5.194L58.15 24.14Z" fill="url(#b)"/><path d="m65.493 28.327 3.68-.479 2.246 16.538-3.68.479-2.246-16.538Z" fill="url(#c)"/><path d="m72.528 33.64 3.681-.48 1.428 10.468-3.68.479-1.429-10.468Z" fill="url(#d)"/><path d="m78.564 30.806 3.68-.479 1.549 12.512-3.681.48-1.548-12.513Z" fill="url(#e)"/><path d="m85.37 35.755 3.681-.479.927 6.636-3.68.479-.927-6.636Z" fill="url(#f)"/><path d="m91.512 22.285-.826-9.242a.3.3 0 0 1 .475-.27l9.742 7.052a.3.3 0 0 1-.115.536l-9.276 1.924Z" fill="#DFE1EE"/><path d="m103.045 103.943 41.094 9.28h-96.86L0 103.943h103.045Z" fill="url(#g)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M73.149 63.943c-.858-.667-1.896-1.03-2.905-1.018l-28.67.362c-2.41.03-3.91 2.14-3.19 4.492l1.546 5.055 11.613 37.133c.611 1.954 2.565 3.391 4.57 3.362l86.463-1.274c1.977-.029 3.405-1.477 3.36-3.407l-.746-32.656c-.055-2.387-2.303-4.506-4.749-4.474l-55.022.72c-1.01.014-2.048-.35-2.907-1.017l-9.363-7.278Z" fill="#C4C6D7"/><path d="m103 25.07-2.783 37.117-9.28-1.238L87.226 56l3.826-23.721a6 6 0 0 1 5.923-5.045h4.788L103 25.07Z" fill="url(#h)" fill-opacity=".6"/><g filter="url(#i)"><path d="M96.556 27.967a4 4 0 0 1 4.355-3.61l40.678 3.81a4 4 0 0 1 3.609 4.356l-5.715 61.019a4 4 0 0 1-4.355 3.61l-40.678-3.81a4 4 0 0 1-3.61-4.356l5.716-61.019Z" fill="#fff"/></g><rect x="103.418" y="31.546" width="35.88" height="1.856" rx=".928" transform="rotate(4.021 103.418 31.546)" fill="#E8E9F0"/><rect x="102.822" y="36.514" width="17.965" height="1.856" rx=".928" transform="rotate(4.021 102.822 36.514)" fill="#E8E9F0"/><path d="m143.015 56-49.014-2-.5 6.021h49.514v-4.02Z" fill="url(#j)" fill-opacity=".5"/><path d="M81.31 47.386a2.475 2.475 0 0 0-1.969-.974H49.49a2.475 2.475 0 0 0-2.475 2.474l4.95 61.862a2.475 2.475 0 0 0 2.474 2.475h90.318a2.475 2.475 0 0 0 2.475-2.475l4.949-48.252a2.475 2.475 0 0 0-2.475-2.475H92.163c-.773 0-1.5-.36-1.968-.974l-8.885-11.66Z" fill="url(#k)"/><circle cx="99.288" cy="106.727" fill="url(#l)" r="15.156"/><path fill-rule="evenodd" clip-rule="evenodd" d="M99.597 101.84c.41 0 .743.332.743.742v3.712h3.711a.743.743 0 1 1 0 1.485h-3.711v3.711a.743.743 0 0 1-1.485 0v-3.711h-3.712a.743.743 0 0 1 0-1.485h3.712v-3.712c0-.41.332-.742.742-.742Z" fill="#FCFCFF"/><defs><linearGradient id="b" x1="58.768" y1="-2.15" x2="49.206" y2="60.822" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#B4B6CA"/></linearGradient><linearGradient id="c" x1="67.379" y1="28.082" x2="69.533" y2="44.632" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="d" x1="74.401" y1="33.396" x2="75.764" y2="43.871" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="e" x1="80.365" y1="30.572" x2="81.992" y2="43.074" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="f" x1="87.242" y1="35.512" x2="88.106" y2="42.155" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="g" x1="121.559" y1="121.574" x2="32.145" y2="91.339" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset=".992" stop-color="#C4C6D7" stop-opacity=".1"/></linearGradient><linearGradient id="h" x1="87.226" y1="55.691" x2="93.103" y2="15.79" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#A3A8BD" stop-opacity="0"/></linearGradient><linearGradient id="j" x1="132.694" y1="-52.568" x2="113.208" y2="61.258" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#C4C6D7" stop-opacity=".37"/></linearGradient><linearGradient id="k" x1="4.949" y1="4.964" x2="152.181" y2="128.997" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#F2F2F8"/></linearGradient><linearGradient id="l" x1="78.255" y1="96.829" x2="103.619" y2="126.832" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#C4C6D7"/></linearGradient><filter id="a" x="27.98" y="1.573" width="89.934" height="106.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="-7" dy="5"/><feGaussianBlur stdDeviation="8"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0Line truncated

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);
         }
     };