feat: fixes from review

src/lib/components/emptyBucket.svelte

@@ -1,7 +1,5 @@
 <button on:click class="card is-border-dashed u-grid u-cross-center">
-    <div class="bucket">
-        <div class="u-flex u-flex-vertical u-cross-center">
-            <slot />
-        </div>
+    <div class="u-flex u-flex-vertical u-cross-center">
+        <slot />
     </div>
 </button>

src/lib/layout/shell.svelte

@@ -195,8 +195,8 @@
                             <li class="tabs-item">
                                 <a
                                     class="tabs-button"
-                                    href={`${tab.href}`}
-                                    class:is-selected={$page.url.pathname === `${tab.href}`}>
+                                    href={tab.href}
+                                    class:is-selected={$page.url.pathname === tab.href}>
                                     <span class="text">{tab.title}</span>
                                 </a>
                             </li>

src/lib/stores/organization.ts

@@ -4,6 +4,7 @@ import { writable } from 'svelte/store';
 import { browser } from '$app/env';
 import { get } from 'svelte/store';
 import { base } from '$app/paths';
+import { goto } from '$app/navigation';
 
 function createOrganizationList() {
     const { subscribe, set } = writable<Models.TeamList>(
@@ -98,17 +99,17 @@ if (browser) {
 export const redirectTo = async () => {
     let org = get(organization);
     if (org) {
-        return `${base}/console/organization-${org.$id}`;
+        await goto(`${base}/console/organization-${org.$id}`);
     } else {
         await organizationList.load();
         const orgList = get(organizationList);
         if (orgList?.total) {
             await organization.load(orgList.teams[0].$id);
             org = get(organization);
-            return `${base}/console/organization-${org.$id}`;
+            await goto(`${base}/console/organization-${org.$id}`);
         } else {
             newOrgModal.set(true);
-            return `${base}/console`;
+            await goto(`${base}/console`);
         }
     }
 };

src/routes/console/__layout.svelte

@@ -11,7 +11,7 @@
     } from '$lib/stores/organization';
     import Create from './_createOrganization.svelte';
     import { page } from '$app/stores';
-    import { afterNavigate, goto } from '$app/navigation';
+    import { afterNavigate } from '$app/navigation';
     import { onMount } from 'svelte';
 
     updateLayout({
@@ -21,15 +21,13 @@
 
     onMount(async () => {
         if ($page.url.pathname === '/console' && !$newOrgModal) {
-            const destination = await redirectTo();
-            await goto(destination);
+            await redirectTo();
         }
     });
 
     afterNavigate(async () => {
         if ($page.url.pathname === '/console' && !$newOrgModal) {
-            const destination = await redirectTo();
-            await goto(destination);
+            await redirectTo();
         }
     });
 </script>

src/routes/console/organization-[organization]/index.svelte

@@ -74,7 +74,9 @@
     {#if projects?.length}
         <ul
             class="grid-box common-section u-margin-block-start-32"
-            style={`--grid-gap:2rem; --grid-item-size:${projects.length > 3 ? '22rem' : '25rem'};`}>
+            style={`--grid-gap:1.5rem; --grid-item-size:${
+                projects.length > 3 ? '22rem' : '25rem'
+            };`}>
             {#each projects as project, index}
                 {#if index >= offset && index < limit + offset}
                     <Bucket href={`${base}/console/project-${project.$id}`}>
@@ -123,7 +125,7 @@
         </div>
     {:else}
         <Empty dashed centered>
-            <div class="bucket ">
+            <div class="bucket">
                 <div class="u-flex u-flex-vertical u-cross-center ">
                     <div class="common-section">
                         <Button secondary round on:click={() => (showCreate = true)}>

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

@@ -3,7 +3,15 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Avatar, Search, DropList, DropListItem } from '$lib/components';
+    import {
+        Empty,
+        Pagination,
+        Avatar,
+        Search,
+        DropList,
+        DropListItem,
+        DropListLink
+    } from '$lib/components';
     import Create from './_create.svelte';
     import Delete from './_deleteFile.svelte';
     import {
@@ -24,7 +32,6 @@
     import type { Models } from '@aw-labs/appwrite-console';
     import { uploader } from '$lib/stores/uploader';
     import { addNotification } from '$lib/stores/notifications';
-    import { goto } from '$app/navigation';
     import { pageLimit } from '$lib/stores/layout';
 
     let search = '';
@@ -150,14 +157,9 @@
                                         <span class="icon-dots-horizontal" aria-hidden="true" />
                                     </button>
                                     <svelte:fragment slot="list">
-                                        <DropListItem
-                                            icon="pencil"
-                                            on:click={(e) => {
-                                                e.preventDefault();
-                                                goto(
-                                                    `${base}/console/project-${project}/storage/bucket/${bucket}/file/${file.$id}`
-                                                );
-                                            }}>Update</DropListItem>
+                                        <DropListLink
+                                            href={`${base}/console/project-${project}/storage/bucket/${bucket}/file/${file.$id}`}
+                                            icon="pencil">Update</DropListLink>
                                         <DropListItem
                                             icon="trash"
                                             on:click={(e) => {