fix: Fixes issue where lock screen would not use previously active theme (#2372)

packages/web/src/javascripts/Components/Preferences/Panes/Account/Email/Email.tsx

@@ -1,5 +1,5 @@
 import {
-  FeatureIdentifier,
+  NativeFeatureIdentifier,
   FeatureStatus,
   MuteMarketingEmailsOption,
   MuteSignInEmailsOption,
@@ -28,7 +28,9 @@ const Email: FunctionComponent<Props> = ({ application }: Props) => {
   const [isLoading, setIsLoading] = useState(true)
 
   const isMuteSignInEmailsFeatureAvailable =
-    application.features.getFeatureStatus(FeatureIdentifier.SignInAlerts) === FeatureStatus.Entitled
+    application.features.getFeatureStatus(
+      NativeFeatureIdentifier.create(NativeFeatureIdentifier.TYPES.SignInAlerts).getValue(),
+    ) === FeatureStatus.Entitled
 
   const updateSetting = async (settingName: SettingName, payload: string): Promise<boolean> => {
     try {

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx

@@ -1,4 +1,4 @@
-import { FeatureStatus, FeatureIdentifier } from '@standardnotes/snjs'
+import { FeatureStatus, NativeFeatureIdentifier } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useState } from 'react'
 
@@ -29,8 +29,9 @@ const SubscriptionSharing: FunctionComponent<Props> = ({ application, viewContro
   const isReadOnlySession = application.sessions.isCurrentSessionReadOnly()
 
   const isSubscriptionSharingFeatureAvailable =
-    application.features.getFeatureStatus(FeatureIdentifier.SubscriptionSharing) === FeatureStatus.Entitled &&
-    !isReadOnlySession
+    application.features.getFeatureStatus(
+      NativeFeatureIdentifier.create(NativeFeatureIdentifier.TYPES.SubscriptionSharing).getValue(),
+    ) === FeatureStatus.Entitled && !isReadOnlySession
 
   const closeInviteDialog = () => setIsInviteDialogOpen(false)
 

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -4,7 +4,7 @@ import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
 import { WebApplication } from '@/Application/WebApplication'
-import { FeatureIdentifier, PrefKey, FeatureStatus, naturalSort, PrefDefaults } from '@standardnotes/snjs'
+import { PrefKey, FeatureStatus, naturalSort, PrefDefaults } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useEffect, useState } from 'react'
 import { Subtitle, Title, Text } from '@/Components/Preferences/PreferencesComponents/Content'
@@ -50,7 +50,7 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
           label: theme.displayName as string,
           value: theme.featureIdentifier,
           icon:
-            application.features.getFeatureStatus(theme.featureIdentifier) !== FeatureStatus.Entitled
+            application.features.getFeatureStatus(theme.uniqueIdentifier) !== FeatureStatus.Entitled
               ? PremiumFeatureIconName
               : undefined,
         }
@@ -72,14 +72,10 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
   const toggleUseDeviceSettings = () => {
     application.setPreference(PrefKey.UseSystemColorScheme, !useDeviceSettings).catch(console.error)
     if (!application.getPreference(PrefKey.AutoLightThemeIdentifier)) {
-      application
-        .setPreference(PrefKey.AutoLightThemeIdentifier, autoLightTheme as FeatureIdentifier)
-        .catch(console.error)
+      application.setPreference(PrefKey.AutoLightThemeIdentifier, autoLightTheme).catch(console.error)
     }
     if (!application.getPreference(PrefKey.AutoDarkThemeIdentifier)) {
-      application
-        .setPreference(PrefKey.AutoDarkThemeIdentifier, autoDarkTheme as FeatureIdentifier)
-        .catch(console.error)
+      application.setPreference(PrefKey.AutoDarkThemeIdentifier, autoDarkTheme).catch(console.error)
     }
     setUseDeviceSettings(!useDeviceSettings)
   }
@@ -90,7 +86,7 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
       premiumModal.activate(`${item.label} theme`)
       return
     }
-    application.setPreference(PrefKey.AutoLightThemeIdentifier, value as FeatureIdentifier).catch(console.error)
+    application.setPreference(PrefKey.AutoLightThemeIdentifier, value).catch(console.error)
     setAutoLightTheme(value)
   }
 
@@ -100,7 +96,7 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
       premiumModal.activate(`${item.label} theme`)
       return
     }
-    application.setPreference(PrefKey.AutoDarkThemeIdentifier, value as FeatureIdentifier).catch(console.error)
+    application.setPreference(PrefKey.AutoDarkThemeIdentifier, value).catch(console.error)
     setAutoDarkTheme(value)
   }
 

packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx

@@ -2,7 +2,7 @@ import { Text, Title } from '@/Components/Preferences/PreferencesComponents/Cont
 import { WebApplication } from '@/Application/WebApplication'
 import {
   ApplicationEvent,
-  FeatureIdentifier,
+  NativeFeatureIdentifier,
   FeatureStatus,
   FindNativeFeature,
   PrefKey,
@@ -17,7 +17,7 @@ import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 
 type ExperimentalFeatureItem = {
-  identifier: FeatureIdentifier
+  identifier: string
   name: string
   description: string
   isEnabled: boolean
@@ -55,7 +55,9 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
         name: feature?.name ?? featureIdentifier,
         description: feature?.description ?? '',
         isEnabled: application.features.isExperimentalFeatureEnabled(featureIdentifier),
-        isEntitled: application.features.getFeatureStatus(featureIdentifier) === FeatureStatus.Entitled,
+        isEntitled:
+          application.features.getFeatureStatus(NativeFeatureIdentifier.create(featureIdentifier).getValue()) ===
+          FeatureStatus.Entitled,
       }
     })
     setExperimentalFeatures(experimentalFeatures)

packages/web/src/javascripts/Components/Preferences/Panes/Security/Security.tsx

@@ -1,4 +1,4 @@
-import { FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
+import { NativeFeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
 
 import { WebApplication } from '@/Application/WebApplication'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
@@ -24,8 +24,9 @@ const Security: FunctionComponent<SecurityProps> = (props) => {
   const isNativeMobileWeb = props.application.isNativeMobileWeb()
 
   const isU2FFeatureAvailable =
-    props.application.features.getFeatureStatus(FeatureIdentifier.UniversalSecondFactor) === FeatureStatus.Entitled &&
-    props.userProvider.getUser() !== undefined
+    props.application.features.getFeatureStatus(
+      NativeFeatureIdentifier.create(NativeFeatureIdentifier.TYPES.UniversalSecondFactor).getValue(),
+    ) === FeatureStatus.Entitled && props.userProvider.getUser() !== undefined
 
   return (
     <PreferencesPane>