added the app name in the document title and fixed the double initial load on records list

ui/src/App.svelte

@@ -10,6 +10,7 @@
     import Toasts from "@/components/base/Toasts.svelte";
     import Toggler from "@/components/base/Toggler.svelte";
     import Confirmation from "@/components/base/Confirmation.svelte";
+    import { pageTitle, appName } from "@/stores/app";
     import { admin } from "@/stores/admin";
     import { setErrors } from "@/stores/errors";
     import { resetConfirmation } from "@/stores/confirmation";
@@ -18,6 +19,10 @@
 
     let showAppSidebar = false;
 
+    $: if ($admin?.id) {
+        loadAppName();
+    }
+
     function handleRouteLoading(e) {
         if (e?.detail?.location === oldLocation) {
             return; // not an actual change
@@ -28,7 +33,7 @@
         oldLocation = e?.detail?.location;
 
         // resets
-        CommonHelper.setDocumentTitle("");
+        $pageTitle = "";
         setErrors({});
         resetConfirmation();
     }
@@ -37,11 +42,30 @@
         replace("/");
     }
 
+    async function loadAppName() {
+        if (!$admin?.id) {
+            return;
+        }
+
+        try {
+            const settings = await ApiClient.Settings.getAll({
+                $cancelKey: "loadAppName",
+            });
+            $appName = settings?.meta?.appName || "";
+        } catch (err) {
+            console.warn("Failed to load app name.", err);
+        }
+    }
+
     function logout() {
         ApiClient.logout();
     }
 </script>
 
+<svelte:head>
+    <title>{CommonHelper.joinNonEmpty([$pageTitle, $appName, "PocketBase"], " - ")}</title>
+</svelte:head>
+
 <div class="app-layout">
     {#if $admin?.id && showAppSidebar}
         <aside class="app-sidebar">

ui/src/components/admins/PageAdmins.svelte

@@ -1,6 +1,7 @@
 <script>
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
+    import { pageTitle } from "@/stores/app";
     import { admin as loggedAdmin } from "@/stores/admin";
     import Searchbar from "@/components/base/Searchbar.svelte";
     import RefreshButton from "@/components/base/RefreshButton.svelte";
@@ -12,6 +13,8 @@
 
     const queryParams = CommonHelper.getQueryParams(window.location?.href);
 
+    $pageTitle = "Admins";
+
     let adminUpsertPanel;
     let admins = [];
     let isLoading = false;
@@ -28,8 +31,6 @@
         loadAdmins();
     }
 
-    CommonHelper.setDocumentTitle("Admins");
-
     export function loadAdmins() {
         isLoading = true;
 
@@ -64,7 +65,7 @@
     <header class="page-header">
         <nav class="breadcrumbs">
             <div class="breadcrumb-item">Settings</div>
-            <div class="breadcrumb-item">Admins</div>
+            <div class="breadcrumb-item">{$pageTitle}</div>
         </nav>
 
         <RefreshButton on:refresh={() => loadAdmins()} />

ui/src/components/logs/PageLogs.svelte

@@ -1,5 +1,5 @@
 <script>
-    import CommonHelper from "@/utils/CommonHelper";
+    import { pageTitle } from "@/stores/app";
     import Field from "@/components/base/Field.svelte";
     import Searchbar from "@/components/base/Searchbar.svelte";
     import RefreshButton from "@/components/base/RefreshButton.svelte";
@@ -9,6 +9,8 @@
 
     const ADMIN_LOGS_LOCAL_STORAGE_KEY = "includeAdminLogs";
 
+    $pageTitle = "Request logs";
+
     let logPanel;
     let filter = "";
     let includeAdminLogs = window.localStorage?.getItem(ADMIN_LOGS_LOCAL_STORAGE_KEY) << 0;
@@ -23,15 +25,13 @@
     function refresh() {
         refreshToken++;
     }
-
-    CommonHelper.setDocumentTitle("Request logs");
 </script>
 
 <main class="page-wrapper">
     <div class="page-header-wrapper m-b-0">
         <header class="page-header">
             <nav class="breadcrumbs">
-                <div class="breadcrumb-item">Request logs</div>
+                <div class="breadcrumb-item">{$pageTitle}</div>
             </nav>
 
             <RefreshButton on:refresh={() => refresh()} />

ui/src/components/records/PageRecords.svelte

@@ -7,6 +7,7 @@
     } from "@/stores/collections";
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
+    import { pageTitle } from "@/stores/app";
     import Searchbar from "@/components/base/Searchbar.svelte";
     import RefreshButton from "@/components/base/RefreshButton.svelte";
     import CollectionsSidebar from "@/components/collections/CollectionsSidebar.svelte";
