fix themes, deprecate unused XRUI (#8197)

packages/client-core/src/systems/ui/AdminControlsMenuView/index.tsx

@@ -33,14 +33,15 @@ import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
 import XRTextButton from '../../components/XRTextButton'
 import styleString from './index.scss?inline'
 
+/** @deprecated */
 export function createAdminControlsMenuView() {
   return createXRUI(AdminControlsMenuView, createAdminControlsMenuState())
 }
 
 function createAdminControlsMenuState() {
   return createState({})
 }
-
+/** @deprecated */
 const AdminControlsMenuView = () => {
   const { t } = useTranslation()
 

packages/client-core/src/systems/ui/AvatarDetailView/index.tsx

@@ -38,6 +38,7 @@ import { createState, getMutableState, useHookstate } from '@etherealengine/hype
 
 import styleString from './index.scss?inline'
 
+/** @deprecated */
 export function createAvatarDetailView(id: string) {
   const videoPreviewMesh = new Mesh(new CircleGeometry(0.25, 32), new MeshBasicMaterial())
   const ui = createXRUI(
@@ -54,7 +55,7 @@ export function createAvatarDetailView(id: string) {
 interface AvatarDetailState {
   id: string
 }
-
+/** @deprecated */
 const AvatarDetailView = () => {
   const { t } = useTranslation()
   const detailState = useXRUIState<AvatarDetailState>()

packages/client-core/src/systems/ui/ChatDetailView/index.tsx

@@ -38,14 +38,15 @@ import { getAvatarURLForUser } from '../../../user/components/UserMenu/util'
 import XRInput from '../../components/XRInput'
 import styleString from './index.scss?inline'
 
+/** @deprecated */
 export function createChatDetailView() {
   return createXRUI(ChatDetailView, createChatDetailState())
 }
 
 function createChatDetailState() {
   return createState({})
 }
-
+/** @deprecated */
 const ChatDetailView = () => {
   const [unreadMessages, setUnreadMessages] = useState(false)
 

packages/client-core/src/systems/ui/EmoteDetailView/index.tsx

@@ -36,14 +36,15 @@ import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
 import XRIconButton from '../../components/XRIconButton'
 import styleString from './index.scss?inline'
 
+/** @deprecated */
 export function createEmoteDetailView() {
   return createXRUI(EmoteDetailView, createEmoteDetailState())
 }
 
 function createEmoteDetailState() {
   return createState({})
 }
-
+/** @deprecated */
 const EmoteDetailView = () => {
   const [page, setPage] = useState(0)
 

packages/client-core/src/systems/ui/LocationMenuView/index.tsx

@@ -43,14 +43,15 @@ import { EmoteIcon } from '../../../user/UserUISystem'
 import XRTextButton from '../../components/XRTextButton'
 import styleString from './index.scss?inline'
 
+/** @deprecated */
 export function createLocationMenuView() {
   return createXRUI(LocationMenuView, createLocationMenuState())
 }
 
 function createLocationMenuState() {
   return createState({})
 }
-
+/** @deprecated */
 const LocationMenuView = () => {
   const { t } = useTranslation()
   const xrState = useState(getMutableState(XRState))

packages/client-core/src/systems/ui/MediaSessionMenuView/index.tsx

@@ -42,14 +42,15 @@ import {
 import XRTextButton from '../../components/XRTextButton'
 import styleString from './index.scss?inline'
 
+/** @deprecated */
 export function createMediaSessionMenuView() {
   return createXRUI(MediaSessionMenuView, createMediaSessionMenuState())
 }
 
 function createMediaSessionMenuState() {
   return createState({})
 }
-
+/** @deprecated */
 const MediaSessionMenuView = () => {
   const { t } = useTranslation()
 

packages/client-core/src/systems/ui/ProfileDetailView/index.tsx

@@ -57,6 +57,7 @@ import XRSelectDropdown from '../../components/XRSelectDropdown'
 import XRTextButton from '../../components/XRTextButton'
 import styleString from './index.scss?inline'
 
+/** @deprecated */
 export function createProfileDetailView() {
   return createXRUI(ProfileDetailView, createProfileDetailState())
 }
@@ -65,6 +66,7 @@ function createProfileDetailState() {
   return createState({})
 }
 
+/** @deprecated */
 const ProfileDetailView = () => {
   const { t } = useTranslation()
 

packages/client-core/src/systems/ui/SettingDetailView/index.tsx

@@ -50,14 +50,15 @@ import XRSlider from '../../components/XRSlider'
 import XRToggleButton from '../../components/XRToggleButton'
 import styleString from './index.scss?inline'
 
+/** @deprecated */
 export function createSettingDetailView() {
   return createXRUI(SettingDetailView, createSettingDetailState())
 }
 
 function createSettingDetailState() {
   return createState({})
 }
-
+/** @deprecated */
 // TODO: update this to newest settings implementation
 const SettingDetailView = () => {
   const { t } = useTranslation()

packages/client-core/src/systems/ui/ShareLocationDetailView/index.tsx

@@ -40,14 +40,15 @@ import XRInput from '../../components/XRInput'
 import XRTextButton from '../../components/XRTextButton'
 import styleString from './index.scss?inline'
 
+/** @deprecated */
 export function createShareLocationDetailView() {
   return createXRUI(ShareLocationDetailView, createShareLocationDetailState())
 }
 
 function createShareLocationDetailState() {
   return createState({})
 }
-
+/** @deprecated */
 const ShareLocationDetailView = () => {
   const { t } = useTranslation()
   const engineState = useHookstate(getMutableState(EngineState))

packages/client-core/src/systems/ui/SocialsMenuView/index.tsx

@@ -35,14 +35,15 @@ import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
 import XRTextButton from '../../components/XRTextButton'
 import styleString from './index.scss?inline'
 
+/** @deprecated */
 export function createSocialsMenuView() {
   return createXRUI(SocialsMenuView, createSocialsMenuState())
 }
 
 function createSocialsMenuState() {
   return createState({})
 }
-
+/** @deprecated */
 const SocialsMenuView = () => {
   const { t } = useTranslation()
 

packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx

@@ -91,29 +91,20 @@ const SettingMenu = ({ isPopover }: Props): JSX.Element => {
     selfUser?.id?.value?.length > 0 && selfUser?.scopes?.value?.find((scope) => scope.type === 'admin:admin')
   const hasEditorAccess = userHasAccess('editor:write')
   const themeSettings = { ...defaultThemeSettings, ...clientSetting.themeSettings }
-  const themeModes = { ...defaultThemeModes, ...userSettings?.themeModes }
-
-  // This is done as a fix because previously studio was called editor
-  if (themeModes['editor']) {
-    if (!themeModes['studio']) {
-      themeModes['studio'] = themeModes['editor']
-    }
-
-    delete themeModes['editor']
+  const themeModes = {
+    client: userSettings?.themeModes?.client ?? defaultThemeModes.client,
+    studio: userSettings?.themeModes?.studio ?? defaultThemeModes.studio,
+    admin: userSettings?.themeModes?.admin ?? defaultThemeModes.admin
   }
 
   const showWorldSettings = Engine.instance.localClientEntity || engineState.value
 
-  /**
-   * Note: If you're editing this function, be sure to make the same changes to
-   * the XRUI version over at packages/client-core/src/systems/ui/ProfileDetailView/index.tsx
-   * @param event
-   */
   const handleChangeUserThemeMode = (event) => {
+    if (!userSettings) return
     const { name, value } = event.target
 
-    const settings = { ...userSettings, themeModes: { ...themeModes, [name]: value } }
-    userSettings && AuthService.updateUserSettings(userSettings.id as string, settings)
+    const settings = { themeModes: { ...themeModes, [name]: value } }
+    AuthService.updateUserSettings(userSettings.id as string, settings)
   }
 
   const handleChangeInvertRotationAndMoveSticks = () => {

packages/client-core/src/user/services/AuthService.ts

@@ -152,7 +152,7 @@ export const AuthServiceReceptor = (action) => {
       return userPatched(action.params)
     })
     .when(AuthAction.updatedUserSettingsAction.matches, (action) => {
-      return s.user.merge({ user_setting: action.data })
+      return s.user.user_setting.merge(action.data)
     })
 }
 

packages/server-core/src/user/user-settings/user-settings.class.ts

@@ -79,6 +79,15 @@ export class UserSettings<T = UserSettingsDataType> extends Service<T> {
   }
 
   async patch(id: NullableId, data: Partial<T>): Promise<T | T[]> {
-    return await super.patch(id, data)
+    const userSettings = (await super.patch(id, data)) as any
+
+    let themeModes = JSON.parse(userSettings.themeModes)
+
+    if (typeof themeModes === 'string') themeModes = JSON.parse(themeModes)
+
+    return {
+      ...userSettings,
+      themeModes: themeModes
+    }
   }
 }

packages/server-core/src/user/user-settings/user-settings.hooks.ts

@@ -53,6 +53,10 @@ const ensureUserThemeModes = () => {
 
       // Setting themeModes value again to override the value updated in above patch() call.
       result.themeModes = clientSetting.data[0].themeModes
+
+      // backwards compat
+      if (typeof result.themeModes === 'string') result.themeModes = JSON.parse(result.themeModes)
+      if (typeof result.themeModes === 'string') result.themeModes = JSON.parse(result.themeModes)
     }
     return context
   }