Modify logic for all preferences

client/src/components/infoview/context.ts

@@ -5,6 +5,7 @@ import * as React from 'react';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
 import { InteractiveDiagnostic, InteractiveTermGoal } from '@leanprover/infoview-api';
 import { GameHint, InteractiveGoal, InteractiveGoals } from './rpc_api';
+import { PreferencesState } from '../../state/preferences';
 
 export const MonacoEditorContext = React.createContext<monaco.editor.IStandaloneCodeEditor>(
   null as any)
@@ -62,18 +63,26 @@ export const ProofStateContext = React.createContext<{
   setProofState: () => {},
 })
 
+export interface IPreferencesContext extends PreferencesState{
+  setLayout: React.Dispatch<React.SetStateAction<PreferencesState["layout"]>>;
+  setIsSavePreferences: React.Dispatch<React.SetStateAction<Boolean>>;
+}
+
+export const PreferencesContext = React.createContext<IPreferencesContext>({
+  layout: "auto",
+  isSavePreferences: false,
+  setLayout: () => {},
+  setIsSavePreferences: () => {}
+})
+
 export interface IMobileContext {
   mobile : boolean,
   setMobile: React.Dispatch<React.SetStateAction<Boolean>>,
-  lockMobile: boolean,
-  setLockMobile: React.Dispatch<React.SetStateAction<Boolean>>,
 }
 
 export const MobileContext = React.createContext<IMobileContext>({
   mobile: false,
   setMobile: () => {},
-  lockMobile: false,
-  setLockMobile: () => {}
 })
 
 export const WorldLevelIdContext = React.createContext<{

client/src/components/popup/preferences.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react'
 import { Input, Typography } from '@mui/material'
 import Markdown from '../markdown'
-import Switch from '@mui/material/Switch';
+import { Switch, Button, ButtonGroup } from '@mui/material';
+
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 import { IMobileContext } from "../infoview/context"
+import { PreferencesState } from "../../state/preferences"
 
-interface PreferencesPopupProps extends IMobileContext{
-    handleClose: () => void
-} 
+interface PreferencesPopupProps extends PreferencesState{
+    handleClose: () => void,
+    setLayout: (layout: "mobile" | "auto" | "desktop") => void,
+    setIsSavePreferences: (isSave: boolean) => void
+}
 
-export function PreferencesPopup({ mobile, setMobile, lockMobile, setLockMobile, handleClose }: PreferencesPopupProps) {
+export function PreferencesPopup({ layout, setLayout, isSavePreferences, setIsSavePreferences, handleClose }: PreferencesPopupProps) {    
     return <div className="modal-wrapper">
         <div className="modal-backdrop" onClick={handleClose} />
         <div className="modal">
@@ -18,34 +22,35 @@ export function PreferencesPopup({ mobile, setMobile, lockMobile, setLockMobile,
             <Typography variant="body1" component="div" className="settings">
                 <div className='preferences-category'>
                     <div className='category-title'>
-                        <h3>Mobile layout</h3>
+                        <h3>Layout</h3>
                     </div>
-                    <div className='preferences-item'>
+                    <div className='preferences-item first leave-left-gap'>
                         <FormControlLabel
                             control={
-                            <Switch
-                                checked={mobile}
-                                onChange={() => setMobile(!mobile)}
-                                name="checked"
-                                color="primary"
-                            />
+                                <ButtonGroup aria-label="outlined primary button group">
+                                    <Button onClick={() => setLayout("mobile")} variant={layout === "mobile" ? "contained" : "outlined"}>Mobile</Button>
+                                    <Button onClick={() => setLayout("auto")} variant={layout === "auto" ? "contained" : "outlined"}>Auto</Button>
+                                    <Button onClick={() => setLayout("desktop")} variant={layout === "desktop" ? "contained" : "outlined"}>Desktop</Button>
+                                </ButtonGroup>
                             }
-                            label="Enable"
-                            labelPlacement="start"
+                            label=""
                         />
                     </div>
+                </div>
+
+                <div className='preferences-category tail-category'>
                     <div className='preferences-item'>
                         <FormControlLabel
                             control={
-                            <Switch
-                                checked={!lockMobile}
-                                onChange={() => setLockMobile(!lockMobile)}
-                                name="checked"
-                                color="primary"
-                            />
+                                <Switch
+                                    checked={isSavePreferences}
+                                    onChange={() => setIsSavePreferences(!isSavePreferences)}
+                                    name="checked"
+                                    color="primary"
+                                />
                             }
-                            label="Auto"
-                            labelPlacement="start"
+                            label="Save my settings (in the browser store)"
+                            labelPlacement="end"
                         />
                     </div>
                 </div>

client/src/components/welcome.tsx

@@ -10,7 +10,7 @@ import { useAppDispatch, useAppSelector } from '../hooks'
 import { changedOpenedIntro, selectOpenedIntro } from '../state/progress'
 import { useGetGameInfoQuery, useLoadInventoryOverviewQuery } from '../state/api'
 import { Button } from './button'
-import { MobileContext } from './infoview/context'
+import { MobileContext, PreferencesContext } from './infoview/context'
 import { InventoryPanel } from './inventory'
 import { ErasePopup } from './popup/erase'
 import { InfoPopup } from './popup/game_info'
@@ -64,7 +64,9 @@ function IntroductionPanel({introduction, setPageNumber}: {introduction: string,
 /** main page of the game showing among others the tree of worlds/levels */
 function Welcome() {
   const gameId = React.useContext(GameIdContext)
-  const {mobile, setMobile, lockMobile, setLockMobile} = React.useContext(MobileContext)
+  const {mobile, setMobile} = React.useContext(MobileContext)
+  const {layout, isSavePreferences, setLayout, setIsSavePreferences} = React.useContext(PreferencesContext)
+
   const gameInfo = useGetGameInfoQuery({game: gameId})
   const inventory = useLoadInventoryOverviewQuery({game: gameId})
 
@@ -134,7 +136,7 @@ function Welcome() {
     {eraseMenu? <ErasePopup handleClose={closeEraseMenu}/> : null}
     {uploadMenu? <UploadPopup handleClose={closeUploadMenu}/> : null}
     {info ? <InfoPopup info={gameInfo.data?.info} handleClose={closeInfo}/> : null}
-    {preferencesPopup ? <PreferencesPopup mobile={mobile} setMobile={setMobile} lockMobile={lockMobile} setLockMobile={setLockMobile} handleClose={closePreferencesPopup}/> : null}
+    {preferencesPopup ? <PreferencesPopup layout={layout} isSavePreferences={isSavePreferences} setLayout={setLayout} setIsSavePreferences={setIsSavePreferences} handleClose={closePreferencesPopup}/> : null}
   </>
 }
 

client/src/components/world_tree.tsx

@@ -11,11 +11,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faXmark, faCircleQuestion } from '@fortawesome/free-solid-svg-icons'
 
 import { GameIdContext } from '../app'
-import { useAppDispatch, useMobile } from '../hooks'
+import { useAppDispatch } from '../hooks'
 import { selectDifficulty, changedDifficulty, selectCompleted } from '../state/progress'
 import { store } from '../state/store'
 
 import '../css/world_tree.css'
+import { MobileContext } from './infoview/context'
 
 // Settings for the world tree
 cytoscape.use( klay )
@@ -197,7 +198,7 @@ export function WorldSelectionMenu({rulesHelp, setRulesHelp}) {
   const gameId = React.useContext(GameIdContext)
   const difficulty = useSelector(selectDifficulty(gameId))
   const dispatch = useAppDispatch()
-  const { mobile } = useMobile()
+  const { mobile } = React.useContext(MobileContext)
 
 
   function label(x : number) {