@@ -17,6 +18,8 @@
 
     const queryParams = CommonHelper.getQueryParams(window.location?.href);
 
+    $pageTitle = "Collections";
+
     let collectionUpsertPanel;
     let collectionDocsPanel;
     let recordPanel;
@@ -29,9 +32,7 @@
 
     // reset filter and sort on collection change
     $: if ($activeCollection?.id && selectedCollectionId != $activeCollection.id) {
-        selectedCollectionId = $activeCollection.id;
-        sort = "-created";
-        filter = "";
+        reset();
     }
 
     // keep the url params in sync
@@ -43,7 +44,11 @@
         });
     }
 
-    CommonHelper.setDocumentTitle("Collections");
+    function reset() {
+        selectedCollectionId = $activeCollection.id;
+        sort = "-created";
+        filter = "";
+    }
 
     loadCollections(selectedCollectionId);
 </script>
@@ -123,6 +128,7 @@
 {/if}
 
 <CollectionUpsertPanel bind:this={collectionUpsertPanel} />
+
 <CollectionDocsPanel bind:this={collectionDocsPanel} />
 
 <RecordUpsertPanel

ui/src/components/settings/PageApplication.svelte

@@ -1,10 +1,13 @@
 <script>
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
+    import { pageTitle, appName } from "@/stores/app";
     import { addSuccessToast } from "@/stores/toasts";
     import Field from "@/components/base/Field.svelte";
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
 
+    $pageTitle = "Application settings";
+
     let formSettings = {};
     let isLoading = false;
     let isSaving = false;
@@ -12,8 +15,6 @@
 
     $: hasChanges = initialHash != JSON.stringify(formSettings);
 
-    CommonHelper.setDocumentTitle("Application settings");
-
     loadSettings();
 
     async function loadSettings() {
@@ -48,10 +49,13 @@
     }
 
     function init(settings = {}) {
+        $appName = settings?.meta?.appName;
+
         formSettings = {
             meta: settings?.meta || {},
             logs: settings?.logs || {},
         };
+
         initialHash = JSON.stringify(formSettings);
     }
 </script>

ui/src/components/settings/PageAuthProviders.svelte

@@ -1,12 +1,15 @@
 <script>
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
+    import { pageTitle } from "@/stores/app";
     import { setErrors } from "@/stores/errors";
     import { addSuccessToast } from "@/stores/toasts";
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
     import EmailAuthAccordion from "@/components/settings/EmailAuthAccordion.svelte";
     import AuthProviderAccordion from "@/components/settings/AuthProviderAccordion.svelte";
 
+    $pageTitle = "Auth providers";
+
     let emailAuthAccordion;
     let authSettings = {};
     let isLoading = false;
@@ -15,8 +18,6 @@
 
     $: hasChanges = initialHash != JSON.stringify(authSettings);
 
-    CommonHelper.setDocumentTitle("Auth providers");
-
     loadSettings();
 
     async function loadSettings() {
@@ -76,7 +77,7 @@
     <header class="page-header">
         <nav class="breadcrumbs">
             <div class="breadcrumb-item">Settings</div>
-            <div class="breadcrumb-item">Auth providers</div>
+            <div class="breadcrumb-item">{$pageTitle}</div>
         </nav>
     </header>
 

ui/src/components/settings/PageMail.svelte

@@ -2,6 +2,7 @@
     import { slide } from "svelte/transition";
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
+    import { pageTitle } from "@/stores/app";
     import { addSuccessToast } from "@/stores/toasts";
     import Field from "@/components/base/Field.svelte";
     import ObjectSelect from "@/components/base/ObjectSelect.svelte";
@@ -13,6 +14,8 @@
         { label: "Always", value: true },
     ];
 
+    $pageTitle = "Mail settings";
+
     let formSettings = {};
     let isLoading = false;
     let isSaving = false;
@@ -20,8 +23,6 @@
 
     $: hasChanges = initialHash != JSON.stringify(formSettings);
 
