Refactor LocalStorage and associated hooks

app/common/src/utilities/data/object.ts

@@ -1,18 +1,10 @@
 /** @file Functions related to manipulating objects. */
 
-// ===============
-// === Mutable ===
-// ===============
-
 /** Remove the `readonly` modifier from all fields in a type. */
 export type Mutable<T> = {
   -readonly [K in keyof T]: T[K]
 }
 
-// =============
-// === merge ===
-// =============
-
 /** Prevents generic parameter inference by hiding the type parameter behind a conditional type. */
 type NoInfer<T> = [T][T extends T ? 0 : never]
 
@@ -35,28 +27,16 @@ export function merger<T extends object>(update: Partial<NoInfer<T>>): (object:
   return object => merge(object, update)
 }
 
-// ================
-// === readonly ===
-// ================
-
 /** Makes all properties readonly at the type level. They are still mutable at the runtime level. */
 export function readonly<T extends object>(object: T): Readonly<T> {
   return object
 }
 
-// =====================
-// === unsafeMutable ===
-// =====================
-
 /** Removes the readonly modifier from all properties on the object. UNSAFE. */
 export function unsafeMutable<T extends object>(object: T): { -readonly [K in keyof T]: T[K] } {
   return object
 }
 
-// =====================
-// === unsafeEntries ===
-// =====================
-
 /**
  * Return the entries of an object. UNSAFE only when it is possible for an object to have
  * extra keys.
@@ -77,10 +57,6 @@ export function unsafeEntries<T extends object>(
   return Object.entries(object)
 }
 
-// =============================
-// === unsafeRemoveUndefined ===
-// =============================
-
 /** A the object with `undefined` unsafely removed from the value types of all of its keys. */
 export function unsafeRemoveUndefined<T extends object>(
   object: T,
@@ -89,10 +65,6 @@ export function unsafeRemoveUndefined<T extends object>(
   return object as never
 }
 
-// ==================
-// === mapEntries ===
-// ==================
-
 /**
  * Return the entries of an object. UNSAFE only when it is possible for an object to have
  * extra keys.
@@ -111,28 +83,16 @@ export function mapEntries<K extends PropertyKey, V, W>(
   )
 }
 
-// ================
-// === asObject ===
-// ================
-
 /** Either return the object unchanged, if the input was an object, or `null`. */
 export function asObject(value: unknown): object | null {
   return typeof value === 'object' && value != null ? value : null
 }
 
-// =============================
-// === singletonObjectOrNull ===
-// =============================
-
 /** Either return a singleton object, if the input was an object, or an empty array. */
 export function singletonObjectOrNull(value: unknown): [] | [object] {
   return typeof value === 'object' && value != null ? [value] : []
 }
 
-// ============
-// === omit ===
-// ============
-
 /** UNSAFE when `Ks` contains strings that are not in the runtime array. */
 export function omit<T, Ks extends readonly [string & keyof T, ...(string & keyof T)[]]>(
   object: T,
@@ -145,10 +105,6 @@ export function omit<T, Ks extends readonly [string & keyof T, ...(string & keyo
   ) as Omit<T, Ks[number]>
 }
 
-// ============
-// === pick ===
-// ============
-
 /** UNSAFE when `Ks` contains strings that are not in the runtime array. */
 export function pick<T, Ks extends readonly [string & keyof T, ...(string & keyof T)[]]>(
   object: T,
@@ -161,26 +117,14 @@ export function pick<T, Ks extends readonly [string & keyof T, ...(string & keyo
   ) as Pick<T, Ks[number]>
 }
 
-// ===================
-// === ExtractKeys ===
-// ===================
-
 /** Filter a type `T` to include only the properties extending the given type `U`. */
 export type ExtractKeys<T, U> = {
   [K in keyof T]: T[K] extends U ? K : never
 }[keyof T]
 
-// ================
-// === MethodOf ===
-// ================
-
 /** An instance method of the given type. */
 export type MethodOf<T> = (this: T, ...args: never) => unknown
 
-// ===================
-// === useObjectId ===
-// ===================
-
 /** Composable providing support for managing object identities. */
 export function useObjectId() {
   let lastId = 0
@@ -197,3 +141,8 @@ export function useObjectId() {
   }
   return { objectId }
 }
+
+/** Create an object given its prototype. */
+export function createObject<T extends object>(parent: T): T {
+  return Object.create(parent)
+}

app/gui/e2e/dashboard/api.ts

@@ -6,8 +6,8 @@ import type * as remoteBackend from '#/services/RemoteBackend'
 import * as remoteBackendPaths from '#/services/remoteBackendPaths'
 
 import * as dateTime from '#/utilities/dateTime'
-import * as object from '#/utilities/object'
 import * as permissions from '#/utilities/permissions'
+import * as object from 'enso-common/src/utilities/data/object'
 import * as uniqueString from 'enso-common/src/utilities/uniqueString'
 
 import * as actions from './actions'

app/gui/src/dashboard/App.tsx

@@ -40,7 +40,6 @@ import * as React from 'react'
 import * as reactQuery from '@tanstack/react-query'
 import * as router from 'react-router-dom'
 import * as toastify from 'react-toastify'
-import * as z from 'zod'
 
 import * as detect from 'enso-common/src/detect'
 
@@ -53,7 +52,7 @@ import BackendProvider, { useLocalBackend } from '#/providers/BackendProvider'
 import DriveProvider from '#/providers/DriveProvider'
 import { useHttpClient } from '#/providers/HttpClientProvider'
 import InputBindingsProvider from '#/providers/InputBindingsProvider'
-import LocalStorageProvider, * as localStorageProvider from '#/providers/LocalStorageProvider'
+import LocalStorageProvider from '#/providers/LocalStorageProvider'
 import { useLogger } from '#/providers/LoggerProvider'
 import ModalProvider, * as modalProvider from '#/providers/ModalProvider'
 import * as navigator2DProvider from '#/providers/Navigator2DProvider'
@@ -93,18 +92,19 @@ import RemoteBackend from '#/services/RemoteBackend'
 import { FeatureFlagsProvider } from '#/providers/FeatureFlagsProvider'
 import * as appBaseUrl from '#/utilities/appBaseUrl'
 import * as eventModule from '#/utilities/event'
-import LocalStorage from '#/utilities/LocalStorage'
-import * as object from '#/utilities/object'
 import { Path } from '#/utilities/path'
 import { STATIC_QUERY_OPTIONS } from '#/utilities/reactQuery'
-
+import * as object from 'enso-common/src/utilities/data/object'
+
+import {
+  useAcceptedPrivacyPolicyVersionState,
+  useAcceptedTermsOfServiceVersionState,
+  useInputBindings,
+  useLocalRootDirectoryState,
+} from '#/appLocalStorage'
 import { useInitAuthService } from '#/authentication/service'
 import { InvitedToOrganizationModal } from '#/modals/InvitedToOrganizationModal'
 
-// ============================
-// === Global configuration ===
-// ============================
-
 const DEFAULT_TRANSITION_OPTIONS: Spring = {
   type: 'spring',
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
@@ -115,44 +115,13 @@ const DEFAULT_TRANSITION_OPTIONS: Spring = {
   velocity: 0,
 }
 
-declare module '#/utilities/LocalStorage' {
-  /** */
-  interface LocalStorageData {
-    readonly inputBindings: Readonly<Record<string, readonly string[]>>
-    readonly localRootDirectory: string
-  }
-}
-
-LocalStorage.registerKey('inputBindings', {
-  schema: z.record(z.string().array().readonly()).transform((value) =>
-    Object.fromEntries(
-      Object.entries<unknown>({ ...value }).flatMap((kv) => {
-        const [k, v] = kv
-        return Array.isArray(v) && v.every((item): item is string => typeof item === 'string') ?
-            [[k, v]]
-          : []
-      }),
-    ),
-  ),
-})
-
-LocalStorage.registerKey('localRootDirectory', { schema: z.string() })
-
-// ======================
-// === getMainPageUrl ===
-// ======================
-
 /** Returns the URL to the main page. This is the current URL, with the current route removed. */
 function getMainPageUrl() {
   const mainPageUrl = new URL(window.location.href)
   mainPageUrl.pathname = mainPageUrl.pathname.replace(appUtils.ALL_PATHS_REGEX, '')
   return mainPageUrl
 }
 
-// ===========
-// === App ===
-// ===========
-
 /** Global configuration for the `App` component. */
 export interface AppProps {
   readonly vibrancy: boolean
@@ -277,10 +246,6 @@ export default function App(props: AppProps) {
   )
 }
 
-// =================
-// === AppRouter ===
-// =================
-
 /** Props for an {@link AppRouter}. */
 export interface AppRouterProps extends AppProps {
   readonly projectManagerRootDirectory: projectManager.Path | null
@@ -302,7 +267,6 @@ function AppRouter(props: AppRouterProps) {
   const navigate = router.useNavigate()
 
   const { getText } = textProvider.useText()
-  const { localStorage } = localStorageProvider.useLocalStorage()
   const { setModal } = modalProvider.useSetModal()
 
   const navigator2D = navigator2DProvider.useNavigator2D()
@@ -324,8 +288,10 @@ function AppRouter(props: AppRouterProps) {
 
   const [inputBindingsRaw] = React.useState(() => inputBindingsModule.createBindings())
 
+  const { get: getInputBindings, set: setInputBindings } = useInputBindings()
+
   React.useEffect(() => {
-    const savedInputBindings = localStorage.get('inputBindings')
+    const savedInputBindings = getInputBindings()
     if (savedInputBindings != null) {
       const filteredInputBindings = object.mapEntries(
         inputBindingsRaw.metadata,
@@ -340,12 +306,11 @@ function AppRouter(props: AppRouterProps) {
         }
       }
     }
-  }, [localStorage, inputBindingsRaw])
+  }, [inputBindingsRaw, getInputBindings])
 
   const inputBindings = React.useMemo(() => {
     const updateLocalStorage = () => {
-      localStorage.set(
-        'inputBindings',
+      setInputBindings(
         Object.fromEntries(
           Object.entries(inputBindingsRaw.metadata).map((kv) => {
             const [k, v] = kv
@@ -388,14 +353,14 @@ function AppRouter(props: AppRouterProps) {
         return inputBindingsRaw.unregister.bind(inputBindingsRaw)
       },
     }
-  }, [localStorage, inputBindingsRaw])
+  }, [inputBindingsRaw, setInputBindings])
 
   const mainPageUrl = getMainPageUrl()
 
-  // Subscribe to `localStorage` updates to trigger a rerender when the terms of service
-  // or privacy policy have been accepted.
-  localStorageProvider.useLocalStorageState('termsOfService')
-  localStorageProvider.useLocalStorageState('privacyPolicy')
+  // Subscribe to `localStorage` updates (and ignore the value)
+  // to trigger a rerender when the terms of service or privacy policy have been accepted.
+  useAcceptedTermsOfServiceVersionState()
+  useAcceptedPrivacyPolicyVersionState()
 
   const authService = useInitAuthService(props)
 
@@ -572,13 +537,9 @@ function AppRouter(props: AppRouterProps) {
   )
 }
 
-// ====================================
-// === LocalBackendPathSynchronizer ===
-// ====================================
-
 /** Keep `localBackend.rootPath` in sync with the saved root path state. */
 function LocalBackendPathSynchronizer() {
-  const [localRootDirectory] = localStorageProvider.useLocalStorageState('localRootDirectory')
+  const [localRootDirectory] = useLocalRootDirectoryState()
   const localBackend = useLocalBackend()
   if (localBackend) {
     if (localRootDirectory != null) {

app/gui/src/dashboard/appLocalStorage.ts

@@ -0,0 +1,42 @@
+/** @file App-wide local storage keys. */
+import { defineLocalStorageKey } from '#/providers/LocalStorageProvider'
+
+export const { use: useInputBindings, useState: useInputBindingsState } = defineLocalStorageKey(
+  'inputBindings',
+  {
+    schema: (z) =>
+      z
+        .record(z.string().array().readonly())
+        .transform((value): { readonly [k: string]: readonly string[] } =>
+          Object.fromEntries(
+            Object.entries<unknown>({ ...value }).flatMap((kv) => {
+              const [k, v] = kv
+              return (
+                  Array.isArray(v) && v.every((item): item is string => typeof item === 'string')
+                ) ?
+                  [[k, v]]
+                : []
+            }),
+          ),
+        ),
+  },
+)
+
+export const { use: useLocalRootDirectory, useState: useLocalRootDirectoryState } =
+  defineLocalStorageKey('localRootDirectory', {
+    schema: (z) => z.string(),
+  })
+
+export const {
+  use: useAcceptedTermsOfServiceVersion,
+  useState: useAcceptedTermsOfServiceVersionState,
+} = defineLocalStorageKey('termsOfService', {
+  schema: (z) => z.object({ versionHash: z.string() }),
+})
+
+export const {
+  use: useAcceptedPrivacyPolicyVersion,
+  useState: useAcceptedPrivacyPolicyVersionState,
+} = defineLocalStorageKey('privacyPolicy', {
+  schema: (z) => z.object({ versionHash: z.string() }),
+})

app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx

@@ -280,6 +280,8 @@ export const BUTTON_STYLES = tv({
     { variant: 'link', size: 'medium', class: 'font-medium' },
     { variant: 'link', size: 'large', class: 'font-medium' },
     { variant: 'link', size: 'hero', class: 'font-medium' },
+
+    { variant: 'icon', isDisabled: true, class: { icon: 'opacity-50' } },
   ],
 })
 

app/gui/src/dashboard/components/AriaComponents/Checkbox/CheckboxGroup.tsx

@@ -6,10 +6,10 @@
 import type { CheckboxGroupProps as AriaCheckboxGroupProps } from '#/components/aria'
 import { CheckboxGroup as AriaCheckboxGroup, mergeProps } from '#/components/aria'
 import { mergeRefs } from '#/utilities/mergeRefs'
-import { omit } from '#/utilities/object'
 import { forwardRef } from '#/utilities/react'
 import type { VariantProps } from '#/utilities/tailwindVariants'
 import { tv } from '#/utilities/tailwindVariants'
+import { omit } from 'enso-common/src/utilities/data/object'
 import type { CSSProperties, ForwardedRef, ReactElement } from 'react'
 import type { FieldVariantProps } from '../Form'
 import { Form, type FieldPath, type FieldProps, type FieldStateProps, type TSchema } from '../Form'

app/gui/src/dashboard/components/AriaComponents/Radio/RadioGroup.tsx

@@ -10,8 +10,8 @@ import * as aria from '#/components/aria'
 import * as mergeRefs from '#/utilities/mergeRefs'
 import * as twv from '#/utilities/tailwindVariants'
 
-import { omit } from '#/utilities/object'
 import { forwardRef } from '#/utilities/react'
+import { omit } from 'enso-common/src/utilities/data/object'
 import type { FieldVariantProps } from '../Form'
 import * as formComponent from '../Form'
 import * as radioGroupContext from './RadioGroupContext'