Fix Caps Lock indicator inversion on initial load

backend/src/app.ts

@@ -24,7 +24,6 @@ function buildApp(): express.Application {
   app.use(helmet());
 
   app.set("trust proxy", 1);
-
   app.use(compatibilityCheckMiddleware);
   app.use(contextMiddleware);
 

frontend/src/ts/test/caps-warning.ts

@@ -22,16 +22,32 @@ function hide(): void {
   }
 }
 
-function update(event: KeyboardEvent): void {
-  if (event.key === "CapsLock" && capsState !== null) {
-    capsState = !capsState;
-  } else {
+function update(event: Event): void {
+  let newCapsState: boolean | undefined = undefined;
+
+  if (event instanceof KeyboardEvent) {
+    const modState = event.getModifierState?.("CapsLock");
+    if (modState !== undefined) {
+      newCapsState = modState;
+    } else if (event.key === "CapsLock") {
+      // If getModifierState is not available or returns undefined,
+      // and the key pressed is CapsLock, toggle the current state.
+      // This handles cases where getModifierState might not be reliable
+      // or available (e.g., older browsers, or specific OS/browser combinations).
+      newCapsState = !capsState; // Use the global capsState for toggling
+    }
+  } else if (event instanceof MouseEvent) {
     const modState = event.getModifierState?.("CapsLock");
     if (modState !== undefined) {
-      capsState = modState;
+      newCapsState = modState;
     }
   }
 
+  // Only update the global capsState if newCapsState was determined
+  if (newCapsState !== undefined) {
+    capsState = newCapsState;
+  }
+
   try {
     if (Config.capsLockWarning && capsState) {
       show();
@@ -46,3 +62,6 @@ document.addEventListener("keyup", update);
 document.addEventListener("keydown", (event) => {
   if (Misc.isMac()) update(event);
 });
+
+document.addEventListener("mousedown", update);
+document.addEventListener("mouseup", update);