Add basic preference framework and mobile options and Add missing files

client/src/components/popup/preferences.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { Input, Typography } from '@mui/material'
+import Markdown from '../markdown'
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+import { IMobileContext } from "../infoview/context"
+
+interface PreferencesPopupProps extends IMobileContext{
+    handleClose: () => void
+} 
+
+export function PreferencesPopup({ mobile, setMobile, lockMobile, setLockMobile, handleClose }: PreferencesPopupProps) {
+    return <div className="modal-wrapper">
+        <div className="modal-backdrop" onClick={handleClose} />
+        <div className="modal">
+            <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
+            <Typography variant="body1" component="div" className="settings">
+                <div className='preferences-category'>
+                    <div className='category-title'>
+                        <h3>Mobile layout</h3>
+                    </div>
+                    <div className='preferences-item'>
+                        <FormControlLabel
+                            control={
+                            <Switch
+                                checked={mobile}
+                                onChange={() => setMobile(!mobile)}
+                                name="checked"
+                                color="primary"
+                            />
+                            }
+                            label="Enable"
+                            labelPlacement="start"
+                        />
+                    </div>
+                    <div className='preferences-item'>
+                        <FormControlLabel
+                            control={
+                            <Switch
+                                checked={!lockMobile}
+                                onChange={() => setLockMobile(!lockMobile)}
+                                name="checked"
+                                color="primary"
+                            />
+                            }
+                            label="Auto"
+                            labelPlacement="start"
+                        />
+                    </div>
+                </div>
+            </Typography>
+        </div>
+    </div>
+}

client/src/state/preferences.ts

@@ -0,0 +1,37 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+import { loadPreferences } from "./local_storage";
+
+interface PreferencesState {
+  mobile: boolean;
+  lockMobile: boolean;
+}
+
+export function getWindowDimensions() {
+  const {innerWidth: width, innerHeight: height } = window
+  return {width, height}
+}
+
+const { width } = getWindowDimensions()
+
+export const AUTO_SWITCH_THRESHOLD = 800
+
+const initialState: PreferencesState = loadPreferences() ?? {
+    mobile: width < AUTO_SWITCH_THRESHOLD,
+    lockMobile: false
+}
+
+export const preferencesSlice = createSlice({
+  name: "preferences",
+  initialState,
+  reducers: {
+    setMobile: (state, action) => {
+      state.mobile = action.payload;
+    },
+    setLockMobile: (state, action) => {
+      state.lockMobile = action.payload;
+    },
+  },
+});
+
+export const { setMobile, setLockMobile } = preferencesSlice.actions;