Merge pull request #2664 from appwrite/feat-SER-360-quick-org-access-button

Author: ItzNotABug

src/routes/(console)/organization-[organization]/header.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { AvatarGroup, Tab, Tabs } from '$lib/components';
@@ -14,7 +15,12 @@
         readOnly,
         tierToPlan
     } from '$lib/stores/billing';
-    import { members, newMemberModal, type Organization } from '$lib/stores/organization';
+    import {
+        members,
+        newMemberModal,
+        newOrgModal,
+        type Organization
+    } from '$lib/stores/organization';
     import {
         canSeeBilling,
         canSeeProjects,
@@ -23,7 +29,7 @@
         isOwner
     } from '$lib/stores/roles';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
-    import { IconGithub, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { IconGithub, IconPlus, IconPlusSm } from '@appwrite.io/pink-icons-svelte';
     import { Badge, Icon, Layout, Tooltip, Typography } from '@appwrite.io/pink-svelte';
 
     let areMembersLimited: boolean = $state(false);
@@ -93,7 +99,7 @@
 {#if organization?.$id}
     <Cover>
         <svelte:fragment slot="header">
-            <span class="u-flex u-cross-center u-gap-8 u-min-width-0">
+            <Layout.Stack direction="row" alignItems="center" gap="m" class="u-min-width-0">
                 <Typography.Title color="--fgcolor-neutral-primary" size="xl" truncate>
                     {organization.name}
                 </Typography.Title>
@@ -114,7 +120,14 @@
                         </svelte:fragment>
                     </Tooltip>
                 {/if}
-            </span>
+                <Button
+                    secondary
+                    size="xs"
+                    on:click={() =>
+                        isCloud ? goto(`${base}/create-organization`) : newOrgModal.set(true)}>
+                    <Icon icon={IconPlusSm} size="m" />
+                </Button>
+            </Layout.Stack>
             <div class="u-margin-inline-start-auto">
                 <Layout.Stack direction="row" alignItems="center" gap="xl">
                     {#if $members.total > 1}