feat: add practice typing mode (no stats, xp, or pb) (@Vishal27alpha)

backend/src/api/controllers/user.ts

@@ -270,7 +270,7 @@ export async function deleteUser(req: MonkeyRequest): Promise<MonkeyResponse> {
 
   if (error) {
     if (error instanceof MonkeyError && error.status === 404) {
-      //userinfo was already deleted. We ignore this and still try to remove the  other data
+      //userinfo was already deleted. We ignore and still try to remove the other data
     } else {
       throw error;
     }

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

@@ -133,6 +133,25 @@
               </button>
             </div>
           </div>
+          <div class="section resultSaving">
+            <div class="title">
+              <i class="fas fa-save"></i>
+              <span>result saving</span>
+            </div>
+            <div class="text">
+              Toggle result saving. When disabled, results will not be saved (
+              <b>practice mode</b>
+              ).
+            </div>
+            <div class="buttons">
+              <label class="toggleSwitch">
+                <input type="checkbox" id="toggleResultSaving" />
+                <span class="track" aria-hidden="true"></span>
+                <span class="toggleLabel">on</span>
+              </label>
+            </div>
+          </div>
+
           <!--  -->
         </div>
         <div class="tab hidden" data-tab="apeKeys">

frontend/src/styles/account-settings.scss

@@ -115,6 +115,72 @@
               color: var(--error-color);
             }
           }
