impr: add copy details to notification history (@fehmer) (monkeytypegame#7262)

Add details to notifications.

If details are available show share icon on hover in the notification
history. On click the full content is copied to the clipboard. With this
is easier for an user to share the full details of an error on github or
discord.

<img width="377" height="107" alt="image"
src="https://github.com/user-attachments/assets/f22638a1-bafd-4708-8d8a-0ec48db10f1d"
/>

<img width="377" height="107" alt="image"
src="https://github.com/user-attachments/assets/d4a66860-f99f-4ac1-992c-81e31ab13eba"
/>



```json
{
    "title": "Error",
    "message": "Failed to save config",
    "details": {
        "status": 422,
        "validationErrors": [
            "Unrecognized key(s) in object: 'invalid'"
        ]
    }
}
```

---------

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

Author: fehmer

frontend/src/styles/popups.scss

@@ -1863,15 +1863,17 @@ body.darkMode {
       }
     }
     .notificationHistory .list .item {
-      grid-template-areas: "indicator title" "indicator body";
-      grid-template-columns: 0.25rem calc(100% - 0.25rem);
+      grid-template-areas: "indicator title buttons" "indicator body buttons";
       .title {
         font-size: 0.75rem;
         color: var(--sub-color);
       }
       .body {
         opacity: 1;
       }
+      .highlight {
+        color: var(--main-color) !important;
+      }
     }
     .accountAlerts {
       .title {

frontend/src/ts/auth.ts

@@ -45,14 +45,11 @@ async function sendVerificationEmail(): Promise<void> {
 
   Loader.show();
   qs(".sendVerificationEmail")?.disable();
-  const result = await Ape.users.verificationEmail();
+  const response = await Ape.users.verificationEmail();
   qs(".sendVerificationEmail")?.enable();
-  if (result.status !== 200) {
+  if (response.status !== 200) {
     Loader.hide();
-    Notifications.add(
-      "Failed to request verification email: " + result.body.message,
-      -1,
-    );
+    Notifications.add("Failed to request verification email", -1, { response });
   } else {
     Loader.hide();
     Notifications.add("Verification email sent", 1);

frontend/src/ts/db.ts

@@ -299,7 +299,7 @@ export async function getUserResults(offset?: number): Promise<boolean> {
   const response = await Ape.results.get({ query: { offset } });
 
   if (response.status !== 200) {
-    Notifications.add("Error getting results: " + response.body.message, -1);
+    Notifications.add("Error getting results", -1, { response });
     return false;
   }
 
@@ -357,10 +357,7 @@ export async function addCustomTheme(
 
   const response = await Ape.users.addCustomTheme({ body: { ...theme } });
   if (response.status !== 200) {
-    Notifications.add(
-      "Error adding custom theme: " + response.body.message,
-      -1,
-    );
+    Notifications.add("Error adding custom theme", -1, { response });
     return false;
   }
 
@@ -400,10 +397,7 @@ export async function editCustomTheme(
     body: { themeId, theme: newTheme },
   });
   if (response.status !== 200) {
-    Notifications.add(
-      "Error editing custom theme: " + response.body.message,
-      -1,
-    );
+    Notifications.add("Error editing custom theme", -1, { response });
     return false;
   }
 
@@ -427,10 +421,7 @@ export async function deleteCustomTheme(themeId: string): Promise<boolean> {
 
   const response = await Ape.users.deleteCustomTheme({ body: { themeId } });
   if (response.status !== 200) {
-    Notifications.add(
-      "Error deleting custom theme: " + response.body.message,
-      -1,
-    );
+    Notifications.add("Error deleting custom theme", -1, { response });
     return false;
   }
 
@@ -923,7 +914,7 @@ export async function saveConfig(config: Partial<Config>): Promise<void> {
   if (isAuthenticated()) {
     const response = await Ape.configs.save({ body: config });
     if (response.status !== 200) {
-      Notifications.add("Failed to save config: " + response.body.message, -1);
+      Notifications.add("Failed to save config", -1, { response });
     }
   }
 }
@@ -932,7 +923,7 @@ export async function resetConfig(): Promise<void> {
   if (isAuthenticated()) {
     const response = await Ape.configs.delete();
     if (response.status !== 200) {
-      Notifications.add("Failed to reset config: " + response.body.message, -1);
+      Notifications.add("Failed to reset config", -1, { response });
     }
   }
 }
@@ -1055,10 +1046,7 @@ export async function getTestActivityCalendar(
     Loader.show();
     const response = await Ape.users.getTestActivity();
     if (response.status !== 200) {
-      Notifications.add(
-        "Error getting test activities: " + response.body.message,
-        -1,
-      );
+      Notifications.add("Error getting test activities", -1, { response });
       Loader.hide();
       return undefined;
     }

frontend/src/ts/elements/account-settings/ape-key-table.ts

@@ -27,7 +27,8 @@ const editApeKey = new SimpleModal({
     if (response.status !== 200) {
       return {
         status: -1,
-        message: "Failed to update key: " + response.body.message,
+        message: "Failed to update key",
+        notificationOptions: { response },
       };
     }
     return {
@@ -53,7 +54,8 @@ const deleteApeKeyModal = new SimpleModal({
     if (response.status !== 200) {
       return {
         status: -1,
-        message: "Failed to delete key: " + response.body.message,
+        message: "Failed to delete key",
+        notificationOptions: { response },
       };
     }
 
@@ -128,7 +130,8 @@ const generateApeKey = new SimpleModal({
     if (response.status !== 200) {
       return {
         status: -1,
-        message: "Failed to generate key: " + response.body.message,
+        message: "Failed to generate key",
+        notificationOptions: { response },
       };
     }
 
@@ -174,7 +177,7 @@ async function getData(): Promise<boolean> {
       void update();
       return false;
     }
-    Notifications.add("Error getting ape keys: " + response.body.message, -1);
+    Notifications.add("Error getting ape keys", -1, { response });
     return false;
   }
 
@@ -261,7 +264,7 @@ async function toggleActiveKey(keyId: string): Promise<void> {
   });
   Loader.hide();
   if (response.status !== 200) {
-    Notifications.add("Failed to update key: " + response.body.message, -1);
+    Notifications.add("Failed to update key", -1, { response });
     return;
   }
   key.enabled = !key.enabled;

frontend/src/ts/elements/account-settings/blocked-user-table.ts

@@ -24,10 +24,7 @@ async function getData(): Promise<boolean> {
 
   if (response.status !== 200) {
     blockedUsers = [];
-    Notifications.add(
-      "Error getting blocked users: " + response.body.message,
-      -1,
-    );
+    Notifications.add("Error getting blocked users", -1, { response });
     return false;
   }
 

frontend/src/ts/elements/alerts.ts

@@ -6,7 +6,12 @@ import * as NotificationEvent from "../observables/notification-event";
 import * as BadgeController from "../controllers/badge-controller";
 import * as Notifications from "../elements/notifications";
 import * as ConnectionState from "../states/connection";
-import { escapeHTML } from "../utils/misc";
+import {
+  applyReducedMotion,
+  createErrorMessage,
+  escapeHTML,
+  promiseAnimate,
+} from "../utils/misc";
 import AnimatedModal from "../utils/animated-modal";
 import { updateXp as accountPageUpdateProfile } from "./profile";
 import { MonkeyMail } from "@monkeytype/schemas/users";
@@ -29,10 +34,17 @@ let mailToMarkRead: string[] = [];
 let mailToDelete: string[] = [];
 
 type State = {
-  notifications: { message: string; level: number; customTitle?: string }[];
+  notifications: {
+    id: string;
+    title: string;
+    message: string;
+    level: number;
+    details?: string | object;
+  }[];
   psas: { message: string; level: number }[];
 };
 
+let notificationId = 0;
 const state: State = {
   notifications: [],
   psas: [],
@@ -289,28 +301,29 @@ function fillNotifications(): void {
   } else {
     notificationHistoryListEl.empty();
     for (const n of state.notifications) {
-      const { message, level, customTitle } = n;
-      let title = "Notice";
+      const { message, level, title } = n;
+
       let levelClass = "sub";
       if (level === -1) {
         levelClass = "error";
-        title = "Error";
       } else if (level === 1) {
         levelClass = "main";
-        title = "Success";
-      }
-
-      if (customTitle !== undefined) {
-        title = customTitle;
       }
 
       notificationHistoryListEl.prependHtml(`
-      <div class="item">
+      <div class="item" data-id="${n.id}">
       <div class="indicator ${levelClass}"></div>
       <div class="title">${title}</div>
       <div class="body">
         ${escapeHTML(message)}
       </div>
+      <div class="buttons">
+        ${
+          n.details !== undefined
+            ? `<button class="copyNotification textButton" aria-label="Copy details to clipboard" data-balloon-pos="left"><i class="fas fa-fw fa-clipboard"></i></button>`
+            : ``
+        }
+      </div>
     </div>
     `);
     }
@@ -396,15 +409,89 @@ function updateClaimDeleteAllButton(): void {
   }
 }
 
+async function copyNotificationToClipboard(target: HTMLElement): Promise<void> {
+  const id = (target as HTMLElement | null)
+    ?.closest(".item")
+    ?.getAttribute("data-id")
+    ?.toString();
+
+  if (id === undefined) {
+    throw new Error("Notification ID is undefined");
+  }
+  const notification = state.notifications.find((it) => it.id === id);
+  if (notification === undefined) return;
+
+  const icon = target.querySelector("i") as HTMLElement;
+
+  try {
+    await navigator.clipboard.writeText(
+      JSON.stringify(
+        {
+          title: notification.title,
+          message: notification.message,
+          details: notification.details,
+        },
+        null,
+        4,
+      ),
+    );
+
+    const duration = applyReducedMotion(100);
+
+    await promiseAnimate(icon, {
+      scale: [1, 0.8],
+      opacity: [1, 0],
+      duration,
+    });
+    icon.classList.remove("fa-clipboard");
+    icon.classList.add("fa-check", "highlight");
+    await promiseAnimate(icon, {
+      scale: [0.8, 1],
+      opacity: [0, 1],
+      duration,
+    });
+
+    await promiseAnimate(icon, {
+      scale: [1, 0.8],
+      opacity: [1, 0],
+      delay: 3000,
+      duration,
+    });
+    icon.classList.remove("fa-check", "highlight");
+    icon.classList.add("fa-clipboard");
+
+    await promiseAnimate(icon, {
+      scale: [0.8, 1],
+      opacity: [0, 1],
+      duration,
+    });
+  } catch (e: unknown) {
+    const msg = createErrorMessage(e, "Could not copy to clipboard");
+    Notifications.add(msg, -1);
+  }
+}
+
 qs("header nav .showAlerts")?.on("click", () => {
   void show();
 });
 
-NotificationEvent.subscribe((message, level, customTitle) => {
+NotificationEvent.subscribe((message, level, options) => {
+  let title = "Notice";
+  if (level === -1) {
+    title = "Error";
+  } else if (level === 1) {
+    title = "Success";
+  }
+  if (options.customTitle !== undefined) {
+    title = options.customTitle;
+  }
+
   state.notifications.push({
+    id: (notificationId++).toString(),
+    title,
     message,
     level,
-    customTitle,
+    details: options.details,
   });
   if (state.notifications.length > 25) {
     state.notifications.shift();
@@ -495,5 +582,11 @@ const modal = new AnimatedModal({
 
         markReadAlert(id);
       });
+
+    alertsPopupEl
+      .qs(".notificationHistory .list")
+      ?.onChild("click", ".item .buttons .copyNotification", (e) => {
+        void copyNotificationToClipboard(e.target as HTMLElement);
+      });
   },
 });

frontend/src/ts/elements/notifications.ts

@@ -5,6 +5,7 @@ import * as NotificationEvent from "../observables/notification-event";
 import { convertRemToPixels } from "../utils/numbers";
 import { animate } from "animejs";
 import { qsr } from "../utils/dom";
+import { CommonResponsesType } from "@monkeytype/contracts/util/api";
 
 const notificationCenter = qsr("#notificationCenter");
 const notificationCenterHistory = notificationCenter.qsr(".history");
@@ -107,6 +108,7 @@ class Notification {
         visibleStickyNotifications++;
         updateClearAllButton();
       }
+
       notificationCenterHistory.prependHtml(`
         <div class="notif ${cls}" id=${this.id} style="opacity: 0;">
             <div class="message"><div class="title"><div class="icon">${icon}</div>${title}</div>${this.message}</div>
@@ -270,14 +272,33 @@ export type AddNotificationOptions = {
   customIcon?: string;
   closeCallback?: () => void;
   allowHTML?: boolean;
+  details?: object | string;
+  response?: CommonResponsesType;
 };
 
 export function add(
   message: string,
   level = 0,
   options: AddNotificationOptions = {},
 ): void {
-  NotificationEvent.dispatch(message, level, options.customTitle);
+  let details = options.details;
+
+  if (options.response !== undefined) {
+    details = {
+      status: options.response.status,
+      additionalDetails: options.details,
+      validationErrors:
+        options.response.status === 422
+          ? options.response.body.validationErrors
+          : undefined,
+    };
+    message = message + ": " + options.response.body.message;
+  }
+
+  NotificationEvent.dispatch(message, level, {
+    customTitle: options.customTitle,
+    details,
+  });
 
   new Notification(
     "notification",