diff --git a/frontend/src/components/document-title.ts b/frontend/src/components/document-title.ts new file mode 100644 index 00000000..7c016d2d --- /dev/null +++ b/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) { + if (changedProperties.has("title") && this.title) { + document.title = this.title; + } + } +} diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index 25a6dcd5..a3e01bfe 100644 --- a/frontend/src/components/index.ts +++ b/frontend/src/components/index.ts @@ -1,5 +1,6 @@ import "./ui"; import "./utils"; +import "./document-title"; import("./orgs-list"); import("./not-found"); diff --git a/frontend/src/features/accounts/index.ts b/frontend/src/features/accounts/index.ts index bcaa4044..fcf5d852 100644 --- a/frontend/src/features/accounts/index.ts +++ b/frontend/src/features/accounts/index.ts @@ -1,3 +1,2 @@ -import("./account-settings"); import("./invite-form"); import("./sign-up-form"); diff --git a/frontend/src/features/accounts/account-settings.ts b/frontend/src/pages/account-settings.ts similarity index 99% rename from frontend/src/features/accounts/account-settings.ts rename to frontend/src/pages/account-settings.ts index 4bcc8147..1fce1561 100644 --- a/frontend/src/features/accounts/account-settings.ts +++ b/frontend/src/pages/account-settings.ts @@ -124,6 +124,10 @@ export class AccountSettings extends LiteElement { render() { if (!this.userInfo) return; return html` + +

${msg("Account Settings")} diff --git a/frontend/src/pages/admin.ts b/frontend/src/pages/admin.ts index 9b564b91..891283cc 100644 --- a/frontend/src/pages/admin.ts +++ b/frontend/src/pages/admin.ts @@ -99,6 +99,10 @@ export class Home extends LiteElement { if (this.userInfo.orgs.length && !this.orgList) { return html` + +
@@ -106,6 +110,10 @@ export class Home extends LiteElement { } return html` + +
- ${this.crawlId - ? // Render loading indicator while preparing to redirect - this.renderLoading() - : this.renderCrawls()} -
`; + return html` + +
+ ${this.crawlId + ? // Render loading indicator while preparing to redirect + this.renderLoading() + : this.renderCrawls()} +
`; } private renderCrawls() { diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts index c0618f65..74ddf156 100644 --- a/frontend/src/pages/index.ts +++ b/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"); diff --git a/frontend/src/pages/invite/accept.ts b/frontend/src/pages/invite/accept.ts index fac180ec..28379f38 100644 --- a/frontend/src/pages/invite/accept.ts +++ b/frontend/src/pages/invite/accept.ts @@ -87,6 +87,10 @@ export class AcceptInvite extends BtrixElement { } return html` + +
diff --git a/frontend/src/pages/org/index.ts b/frontend/src/pages/org/index.ts index 68f053ac..6a161083 100644 --- a/frontend/src/pages/org/index.ts +++ b/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` + +
${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` + + ${this.renderArchivedItem()} + `, + ], + [ + "workflows", + () => html` + + ${this.renderWorkflows()} + `, + ], + [ + "browser-profiles", + () => html` + + ${this.renderBrowserProfiles()} + `, + ], + [ + "collections", + () => html` + + ${this.renderCollections()} + `, + ], [ "settings", () => - this.appState.isAdmin ? this.renderOrgSettings() : html``, + this.appState.isAdmin + ? html` + + ${this.renderOrgSettings()} + ` + : nothing, ], ], () => @@ -429,7 +473,7 @@ export class Org extends LiteElement { >`; } - return html`