feat: refactor all app storage managment (#310)

Author: zardoy

src/appConfig.ts

@@ -1,6 +1,7 @@
 import { disabledSettings, options, qsOptions } from './optionsStorage'
 import { miscUiState } from './globalState'
 import { setLoadingScreenStatus } from './appStatus'
+import { setStorageDataOnAppConfigLoad } from './react/appStorageProvider'
 
 export type AppConfig = {
   // defaultHost?: string
@@ -42,6 +43,8 @@ export const loadAppConfig = (appConfig: AppConfig) => {
       }
     }
   }
+
+  setStorageDataOnAppConfigLoad()
 }
 
 export const isBundledConfigUsed = !!process.env.INLINED_APP_CONFIG

src/browserfs.ts

@@ -15,6 +15,7 @@ import { getFixedFilesize } from './downloadAndOpenFile'
 import { packetsReplayState } from './react/state/packetsReplayState'
 import { createFullScreenProgressReporter } from './core/progressReporter'
 import { showNotification } from './react/NotificationProvider'
+import { resetAppStorage } from './react/appStorageProvider'
 const { GoogleDriveFileSystem } = require('google-drive-browserfs/src/backends/GoogleDrive')
 
 browserfs.install(window)
@@ -620,24 +621,13 @@ export const openWorldZip = async (...args: Parameters<typeof openWorldZipInner>
   }
 }
 
