impr(account): add url params / deep links to account settings (@fehmer) (#6660)

Co-authored-by: Miodec <jack@monkeytype.com>

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

@@ -6,7 +6,7 @@
     </div> -->
     <div class="main">
       <div class="tabs">
-        <button class="text active" data-tab="general">
+        <button class="text" data-tab="account">
           <i class="fas fa-user"></i>
           account
         </button>
@@ -14,7 +14,7 @@
           <i class="fas fa-key"></i>
           authentication
         </button>
-        <button class="text" data-tab="api">
+        <button class="text" data-tab="apeKeys">
           <i class="fas fa-code"></i>
           ape keys
         </button>
@@ -24,7 +24,7 @@
         </button>
       </div>
       <div class="right">
-        <div class="tab" data-tab="general">
+        <div class="tab hidden" data-tab="account">
           <div class="section discordIntegration">
             <div class="title">
               <i class="fab fa-discord"></i>
@@ -131,7 +131,7 @@
           </div>
           <!--  -->
         </div>
-        <div class="tab hidden" data-tab="api">
+        <div class="tab hidden" data-tab="apeKeys">
           <div class="section apeKeys">
             <div class="title">
               <i class="fas fa-key"></i>

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

@@ -1,4 +1,4 @@
-import Page from "./page";
+import { PageWithUrlParams } from "./page";
 import * as Skeleton from "../utils/skeleton";
 import { getAuthenticatedUser, isAuthenticated } from "../firebase";
 import * as ActivePage from "../states/active-page";
@@ -9,15 +9,19 @@ import * as StreakHourOffsetModal from "../modals/streak-hour-offset";
 import * as Loader from "../elements/loader";
 import * as ApeKeyTable from "../elements/account-settings/ape-key-table";
 import * as Notifications from "../elements/notifications";
+import { z } from "zod";
 
 const pageElement = $(".page.pageAccountSettings");
 
-type State = {
-  activeTab: "authentication" | "general" | "api" | "dangerZone";
-};
+const StateSchema = z.object({
+  tab: z.enum(["authentication", "account", "apeKeys", "dangerZone"]),
+});
+type State = z.infer<typeof StateSchema>;
+
+const UrlParameterSchema = StateSchema.partial();
 
 const state: State = {
-  activeTab: "general",
+  tab: "account",
 };
 
 function updateAuthenticationSections(): void {
@@ -122,20 +126,18 @@ function updateIntegrationSections(): void {
 function updateTabs(): void {
   void swapElements(
     pageElement.find(".tab.active"),
-    pageElement.find(`.tab[data-tab="${state.activeTab}"]`),
+    pageElement.find(`.tab[data-tab="${state.tab}"]`),
     250,
     async () => {
       //
     },
     async () => {
       pageElement.find(".tab").removeClass("active");
-      pageElement
-        .find(`.tab[data-tab="${state.activeTab}"]`)
-        .addClass("active");
+      pageElement.find(`.tab[data-tab="${state.tab}"]`).addClass("active");
     }
   );
   pageElement.find("button").removeClass("active");
-  pageElement.find(`button[data-tab="${state.activeTab}"]`).addClass("active");
+  pageElement.find(`button[data-tab="${state.tab}"]`).addClass("active");
 }
 
 function updateAccountSections(): void {
@@ -180,11 +182,13 @@ export function updateUI(): void {
   updateAccountSections();
   void ApeKeyTable.update(updateUI);
   updateTabs();
+  page.setUrlParams(state);
 }
 
 $(".page.pageAccountSettings").on("click", ".tabs button", (event) => {
-  state.activeTab = $(event.target).data("tab") as State["activeTab"];
+  state.tab = $(event.target).data("tab") as State["tab"];
   updateTabs();
+  page.setUrlParams(state);
 });
 
 $(
@@ -207,16 +211,21 @@ $(".page.pageAccountSettings #setStreakHourOffset").on("click", () => {
   StreakHourOffsetModal.show();
 });
 
-export const page = new Page({
+export const page = new PageWithUrlParams({
   id: "accountSettings",
   display: "Account Settings",
   element: pageElement,
   path: "/account-settings",
+  urlParamsSchema: UrlParameterSchema,
   afterHide: async (): Promise<void> => {
     Skeleton.remove("pageAccountSettings");
   },
-  beforeShow: async (): Promise<void> => {
+  beforeShow: async (options): Promise<void> => {
+    if (options.urlParams?.tab !== undefined) {
+      state.tab = options.urlParams.tab;
+    }
     Skeleton.append("pageAccountSettings", "main");
+    pageElement.find(`.tab[data-tab="${state.tab}"]`).addClass("active");
     updateUI();
   },
 });