fix: Update browser title (#2054)

Updates browser title when visiting the following pages:

- Superadmin dashboard
- Org top-level pages
- Account settings

frontend/src/components/document-title.ts

@@ -0,0 +1,24 @@
+import { LitElement, type PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+/**
+ * Updates user's browser title bar
+ */
+@customElement("btrix-document-title")
+export class DocumentTitle extends LitElement {
+  @property({ type: String })
+  title = "";
+
+  disconnectedCallback(): void {
+    // Reset back to default title
+    document.title = "Browsertrix";
+
+    super.disconnectedCallback();
+  }
+
+  willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has("title") && this.title) {
+      document.title = this.title;
+    }
+  }
+}

frontend/src/components/index.ts

@@ -1,5 +1,6 @@
 import "./ui";
 import "./utils";
+import "./document-title";
 
 import("./orgs-list");
 import("./not-found");

frontend/src/features/accounts/index.ts

@@ -1,3 +1,2 @@
-import("./account-settings");
 import("./invite-form");
 import("./sign-up-form");

frontend/src/pages/account-settings.ts

@@ -124,6 +124,10 @@ export class AccountSettings extends LiteElement {
   render() {
     if (!this.userInfo) return;
     return html`
+      <btrix-document-title
+        title=${msg("Account Settings")}
+      ></btrix-document-title>
+
       <div class="mx-auto max-w-screen-sm">
         <h1 class="mb-7 text-xl font-semibold leading-8">
           ${msg("Account Settings")}

frontend/src/pages/admin.ts

@@ -99,6 +99,10 @@ export class Home extends LiteElement {
 
     if (this.userInfo.orgs.length && !this.orgList) {
       return html`
+        <btrix-document-title
+          title=${msg("Admin dashboard")}
+        ></btrix-document-title>
+
         <div class="my-24 flex items-center justify-center text-3xl">
           <sl-spinner></sl-spinner>
         </div>
@@ -106,6 +110,10 @@ export class Home extends LiteElement {
     }
 
     return html`
+      <btrix-document-title
+        title=${msg("Admin dashboard")}
+      ></btrix-document-title>
+
       <div class="bg-white">
         <header
           class="mx-auto box-border w-full max-w-screen-desktop px-3 py-4 md:py-8"

frontend/src/pages/crawls.ts

@@ -95,14 +95,16 @@ export class Crawls extends LiteElement {
   }
 
   render() {
-    return html` <div
-      class="mx-auto box-border w-full max-w-screen-desktop px-3 py-4"
-    >
-      ${this.crawlId
-        ? // Render loading indicator while preparing to redirect
-          this.renderLoading()
-        : this.renderCrawls()}
-    </div>`;
+    return html`<btrix-document-title
+        title=${msg("Running crawls")}
+      ></btrix-document-title>
+
+      <div class="mx-auto box-border w-full max-w-screen-desktop px-3 py-4">
+        ${this.crawlId
+          ? // Render loading indicator while preparing to redirect
+            this.renderLoading()
+          : this.renderCrawls()}
+      </div>`;
   }
 
   private renderCrawls() {

frontend/src/pages/index.ts

@@ -9,3 +9,4 @@ import(/* webpackChunkName: "verify" */ "./verify");
 import(/* webpackChunkName: "reset-password" */ "./reset-password");
 import(/* webpackChunkName: "users-invite" */ "./users-invite");
 import(/* webpackChunkName: "accept-invite" */ "./invite/accept");
+import(/* webpackChunkName: "account-settings" */ "./account-settings");

frontend/src/pages/invite/accept.ts

@@ -87,6 +87,10 @@ export class AcceptInvite extends BtrixElement {
     }
 
     return html`
+      <btrix-document-title
+        title=${msg("Accept invitation")}
+      ></btrix-document-title>
+
       <section
         class="flex min-h-full w-full flex-col justify-center gap-12 p-5 md:flex-row md:gap-16 md:py-16"
       >

frontend/src/pages/org/index.ts

@@ -1,4 +1,5 @@
 import { localized, msg, str } from "@lit/localize";
+import { nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { choose } from "lit/directives/choose.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -231,6 +232,10 @@ export class Org extends LiteElement {
       this.orgTab === "items" && (this.params as OrgParams["items"]).qaTab;
 
     return html`
+      <btrix-document-title
+        title=${ifDefined(this.userOrg?.name)}
+      ></btrix-document-title>
+
       <div class="flex min-h-full flex-col">
         <btrix-org-status-banner></btrix-org-status-banner>
         ${this.renderOrgNavBar()}
@@ -240,19 +245,58 @@ export class Org extends LiteElement {
             : "w-full max-w-screen-desktop pt-7"} mx-auto box-border flex flex-1 flex-col p-3"
           aria-labelledby="${this.orgTab}-tab"
         >
-          ${when(this.userOrg, () =>
+          ${when(this.userOrg, (userOrg) =>
             choose(
               this.orgTab,
               [
                 ["home", this.renderDashboard],
-                ["items", this.renderArchivedItem],
-                ["workflows", this.renderWorkflows],
-                ["browser-profiles", this.renderBrowserProfiles],
-                ["collections", this.renderCollections],
+                [
+                  "items",
+                  () => html`
+                    <btrix-document-title
+                      title=${`${msg("Archived Items")} - ${userOrg.name}`}
+                    ></btrix-document-title>
+                    ${this.renderArchivedItem()}
+                  `,
+                ],
+                [
+                  "workflows",
+                  () => html`
+                    <btrix-document-title
+                      title=${`${msg("Crawl Workflows")} - ${userOrg.name}`}
+                    ></btrix-document-title>
+                    ${this.renderWorkflows()}
+                  `,
+                ],
+                [
+                  "browser-profiles",
+                  () => html`
+                    <btrix-document-title
+                      title=${`${msg("Browser Profiles")} - ${userOrg.name}`}
+                    ></btrix-document-title>
+                    ${this.renderBrowserProfiles()}
+                  `,
+                ],
+                [
+                  "collections",
+                  () => html`
+                    <btrix-document-title
+                      title=${`${msg("Collections")} - ${userOrg.name}`}
+                    ></btrix-document-title>
+                    ${this.renderCollections()}
+                  `,
+                ],
                 [
                   "settings",
                   () =>
-                    this.appState.isAdmin ? this.renderOrgSettings() : html``,
+                    this.appState.isAdmin
+                      ? html`
+                          <btrix-document-title
+                            title=${`${msg("Org Settings")} - ${userOrg.name}`}
+                          ></btrix-document-title>
+                          ${this.renderOrgSettings()}
+                        `
+                      : nothing,
                 ],
               ],
               () =>
@@ -429,7 +473,7 @@ export class Org extends LiteElement {
         ></btrix-archived-item-qa>`;
       }
 
-      return html` <btrix-archived-item-detail
+      return html`<btrix-archived-item-detail
         crawlId=${params.itemId}
         collectionId=${params.collectionId || ""}
         workflowId=${params.workflowId || ""}