feat(settings): add deep links to specific sections (@fehmer) (monkeytypegame#6661)

Allow to deep-link to  a specific config setting.

Users in discord often ask how to enable a specific setting. Instead of
guiding them manually to the correct settings we can use a deep-link:


https://github.com/user-attachments/assets/90b99660-13ae-49bf-8ff2-c5e6da290070

Added a link next to the group on mouse over to copy the deep link to
the clipboard:


![image](https://github.com/user-attachments/assets/d389754e-f43a-4638-b18f-729e818ef170)

---------

Co-authored-by: Miodec <[email protected]>

Author: fehmer

frontend/src/html/pages/settings.html

@@ -111,3 +111,12 @@
     bottom: 0%;
   }
 }
+
+@keyframes flashBorder {
+  0% {
+    box-shadow: 0 0 0 0.2em var(--main-color);
+  }
+  100% {
+    box-shadow: 0 0 0 0.2em transparent;
+  }
+}

frontend/src/styles/animations.scss

@@ -489,6 +489,26 @@
         }
       }
     }
+
+    &.highlight {
+      margin: -1em;
+      padding: 1em;
+      animation: flashBorder 4s ease-in;
+      border-radius: var(--roundness);
+    }
+
+    .groupTitle button.text {
+      padding: 0;
+      margin-left: 0.5em;
+      align-self: center;
+      opacity: 0;
+      .fas {
+        margin-right: 0;
+      }
+    }
+    &:hover .groupTitle button.text {
+      opacity: 1;
+    }
   }
 }
 

frontend/src/styles/settings.scss

@@ -54,7 +54,7 @@ export default class SettingsGroup<T extends ConfigValue> {
       this.elements = [el];
     } else if (this.mode === "button") {
       const els = document.querySelectorAll(`
-        .pageSettings .section[data-config-name=${this.configName}] button`);
+        .pageSettings .section[data-config-name=${this.configName}] .buttons button, .pageSettings .section[data-config-name=${this.configName}] .inputs button`);
 
       if (els.length === 0) {
         throw new Error(`Failed to find a button element for ${configName}`);

frontend/src/ts/elements/settings/settings-group.ts

@@ -14,7 +14,7 @@ settingsPage
   });
 
 settingsPage
-  ?.querySelector(".section.updateCookiePreferences button")
+  ?.querySelector(".section.updateCookiePreferences .buttons button")
   ?.addEventListener("click", () => {
     CookiesModal.show(true);
   });

frontend/src/ts/event-handlers/settings.ts

@@ -13,7 +13,7 @@ import * as Notifications from "../elements/notifications";
 import * as ImportExportSettingsModal from "../modals/import-export-settings";
 import * as ConfigEvent from "../observables/config-event";
 import * as ActivePage from "../states/active-page";
-import Page from "./page";
+import { PageWithUrlParams } from "./page";
 import { isAuthenticated } from "../firebase";
 import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
 import SlimSelect from "slim-select";
@@ -25,6 +25,7 @@ import {
   ThemeName,
   CustomLayoutFluid,
   FunboxName,
+  ConfigKeySchema,
 } from "@monkeytype/contracts/schemas/configs";
 import { getAllFunboxes, checkCompatibility } from "@monkeytype/funbox";
 import { getActiveFunboxNames } from "../test/funbox/list";
@@ -37,6 +38,7 @@ import { areSortedArraysEqual, areUnsortedArraysEqual } from "../utils/arrays";
 import { LayoutName } from "@monkeytype/contracts/schemas/layouts";
 import { LanguageGroupNames, LanguageGroups } from "../constants/languages";
 import { Language } from "@monkeytype/contracts/schemas/languages";
+import { z } from "zod";
 
 let settingsInitialized = false;
 
@@ -46,6 +48,24 @@ let customPolyglotSelect: SlimSelect | undefined;
 
 export const groups: SettingsGroups<ConfigValue> = {};
 
+const HighlightSchema = ConfigKeySchema.or(
+  z.enum([
+    "resetSettings",
+    "updateCookiePreferences",
+    "importexportSettings",
+    "theme",
+    "presets",
+    "tags",
+  ])
+);
+type Highlight = z.infer<typeof HighlightSchema>;
+
+const StateSchema = z
+  .object({
+    highlight: HighlightSchema,
+  })
+  .partial();
+
 async function initGroups(): Promise<void> {
   groups["smoothCaret"] = new SettingsGroup(
     "smoothCaret",
@@ -1001,7 +1021,7 @@ $(".pageSettings .section[data-config-name='minBurst']").on(
 );
 
 //funbox
-$(".pageSettings .section[data-config-name='funbox']").on(
+$(".pageSettings .section[data-config-name='funbox'] .buttons").on(
   "click",
   "button",
   (e) => {
@@ -1333,6 +1353,40 @@ function getThemeDropdownData(
   }));
 }
 
+function handleHighlightSection(highlight: Highlight): void {
+  const element = document.querySelector(
+    `[data-config-name="${highlight}"] .groupTitle,[data-section-id="${highlight}"] .groupTitle`
+  );
+
+  if (element !== null) {
+    setTimeout(() => {
+      element.scrollIntoView({ block: "center", behavior: "auto" });
+      element.parentElement?.classList.remove("highlight");
+      element.parentElement?.classList.add("highlight");
+    }, 250);
+  }
+}
+
+$(".pageSettings .section .groupTitle button").on("click", (e) => {
+  const section = e.target.parentElement?.parentElement;
+  const configName = (section?.dataset?.["configName"] ??
+    section?.dataset?.["sectionId"]) as Highlight | undefined;
+  if (configName === undefined) {
+    return;
+  }
+
+  page.setUrlParams({ highlight: configName });
+
+  navigator.clipboard
+    .writeText(window.location.toString())
+    .then(() => {
+      Notifications.add("Link copied to clipboard", 1);
+    })
+    .catch((e: unknown) => {
+      Notifications.add("Failed to copy to clipboard: " + e, -1);
+    });
+});
+
 ConfigEvent.subscribe((eventKey, eventValue) => {
   if (eventKey === "fullConfigChange") setEventDisabled(true);
   if (eventKey === "fullConfigChangeFinished") setEventDisabled(false);
@@ -1352,18 +1406,22 @@ ConfigEvent.subscribe((eventKey, eventValue) => {
   }
 });
 
-export const page = new Page({
+export const page = new PageWithUrlParams({
   id: "settings",
   element: $(".page.pageSettings"),
   path: "/settings",
+  urlParamsSchema: StateSchema,
   afterHide: async (): Promise<void> => {
     Skeleton.remove("pageSettings");
   },
-  beforeShow: async (): Promise<void> => {
+  beforeShow: async (options): Promise<void> => {
     Skeleton.append("pageSettings", "main");
     await UpdateConfig.loadPromise;
     await fillSettingsPage();
     await update();
+    if (options.urlParams?.highlight !== undefined) {
+      handleHighlightSection(options.urlParams.highlight);
+    }
   },
 });
 

frontend/src/ts/pages/settings.ts

@@ -43,6 +43,9 @@
     "testing.automaticallyOpenTestResults": "neverOpen",
     "[json]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[html]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
   },
 

monkeytype.code-workspace

@@ -438,7 +438,8 @@ export const ConfigSchema = z
   .strict();
 
 export type Config = z.infer<typeof ConfigSchema>;
-export type ConfigKey = keyof Config;
+export const ConfigKeySchema = ConfigSchema.keyof();
+export type ConfigKey = z.infer<typeof ConfigKeySchema>;
 export type ConfigValue = Config[keyof Config];
 
 export const PartialConfigSchema = ConfigSchema.partial();