Change SecretTitleElement props.

src/pages/Secrets/KeyValue/KeyValueDelete.tsx

@@ -43,7 +43,7 @@ export class KeyValueDeletePage extends Page {
 
   async renderPageTitle(): Promise<void> {
     render(
-      <SecretTitleElement router={this.router} suffix={i18next.t("kv_delete_suffix")} />,
+      <SecretTitleElement page={this} suffix={i18next.t("kv_delete_suffix")} />,
       this.router.pageTitleElement,
     );
   }

src/pages/Secrets/KeyValue/KeyValueNew.tsx

@@ -63,7 +63,7 @@ export class KeyValueNewPage extends Page {
 
   async renderPageTitle(): Promise<void> {
     render(
-      <SecretTitleElement router={this.router} suffix={i18next.t("kv_new_suffix")} />,
+      <SecretTitleElement page={this} suffix={i18next.t("kv_new_suffix")} />,
       this.router.pageTitleElement,
     );
   }

src/pages/Secrets/KeyValue/KeyValueSecret.tsx

@@ -154,7 +154,7 @@ export class KeyValueSecretPage extends Page {
   }
 
   async renderPageTitle(): Promise<void> {
-    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
+    render(<SecretTitleElement page={this} />, this.router.pageTitleElement);
   }
 
   get name(): string {

src/pages/Secrets/KeyValue/KeyValueSecretsEdit.tsx

@@ -117,7 +117,7 @@ export class KeyValueSecretEditPage extends Page {
 
   async renderPageTitle(): Promise<void> {
     render(
-      <SecretTitleElement router={this.router} suffix={i18next.t("kv_sec_edit_suffix")} />,
+      <SecretTitleElement page={this} suffix={i18next.t("kv_sec_edit_suffix")} />,
       this.router.pageTitleElement,
     );
   }

src/pages/Secrets/KeyValue/KeyValueVersions.tsx

@@ -44,7 +44,7 @@ export class KeyValueVersionsPage extends Page {
 
   async renderPageTitle(): Promise<void> {
     render(
-      <SecretTitleElement router={this.router} suffix={i18next.t("kv_sec_versions_suffix")} />,
+      <SecretTitleElement page={this} suffix={i18next.t("kv_sec_versions_suffix")} />,
       this.router.pageTitleElement,
     );
   }

src/pages/Secrets/KeyValue/KeyValueView.tsx

@@ -149,7 +149,7 @@ export class KeyValueViewPage extends Page {
   }
 
   async renderPageTitle(): Promise<void> {
-    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
+    render(<SecretTitleElement page={this} />, this.router.pageTitleElement);
   }
 
   get name(): string {

src/pages/Secrets/SecretTitleElement.tsx

@@ -1,28 +1,26 @@
 import { JSX } from "preact/jsx-runtime";
-import { PageRouter } from "z-pagerouter";
+import { Page } from "../../types/Page";
-import { PageState } from "../../state/PageState";
 
-function currentTitleSecretText(state: PageState): string {
+function currentTitleSecretText(page: Page): string {
-  let secretItemText = state.secretItem;
+  let secretItemText = page.state.secretItem;
-  if (state.secretVersion !== null) secretItemText += ` (v${state.secretVersion})`;
+  if (page.state.secretVersion !== null) secretItemText += ` (v${page.state.secretVersion})`;
   return secretItemText;
 }
 
 type SecretTitleElementProps = {
-  router: PageRouter;
+  page: Page;
   suffix?: string;
 };
 
 export function SecretTitleElement(props: SecretTitleElementProps): JSX.Element {
-  const router = props.router;
+  const page = props.page;
   const suffix = props.suffix || "";
-  const state = router.state as PageState;
 
   return (
     <div>
       <a
         onClick={async () => {
-          await router.changePage("SECRETS_HOME");
+          await page.router.changePage("SECRETS_HOME");
         }}
       >
         {"/ "}
@@ -30,35 +28,38 @@ export function SecretTitleElement(props: SecretTitleElementProps): JSX.Element
 
       <a
         onClick={async () => {
-          state.secretPath = [];
+          page.state.secretPath = [];
-          state.secretItem = "";
+          page.state.secretItem = "";
-          state.secretVersion = null;
+          page.state.secretVersion = null;
 
-          if (state.secretMountType.startsWith("kv") || state.secretMountType == "cubbyhole") {
+          if (
-            await router.changePage("KEY_VALUE_VIEW");
+            page.state.secretMountType.startsWith("kv") ||
-          } else if (state.secretMountType == "totp") {
+            page.state.secretMountType == "cubbyhole"
-            await router.changePage("TOTP_VIEW");
+          ) {
-          } else if (state.secretMountType == "transit") {
+            await page.router.changePage("KEY_VALUE_VIEW");
-            await router.changePage("TRANSIT_VIEW");
+          } else if (page.state.secretMountType == "totp") {
+            await page.router.changePage("TOTP_VIEW");
+          } else if (page.state.secretMountType == "transit") {
+            await page.router.changePage("TRANSIT_VIEW");
           }
         }}
       >
-        {state.baseMount + " "}
+        {page.state.baseMount + " "}
       </a>
-      {...state.secretPath.map((secretPath, index, secretPaths) => (
+      {...page.state.secretPath.map((secretPath, index, secretPaths) => (
         <a
           onClick={async () => {
-            state.secretVersion = null;
+            page.state.secretVersion = null;
-            if (state.secretMountType.startsWith("kv")) {
+            if (page.state.secretMountType.startsWith("kv")) {
-              state.secretPath = secretPaths.slice(0, index + 1);
+              page.state.secretPath = secretPaths.slice(0, index + 1);
-              await router.changePage("KEY_VALUE_VIEW");
+              await page.router.changePage("KEY_VALUE_VIEW");
             }
           }}
         >
           {secretPath + " "}
         </a>
       ))}
-      {state.secretItem.length != 0 && <span>{currentTitleSecretText(state)}</span>}
+      {page.state.secretItem.length != 0 && <span>{currentTitleSecretText(page)}</span>}
       {suffix.length != 0 && <span>{suffix}</span>}
     </div>
   );

src/pages/Secrets/TOTP/TOTPDelete.tsx

@@ -37,7 +37,7 @@ export class TOTPDeletePage extends Page {
 
   async renderPageTitle(): Promise<void> {
     render(
-      <SecretTitleElement router={this.router} suffix={i18next.t("totp_delete_suffix")} />,
+      <SecretTitleElement page={this} suffix={i18next.t("totp_delete_suffix")} />,
       this.router.pageTitleElement,
     );
   }

src/pages/Secrets/TOTP/TOTPNew.tsx

@@ -131,7 +131,7 @@ export class TOTPNewPage extends Page {
 
   async renderPageTitle(): Promise<void> {
     render(
-      <SecretTitleElement router={this.router} suffix={i18next.t("totp_new_suffix")} />,
+      <SecretTitleElement page={this} suffix={i18next.t("totp_new_suffix")} />,
       this.router.pageTitleElement,
     );
   }

src/pages/Secrets/TOTP/TOTPView.tsx

@@ -120,7 +120,7 @@ export class TOTPViewPage extends Page {
   }
 
   async renderPageTitle(): Promise<void> {
-    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
+    render(<SecretTitleElement page={this} />, this.router.pageTitleElement);
   }
 
   get name(): string {

src/pages/Secrets/Transit/NewTransitKey.tsx

@@ -78,7 +78,7 @@ export class NewTransitKeyPage extends Page {
 
   async renderPageTitle(): Promise<void> {
     render(
-      <SecretTitleElement router={this.router} suffix={i18next.t("transit_new_key_suffix")} />,
+      <SecretTitleElement page={this} suffix={i18next.t("transit_new_key_suffix")} />,
       this.router.pageTitleElement,
     );
   }

src/pages/Secrets/Transit/TransitDecrypt.tsx

@@ -84,7 +84,7 @@ export class TransitDecryptPage extends Page {
 
   async renderPageTitle(): Promise<void> {
     render(
-      <SecretTitleElement router={this.router} suffix={i18next.t("transit_decrypt_suffix")} />,
+      <SecretTitleElement page={this} suffix={i18next.t("transit_decrypt_suffix")} />,
       this.router.pageTitleElement,
     );
   }

src/pages/Secrets/Transit/TransitEncrypt.tsx

@@ -81,7 +81,7 @@ export class TransitEncryptPage extends Page {
 
   async renderPageTitle(): Promise<void> {
     render(
-      <SecretTitleElement router={this.router} suffix={i18next.t("transit_encrypt_suffix")} />,
+      <SecretTitleElement page={this} suffix={i18next.t("transit_encrypt_suffix")} />,
       this.router.pageTitleElement,
     );
   }

src/pages/Secrets/Transit/TransitRewrap.tsx

@@ -96,7 +96,7 @@ export class TransitRewrapPage extends Page {
 
   async renderPageTitle(): Promise<void> {
     render(
-      <SecretTitleElement router={this.router} suffix={i18next.t("transit_rewrap_suffix")} />,
+      <SecretTitleElement page={this} suffix={i18next.t("transit_rewrap_suffix")} />,
       this.router.pageTitleElement,
     );
   }

src/pages/Secrets/Transit/TransitView.tsx

@@ -98,7 +98,7 @@ export class TransitViewPage extends Page {
   }
 
   async renderPageTitle(): Promise<void> {
-    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
+    render(<SecretTitleElement page={this} />, this.router.pageTitleElement);
   }
 
   get name(): string {

src/pages/Secrets/Transit/TransitViewSecret.tsx

@@ -53,7 +53,7 @@ export class TransitViewSecretPage extends Page {
   }
 
   async renderPageTitle(): Promise<void> {
-    render(<SecretTitleElement router={this.router} />, this.router.pageTitleElement);
+    render(<SecretTitleElement page={this} />, this.router.pageTitleElement);
   }
 
   get name(): string {

src/state/storage/StorageType.ts

@@ -2,4 +2,4 @@ export interface StorageType {
   clear(): void;
   getItem(key: string): string;
   setItem(key: string, value: string);
-}
+}