Merge branch 'feat-profiles' into fix-studio-billing

Author: ItzNotABug

src/lib/components/billing/gradientBanner.svelte

@@ -5,8 +5,9 @@
     import { IconX } from '@appwrite.io/pink-icons-svelte';
     import { isTabletViewport } from '$lib/stores/viewport';
     import PinkBackground from '$lib/images/pink-background.svg';
-    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
     import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+    import { headerAlert } from '$lib/stores/headerAlert';
+    import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
 
     export let variant: 'gradient' | 'image' = 'gradient';
 
@@ -16,12 +17,13 @@
     const queryLayoutElements = () => ({
         header: document.querySelector<HTMLElement>('main > header'),
         sidebar: document.querySelector<HTMLElement>('main > div > nav'),
-        content: document.querySelector<HTMLElement>('main > div > section')
+        content: document.querySelector<HTMLElement>('main > div > section'),
+        contentDiv: document.querySelector<HTMLElement>('main > .content')
     });
 
     const setNavigationHeight = () => {
         const alertHeight = container?.getBoundingClientRect()?.height || 0;
-        const { header, sidebar, content } = queryLayoutElements();
+        const { header, sidebar, content, contentDiv } = queryLayoutElements();
         const headerHeight = header?.getBoundingClientRect().height || 0;
         const offset = alertHeight + (!$isTabletViewport && header ? headerHeight : 0);
 
@@ -34,12 +36,18 @@
             sidebar.style.height = `calc(100vh - ${offset}px)`;
 
             // for sidebar and sub-navigation!
-            bannerSpacing.set(`${alertHeight}px`);
+            headerAlert.setTopSpacing(alertHeight);
         }
 
         if (content) {
             content.style.paddingBlockStart = `${alertHeight}px`;
         }
+
+        if (contentDiv && resolvedProfile.id === ProfileMode.STUDIO) {
+            const headerHeight = header?.getBoundingClientRect().height ?? 48;
+            // push the content enough to show the borders of the content view!
+            contentDiv.style.marginBlockStart = `${alertHeight + headerHeight}px`;
+        }
     };
 
     onMount(setNavigationHeight);

src/lib/components/navbar.svelte

@@ -57,6 +57,7 @@
     import type { Models } from '@appwrite.io/console';
     import { organization } from '$lib/stores/organization';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { headerAlert } from '$lib/stores/headerAlert';
 
     let showSupport = false;
 
@@ -120,7 +121,7 @@
     beforeNavigate(() => (showAccountMenu = false));
 </script>
 
-<Navbar.Base --border-width-s="none">
+<Navbar.Base --border-width-s="none" style="top: {$headerAlert.top}px; z-index: 100;">
     <div slot="left" class="left">
         <div class="only-mobile-tablet">
             <button

src/lib/components/sidebar.svelte

@@ -37,12 +37,12 @@
     import { getSidebarState, isInDatabasesRoute, updateSidebarState } from '$lib/helpers/sidebar';
     import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
     import { Click, trackEvent } from '$lib/actions/analytics';
-    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
 
-    import type { HTMLAttributes } from 'svelte/elements';
+    import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { headerAlert } from '$lib/stores/headerAlert';
     import { noWidthTransition } from '$lib/stores/sidebar';