-    CommonHelper.setDocumentTitle("Mail settings");
-
     loadSettings();
 
     async function loadSettings() {
@@ -70,7 +71,7 @@
     <header class="page-header">
         <nav class="breadcrumbs">
             <div class="breadcrumb-item">Settings</div>
-            <div class="breadcrumb-item">Mail settings</div>
+            <div class="breadcrumb-item">{$pageTitle}</div>
         </nav>
     </header>
 

ui/src/components/settings/PageStorage.svelte

@@ -2,12 +2,15 @@
     import { slide } from "svelte/transition";
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
+    import { pageTitle } from "@/stores/app";
     import { setErrors } from "@/stores/errors";
     import { addSuccessToast } from "@/stores/toasts";
     import Field from "@/components/base/Field.svelte";
     import RedactedPasswordInput from "@/components/base/RedactedPasswordInput.svelte";
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
 
+    $pageTitle = "Files storage";
+
     let s3 = {};
     let isLoading = false;
     let isSaving = false;
@@ -16,8 +19,6 @@
 
     $: hasChanges = initialHash != JSON.stringify(s3);
 
-    CommonHelper.setDocumentTitle("Files storage");
-
     loadSettings();
 
     async function loadSettings() {
@@ -65,7 +66,7 @@
     <header class="page-header">
         <nav class="breadcrumbs">
             <div class="breadcrumb-item">Settings</div>
-            <div class="breadcrumb-item">Files storage</div>
+            <div class="breadcrumb-item">{$pageTitle}</div>
         </nav>
     </header>
 

ui/src/components/settings/PageTokenOptions.svelte

@@ -1,6 +1,7 @@
 <script>
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
+    import { pageTitle } from "@/stores/app";
     import { addSuccessToast } from "@/stores/toasts";
     import Field from "@/components/base/Field.svelte";
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
@@ -14,6 +15,8 @@
         { key: "adminPasswordResetToken", label: "Admins password reset token" },
     ];
 
+    $pageTitle = "Token options";
+
     let tokenSettings = {};
     let isLoading = false;
     let isSaving = false;
@@ -21,8 +24,6 @@
 
     $: hasChanges = initialHash != JSON.stringify(tokenSettings);
 
-    CommonHelper.setDocumentTitle("Token options");
-
     loadSettings();
 
     async function loadSettings() {
@@ -76,7 +77,7 @@
     <header class="page-header">
         <nav class="breadcrumbs">
             <div class="breadcrumb-item">Settings</div>
-            <div class="breadcrumb-item">Token options</div>
+            <div class="breadcrumb-item">{$pageTitle}</div>
         </nav>
     </header>
 

ui/src/components/users/PageUsers.svelte

@@ -3,6 +3,7 @@
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
+    import { pageTitle } from "@/stores/app";
     import Searchbar from "@/components/base/Searchbar.svelte";
     import RefreshButton from "@/components/base/RefreshButton.svelte";
     import SortHeader from "@/components/base/SortHeader.svelte";
@@ -16,6 +17,8 @@
     const queryParams = CommonHelper.getQueryParams(window.location?.href);
     const excludedProfileFields = ["id", "userId", "created", "updated"];
 
+    $pageTitle = "Users";
+
     let userUpsertPanel;
     let collectionUpsertPanel;
     let recordUpsertPanel;
@@ -44,8 +47,6 @@
         (field) => !excludedProfileFields.includes(field.name)
     );
 
-    CommonHelper.setDocumentTitle("Users");
-
     loadProfilesCollection();
 
     export async function loadUsers(page = 1) {
@@ -111,7 +112,7 @@
     <main class="page-wrapper">
         <header class="page-header">
             <nav class="breadcrumbs">
-                <div class="breadcrumb-item">Users</div>
+                <div class="breadcrumb-item">{$pageTitle}</div>
             </nav>
 
             <button

ui/src/stores/app.js

@@ -0,0 +1,5 @@
+import { writable } from "svelte/store";
+
+export const pageTitle = writable('');
+
+export const appName = writable('');

ui/src/utils/CommonHelper.js

@@ -859,25 +859,6 @@ export default class CommonHelper {
         });
     }
 
-    /**
-     * Updates the page document title.
-     *
-     * @param {String} title
-     * @param {String} [suffix]
-     */
-    static setDocumentTitle(title, suffix = "PocketBase") {
-        let parts = [];
-        if (!CommonHelper.isEmpty(title)) {
-            parts.push(title.trim());
-        }
-
-        if (!CommonHelper.isEmpty(suffix)) {
-            parts.push(suffix.trim());
-        }
-
-        document.title = parts.join(' - ')
-    }
-
     /**
      * Normalizes and append a value to the provided form data.
      *