refactor: rename property, add optional property

also fixes missing space in account settings page title

frontend/src/ts/controllers/page-controller.ts

@@ -82,16 +82,16 @@ export async function change(
           void AdController.reinstate();
         },
         async () => {
-          if (nextPage.name === "test") {
+          if (nextPage.id === "test") {
             Misc.updateTitle();
           } else {
-            Misc.updateTitle(
-              Strings.capitalizeFirstLetterOfEachWord(nextPage.name) +
-                " | Monkeytype"
-            );
+            const titleString =
+              nextPage.display ??
+              Strings.capitalizeFirstLetterOfEachWord(nextPage.id);
+            Misc.updateTitle(`${titleString} | Monkeytype`);
           }
           Focus.set(false);
-          ActivePage.set(nextPage.name);
+          ActivePage.set(nextPage.id);
           await previousPage?.afterHide();
           await nextPage?.beforeShow({
             params: options.params,

frontend/src/ts/pages/404.ts

@@ -2,7 +2,7 @@ import Page from "./page";
 import * as Skeleton from "../utils/skeleton";
 
 export const page = new Page({
-  name: "404",
+  id: "404",
   element: $(".page.page404"),
   path: "/404",
   afterHide: async (): Promise<void> => {

frontend/src/ts/pages/about.ts

@@ -202,7 +202,7 @@ function getHistogramDataBucketed(data: Record<string, number>): {
 }
 
 export const page = new Page({
-  name: "about",
+  id: "about",
   element: $(".page.pageAbout"),
   path: "/about",
   afterHide: async (): Promise<void> => {

frontend/src/ts/pages/account-settings.ts

@@ -208,7 +208,8 @@ $(".page.pageAccountSettings #setStreakHourOffset").on("click", () => {
 });
 
 export const page = new Page({
-  name: "accountSettings",
+  id: "accountSettings",
+  display: "Account Settings",
   element: pageElement,
   path: "/account-settings",
   afterHide: async (): Promise<void> => {

frontend/src/ts/pages/account.ts

@@ -1269,7 +1269,7 @@ ConfigEvent.subscribe((eventKey) => {
 });
 
 export const page = new Page({
-  name: "account",
+  id: "account",
   element: $(".page.pageAccount"),
   path: "/account",
   afterHide: async (): Promise<void> => {

frontend/src/ts/pages/leaderboards.ts

@@ -1280,7 +1280,7 @@ $(".page.pageLeaderboards .buttonGroup.secondary").on(
 );
 
 export const page = new Page({
-  name: "leaderboards",
+  id: "leaderboards",
   element: $(".page.pageLeaderboards"),
   path: "/leaderboards",
   afterHide: async (): Promise<void> => {

frontend/src/ts/pages/loading.ts

@@ -40,7 +40,7 @@ export async function showBar(): Promise<void> {
 }
 
 export const page = new Page({
-  name: "loading",
+  id: "loading",
   element: $(".page.pageLoading"),
   path: "/",
   afterHide: async (): Promise<void> => {

frontend/src/ts/pages/login.ts

@@ -348,7 +348,7 @@ $(".page.pageLogin .register.side .verifyPasswordInput").on("input", () => {
 });
 
 export const page = new Page({
-  name: "login",
+  id: "login",
   element: $(".page.pageLogin"),
   path: "/login",
   afterHide: async (): Promise<void> => {

frontend/src/ts/pages/page.ts

@@ -17,7 +17,8 @@ type Options<T> = {
 };
 
 type PageProperties<T> = {
-  name: PageName;
+  id: PageName;
+  display?: string;
   element: JQuery;
   path: string;
   beforeHide?: () => Promise<void>;
@@ -30,7 +31,8 @@ async function empty(): Promise<void> {
   return;
 }
 export default class Page<T> {
-  public name: PageName;
+  public id: PageName;
+  public display: string | undefined;
   public element: JQuery;
   public pathname: string;
   public beforeHide: () => Promise<void>;
@@ -39,7 +41,8 @@ export default class Page<T> {
   public afterShow: () => Promise<void>;
 
   constructor(props: PageProperties<T>) {
-    this.name = props.name;
+    this.id = props.id;
+    this.display = props.display;
     this.element = props.element;
     this.pathname = props.path;
     this.beforeHide = props.beforeHide ?? empty;

frontend/src/ts/pages/profile-search.ts

@@ -2,7 +2,7 @@ import Page from "./page";
 import * as Skeleton from "../utils/skeleton";
 
 export const page = new Page({
-  name: "profileSearch",
+  id: "profileSearch",
   element: $(".page.pageProfileSearch"),
   path: "/profile",
   afterHide: async (): Promise<void> => {

frontend/src/ts/pages/profile.ts

@@ -218,7 +218,7 @@ $(".page.pageProfile").on("click", ".profile .userReportButton", () => {
 });
 
 export const page = new Page<undefined | UserProfile>({
-  name: "profile",
+  id: "profile",
   element: $(".page.pageProfile"),
   path: "/profile",
   afterHide: async (): Promise<void> => {

frontend/src/ts/pages/settings.ts

@@ -1376,7 +1376,7 @@ ConfigEvent.subscribe((eventKey, eventValue) => {
 });
 
 export const page = new Page({
-  name: "settings",
+  id: "settings",
   element: $(".page.pageSettings"),
   path: "/settings",
   afterHide: async (): Promise<void> => {

frontend/src/ts/pages/test.ts

@@ -10,7 +10,7 @@ import * as TestConfig from "../test/test-config";
 import * as ScrollToTop from "../elements/scroll-to-top";
 
 export const page = new Page({
-  name: "test",
+  id: "test",
   element: $(".page.pageTest"),
   path: "/",
   beforeHide: async (): Promise<void> => {