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-50",
+        "@aw-labs/ui": "0.0.0-50",
         "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/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,26 @@
                         class:icon-cheveron-down={!showDropdown} />
                 </button>
                 <svelte:fragment slot="list">
-                    <DropListItem icon="plus">New organisation</DropListItem>
-                    <DropListLink href="/console/$me">Your Account</DropListLink>
+                    {#each $organizationList.teams as org}
+                        <DropListLink
+                            href={`${base}/console/organization-${org.$id}`}
+                            on:click={() => {
+                                showDropdown = false;
+                            }}>{org.name}</DropListLink>
+                    {/each}
                 </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/shell.svelte

@@ -1,18 +1,26 @@
 <script lang="ts">
     import { navigating, page } from '$app/stores';
-    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
+    import { tabs, title, backButton, copyData, titleDropdown } from '$lib/stores/layout';
     import { Cover } from '.';
-    import { Copy } from '$lib/components';
+    import { Copy, DropList, DropListItem, DropListLink, AvatarGroup } from '$lib/components';
     import { Pill } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+    import {
+        organization,
+        memberList,
+        newOrgModal,
+        newMemberModal
+    } from '$lib/stores/organization';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { base } from '$app/paths';
 
     export let isOpen = false;
     export let showSideNavigation = false;
 
-    $: base = `/console/${$page.params.project}`;
-
     let tabsList: HTMLUListElement;
     let showLeft = false;
     let showRight = false;
+    let showDropdown = false;
 
     navigating.subscribe(() => {
         if (isOpen) isOpen = false;
@@ -32,6 +40,20 @@
             }
         }, 10);
     };
+    let avatars = [];
+    let avatarsTotal = 0;
+
+    memberList.subscribe((value) => {
+        if (value?.total > 0) {
+            avatarsTotal = value.total;
+            avatars = value.memberships.map((team) => {
+                return {
+                    name: team.userName,
+                    img: sdkForConsole.avatars.getInitials(team.userName, 80, 80).toString()
+                };
+            });
+        }
+    });
 
     const onScroll = () => {
         if (!tabsList) {
@@ -78,14 +100,65 @@
     <section class="main-content">
         <Cover>
             <svelte:fragment slot="header">
-                <h1 class="heading-level-4">
-                    {#if $backButton}
-                        <a class="back-button" href={$backButton} aria-label="page back">
-                            <span class="icon-cheveron-left" aria-hidden="true" />
-                        </a>
-                    {/if}
-                    <span class="text"> {$title}</span>
-                </h1>
+                {#if $backButton}
+                    <a class="back-button" href={$backButton} aria-label="page back">
+                        <span class="icon-cheveron-left" aria-hidden="true" />
+                    </a>
+                {/if}
+                {#if $titleDropdown?.length}
+                    <DropList
+                        bind:show={showDropdown}
+                        position="bottom"
+                        arrow={false}
+                        scrollable={true}>
+                        <button
+                            class="button is-text u-padding-inline-0"
+                            on:click={() => (showDropdown = !showDropdown)}>
+                            <h1 class="heading-level-4">
+                                <span class="text"> {$organization.name}</span>
+
+                                <span
+                                    class={`icon-cheveron-${showDropdown ? 'up' : 'down'}`}
+                                    aria-hidden="true" />
+                            </h1>
+                        </button>
+                        <svelte:fragment slot="list">
+                            {#each $titleDropdown as org}
+                                <DropListLink
+                                    href={`${base}/console/organization-${org.$id}`}
+                                    on:click={() => {
+                                        showDropdown = false;
+                                    }}>
+                                    {org.name}
+                                </DropListLink>
+                            {/each}
+                        </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>
+                                </ul>
+                            </section></svelte:fragment>
+                    </DropList>
+                    <div class="u-margin-inline-start-auto">
+                        <div class="u-flex u-gap-16">
+                            <AvatarGroup size={40} {avatars} total={avatarsTotal} />
+                            <Button secondary on:click={() => newMemberModal.set(true)}>
+                                <span class="icon-plus" aria-hidden="true" />
+                                <span class="text">Invite</span>
+                            </Button>
+                        </div>
+                    </div>
+                {:else}
+                    <h1 class="heading-level-4">
+                        <span class="text"> {$title}</span>
+                    </h1>
+                {/if}
                 {#if $copyData?.value}
                     <Copy value={$copyData.value}>
                         <Pill button>
@@ -122,9 +195,8 @@
                             <li class="tabs-item">
                                 <a
                                     class="tabs-button"
-                                    href={`${base}/${tab.href}`}
-                                    class:is-selected={$page.url.pathname ===
-                                        `${base}/${tab.href}`}>
+                                    href={`${tab.href}`}
+                                    class:is-selected={$page.url.pathname === `${tab.href}`}>
                                     <span class="text">{tab.title}</span>
                                 </a>
                             </li>