[pull] master from monkeytypegame:master

frontend/src/ts/components/modals/ForgotPasswordModal.tsx

@@ -34,7 +34,7 @@ export function ForgotPasswordModal() {
   }));
 
   return (
-    <AnimatedModal id="ForgotPassword" title="Forgot password">
+    <AnimatedModal id="ForgotPassword" title="Forgot password" mode="dialog">
       <form
         class="flex flex-col justify-center gap-4"
         onSubmit={(e) => {

frontend/src/ts/components/modals/GoogleSignUpModal.tsx

@@ -48,6 +48,7 @@ export function GoogleSignupModal() {
     <AnimatedModal
       id={modalId}
       title="Account name"
+      mode="dialog"
       afterHide={() => void afterHide()}
     >
       <p>Please enter a username before continuing</p>

frontend/src/ts/components/modals/UserReportModal.tsx

@@ -42,6 +42,7 @@ export function UserReportModal() {
     <AnimatedModal
       modalClass="max-w-3xl"
       id="UserReport"
+      mode="dialog"
       title={`Report user ${getUserToReport()?.name}`}
     >
       <p>

frontend/src/ts/components/pages/profile/ActivityCalendar.tsx

@@ -1,5 +1,5 @@
 import { TestActivity } from "@monkeytype/schemas/users";
-import { createSignal, JSXElement, onMount, Show } from "solid-js";
+import { createEffect, createSignal, JSXElement, Show } from "solid-js";
 
 import { get as getSeverConfiguration } from "../../../ape/server-configuration";
 import { getSnapshot, getTestActivityCalendar } from "../../../db";
@@ -24,38 +24,43 @@ export function ActivityCalendar(props: {
 
   let calendar: TestActivityCalendar | undefined;
 
-  const sync = () => {
-    if (props.testActivity === undefined || element() === undefined) {
-      calendar = undefined;
-      clearTestActivity(element()?.native);
-      return;
-    }
-
-    if (props.isAccountPage) {
-      //signals cannot store classes, use the testActivity from the snapshot for now
-      calendar = getSnapshot()?.testActivity;
-    } else {
-      calendar = new TestActivityCalendar(
-        props.testActivity.testsByDays,
-        new Date(props.testActivity.lastDay),
-        firstDayOfTheWeek,
-      );
-    }
+  createEffect(() =>
+    (() => {
+      if (
+        (!props.isAccountPage && props.testActivity === undefined) ||
+        (props.isAccountPage && getSnapshot()?.testActivity === undefined) ||
+        element() === undefined
+      ) {
+        calendar = undefined;
+        clearTestActivity(element()?.native);
+        return;
+      }
 
-    initTestActivity(
-      // oxlint-disable-next-line typescript/no-non-null-assertion
-      element()!.native,
-      calendar,
-    );
+      if (props.isAccountPage) {
+        //signals cannot store classes, use the testActivity from the snapshot for now
+        calendar = getSnapshot()?.testActivity;
+      } else {
+        const testActivity = props.testActivity as TestActivity;
+        calendar = new TestActivityCalendar(
+          testActivity.testsByDays,
+          new Date(testActivity.lastDay),
+          firstDayOfTheWeek,
+        );
+      }
 
-    if (!props.isAccountPage) {
-      // oxlint-disable-next-line typescript/no-non-null-assertion
-      const title = element()!.qsr(".top .title");
-      title.appendHtml(" last 12 months");
-    }
-  };
+      initTestActivity(
+        // oxlint-disable-next-line typescript/no-non-null-assertion
+        element()!.native,
+        calendar,
+      );
 
-  onMount(() => sync());
+      if (!props.isAccountPage) {
+        // oxlint-disable-next-line typescript/no-non-null-assertion
+        const title = element()!.qsr(".top .title");
+        title.appendHtml(" last 12 months");
+      }
+    })(),
+  );
 
   const yearOptions = () => {
     const startYear =

frontend/src/ts/components/pages/profile/UserProfile.tsx

@@ -52,7 +52,9 @@ export function UserProfile(props: {
       </Show>
 
       <ActivityCalendar
-        testActivity={props.profile.testActivity}
+        testActivity={
+          props.isAccountPage ? undefined : props.profile.testActivity
+        }
         isAccountPage={props.isAccountPage}
       />
     </div>