fix: apply initialData appState for zenmode and grid stats and refactor check param for actions (#2871)

* fix: pass default value for grid mode / zen mode so it sets the value from initialData appState

fixes #2870

* change checked from boolean to be a function which recieves appState and returns boolean

* fix

* use clsx

Co-authored-by: dwelle <luzar.david@gmail.com>

src/actions/actionToggleGridMode.tsx

@@ -1,21 +1,20 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 import { GRID_SIZE } from "../constants";
+import { AppState } from "../types";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
   perform(elements, appState) {
-    this.checked = !this.checked;
     return {
       appState: {
         ...appState,
-        gridSize: this.checked ? GRID_SIZE : null,
+        gridSize: this.checked!(appState) ? null : GRID_SIZE,
       },
       commitToHistory: false,
     };
   },
-  checked: false,
+  checked: (appState: AppState) => appState.gridSize !== null,
   contextItemLabel: "labels.gridMode",
-  // Wrong event code
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });

src/actions/actionToggleStats.tsx

@@ -3,15 +3,14 @@ import { register } from "./register";
 export const actionToggleStats = register({
   name: "stats",
   perform(elements, appState) {
-    this.checked = !this.checked;
     return {
       appState: {
         ...appState,
-        showStats: !appState.showStats,
+        showStats: !this.checked!(appState),
       },
       commitToHistory: false,
     };
   },
-  checked: false,
+  checked: (appState) => appState.showStats,
   contextItemLabel: "stats.title",
 });

src/actions/actionToggleZenMode.tsx

@@ -4,17 +4,16 @@ import { register } from "./register";
 export const actionToggleZenMode = register({
   name: "zenMode",
   perform(elements, appState) {
-    this.checked = !this.checked;
     return {
       appState: {
         ...appState,
-        zenModeEnabled: this.checked,
+        zenModeEnabled: !this.checked!(appState),
       },
       commitToHistory: false,
     };
   },
-  checked: false,
+  checked: (appState) => appState.zenModeEnabled,
   contextItemLabel: "buttons.zenMode",
-  // Wrong event code
-  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,
 });

src/actions/types.ts

@@ -106,7 +106,7 @@ export interface Action {
     elements: readonly ExcalidrawElement[],
     appState: AppState,
   ) => boolean;
-  checked?: boolean;
+  checked?: (appState: Readonly<AppState>) => boolean;
 }
 
 export interface ActionsManagerInterface {