-    import { base } from '$app/paths';
     import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
 
     type Props = HTMLAttributes<HTMLElement> & {
@@ -127,7 +127,8 @@
         {...rest}
         bind:state
         on:resize={(event) => updateSidebarState(event.detail)}
-        resizable={resolvedProfile.id !== ProfileMode.STUDIO}>
+        resizable={resolvedProfile.id !== ProfileMode.STUDIO}
+        style="padding-block-start: {$headerAlert.top}px">
         <div slot="top">
             <div class="only-mobile-tablet top">
                 <div class="icons search-icon">
@@ -399,7 +400,7 @@
     </Sidebar.Base>
 </div>
 
-<div style:--banner-spacing={$bannerSpacing ? $bannerSpacing : undefined}>
+<div style:--banner-spacing={$headerAlert.top ? `${$headerAlert.top}px` : undefined}>
     {#if subNavigation}
         {@const SubNavigation = subNavigation}
         <div

src/lib/layout/headerAlert.svelte

@@ -1,9 +1,3 @@
-<script module lang="ts">
-    import { writable } from 'svelte/store';
-
-    export const bannerSpacing = writable<string | null>(null);
-</script>
-
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
     import { isTabletViewport } from '$lib/stores/viewport';
@@ -12,6 +6,8 @@
     import { Icon } from '@appwrite.io/pink-svelte';
     import { IconX } from '@appwrite.io/pink-icons-svelte';
     import { afterNavigate } from '$app/navigation';
+    import { headerAlert } from '$lib/stores/headerAlert';
+    import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
 
     export let title: string;
     export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
@@ -31,12 +27,13 @@
         const header: HTMLHeadingElement = document.querySelector('main > header');
         const sidebar: HTMLElement = document.querySelector('main > div > nav');
         const contentSection: HTMLElement = document.querySelector('main > div > section');
+        const contentDiv: HTMLElement = document.querySelector('main > .content');
 
         if (alertHeight) {
             // for sidebar and sub-navigation!
-            bannerSpacing.set(`${alertHeight}px`);
+            headerAlert.setTopSpacing(alertHeight);
         } else {
-            bannerSpacing.set(undefined);
+            headerAlert.setTopSpacing(0);
         }
 
         if (header) {
@@ -54,6 +51,12 @@
         if (contentSection) {
             contentSection.style.paddingBlockStart = `${alertHeight}px`;
         }
+
+        if (contentDiv && resolvedProfile.id === ProfileMode.STUDIO) {
+            const headerHeight = header?.getBoundingClientRect().height ?? 48;
+            // push the content enough to show the borders of the content view!
+            contentDiv.style.marginBlockStart = `${alertHeight + headerHeight}px`;
+        }
     }
 
     onMount(() => {

src/lib/stores/headerAlert.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import { writable } from 'svelte/store';
+import { writable, type Readable } from 'svelte/store';
 
 export type HeaderAlert = {
     id: string;
@@ -9,11 +9,21 @@ export type HeaderAlert = {
 };
 
 export type HeaderAlertStore = {
+    top: number;
     components: HeaderAlert[];
 };
 
-function createHeaderAlertStore() {
-    const { subscribe, update, set } = writable<HeaderAlertStore>({
+export type HeaderAlertStoreType = Readable<HeaderAlertStore> & {
+    set: (value: HeaderAlertStore) => void;
+    add: (component: HeaderAlert) => void;
+    get: () => HeaderAlert;
+    setTopSpacing: (value: number) => void;
+    getTopSpacing: () => number;
+};
+
+function createHeaderAlertStore(): HeaderAlertStoreType {
+    const { set, update, subscribe } = writable<HeaderAlertStore>({
+        top: 0,
         components: []
     });
 
@@ -48,14 +58,23 @@ function createHeaderAlertStore() {
             });
             return component as HeaderAlert;
         },
-        isShowing: (): boolean => {
-            let showing = false;
+        setTopSpacing: (value: number) => {
+            update((n) => {
+                return {
+                    ...n,
+                    top: value
+                };
+            });
+        },
+        getTopSpacing: (): number => {
+            let top = 0;
             update((n) => {
                 if (n.components.length === 0) return n;
-                showing = n.components.some((c) => c.show);
+                top = n.top;
                 return n;
             });
-            return showing;
+
+            return top;
         }
     };
 }

src/lib/studio/studio-widget.ts

@@ -12,7 +12,6 @@ import { headerAlert } from '$lib/stores/headerAlert';
 
 const COMPONENT_SELECTOR = 'imagine-web-components-wrapper[data-appwrite-studio]';
 const STYLE_ATTRIBUTE = 'data-appwrite-studio-style';
-const BLOCK_BANNER_OFFSET = 24;
 const BLOCK_START_BASE_OFFSET = 48;
 export const CDN_URL = env?.PUBLIC_IMAGINE_CDN_URL + '/web-components.js';
 export const CDN_CSS_URL = env?.PUBLIC_IMAGINE_CDN_URL + '/web-components.css';
@@ -196,7 +195,7 @@ function updatePosition() {
         return;
     }
 
-    const bannerOffset = headerAlert.isShowing() ? BLOCK_BANNER_OFFSET : 0;
+    const bannerOffset = headerAlert.getTopSpacing();
 
     const rect = anchorElement.getBoundingClientRect();
     const { offsetX, offsetY } = currentOptions;

src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte

@@ -3,7 +3,6 @@
     import { page } from '$app/state';
     import type { PageData } from './$types';
     import { showSubNavigation } from '$lib/stores/layout';
-    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
     import { showCreateTable, databaseSubNavigationItems } from './store';
 
     import {
@@ -28,6 +27,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { subNavigation } from '$lib/stores/database';
+    import { headerAlert } from '$lib/stores/headerAlert';
 
     const data = $derived(page.data) as PageData;
 
@@ -58,8 +58,8 @@
     // If banner open, adjust bottom position to account for banner container.
     // 70.5px is the size of the container of the banner holder and not just the banner!
     // Needed because things vary a bit much on how different browsers treat bottom layouts.
-    const bottomNavOffset = $derived($bannerSpacing ? '70.5px' : '0px');
-    const tableContentPadding = $derived($bannerSpacing ? '210px' : '140px');
+    const bottomNavOffset = $derived($headerAlert.top !== 0 ? '70.5px' : '0px');
+    const tableContentPadding = $derived($headerAlert.top !== 0 ? '210px' : '140px');
 
     async function loadTables() {
         tables = await sdk.forProject(region, project).tablesDB.listTables({