Update title formats

src/lib/helpers/string.ts

@@ -84,3 +84,7 @@ export function hash(input: string | string[], delimiter: string = ','): string
     }
     return Math.abs(hash).toString(36);
 }
+
+export function truncate(value: string, max: number = 25): string {
+    return value.length > max ? value.substring(0, max).trimEnd() : value;
+}

src/routes/(console)/project-[region]-[project]/(studio)/studio/+page.svelte

@@ -7,6 +7,7 @@
         navigateToRoute
     } from '$lib/studio/studio-widget';
     import { page } from '$app/state';
+    import { getPageTitle } from '../../store';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
 
     let anchor: HTMLElement = $state();
@@ -39,7 +40,7 @@
 </script>
 
 <svelte:head>
-    <title>Studio - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Studio', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <div class="studio-page" bind:this={anchor}></div>

src/routes/(console)/project-[region]-[project]/auth/+layout.svelte

@@ -7,7 +7,7 @@
     import { readOnly } from '$lib/stores/billing';
     import { canWriteTeams, canWriteUsers } from '$lib/stores/roles';
     import { GRACE_PERIOD_OVERRIDE } from '$lib/system';
-    import { project } from '../store';
+    import { getPageTitle, project } from '../store';
     import { showCreateUser } from './+page.svelte';
     import { showCreateTeam } from './teams/+page.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
@@ -106,7 +106,7 @@
 </script>
 
 <svelte:head>
-    <title>Auth - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Auth', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <slot />

src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/+layout.svelte

@@ -1,9 +1,11 @@
 <script>
+    import { page } from '$app/state';
+    import { getPageTitle } from '../../../store';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
 </script>
 
 <svelte:head>
-    <title>Team - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Team', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <slot />

src/routes/(console)/project-[region]-[project]/auth/user-[user]/+layout.svelte

@@ -1,9 +1,11 @@
 <script>
+    import { page } from '$app/state';
+    import { getPageTitle } from '../../store';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
 </script>
 
 <svelte:head>
-    <title>User - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'User', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <slot />

src/routes/(console)/project-[region]-[project]/databases/+layout.svelte

@@ -4,7 +4,7 @@
     import { page } from '$app/state';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { DatabasesPanel } from '$lib/commandCenter/panels';
