Merge pull request #2326 from appwrite/table-actions-on-subnav

ItzNotABug · web-flow · commit 01e11f5e4477 · 2025-09-05T12:55:13.000+05:30
diff --git a/src/lib/components/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte
@@ -25,6 +25,7 @@
     import { type Models, Query } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
     import { page } from '$app/state';
+    import { BillingPlan } from '$lib/constants';
 
     type Organization = {
         name: string;
@@ -226,6 +227,9 @@
     $: if (shouldReloadProjects) {
         projectsBottomSheet = createProjectsBottomSheet(selectedOrg);
     }
+
+    let badgeType: 'success' | undefined;
+    $: badgeType = $currentPlan && $currentPlan.name !== BillingPlan.FREE ? 'success' : undefined;
 </script>
 
 <svelte:window on:resize={onResize} />
@@ -240,10 +244,13 @@
                 use:melt={$triggerOrganizations}
                 aria-label="Open organizations tab">
                 <span class="orgName">{selectedOrg?.name ?? 'Organization'}</span>
-                <span class="not-mobile"
+                <span class="not-mobile" style="padding-inline-start: 2px"
                     >{#if correctPlanName}<Badge
+                            size="xs"
                             variant="secondary"
-                            content={correctPlanName} />{/if}</span>
+                            type={badgeType}
+                            content={correctPlanName} />
+                    {/if}</span>
                 <Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
             </button>
         {:else}
@@ -257,7 +264,11 @@
                 <span class="orgName" class:noProjects={!currentProject}
                     >{selectedOrg?.name ?? 'Organization'}</span>
                 <span class="not-mobile"
-                    ><Badge variant="secondary" content={correctPlanName ?? ''} /></span>
+                    ><Badge
+                        size="xs"
+                        variant="secondary"
+                        type={badgeType}
+                        content={correctPlanName ?? ''} /></span>
                 <Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
             </button>
         {/if}
@@ -476,6 +487,7 @@
         border-radius: var(--border-radius-S, 8px);
         background: var(--overlay-neutral-hover, rgba(25, 25, 28, 0.03));
     }
+
     .trigger {
         display: inline-flex;
         align-items: center;
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
@@ -591,6 +591,7 @@
         @media (min-width: 1024px) {
             width: 166px;
         }
+
         .info {
             position: absolute;
             display: flex;
diff --git a/src/lib/layout/animatedTitle.svelte b/src/lib/layout/animatedTitle.svelte
@@ -3,24 +3,32 @@
     import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
     import { Button, Icon, Layout } from '@appwrite.io/pink-svelte';
     import type { Snippet } from 'svelte';
+    import type { HTMLAttributes } from 'svelte/elements';
 
     let {
         href = null,
         collapsed = false,
-        children
+        children,
+        ...restProps
     }: {
         href?: string | null;
         collapsed?: boolean;
         children: Snippet;
-    } = $props();
+    } & HTMLAttributes<HTMLDivElement> = $props();
 
     const buttonSize = $derived(collapsed ? 'xs' : 's');
     const currentLineHeight = $derived(collapsed ? '130%' : '140%');
     const currentLetterSpacing = $derived(collapsed ? '0' : '-0.144px');
-    const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxxl)');
+    const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxl)');
 </script>
 