-export const resetLocalStorageWorld = () => {
-  for (const key of Object.keys(localStorage)) {
-    if (/^[\da-fA-F]{8}(?:\b-[\da-fA-F]{4}){3}\b-[\da-fA-F]{12}$/g.test(key) || key === '/') {
-      localStorage.removeItem(key)
-    }
-  }
-}
-
-export const resetLocalStorageWithoutWorld = () => {
-  for (const key of Object.keys(localStorage)) {
-    if (!/^[\da-fA-F]{8}(?:\b-[\da-fA-F]{4}){3}\b-[\da-fA-F]{12}$/g.test(key) && key !== '/') {
-      localStorage.removeItem(key)
-    }
-  }
+export const resetLocalStorage = () => {
   resetOptions()
+  resetAppStorage()
 }
 
-window.resetLocalStorageWorld = resetLocalStorageWorld
+window.resetLocalStorage = resetLocalStorage
+
 export const openFilePicker = (specificCase?: 'resourcepack') => {
   // create and show input picker
   let picker: HTMLInputElement = document.body.querySelector('input#file-zip-picker')!

src/controls.ts

@@ -25,11 +25,12 @@ import { showNotification } from './react/NotificationProvider'
 import { lastConnectOptions } from './react/AppStatusProvider'
 import { onCameraMove, onControInit } from './cameraRotationControls'
 import { createNotificationProgressReporter } from './core/progressReporter'
+import { appStorage } from './react/appStorageProvider'
 
 
-export const customKeymaps = proxy(JSON.parse(localStorage.keymap || '{}')) as UserOverridesConfig
+export const customKeymaps = proxy(appStorage.keybindings)
 subscribe(customKeymaps, () => {
-  localStorage.keymap = JSON.stringify(customKeymaps)
+  appStorage.keybindings = customKeymaps
 })
 
 const controlOptions = {

src/optionsGuiScheme.tsx

@@ -3,19 +3,21 @@ import { useSnapshot } from 'valtio'
 import { openURL } from 'renderer/viewer/lib/simpleUtils'
 import { noCase } from 'change-case'
 import { gameAdditionalState, miscUiState, openOptionsMenu, showModal } from './globalState'
-import { AppOptions, options } from './optionsStorage'
+import { AppOptions, getChangedSettings, options, resetOptions } from './optionsStorage'
 import Button from './react/Button'
 import { OptionMeta, OptionSlider } from './react/OptionsItems'
 import Slider from './react/Slider'
 import { getScreenRefreshRate } from './utils'
 import { setLoadingScreenStatus } from './appStatus'
-import { openFilePicker, resetLocalStorageWithoutWorld } from './browserfs'
+import { openFilePicker, resetLocalStorage } from './browserfs'
 import { completeResourcepackPackInstall, getResourcePackNames, resourcePackState, uninstallResourcePack } from './resourcePack'
 import { downloadPacketsReplay, packetsRecordingState } from './packetsReplay/packetsReplayLegacy'
-import { showOptionsModal } from './react/SelectOption'
+import { showInputsModal, showOptionsModal } from './react/SelectOption'
 import supportedVersions from './supportedVersions.mjs'
 import { getVersionAutoSelect } from './connect'
 import { createNotificationProgressReporter } from './core/progressReporter'
+import { customKeymaps } from './controls'
+import { appStorage } from './react/appStorageProvider'
 
 export const guiOptionsScheme: {
   [t in OptionsGroupType]: Array<{ [K in keyof AppOptions]?: Partial<OptionMeta<AppOptions[K]>> } & { custom? }>
@@ -450,16 +452,31 @@ export const guiOptionsScheme: {
         return <Button
           inScreen
           onClick={() => {
-            if (confirm('Are you sure you want to reset all settings?')) resetLocalStorageWithoutWorld()
+            if (confirm('Are you sure you want to reset all settings?')) resetOptions()
           }}
-        >Reset all settings</Button>
+        >Reset settings</Button>
+      },
+    },
+    {
+      custom () {
+        return <Button
+          inScreen
+          onClick={() => {
+            if (confirm('Are you sure you want to remove all data (settings, keybindings, servers, username, auth, proxies)?')) resetLocalStorage()
+          }}
+        >Remove all data</Button>
       },
     },
     {
       custom () {
         return <Category>Developer</Category>
       },
     },
+    {
+      custom () {
+        return <Button label='Export/Import...' onClick={() => openOptionsMenu('export-import')} inScreen />
+      }
+    },
     {
       custom () {
         const { active } = useSnapshot(packetsRecordingState)
@@ -521,8 +538,91 @@ export const guiOptionsScheme: {
       },
     },
   ],
+  'export-import': [
+    {
+      custom () {
+        return <Category>Export/Import Data</Category>
+      }
+    },
+    {
+      custom () {
+        return <Button
+          inScreen
+          disabled={true}
+          onClick={() => {}}
+        >Import Data</Button>
+      }
+    },
+    {
+      custom () {
+        return <Button
+          inScreen
+          onClick={async () => {
+            const data = await showInputsModal('Export Profile', {
+              profileName: {
+                type: 'text',
+              },
+              exportSettings: {
+                type: 'checkbox',
+                defaultValue: true,
+              },
+              exportKeybindings: {
+                type: 'checkbox',
+                defaultValue: true,
+              },
+              exportServers: {
+                type: 'checkbox',
+                defaultValue: true,
+              },
+              saveUsernameAndProxy: {
+                type: 'checkbox',
+                defaultValue: true,
+              },
+            })
+            const fileName = `${data.profileName ? `${data.profileName}-` : ''}web-client-profile.json`
+            const json = {
+              _about: 'Minecraft Web Client (mcraft.fun) Profile',
+              ...data.exportSettings ? {
+                options: getChangedSettings(),
+              } : {},
+              ...data.exportKeybindings ? {
+                keybindings: customKeymaps,
+              } : {},
+              ...data.saveUsernameAndProxy ? {
+                username: appStorage.username,
+                proxy: appStorage.proxiesData?.selected,
+              } : {},
+            }
+            const blob = new Blob([JSON.stringify(json, null, 2)], { type: 'application/json' })
+            const url = URL.createObjectURL(blob)
+            const a = document.createElement('a')
+            a.href = url
+            a.download = fileName
+            a.click()
+            URL.revokeObjectURL(url)
+          }}
+        >Export Data</Button>
+      }
+    },
+    {
+      custom () {
+        return <Button
+          inScreen
+          disabled
+        >Export Worlds</Button>
+      }
+    },
+    {
+      custom () {
+        return <Button
+          inScreen
+          disabled
+        >Export Resource Pack</Button>
+      }
+    }
+  ],
 }
-export type OptionsGroupType = 'main' | 'render' | 'interface' | 'controls' | 'sound' | 'advanced' | 'VR'
+export type OptionsGroupType = 'main' | 'render' | 'interface' | 'controls' | 'sound' | 'advanced' | 'VR' | 'export-import'
 
 const Category = ({ children }) => <div style={{
   fontSize: 9,

src/optionsStorage.ts

@@ -1,11 +1,9 @@
-// todo implement async options storage
-
 import { proxy, subscribe } from 'valtio/vanilla'
-// weird webpack configuration bug: it cant import valtio/utils in this file
 import { subscribeKey } from 'valtio/utils'
 import { omitObj } from '@zardoy/utils'
 import { appQueryParamsArray } from './appParams'
 import type { AppConfig } from './appConfig'
+import { appStorage } from './react/appStorageProvider'
 
 const isDev = process.env.NODE_ENV === 'development'
 const initialAppConfig = process.env?.INLINED_APP_CONFIG as AppConfig ?? {}
@@ -164,12 +162,31 @@ const migrateOptions = (options: Partial<AppOptions & Record<string, any>>) => {
 
 export type AppOptions = typeof defaultOptions
 
-// when opening html file locally in browser, localStorage is shared between all ever opened html files, so we try to avoid conflicts
-const localStorageKey = process.env?.SINGLE_FILE_BUILD ? 'minecraftWebClientOptions' : 'options'
+const isDeepEqual = (a: any, b: any): boolean => {
+  if (a === b) return true
+  if (typeof a !== typeof b) return false
+  if (typeof a !== 'object') return false
+  if (a === null || b === null) return a === b
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false
+    return a.every((item, index) => isDeepEqual(item, b[index]))
+  }
+  const keysA = Object.keys(a)
+  const keysB = Object.keys(b)
+  if (keysA.length !== keysB.length) return false
+  return keysA.every(key => isDeepEqual(a[key], b[key]))
+}
+
+export const getChangedSettings = () => {
+  return Object.fromEntries(
+    Object.entries(options).filter(([key, value]) => !isDeepEqual(defaultOptions[key], value))
+  )
+}
+
 export const options: AppOptions = proxy({
   ...defaultOptions,
   ...initialAppConfig.defaultSettings,
-  ...migrateOptions(JSON.parse(localStorage[localStorageKey] || '{}')),
+  ...migrateOptions(appStorage.options),
   ...qsOptions
 })
 
@@ -181,14 +198,14 @@ export const resetOptions = () => {
 
 Object.defineProperty(window, 'debugChangedOptions', {
   get () {
-    return Object.fromEntries(Object.entries(options).filter(([key, v]) => defaultOptions[key] !== v))
+    return getChangedSettings()
   },
 })
 
 subscribe(options, () => {
   // Don't save disabled settings to localStorage
   const saveOptions = omitObj(options, [...disabledSettings.value] as any)
-  localStorage[localStorageKey] = JSON.stringify(saveOptions)
+  appStorage.options = saveOptions
 })
 
 type WatchValue = <T extends Record<string, any>>(proxy: T, callback: (p: T, isChanged: boolean) => void) => () => void

src/react/AddServerOrConnect.tsx

@@ -3,7 +3,7 @@ import { appQueryParams } from '../appParams'
 import { fetchServerStatus, isServerValid } from '../api/mcStatusApi'
 import { parseServerAddress } from '../parseServerAddress'
 import Screen from './Screen'
-import Input from './Input'
+import Input, { INPUT_LABEL_WIDTH, InputWithLabel } from './Input'
 import Button from './Button'
 import SelectGameVersion from './SelectGameVersion'
 import { usePassesScaledDimensions } from './UIProvider'
@@ -32,8 +32,6 @@ interface Props {
   allowAutoConnect?: boolean
 }
 
-const ELEMENTS_WIDTH = 190
-
 export default ({ onBack, onConfirm, title = 'Add a Server', initialData, parseQs, onQsConnect, placeholders, accounts, versions, allowAutoConnect }: Props) => {
   const isSmallHeight = !usePassesScaledDimensions(null, 350)
   const qsParamName = parseQs ? appQueryParams.name : undefined
@@ -256,20 +254,8 @@ export default ({ onBack, onConfirm, title = 'Add a Server', initialData, parseQ
 
 const ButtonWrapper = ({ ...props }: React.ComponentProps<typeof Button>) => {
   props.style ??= {}
-  props.style.width = ELEMENTS_WIDTH
+  props.style.width = INPUT_LABEL_WIDTH
   return <Button {...props} />
 }
 
-const InputWithLabel = ({ label, span, ...props }: React.ComponentProps<typeof Input> & { label, span? }) => {
-  return <div style={{
-    display: 'flex',
-    flexDirection: 'column',
-    gridRow: span ? 'span 2 / span 2' : undefined,
-  }}
-  >
-    <label style={{ fontSize: 12, marginBottom: 1, color: 'lightgray' }}>{label}</label>
-    <Input rootStyles={{ width: ELEMENTS_WIDTH }} {...props} />
-  </div>
-}
-
 const fallbackIfNotFound = (index: number) => (index === -1 ? undefined : index)

src/react/Chat.css

@@ -90,11 +90,11 @@ div.chat-wrapper {
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;
-  background-color: rgb(24, 24, 24);
+  background-color: #272727;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgb(50, 50, 50);
+  background-color: #747474;
 }
 
 .chat-completions-items>div {
@@ -160,7 +160,6 @@ input[type=text],
   padding-bottom: 1px;
   padding-left: 2px;
   padding-right: 2px;
-  height: 15px;
 }
 
 .chat-mobile-input-hidden {

src/react/Input.tsx

@@ -10,7 +10,7 @@ interface Props extends Omit<React.ComponentProps<'input'>, 'width'> {
   width?: number
 }
 
-export default ({ autoFocus, rootStyles, inputRef, validateInput, defaultValue, width, ...inputProps }: Props) => {
+const Input = ({ autoFocus, rootStyles, inputRef, validateInput, defaultValue, width, ...inputProps }: Props) => {
   if (width) rootStyles = { ...rootStyles, width }
 
   const ref = useRef<HTMLInputElement>(null!)
@@ -51,3 +51,19 @@ export default ({ autoFocus, rootStyles, inputRef, validateInput, defaultValue,
     />
   </div>
 }
+
+export default Input
+
+export const INPUT_LABEL_WIDTH = 190
+
+export const InputWithLabel = ({ label, span, ...props }: React.ComponentProps<typeof Input> & { label, span? }) => {
+  return <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gridRow: span ? 'span 2 / span 2' : undefined,
+  }}
+  >
+    <label style={{ fontSize: 12, marginBottom: 1, color: 'lightgray' }}>{label}</label>
+    <Input rootStyles={{ width: INPUT_LABEL_WIDTH }} {...props} />
+  </div>
+}