Add configurable / dynamic page title

src/SequenceDiagramViewerPage.jsx

@@ -1,8 +1,11 @@
 import React, { useCallback, useState } from "react";
 import { SequenceDiagramViewer } from "./room/GroupCallInspector";
 import { FieldRow, InputField } from "./input/Input";
+import { usePageTitle } from "./usePageTitle";
 
 export function SequenceDiagramViewerPage() {
+  usePageTitle("Inspector");
+
   const [debugLog, setDebugLog] = useState();
   const [selectedUserId, setSelectedUserId] = useState();
   const onChangeDebugLog = useCallback((e) => {

src/auth/LoginPage.jsx

@@ -22,8 +22,11 @@ import { Button } from "../button";
 import { defaultHomeserver, defaultHomeserverHost } from "../matrix-utils";
 import styles from "./LoginPage.module.css";
 import { useInteractiveLogin } from "./useInteractiveLogin";
+import { usePageTitle } from "../usePageTitle";
 
 export function LoginPage() {
+  usePageTitle("Login");
+
   const [_, login] = useInteractiveLogin();
   const [homeserver, setHomeServer] = useState(defaultHomeserver);
   const usernameRef = useRef();

src/auth/RegisterPage.jsx

@@ -26,8 +26,11 @@ import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
 import { LoadingView } from "../FullScreenView";
 import { useRecaptcha } from "./useRecaptcha";
 import { Caption, Link } from "../typography/Typography";
+import { usePageTitle } from "../usePageTitle";
 
 export function RegisterPage() {
+  usePageTitle("Register");
+
   const {
     loading,
     client,

src/home/HomePage.jsx

@@ -19,8 +19,11 @@ import { useClient } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { UnauthenticatedView } from "./UnauthenticatedView";
 import { RegisteredView } from "./RegisteredView";
+import { usePageTitle } from "../usePageTitle";
 
 export function HomePage() {
+  usePageTitle("Home");
+
   const { isAuthenticated, isPasswordlessUser, loading, error, client } =
     useClient();
 

src/room/GroupCallLoader.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useLoadGroupCall } from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
+import { usePageTitle } from "../usePageTitle";
 
 export function GroupCallLoader({ client, roomId, viaServers, children }) {
   const { loading, error, groupCall } = useLoadGroupCall(
@@ -9,6 +10,8 @@ export function GroupCallLoader({ client, roomId, viaServers, children }) {
     viaServers
   );
 
+  usePageTitle(groupCall ? groupCall.room.name : "Loading...");
+
   if (loading) {
     return (
       <FullScreenView>

src/usePageTitle.js

@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+
+export function usePageTitle(title) {
+  useEffect(() => {
+    document.title = title
+      ? `${import.meta.env.VITE_PRODUCT_NAME} | ${title}`
+      : import.meta.env.VITE_PRODUCT_NAME;
+  }, [title]);
+}