Add a switch to toggle between the new and old grids

src/settings/SettingsModal.tsx

@@ -33,6 +33,7 @@ import {
   useShowInspector,
   useOptInAnalytics,
   canEnableSpatialAudio,
+  useNewGrid,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
@@ -62,6 +63,7 @@ export const SettingsModal = (props: Props) => {
   const [showInspector, setShowInspector] = useShowInspector();
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const [keyboardShortcuts, setKeyboardShortcuts] = useKeyboardShortcuts();
+  const [newGrid, setNewGrid] = useNewGrid();
 
   const downloadDebugLog = useDownloadDebugLog();
 
@@ -216,6 +218,17 @@ export const SettingsModal = (props: Props) => {
               }
             />
           </FieldRow>
+          <FieldRow>
+            <InputField
+              id="newGrid"
+              label={t("Use the upcoming grid system")}
+              type="checkbox"
+              checked={newGrid}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setNewGrid(e.target.checked)
+              }
+            />
+          </FieldRow>
           <FieldRow>
             <Button onPress={downloadDebugLog}>
               {t("Download debug logs")}

src/settings/useSetting.ts

@@ -90,3 +90,4 @@ export const useShowInspector = () => useSetting("show-inspector", false);
 export const useOptInAnalytics = () => useSetting("opt-in-analytics", false);
 export const useKeyboardShortcuts = () =>
   useSetting("keyboard-shortcuts", true);
+export const useNewGrid = () => useSetting("new-grid", false);