feat: add read-only dialog for mobile (#428)

src/ui/QuadraticUI.tsx

@@ -21,6 +21,8 @@ import { GetCellsDBSetSheet } from '../grid/sheet/Cells/GetCellsDB';
 import { PixiApp } from '../gridGL/pixiApp/PixiApp';
 import { SheetController } from '../grid/controller/sheetController';
 import { LocalFilesContext } from './QuadraticUIContext';
+import ReadOnlyDialog from './components/ReadOnlyDialog';
+import { IS_READONLY_MODE } from '../constants/app';
 
 export default function QuadraticUI({ app, sheetController }: { app: PixiApp; sheetController: SheetController }) {
   const [showDebugMenu] = useLocalStorage('showDebugMenu', false);
@@ -83,6 +85,8 @@ export default function QuadraticUI({ app, sheetController }: { app: PixiApp; sh
       {presentationMode && <PresentationModeHint />}
       <SnackBar {...snackBar} />
       {hasInitialPageLoadError && <InitialPageLoadError />}
+
+      {IS_READONLY_MODE && <ReadOnlyDialog />}
     </div>
   );
 }

src/ui/components/ReadOnlyDialog.tsx

@@ -0,0 +1,30 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+import useLocalStorage from '../../hooks/useLocalStorage';
+
+export default function ReadOnlyDialog() {
+  const [showReadOnlyMsg, setShowReadOnlyMsg] = useLocalStorage('showReadOnlyMsg', true);
+  const handleClose = () => {
+    setShowReadOnlyMsg(false);
+  };
+  return (
+    <Dialog
+      open={showReadOnlyMsg}
+      onClose={handleClose}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">Quadratic is built for desktop</DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          On mobile, sheets are read-only. To edit sheets, run code, and use the full power of the app, open it on your
+          desktop computer.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} autoFocus>
+          Ok, thanks
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}