-    import { project } from '../store';
+    import { getPageTitle, project } from '../store';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
 
     $: $registerCommands([
@@ -34,7 +34,8 @@
 <svelte:head>
     <!-- svelte bug, the table header just stays! -->
     {#key page.url.pathname}
-        <title>Databases - {resolvedProfile.platform}</title>
+        <title
+            >{getPageTitle(page.data?.project?.name, 'Databases', resolvedProfile.platform)}</title>
     {/key}
 </svelte:head>
 

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

@@ -20,6 +20,7 @@
     import { isCloud } from '$lib/system';
     import { noWidthTransition } from '$lib/stores/sidebar';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { getPageTitle } from '../../store';
 
     const project = page.params.project;
     const databaseId = page.params.database;
@@ -141,7 +142,8 @@
 <svelte:head>
     <!-- svelte bug, the table header just stays! -->
     {#key page.url.pathname}
-        <title>Database - {resolvedProfile.platform}</title>
+        <title
+            >{getPageTitle(page.data?.project?.name, 'Database', resolvedProfile.platform)}</title>
     {/key}
 </svelte:head>
 

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte

@@ -71,6 +71,7 @@
     import { buildRowUrl, isRelationship } from './rows/store';
     import { chunks } from '$lib/helpers/array';
     import { Submit, trackEvent } from '$lib/actions/analytics';
+    import { getPageTitle } from '../../../store';
 
     import { isTabletViewport } from '$lib/stores/viewport';
     import IndexesSuggestions from '../(suggestions)/indexes.svelte';
@@ -420,7 +421,12 @@
 </script>
 
 <svelte:head>
-    <title>{$table?.name ?? 'Table'} - {resolvedProfile.platform}</title>
+    <title
+        >{getPageTitle(
+            page.data?.project?.name,
+            $table?.name ?? 'Table',
+            resolvedProfile.platform
+        )}</title>
 </svelte:head>
 
 <slot />

src/routes/(console)/project-[region]-[project]/functions/+layout.svelte

@@ -3,6 +3,8 @@
     import { FunctionsPanel } from '$lib/commandCenter/panels';
     import { canSeeFunctions } from '$lib/stores/roles';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { page } from '$app/state';
+    import { getPageTitle } from '../store';
 
     $registerCommands([
         {
@@ -18,7 +20,7 @@
 </script>
 
 <svelte:head>
-    <title>Functions - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Functions', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <slot />

src/routes/(console)/project-[region]-[project]/functions/create-function/deploy/+page.svelte

@@ -13,7 +13,10 @@
     import { onMount } from 'svelte';
     import { ID, Runtime, TemplateReferenceType } from '@appwrite.io/console';
     import { getIconFromRuntime } from '$lib/stores/runtimes';
-    import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import {
+        regionalConsoleVariables,
+        getPageTitle
+    } from '$routes/(console)/project-[region]-[project]/store';
     import { iconPath } from '$lib/stores/app';
     import type { PageData } from './$types';
     import { getLatestTag } from '$lib/helpers/github';
@@ -161,7 +164,12 @@
 </script>
 
 <svelte:head>
-    <title>Deploy {data.repository.name} - {resolvedProfile.platform}</title>
+    <title
+        >{getPageTitle(
+            page.data?.project?.name,
+            `Deploy ${data.repository.name}`,
+            resolvedProfile.platform
+        )}</title>
 </svelte:head>
 
 <Wizard

src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte

@@ -18,7 +18,7 @@
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import Configuration from './configuration.svelte';
     import { getIconFromRuntime } from '$lib/stores/runtimes';
-    import { regionalConsoleVariables } from '../../../store';
+    import { regionalConsoleVariables, getPageTitle } from '../../../store';
     import { InvalidFileType, removeFile } from '$lib/helpers/files';
     import { isCloud } from '$lib/system';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
@@ -161,7 +161,12 @@
 </script>
 
 <svelte:head>
-    <title>Create function - {resolvedProfile.platform}</title>
+    <title
+        >{getPageTitle(
+            page.data?.project?.name,
+            'Create function',
+            resolvedProfile.platform
+        )}</title>
 </svelte:head>
 
 <Wizard

src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte

@@ -21,7 +21,10 @@
     import { Dependencies } from '$lib/constants';
     import RepoCard from './repoCard.svelte';
     import { getIconFromRuntime } from '$lib/stores/runtimes';
-    import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import {
+        regionalConsoleVariables,
+        getPageTitle
+    } from '$routes/(console)/project-[region]-[project]/store';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
 
     export let data;
@@ -159,7 +162,12 @@
 </script>
 
 <svelte:head>
-    <title>Create function - {resolvedProfile.platform}</title>
+    <title
+        >{getPageTitle(
+            page.data?.project?.name,
+            'Create function',
+            resolvedProfile.platform
+        )}</title>
 </svelte:head>
 
 <Wizard

src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/+page.svelte

@@ -30,7 +30,10 @@
     import RepoCard from './repoCard.svelte';
     import { Dependencies } from '$lib/constants';
     import { getIconFromRuntime } from '$lib/stores/runtimes';
-    import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import {
+        regionalConsoleVariables,
+        getPageTitle
+    } from '$routes/(console)/project-[region]-[project]/store';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
 
     export let data;
@@ -220,7 +223,12 @@
 </script>
 
 <svelte:head>
-    <title>Create function - {resolvedProfile.platform}</title>
+    <title
+        >{getPageTitle(
+            page.data?.project?.name,
+            'Create function',
+            resolvedProfile.platform
+        )}</title>
 </svelte:head>
 
 <Wizard

src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte

@@ -39,6 +39,7 @@
     import Wizard from '$lib/layout/wizard.svelte';
     import Aside from './aside.svelte';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { getPageTitle } from '$routes/(console)/project-[region]-[project]/store';
 
     let previousPage: string = `${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/executions`;
 
@@ -146,7 +147,12 @@
 </script>
 
 <svelte:head>
-    <title>Create execution - {resolvedProfile.platform}</title>
+    <title
+        >{getPageTitle(
+            page.data?.project?.name,
+            'Create execution',
+            resolvedProfile.platform
+        )}</title>
 </svelte:head>
 
 <Wizard title="Create execution" href={previousPage}>

src/routes/(console)/project-[region]-[project]/get-started/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import { page } from '$app/state';
+    import { getPageTitle } from '../store';
     import Onboard from '../overview/onboard.svelte';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
 </script>
 
 <svelte:head>
-    <title>Console - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Console', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <Onboard platforms={page.data.project.platforms} pingCount={page.data.project.pingCount} />

src/routes/(console)/project-[region]-[project]/messaging/+layout.svelte

@@ -13,7 +13,7 @@
     import { providersSearcher } from '$lib/commandCenter/searchers/providers';
     import { topicsSearcher } from '$lib/commandCenter/searchers/topics';
     import { canWriteMessages } from '$lib/stores/roles';
-    import { project } from '../store';
+    import { getPageTitle, project } from '../store';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
 
@@ -59,7 +59,7 @@
 </script>
 
 <svelte:head>
-    <title>Messaging - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Messaging', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <slot />

src/routes/(console)/project-[region]-[project]/messaging/message-[message]/+layout.svelte

@@ -1,9 +1,11 @@
 <script>
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { page } from '$app/state';
+    import { getPageTitle } from '../../store';
 </script>
 
 <svelte:head>
-    <title>Message - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Message', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <slot />

src/routes/(console)/project-[region]-[project]/messaging/providers/provider-[provider]/+layout.svelte

@@ -1,9 +1,11 @@
 <script>
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { page } from '$app/state';
+    import { getPageTitle } from '../../../store';
 </script>
 
 <svelte:head>
-    <title>Provider - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Provider', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <slot />

src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+layout.svelte

@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { registerCommands } from '$lib/commandCenter';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
+    import { project, getPageTitle } from '$routes/(console)/project-[region]-[project]/store';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
 
     const topicId = page.params.topic;
@@ -49,7 +49,7 @@
 </script>
 
 <svelte:head>
-    <title>Topic - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Topic', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <slot />

src/routes/(console)/project-[region]-[project]/overview/(components)/keyDetails.svelte

@@ -18,6 +18,8 @@
     import { InteractiveText, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { getEffectiveScopes } from '../api-keys/scopes.svelte';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { page } from '$app/state';
+    import { getPageTitle } from '../../store';
 
     export let key: Models.DevKey | Models.Key;
     export let keyType: 'api' | 'dev' = 'api';
@@ -112,7 +114,8 @@
 </script>
 
 <svelte:head>
-    <title>{label} key - {resolvedProfile.platform}</title>
+    <title
+        >{getPageTitle(page.data?.project?.name, `${label} key`, resolvedProfile.platform)}</title>
 </svelte:head>
 
 <Container>

src/routes/(console)/project-[region]-[project]/overview/+layout.svelte

@@ -30,6 +30,7 @@
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { getPageTitle } from '../store';
 
     let period: UsagePeriods = '30d';
     $: path = `${base}/project-${page.params.region}-${page.params.project}/overview`;
@@ -96,7 +97,7 @@
 </script>
 
 <svelte:head>
-    <title>Console - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Console', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <Container overlapCover>

src/routes/(console)/project-[region]-[project]/settings/+layout.svelte

@@ -6,6 +6,7 @@
     import { canWriteProjects } from '$lib/stores/roles';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { getPageTitle } from '../store';
 
     $: $registerCommands([
         {
@@ -29,7 +30,7 @@
 </script>
 
 <svelte:head>
-    <title>Settings - {resolvedProfile.platform}</title>
+    <title>{getPageTitle(page.data?.project?.name, 'Settings', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <slot />