-<Layout.Stack justifyContent="center" alignItems="center" direction="row" gap="xs" inline>
+<Layout.Stack
+    inline
+    gap="xs"
+    direction="row"
+    alignItems="center"
+    justifyContent="center"
+    {...restProps}>
     {#if href && !$isSmallViewport}
         <span style:position="relative">
             <Button.Anchor size={buttonSize} icon variant="text" {href} aria-label="page back">
diff --git a/src/lib/layout/coverTitle.svelte b/src/lib/layout/coverTitle.svelte
@@ -3,17 +3,24 @@
     import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
     import { Typography, Button, Icon, Layout } from '@appwrite.io/pink-svelte';
 
-    export let href: string = null;
+    export let href: string | null = null;
 </script>
 
-<Layout.Stack justifyContent="center" alignItems="center" direction="row" gap="xs" inline>
+<Layout.Stack
+    inline
+    gap="xs"
+    direction="row"
+    alignItems="center"
+    justifyContent="center"
+    {...$$restProps}>
     {#if href}
         <span style:position="relative">
             <Button.Anchor size="s" icon variant="text" {href} aria-label="page back">
                 <Icon icon={IconChevronLeft} />
             </Button.Anchor>
         </span>
     {/if}
+
     <Typography.Title
         truncate
         color="--fgcolor-neutral-primary"
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
@@ -40,9 +40,12 @@
 
 <Cover databasesMainScreen>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/databases`}>
+        <CoverTitle
+            style="margin-inline-start: -2.5rem;"
+            href={`${base}/project-${page.params.region}-${projectId}/databases`}>
             {$database.name}
         </CoverTitle>
+
         <Id value={$database.$id}>{$database.$id}</Id>
     </svelte:fragment>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/store.ts
@@ -2,6 +2,7 @@ import { page } from '$app/stores';
 import type { Column } from '$lib/helpers/types';
 import type { Models } from '@appwrite.io/console';
 import { derived, writable } from 'svelte/store';
+import { IconChartBar, IconCloudUpload, IconCog } from '@appwrite.io/pink-icons-svelte';
 
 export const database = derived(page, ($page) => $page.data.database as Models.Database);
 export const showCreate = writable(false);
@@ -29,3 +30,9 @@ export const customRetainingOptions = [
     { label: 'Weeks', value: 7, max: 4 },
     { label: 'Months', value: 30, max: 12 }
 ];
+
+export const databaseSubNavigationItems = [
+    { title: 'Backups', href: 'backups', icon: IconCloudUpload },
+    { title: 'Usage', href: 'usage', icon: IconChartBar },
+    { title: 'Settings', href: 'settings', icon: IconCog }
+];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -1,10 +1,18 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/state';
-    import { showCreate } from './store';
+    import { showCreate, databaseSubNavigationItems } from './store';
     import type { PageData } from './$types';
     import { showSubNavigation } from '$lib/stores/layout';
-    import { Icon, Sidebar, Navbar, Layout, Link, Typography } from '@appwrite.io/pink-svelte';
+    import {
+        Icon,
+        Sidebar,
+        Navbar,
+        Layout,
+        Link,
+        Typography,
+        Divider
+    } from '@appwrite.io/pink-svelte';
     import {
         IconChevronDown,
         IconDatabase,
@@ -41,6 +49,10 @@
         sortedTables?.find((table: Models.Table) => table.$id === tableId)
     );
 
+    const isTablesScreen = $derived(page.route.id.endsWith('table-[table]'));
+
+    const isMainDatabaseScreen = $derived(page.route.id.endsWith('database-[database]'));
+
     async function loadTables() {
         tables = await sdk.forProject(region, project).tablesDB.listTables({
             databaseId: databaseId,
@@ -66,12 +78,14 @@
     <Sidebar.Base state="open" resizable={false}>
         <section class="list-container" slot="top" style:width="100%">
             <a
+                class:is-selected={!isTablesScreen}
                 href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
-                class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
+                class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile u-padding-block-8 u-padding-inline-start-4">
                 <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
+
                 {data.database?.name}
             </a>
-            <div class="collection-content">
+            <div class="table-content">
                 {#if tables?.total}
                     <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-4">
                         {#each sortedTables as table, index}
@@ -94,7 +108,7 @@
                                             color={isSelected
                                                 ? '--fgcolor-neutral-tertiary'
                                                 : '--fgcolor-neutral-weak'} />
-                                        <span class="text collection-name" data-private
+                                        <span class="text table-name" data-private
                                             >{table.name}</span>
                                     </a>
                                 </li>
@@ -132,9 +146,37 @@
                     </Button>
                 </Layout.Stack>
             </div>
+
+            <Layout.Stack direction="column" gap="xxs" style="bottom: 1rem; position: sticky;">
+                <div class="action-menu-divider">
+                    <Divider />
+                </div>
+
+                <ul
+                    style="margin-inline-start: -1.25rem"
+                    class="drop-list bottom-nav u-margin-block-start-4">
+                    {#each databaseSubNavigationItems as action}
+                        {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/${action.href}`}
+
+                        <Layout.Stack gap="s" direction="row" alignItems="center">
+                            <li>
+                                <a
+                                    {href}
+                                    class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8">
+                                    <Icon
+                                        size="s"
+                                        icon={action.icon}
+                                        color="--fgcolor-neutral-weak" />
+                                    <span class="text table-name">{action.title}</span>
+                                </a>
+                            </li>
+                        </Layout.Stack>
+                    {/each}
+                </ul>
+            </Layout.Stack>
         </section>
     </Sidebar.Base>
-{:else if data?.database?.name}
+{:else if data?.database?.name && !isMainDatabaseScreen}
     <Navbar.Base>
         <div slot="left">
             <Layout.Stack direction="row" alignItems="center" gap="s">
@@ -194,12 +236,18 @@
     }
 
     .database-name {
-        margin-block-end: 8px;
+        margin-block-end: 4px;
         font-size: var(--font-size-sm);
         color: var(--fgcolor-neutral-secondary);
+
+        &:hover {
+            color: var(--fgcolor-neutral-primary);
+            border-radius: var(--border-radius-s, 6px);
+            background: var(--bgcolor-neutral-secondary);
+        }
     }
 
