feat: persist and export gridStep/gridModeEnabled app state

- Add gridStep and gridModeEnabled to getPersistedAppState so these
  settings survive page reload and collaborative sync
- Include gridStep and gridModeEnabled in exportDrawingToFile and
  exportFromEditor so exported .excalidraw files carry grid config
- Both fields are optional and only included when non-null, preserving
  backward compatibility with drawings that lack these fields

Change-Id: Icd8a403a56470122ca2ea197e20b9597a468cecc

Author: OhYee

frontend/src/pages/editor/shared.test.ts

@@ -157,6 +157,8 @@ describe("editor/shared scene guards", () => {
       getPersistedAppState({
         viewBackgroundColor: "#123456",
         gridSize: 24,
+        gridStep: 5,
+        gridModeEnabled: true,
         cursorButton: "down",
         activeTool: { type: "hand", locked: false, lastActiveTool: null },
         selectedElementIds: { a: true },
@@ -169,6 +171,8 @@ describe("editor/shared scene guards", () => {
     ).toEqual({
       viewBackgroundColor: "#123456",
       gridSize: 24,
+      gridStep: 5,
+      gridModeEnabled: true,
     });
   });
 

frontend/src/pages/editor/shared.ts

@@ -31,10 +31,15 @@ type BuildRemoteSceneUpdateInput = {
   incomingFiles?: Record<string, any>;
 };
 
-export const getPersistedAppState = (appState: Record<string, any> | null | undefined) => ({
-  viewBackgroundColor: appState?.viewBackgroundColor ?? "#ffffff",
-  gridSize: appState?.gridSize ?? null,
-});
+export const getPersistedAppState = (appState: Record<string, any> | null | undefined) => {
+  const base: Record<string, any> = {
+    viewBackgroundColor: appState?.viewBackgroundColor ?? "#ffffff",
+    gridSize: appState?.gridSize ?? null,
+  };
+  if (appState?.gridStep != null) base.gridStep = appState.gridStep;
+  if (appState?.gridModeEnabled != null) base.gridModeEnabled = appState.gridModeEnabled;
+  return base;
+};
 
 export const buildRemoteSceneUpdate = ({
   collaborators,

frontend/src/utils/exportUtils.ts

@@ -23,6 +23,8 @@ export const exportDrawingToFile = (
     elements: drawing.elements || [],
     appState: {
       gridSize: drawing.appState?.gridSize ?? null,
+      ...(drawing.appState?.gridStep != null && { gridStep: drawing.appState.gridStep }),
+      ...(drawing.appState?.gridModeEnabled != null && { gridModeEnabled: drawing.appState.gridModeEnabled }),
       viewBackgroundColor: drawing.appState?.viewBackgroundColor ?? "#ffffff",
     },
     files: drawing.files || {},
@@ -58,6 +60,8 @@ export const exportFromEditor = (
     elements: Array.from(elements),
     appState: {
       gridSize: appState?.gridSize ?? null,
+      ...(appState?.gridStep != null && { gridStep: appState.gridStep }),
+      ...(appState?.gridModeEnabled != null && { gridModeEnabled: appState.gridModeEnabled }),
       viewBackgroundColor: appState?.viewBackgroundColor ?? "#ffffff",
     },
     files: files || {},