refactor: native feature management (#2350)

packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -1,11 +1,17 @@
-import { WebApplication } from '@/Application/WebApplication'
-import { ComponentArea, ContentType, FeatureIdentifier, GetFeatures, SNComponent } from '@standardnotes/snjs'
+import {
+  ComponentArea,
+  ComponentInterface,
+  ComponentOrNativeFeature,
+  ContentType,
+  FeatureIdentifier,
+  PreferencesServiceEvent,
+  ThemeFeatureDescription,
+} from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import FocusModeSwitch from './FocusModeSwitch'
 import ThemesMenuButton from './ThemesMenuButton'
-import { ThemeItem } from './ThemeItem'
 import { sortThemes } from '@/Utils/SortThemes'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
@@ -13,50 +19,35 @@ import PanelSettingsSection from './PanelSettingsSection'
 import Menu from '../Menu/Menu'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
+import { useApplication } from '../ApplicationProvider'
+import { GetAllThemesUseCase } from '@standardnotes/ui-services'
 
 type MenuProps = {
   quickSettingsMenuController: QuickSettingsController
-  application: WebApplication
 }
 
-const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSettingsMenuController }) => {
+const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ quickSettingsMenuController }) => {
+  const application = useApplication()
+
   const { focusModeEnabled, setFocusModeEnabled } = application.paneController
   const { closeQuickSettingsMenu } = quickSettingsMenuController
-  const [themes, setThemes] = useState<ThemeItem[]>([])
-  const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])
+  const [themes, setThemes] = useState<ComponentOrNativeFeature<ThemeFeatureDescription>[]>([])
+  const [editorStackComponents, setEditorStackComponents] = useState<ComponentInterface[]>([])
 
-  const defaultThemeOn = !themes.map((item) => item?.component).find((theme) => theme?.active && !theme.isLayerable())
+  const activeThemes = application.componentManager.getActiveThemes()
+  const hasNonLayerableActiveTheme = activeThemes.find((theme) => !theme.layerable)
+  const defaultThemeOn = !hasNonLayerableActiveTheme
 
   const prefsButtonRef = useRef<HTMLButtonElement>(null)
   const defaultThemeButtonRef = useRef<HTMLButtonElement>(null)
 
   const reloadThemes = useCallback(() => {
-    const themes = application.items
-      .getDisplayableComponents()
-      .filter((component) => component.isTheme())
-      .map((item) => {
-        return {
-          name: item.displayName,
-          identifier: item.identifier,
-          component: item,
-        }
-      }) as ThemeItem[]
-
-    GetFeatures()
-      .filter((feature) => feature.content_type === ContentType.TYPES.Theme && !feature.layerable)
-      .forEach((theme) => {
-        if (themes.findIndex((item) => item.identifier === theme.identifier) === -1) {
-          themes.push({
-            name: theme.name as string,
-            identifier: theme.identifier,
-          })
-        }
-      })
-
-    setThemes(themes.sort(sortThemes))
+    const usecase = new GetAllThemesUseCase(application.items)
+    const { thirdParty, native } = usecase.execute({ excludeLayerable: false })
+    setThemes([...thirdParty, ...native].sort(sortThemes))
   }, [application])
 
-  const reloadToggleableComponents = useCallback(() => {
+  const reloadEditorStackComponents = useCallback(() => {
     const toggleableComponents = application.items
       .getDisplayableComponents()
       .filter(
@@ -66,7 +57,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
           component.identifier !== FeatureIdentifier.DeprecatedFoldersComponent,
       )
 
-    setToggleableComponents(toggleableComponents)
+    setEditorStackComponents(toggleableComponents)
   }, [application])
 
   useEffect(() => {
@@ -85,37 +76,41 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
     }
   }, [application, reloadThemes])
 
+  useEffect(() => {
+    return application.preferences.addEventObserver((event) => {
+      if (event === PreferencesServiceEvent.PreferencesChanged) {
+        reloadThemes()
+      }
+    })
+  }, [application, reloadThemes])
+
   useEffect(() => {
     const cleanupItemStream = application.streamItems(ContentType.TYPES.Component, () => {
-      reloadToggleableComponents()
+      reloadEditorStackComponents()
     })
 
     return () => {
       cleanupItemStream()
     }
-  }, [application, reloadToggleableComponents])
+  }, [application, reloadEditorStackComponents])
 
   useEffect(() => {
     prefsButtonRef.current?.focus()
   }, [])
 