-    .collection-content {
+    .table-content {
         flex: 1;
         overflow-y: auto;
         overflow-x: hidden;
@@ -232,13 +280,13 @@
 
     .drop-list {
         flex: 1;
-        gap: 8px;
+        gap: 4px;
         padding-left: 4px;
         position: relative;
         font-size: var(--font-size-sm);
         color: var(--fgcolor-neutral-secondary);
 
-        &::before {
+        &:not(.bottom-nav)::before {
             content: '';
             right: 99%;
             top: 0.2rem;
@@ -248,37 +296,36 @@
         }
 
         // first item
-        &:has(li.is-first)::before {
+        &:not(.bottom-nav):has(li.is-first)::before {
             top: 0.8rem;
         }
 
         // last item
-        &:has(li.is-last)::before {
+        &:not(.bottom-nav):has(li.is-last)::before {
             bottom: 0.85rem;
         }
 
         // the only item
-        &:has(li.is-first.is-last)::before {
+        &:not(.bottom-nav):has(li.is-first.is-last)::before {
             top: 0.6rem;
             bottom: 0.6rem;
         }
 
         li {
+            width: 100%;
             overflow: hidden;
             position: relative;
             padding-inline-end: 0.5rem;
             margin-inline-start: 0.5rem;
         }
 
-        .is-selected,
         li:hover {
-            width: 100%;
             color: var(--fgcolor-neutral-primary);
-            border-radius: var(--border-radius-xs, 4px);
+            border-radius: var(--border-radius-s, 6px);
             background: var(--bgcolor-neutral-secondary);
         }
 
-        .collection-name {
+        .table-name {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -287,6 +334,12 @@
         }
     }
 
+    .is-selected {
+        color: var(--fgcolor-neutral-primary);
+        border-radius: var(--border-radius-s, 6px);
+        background: var(--bgcolor-neutral-secondary);
+    }
+
     :global(.sub-navigation header) {
         top: 48px !important;
     }
@@ -310,4 +363,9 @@
         font-weight: 400;
         line-height: 150%; /* 21px */
     }
+
+    .action-menu-divider {
+        margin-inline: -1.2rem;
+        padding-block-end: 0.25rem;
+    }
 </style>

Original file line number	Diff line number	Diff line change
`@@ -591,6 +591,7 @@`
`591`	`591`	`@media (min-width: 1024px) {`
`592`	`592`	`width: 166px;`
`593`	`593`	`}`
	`594`	`+`
`594`	`595`	`.info {`
`595`	`596`	`position: absolute;`
`596`	`597`	`display: flex;`