+          &.resultSaving {
+            .buttons {
+              justify-items: center;
+            }
+            .toggleSwitch {
+              display: inline-flex;
+              align-items: center;
+              gap: 0.75rem;
+              cursor: pointer;
+              user-select: none;
+            }
+
+            .toggleSwitch input {
+              position: absolute;
+              opacity: 0;
+              width: 0;
+              height: 0;
+            }
+
+            .toggleSwitch .track {
+              width: 3rem;
+              height: 1.6rem;
+              border-radius: 999px;
+              background: var(--sub-alt-color);
+              border: 1px solid var(--sub-color);
+              position: relative;
+              transition:
+                background 0.2s ease,
+                border-color 0.2s ease;
+            }
+
+            .toggleSwitch .track::after {
+              content: "";
+              position: absolute;
+              top: 2px;
+              left: 2px;
+              width: 1.2rem;
+              height: 1.2rem;
+              border-radius: 999px;
+              background: var(--text-color);
+              transition:
+                transform 0.2s ease,
+                background 0.2s ease;
+            }
+
+            .toggleSwitch input:checked + .track {
+              background: var(--main-color);
+              border-color: var(--main-color);
+            }
+
+            .toggleSwitch input:checked + .track::after {
+              transform: translateX(1.4rem);
+              background: var(--bg-color);
+            }
+
+            .toggleSwitch .toggleLabel {
+              color: var(--sub-color);
+              text-transform: uppercase;
+              letter-spacing: 0.08em;
+              font-size: 0.75rem;
+            }
+
+            .toggleSwitch input:checked ~ .toggleLabel {
+              color: var(--main-color);
+            }
+          }
         }
         &[data-tab="apeKeys"],
         &[data-tab="blockedUsers"] {

frontend/src/ts/ape/adapters/ts-rest-adapter.ts

@@ -29,9 +29,14 @@ function buildApi(timeout: number): (args: ApiFetcherArgs) => Promise<{
 }> {
   return async (request: ApiFetcherArgs) => {
     try {
-      const token = await getIdToken();
-      if (token !== null) {
-        request.headers["Authorization"] = `Bearer ${token}`;
+      // ===== DEV AUTH (LOCAL ONLY) =====
+      if (import.meta.env.DEV) {
+        request.headers["Authorization"] = "Uid localuser|vishal@test.com";
+      } else {
+        const token = await getIdToken();
+        if (token !== null) {
+          request.headers["Authorization"] = `Bearer ${token}`;
+        }
       }
 
       const usePolyfill = AbortSignal?.timeout === undefined;

frontend/src/ts/commandline/lists/result-saving.ts

@@ -31,7 +31,7 @@ const commands: Command[] = [
     id: "setResultSaving",
     display: "Result saving...",
     icon: "fa-save",
-    alias: "results",
+    alias: "results practice",
     subgroup,
   },
 ];

frontend/src/ts/firebase.ts

@@ -187,6 +187,7 @@ export async function getIdToken(): Promise<string | null> {
   if (user === null) return null;
   return firebaseGetIdToken(user);
 }
+
 async function setPersistence(
   rememberMe: boolean,
   store = false,

frontend/src/ts/modals/simple-modals-base.ts

@@ -13,6 +13,7 @@ export type PopupKey =
   | "deleteAccount"
   | "resetAccount"
   | "optOutOfLeaderboards"
+  | "toggleResultSaving"
   | "applyCustomFont"
   | "resetPersonalBests"
   | "resetSettings"
@@ -38,6 +39,7 @@ export const list: Record<PopupKey, SimpleModal | undefined> = {
   deleteAccount: undefined,
   resetAccount: undefined,
   optOutOfLeaderboards: undefined,
+  toggleResultSaving: undefined,
   applyCustomFont: undefined,
   resetPersonalBests: undefined,
   resetSettings: undefined,

frontend/src/ts/modals/simple-modals.ts

@@ -7,6 +7,9 @@ import * as Settings from "../pages/settings";
 import * as ThemePicker from "../elements/settings/theme-picker";
 import * as CustomText from "../test/custom-text";
 import { FirebaseError } from "firebase/app";
+import * as TestState from "../test/test-state";
+import * as ModesNotice from "../elements/modes-notice";
+
 import {
   isAuthenticated,
   getAuthenticatedUser,
@@ -816,6 +819,25 @@ list.optOutOfLeaderboards = new SimpleModal({
   },
 });
 
+list.toggleResultSaving = new SimpleModal({
+  id: "toggleResultSaving",
+  title: "Result saving",
+  text: "Toggle result saving. When disabled, results will not be saved (practice mode).",
+  buttonText: "toggle",
+  execFn: async (): Promise<ExecReturn> => {
+    const current = TestState.savingEnabled;
+    TestState.setSaving(!current);
+    await ModesNotice.update();
+
+    return {
+      status: 1,
+      message: !current
+        ? "Result saving enabled"
+        : "Result saving disabled (practice mode)",
+    };
+  },
+});
+
 list.applyCustomFont = new SimpleModal({
   id: "applyCustomFont",
   title: "Custom font",

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

@@ -5,11 +5,13 @@ import { getActivePage } from "../signals/core";
 import { swapElements } from "../utils/misc";
 import { getSnapshot } from "../db";
 import Ape from "../ape";
+import * as TestState from "../test/test-state";
 import * as StreakHourOffsetModal from "../modals/streak-hour-offset";
 import { showLoaderBar } from "../signals/loader-bar";
 import * as ApeKeyTable from "../elements/account-settings/ape-key-table";
 import * as BlockedUserTable from "../elements/account-settings/blocked-user-table";
 import * as Notifications from "../elements/notifications";
+import * as ModesNotice from "../elements/modes-notice";
 import { z } from "zod";
 import * as AuthEvent from "../observables/auth-event";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
@@ -147,11 +149,24 @@ function updateAccountSections(): void {
   }
 }
 
+function updateResultSavingToggle(): void {
+  const toggle = pageElement.qs(
+    "#toggleResultSaving",
+  ) as HTMLInputElement | null;
+  if (!toggle) return;
+
+  toggle.checked = TestState.savingEnabled;
+  pageElement
+    .qs(".section.resultSaving .toggleLabel")
+    ?.setText(TestState.savingEnabled ? "on" : "off");
+}
+
 export function updateUI(): void {
   if (getActivePage() !== "accountSettings") return;
   updateAuthenticationSections();
   updateIntegrationSections();
   updateAccountSections();
+  updateResultSavingToggle();
   void ApeKeyTable.update(updateUI);
   void BlockedUserTable.update();
   updateTabs();
@@ -241,6 +256,25 @@ qs(".pageAccountSettings")?.onChild(
     showPopup("resetPersonalBests");
   },
 );
+qs(".pageAccountSettings")?.onChild(
+  "change",
+  "#toggleResultSaving",
+  (event) => {
+    const target = event.target as HTMLInputElement | null;
+    if (!target) return;
+
+    TestState.setSaving(target.checked);
+    void ModesNotice.update();
+    updateResultSavingToggle();
+
+    Notifications.add(
+      target.checked
+        ? "Result saving enabled"
+        : "Result saving disabled (practice mode)",
+      1,
+    );
+  },
+);
 
 qs(".pageAccountSettings")?.onChild("click", "#updateAccountName", () => {
   showPopup("updateName");