-  const toggleComponent = useCallback(
-    (component: SNComponent) => {
-      if (component.isTheme()) {
-        application.componentManager.toggleTheme(component.uuid).catch(console.error)
-      } else {
-        application.componentManager.toggleComponent(component.uuid).catch(console.error)
-      }
+  const toggleEditorStackComponent = useCallback(
+    (component: ComponentInterface) => {
+      application.componentManager.toggleComponent(component).catch(console.error)
     },
     [application],
   )
 
   const deactivateAnyNonLayerableTheme = useCallback(() => {
-    const activeTheme = themes.map((item) => item.component).find((theme) => theme?.active && !theme.isLayerable())
-    if (activeTheme) {
-      application.componentManager.toggleTheme(activeTheme.uuid).catch(console.error)
+    const nonLayerableActiveTheme = application.componentManager.getActiveThemes().find((theme) => !theme.layerable)
+    if (nonLayerableActiveTheme) {
+      void application.componentManager.toggleTheme(nonLayerableActiveTheme)
     }
-  }, [application, themes])
+  }, [application])
 
   const toggleDefaultTheme = useCallback(() => {
     deactivateAnyNonLayerableTheme()
@@ -123,15 +118,15 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
 
   return (
     <Menu a11yLabel="Quick settings menu" isOpen>
-      {toggleableComponents.length > 0 && (
+      {editorStackComponents.length > 0 && (
         <>
           <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
-          {toggleableComponents.map((component) => (
+          {editorStackComponents.map((component) => (
             <MenuSwitchButtonItem
               onChange={() => {
-                toggleComponent(component)
+                toggleEditorStackComponent(component)
               }}
-              checked={component.active}
+              checked={application.componentManager.isComponentActive(component)}
               key={component.uuid}
             >
               <Icon type="window" className="mr-2 text-neutral" />
@@ -146,7 +141,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
         Default
       </MenuRadioButtonItem>
       {themes.map((theme) => (
-        <ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
+        <ThemesMenuButton uiFeature={theme} key={theme.uniqueIdentifier} />
       ))}
       <HorizontalSeparator classes="my-2" />
       <FocusModeSwitch

packages/web/src/javascripts/Components/QuickSettingsMenu/ThemeItem.ts

@@ -1,7 +0,0 @@
-import { FeatureIdentifier, SNTheme } from '@standardnotes/snjs'
-
-export type ThemeItem = {
-  name: string
-  identifier: FeatureIdentifier
-  component?: SNTheme
-}

packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx

@@ -1,9 +1,12 @@
-import { WebApplication } from '@/Application/WebApplication'
-import { FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
+import {
+  ComponentOrNativeFeature,
+  FeatureIdentifier,
+  FeatureStatus,
+  ThemeFeatureDescription,
+} from '@standardnotes/snjs'
 import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
-import { ThemeItem } from './ThemeItem'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import { isMobileScreen } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
@@ -12,38 +15,41 @@ import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 import { useCommandService } from '../CommandProvider'
 import { TOGGLE_DARK_MODE_COMMAND } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
+import { useApplication } from '../ApplicationProvider'
 
 type Props = {
-  item: ThemeItem
-  application: WebApplication
+  uiFeature: ComponentOrNativeFeature<ThemeFeatureDescription>
 }
 
-const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
+const ThemesMenuButton: FunctionComponent<Props> = ({ uiFeature }) => {
+  const application = useApplication()
   const commandService = useCommandService()
   const premiumModal = usePremiumModal()
 
   const isThirdPartyTheme = useMemo(
-    () => application.features.isThirdPartyFeature(item.identifier),
-    [application, item.identifier],
+    () => application.features.isThirdPartyFeature(uiFeature.featureIdentifier),
+    [application, uiFeature.featureIdentifier],
   )
   const isEntitledToTheme = useMemo(
-    () => application.features.getFeatureStatus(item.identifier) === FeatureStatus.Entitled,
-    [application, item.identifier],
+    () => application.features.getFeatureStatus(uiFeature.featureIdentifier) === FeatureStatus.Entitled,
+    [application, uiFeature.featureIdentifier],
   )
   const canActivateTheme = useMemo(() => isEntitledToTheme || isThirdPartyTheme, [isEntitledToTheme, isThirdPartyTheme])
 
   const toggleTheme = useCallback(() => {
-    if (item.component && canActivateTheme) {
-      const isThemeLayerable = item.component.isLayerable()
-      const themeIsLayerableOrNotActive = isThemeLayerable || !item.component.active
-
-      if (themeIsLayerableOrNotActive) {
-        application.componentManager.toggleTheme(item.component.uuid).catch(console.error)
-      }
-    } else {
-      premiumModal.activate(`${item.name} theme`)
+    if (!canActivateTheme) {
+      premiumModal.activate(`${uiFeature.displayName} theme`)
+      return
     }
-  }, [application, canActivateTheme, item, premiumModal])
+
+    const isThemeLayerable = uiFeature.layerable
+
+    const themeIsLayerableOrNotActive = isThemeLayerable || !application.componentManager.isThemeActive(uiFeature)
+
+    if (themeIsLayerableOrNotActive) {
+      void application.componentManager.toggleTheme(uiFeature)
+    }
+  }, [application, canActivateTheme, uiFeature, premiumModal])
 
   const onClick: MouseEventHandler<HTMLButtonElement> = useCallback(
     (event) => {
@@ -54,34 +60,38 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
   )
 
   const isMobile = application.isNativeMobileWeb() || isMobileScreen()
-  const shouldHideButton = item.identifier === FeatureIdentifier.DynamicTheme && isMobile
+  const shouldHideButton = uiFeature.featureIdentifier === FeatureIdentifier.DynamicTheme && isMobile
 
   const darkThemeShortcut = useMemo(() => {
-    if (item.identifier === FeatureIdentifier.DarkTheme) {
+    if (uiFeature.featureIdentifier === FeatureIdentifier.DarkTheme) {
       return commandService.keyboardShortcutForCommand(TOGGLE_DARK_MODE_COMMAND)
     }
-  }, [commandService, item.identifier])
+  }, [commandService, uiFeature.featureIdentifier])
 
   if (shouldHideButton) {
     return null
   }
 
-  return item.component?.isLayerable() ? (
-    <MenuSwitchButtonItem checked={item.component.active} onChange={() => toggleTheme()}>
+  const themeActive = uiFeature ? application.componentManager.isThemeActive(uiFeature) : false
+
+  const dockIcon = uiFeature.dockIcon
+
+  return uiFeature.layerable ? (
+    <MenuSwitchButtonItem checked={themeActive} onChange={() => toggleTheme()}>
       {!canActivateTheme && (
         <Icon type={PremiumFeatureIconName} className={classNames(PremiumFeatureIconClass, 'mr-2')} />
       )}
-      {item.name}
+      {uiFeature.displayName}
     </MenuSwitchButtonItem>
   ) : (
-    <MenuRadioButtonItem checked={Boolean(item.component?.active)} onClick={onClick}>
-      <span className={classNames('mr-auto', item.component?.active ? 'font-semibold' : undefined)}>{item.name}</span>
+    <MenuRadioButtonItem checked={themeActive} onClick={onClick}>
+      <span className={classNames('mr-auto', themeActive ? 'font-semibold' : undefined)}>{uiFeature.displayName}</span>
       {darkThemeShortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={darkThemeShortcut} />}
-      {item.component && canActivateTheme ? (
+      {uiFeature && canActivateTheme ? (
         <div
           className="h-5 w-5 rounded-full"
           style={{
-            backgroundColor: item.component.package_info?.dock_icon?.background_color,
+            backgroundColor: dockIcon?.background_color,
           }}
         ></div>
       ) : (