feat: initial breadcrumbs

src/lib/layout/breadcrumbs.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { breadcrumbs as breadcrumbsStore, level, type Breadcrumb } from '$lib/stores/layout';
+
+    $: breadcrumbs = [...$breadcrumbsStore]
+        .map(([level, value]) => ({ level, value }))
+        .sort((a, b) => (a.level > b.level ? 1 : -1))
+        .filter((n) => n.level <= $level);
+
+    function truncate(
+        breadcrumbs: {
+            value: Breadcrumb;
+        }[]
+    ) {
+        /**
+         *  Maximum of 4 Breadcrumbs, truncated from the left.
+         */
+        if ($level > 4) {
+            breadcrumbs = [
+                {
+                    value: {
+                        href: null,
+                        title: '...'
+                    }
+                },
+                ...breadcrumbs.slice(-3)
+            ];
+        }
+
+        return breadcrumbs;
+    }
+
+    function buildHref(index: number) {
+        return breadcrumbs
+            .slice(0, index + 1)
+            .reduce((prev, next) => `${prev}/${next.value.href}`, '');
+    }
+</script>
+
+<nav class="breadcrumbs is-only-desktop" aria-label="breadcrumb">
+    <ol class="breadcrumbs-list">
+        {#each truncate(breadcrumbs) as breadcrumb, i}
+            <li class="breadcrumbs-item">
+                {#if breadcrumb.value.href}
+                    <a
+                        href={buildHref(breadcrumbs.length > 4 ? i + breadcrumbs.length - 4 : i)}
+                        title={breadcrumb.value.title}>
+                        {breadcrumb.value.title}
+                    </a>
+                {:else}
+                    <span>{breadcrumb.value.title}</span>
+                {/if}
+            </li>
+        {/each}
+    </ol>
+</nav>

src/lib/layout/header.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { Breadcrumbs } from '.';
     import { Avatar, DropList, DropListItem, DropListLink } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -16,13 +17,8 @@
 <a class="logo" href={`${base}/console`}>
     <img src={AppwriteLogo} width="132" height="34" alt="Appwrite" />
 </a>
-<nav class="breadcrumbs is-only-desktop" aria-label="breadcrumb">
-    <ol class="breadcrumbs-list">
-        <li class="breadcrumbs-item">
-            <a href="#/">Home</a>
-        </li>
-    </ol>
-</nav>
+
+<Breadcrumbs />
 
 <div class="main-header-end">
     <nav class="u-flex is-only-desktop">

src/lib/layout/index.ts

@@ -6,3 +6,4 @@ export { default as Navigation } from './navigation.svelte';
 export { default as Notification } from './notification.svelte';
 export { default as Notifications } from './notifications.svelte';
 export { default as Shell } from './shell.svelte';
+export { default as Breadcrumbs } from './breadcrumbs.svelte';

src/lib/stores/layout.ts

@@ -6,18 +6,18 @@ export type Tab = {
     title: string;
 };
 
-export const title = writable<string>('');
-export const backButton = writable<string>('');
-export const copyData = writable({
-    text: '',
-    value: ''
-});
-export const tabs = writable<Tab[]>([]);
+export type Breadcrumb = {
+    href: string;
+    title: string;
+    level?: number;
+};
 
-export function updateLayout(args: {
+export type updateLayoutArguments = {
     title: string;
+    level?: number;
     tabs?: Tab[];
     back?: string;
+    breadcrumbs?: Breadcrumb[] | Breadcrumb;
     copy?: {
         text: string;
         value: string;
@@ -26,19 +26,41 @@ export function updateLayout(args: {
         from: URL | null;
         to: URL;
     };
-}) {
+};
+
+export const level = writable<number>();
+export const title = writable<string>('');
+export const backButton = writable<string>('');
+export const tabs = writable<Tab[]>([]);
+export const breadcrumbs = writable<Map<number, Breadcrumb>>(new Map());
+export const copyData = writable({
+    text: '',
+    value: ''
+});
+
+export function updateLayout(args: updateLayoutArguments) {
     const projectId = get(project)?.$id;
     const base = projectId ? `/console/${projectId}` : `/console`;
 
     if (args?.navigate?.to) {
-        const oldTabs = get(tabs);
-        if (oldTabs.some((t) => `${base}/${t.href}` === args.navigate.to.pathname)) {
+        const previousTabs = get(tabs);
+        if (previousTabs.some((t) => `${base}/${t.href}` === args.navigate.to.pathname)) {
             return;
         }
     }
 
     title.set(args.title);
     backButton.set(args.back ?? null);
     copyData.set(args.copy ?? null);
+    level.set(args.level ?? null);
     tabs.set(args.tabs ?? []);
+
+    if (args.breadcrumbs) {
+        if (!Array.isArray(args.breadcrumbs)) {
+            args.breadcrumbs = [args.breadcrumbs];
+        }
+        for (const breadcrumb of args.breadcrumbs) {
+            breadcrumbs.update((n) => n.set(breadcrumb.level ?? args.level, breadcrumb));
+        }
+    }
 }

src/routes/console/[project]/__layout.svelte

@@ -4,7 +4,10 @@
     import { sdkForConsole, setProject } from '$lib/stores/sdk';
     import { collection } from './databases/database/[database]/collection/[collection]/store';
     import { UploadBox } from '$lib/components';
-    import { project } from './store';
+    import { organisation, project } from './store';
+    import { onMount } from 'svelte';
+    import { afterNavigate } from '$app/navigation';
+    import { updateLayout } from '$lib/stores/layout';
     import type { Models } from '@aw-labs/appwrite-console';
 
     type Attributes =
@@ -18,14 +21,7 @@
         | Models.AttributeUrl;
 
     $: projectId = $page.params.project;
-    $: {
-        if ($project?.$id !== projectId) {
-            setProject(projectId);
-            if (browser) {
-                project.load(projectId);
-            }
-        }
-    }
+
     if (browser) {
         sdkForConsole.client.subscribe<Attributes | Models.Index>('console', (message) => {
             if (message.events.includes('collections.*.attributes.*.create')) {
@@ -47,11 +43,44 @@
             }
         });
     }
+    onMount(handle);
+    afterNavigate(handle);
+
+    let loaded = false;
+    const path = 'console';
+    async function handle(event = null) {
+        if ($project?.$id !== projectId) {
+            setProject(projectId);
+            await project.load(projectId);
+        }
+        if ($organisation?.$id !== $project.teamId) {
+            await organisation.load($project.teamId);
+        }
+
+        updateLayout({
+            navigate: event,
+            title: $project.name,
+            level: 2,
+            breadcrumbs: [
+                {
+                    href: path,
+                    title: $organisation.name,
+                    level: 1
+                },
+                {
+                    href: $project.$id,
+                    title: $project.name
+                }
+            ]
+        });
+        loaded = true;
+    }
 </script>
 
-{#if $project}
+{#if loaded}
     <slot />
 {:else}
     loading
 {/if}
+
 <UploadBox />

src/routes/console/[project]/databases/__layout.svelte

@@ -11,7 +11,12 @@
     function handle(event = null) {
         updateLayout({
             navigate: event,
-            title: 'Databases'
+            title: 'Databases',
+            level: 3,
+            breadcrumbs: {
+                href: 'databases',
+                title: 'Databases'
+            }
         });
         loaded = true;
     }

src/routes/console/[project]/databases/database/[database]/__layout.svelte

@@ -22,6 +22,11 @@
         updateLayout({
             navigate: event,
             title: $database.name,
+            level: 4,
+            breadcrumbs: {
+                href: `database/${databaseId}`,
+                title: $database.name
+            },
             tabs: [
                 {
                     href: path,

src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte

@@ -22,6 +22,11 @@
         updateLayout({
             navigate: event,
             title: $collection.name,
+            level: 5,
+            breadcrumbs: {
+                href: `collection/${collectionId}`,
+                title: $collection.name
+            },
             back: `${base}/console/${$page.params.project}/database`,
             tabs: [
                 {

src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte

@@ -17,9 +17,15 @@
         if ($doc?.$id !== documentId) {
             await doc.load(collectionId, documentId);
         }
+
         updateLayout({
             navigate: event,
-            title: `Document - ${$doc.$id}`,
+            title: $doc.$id,
+            level: 6,
+            breadcrumbs: {
+                title: $doc.$id,
+                href: `document/${documentId}`
+            },
             tabs: [
                 {
                     href: path,

src/routes/console/[project]/functions/__layout.svelte

@@ -9,7 +9,12 @@
     function handle(event = null) {
         updateLayout({
             navigate: event,
-            title: 'Functions'
+            title: 'Functions',
+            level: 3,
+            breadcrumbs: {
+                href: 'functions',
+                title: 'Functions'
+            }
         });
     }
 </script>

src/routes/console/[project]/functions/function/[function]/__layout.svelte

@@ -19,6 +19,11 @@
         updateLayout({
             navigate: event,
             title: $func.name,
+            level: 4,
+            breadcrumbs: {
+                title: $func.name,
+                href: `function/${functionId}`
+            },
             tabs: [
                 {
                     href: path,

src/routes/console/[project]/keys/__layout.svelte

@@ -9,7 +9,12 @@
     function handle(event = null) {
         updateLayout({
             navigate: event,
-            title: 'API Keys'
+            title: 'API Keys',
+            level: 3,
+            breadcrumbs: {
+                href: 'keys',
+                title: 'API Keys'
+            }
         });
     }
 </script>

src/routes/console/[project]/settings/__layout.svelte

@@ -12,6 +12,11 @@
         updateLayout({
             navigate: event,
             title: 'Settings',
+            level: 3,
+            breadcrumbs: {
+                title: 'Settings',
+                href: 'settings'
+            },
             tabs: [
                 {
                     href: path,

src/routes/console/[project]/storage/__layout.svelte

@@ -12,6 +12,11 @@
         updateLayout({
             navigate: event,
             title: 'Storage',
+            level: 3,
+            breadcrumbs: {
+                title: 'Storage',
+                href: 'storage'
+            },
             tabs: [
                 {
                     href: path,

src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte

@@ -19,6 +19,11 @@
         updateLayout({
             navigate: event,
             title: $bucket.name,
+            level: 4,
+            breadcrumbs: {
+                title: $bucket.name,
+                href: `bucket/${bucketId}`
+            },
             copy: {
                 text: 'Bucket ID',
                 value: bucketId

src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte

@@ -19,6 +19,11 @@
 
         updateLayout({
             navigate: event,
+            level: 5,
+            breadcrumbs: {
+                href: `file/${fileId}`,
+                title: $file.name
+            },
             back: `${base}/console/${$page.params.project}/storage/bucket/${bucketId}`,
             title: $file.name,
             copy: {

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

@@ -127,7 +127,7 @@
                     </svelte:fragment>
                     <p>
                         If you want to assign permissions specific to this file, you will need to
-                        update your <a class="link" href="#"> Bucket Settings</a> to enable File Level
+                        update your <a class="link" href="#/"> Bucket Settings</a> to enable File Level
                         permissions.
                     </p>
                 </Alert>