Feat: organization screens

package.json

@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-44",
-        "@aw-labs/ui": "0.0.0-44",
+        "@aw-labs/icons": "0.0.0-51",
+        "@aw-labs/ui": "0.0.0-51",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7",
         "web-vitals": "^2.1.4"

src/lib/components/avatarGroup.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import Avatar from './avatar.svelte';
+    export let avatars = [];
+    export let total = avatars.length;
+    export let size = 40;
+</script>
+
+<ul class="avatars-group">
+    {#each avatars as av, index}
+        {#if index < 2}
+            <li class="avatars-group-item">
+                <Avatar {size} src={av.img} name={av.name} />
+            </li>
+        {/if}
+    {/each}
+    {#if total > 2}
+        <li class="avatars-group-item">
+            <div class="avatar">+{total - 2}</div>
+        </li>
+    {/if}
+</ul>

src/lib/components/dropList.svelte

@@ -6,6 +6,7 @@
     export let horizontal: 'left' | 'right' = 'right';
     export let arrowPosition: 'start' | 'center' | 'end' = 'start';
     export let arrow = true;
+    export let scrollable = false;
     let parentElement: HTMLDivElement;
 
     const onBlur = (event: MouseEvent) => {
@@ -31,7 +32,10 @@
             class:is-block-end={position === 'bottom'}
             class:is-inline-end={horizontal === 'left'}
             transition:slide={{ duration: 100 }}>
-            <section class="drop-section">
+            <section
+                class:u-overflow-y-auto={scrollable}
+                class:u-max-height-200={scrollable}
+                class="drop-section ">
                 <ul class="drop-list">
                     <slot name="list" />
                 </ul>

src/lib/components/dropListLink.svelte

@@ -3,7 +3,7 @@
     export let icon: string = null;
 </script>
 
-<li class="drop-list-item">
+<li class="drop-list-item" on:click>
     <a {href} class="drop-button">
         <span class="text"><slot /></span>
         {#if icon}

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/components/index.ts

@@ -19,6 +19,7 @@ export { default as Collapsible } from './collapsible.svelte';
 export { default as DropTabs } from './dropTabs.svelte';
 export { default as DropTabsItem } from './dropTabsItem.svelte';
 export { default as Avatar } from './avatar.svelte';
+export { default as AvatarGroup } from './avatarGroup.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';

src/lib/components/modal.svelte

@@ -8,6 +8,7 @@
     export let size: 'small' | 'big' = null;
     export let warning = false;
     export let error: string = null;
+    export let closable = true;
 
     const dispatch = createEventDispatcher();
     const transitionFly: FlyParams = {
@@ -31,8 +32,10 @@
         }
     };
     const closeModal = () => {
-        show = false;
-        dispatch('close');
+        if (closable) {
+            show = false;
+            dispatch('close');
+        }
     };
 
     /**
@@ -65,14 +68,16 @@
                 <h4 class="heading-level-5">
                     <slot name="header" />
                 </h4>
-                <button
-                    type="button"
-                    class="x-button"
-                    aria-label="Close Modal"
-                    title="Close Modal"
-                    on:click={closeModal}>
-                    <span class="icon-x" aria-hidden="true" />
-                </button>
+                {#if closable}
+                    <button
+                        type="button"
+                        class="x-button"
+                        aria-label="Close Modal"
+                        title="Close Modal"
+                        on:click={closeModal}>
+                        <span class="icon-x" aria-hidden="true" />
+                    </button>
+                {/if}
             </header>
             <div class="modal-content">
                 {#if error}

src/lib/layout/header.svelte

@@ -1,20 +1,30 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { onMount } from 'svelte';
     import { Breadcrumbs } from '.';
     import { Avatar, DropList, DropListItem, DropListLink } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
-    import { project } from '../../routes/console/[project]/store';
     import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
     import LightMode from '$lib/images/mode/light-mode.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import SystemMode from '$lib/images/mode/system-mode.svg';
+    import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
 
     let showDropdown = false;
+
+    onMount(async () => {
+        await organizationList.load();
+        if (!$organization) {
+            await organization.load($organizationList.teams[0].$id);
+        }
+    });
 </script>
 
-<a class="logo" href={`${base}/console`}>
+<a
+    class="logo"
+    href={$organization ? `${base}/console/organization-${$organization.$id}` : `${base}/console`}>
     <img src={AppwriteLogo} width="132" height="34" alt="Appwrite" />
 </a>
 
@@ -33,16 +43,21 @@
     </nav>
     <nav class="user-profile">
         {#if $user}
-            <DropList bind:show={showDropdown} position="bottom" horizontal="left" arrow={false}>
+            <DropList
+                bind:show={showDropdown}
+                position="bottom"
+                horizontal="left"
+                arrow={false}
+                scrollable={true}>
                 <button class="user-profile-button" on:click={() => (showDropdown = !showDropdown)}>
                     <Avatar
                         size={40}
                         name={$user.name}
                         src={sdkForConsole.avatars.getInitials($user.name, 40, 40).toString()} />
                     <span class="user-profile-info is-only-desktop">
                         <span class="name">{$user.name}</span>
-                        {#if $project}
-                            <span class="title">{$project.name}</span>
+                        {#if $organization}
+                            <span class="title">{$organization.name}</span>
                         {/if}
                     </span>
                     <span
@@ -52,10 +67,28 @@
                         class:icon-cheveron-down={!showDropdown} />
                 </button>
                 <svelte:fragment slot="list">
-                    <DropListItem icon="plus">New organisation</DropListItem>
-                    <DropListLink href="/console/$me">Your Account</DropListLink>
+                    {#if $organizationList?.total}
+                        {#each $organizationList.teams as org}
+                            <DropListLink
+                                href={`${base}/console/organization-${org.$id}`}
+                                on:click={() => {
+                                    showDropdown = false;
+                                }}>{org.name}</DropListLink>
+                        {/each}
+                    {/if}
                 </svelte:fragment>
                 <svelte:fragment slot="other">
+                    <section class="drop-section">
+                        <ul class="drop-list">
+                            <DropListItem
+                                icon="plus"
+                                on:click={() => {
+                                    showDropdown = false;
+                                    newOrgModal.set(true);
+                                }}>New organization</DropListItem>
+                            <DropListLink href="/console/$me">Your Account</DropListLink>
+                        </ul>
+                    </section>
                     <section class="drop-section">
                         <ul class="u-flex u-gap-12">
                             <li>

src/lib/layout/navigation.svelte

@@ -3,7 +3,7 @@
     import { page } from '$app/stores';
 
     $: project = $page.params.project;
-    $: path = `${base}/console/${project}`;
+    $: path = `${base}/console/project-${project}`;
 </script>
 
 <div class="side-nav">