Replace string array with enum for PreferencePaneId and add generic type to Dropdown component

packages/services/src/Domain/Preferences/PreferenceId.ts

@@ -1,18 +1,16 @@
-const PREFERENCE_PANE_IDS = [
-  'general',
-  'account',
-  'security',
-  'home-server',
-  'vaults',
-  'appearance',
-  'backups',
-  'listed',
-  'plugins',
-  'shortcuts',
-  'accessibility',
-  'get-free-month',
-  'help-feedback',
-  'whats-new',
-] as const
-
-export type PreferencePaneId = (typeof PREFERENCE_PANE_IDS)[number]
+export enum PreferencePaneId {
+  General = 'general',
+  Account = 'account',
+  Security = 'security',
+  HomeServer = 'home-server',
+  Vaults = 'vaults',
+  Appearance = 'appearance',
+  Backups = 'backups',
+  Listed = 'listed',
+  Plugins = 'plugins',
+  Shortcuts = 'shortcuts',
+  Accessibility = 'accessibility',
+  GetFreeMonth = 'get-free-month',
+  HelpFeedback = 'help-feedback',
+  WhatsNew = 'whats-new',
+}

packages/services/src/Domain/Status/StatusService.ts

@@ -7,20 +7,20 @@ import { PreferencePaneId } from '../Preferences/PreferenceId'
 
 export class StatusService extends AbstractService<StatusServiceEvent, string> implements StatusServiceInterface {
   private preferencesBubbleCounts: Record<PreferencePaneId, number> = {
-    general: 0,
-    account: 0,
-    security: 0,
-    'home-server': 0,
-    vaults: 0,
-    appearance: 0,
-    backups: 0,
-    listed: 0,
-    shortcuts: 0,
-    plugins: 0,
-    accessibility: 0,
-    'get-free-month': 0,
-    'help-feedback': 0,
-    'whats-new': 0,
+    [PreferencePaneId.General]: 0,
+    [PreferencePaneId.Account]: 0,
+    [PreferencePaneId.Security]: 0,
+    [PreferencePaneId.HomeServer]: 0,
+    [PreferencePaneId.Vaults]: 0,
+    [PreferencePaneId.Appearance]: 0,
+    [PreferencePaneId.Backups]: 0,
+    [PreferencePaneId.Listed]: 0,
+    [PreferencePaneId.Shortcuts]: 0,
+    [PreferencePaneId.Plugins]: 0,
+    [PreferencePaneId.Accessibility]: 0,
+    [PreferencePaneId.GetFreeMonth]: 0,
+    [PreferencePaneId.HelpFeedback]: 0,
+    [PreferencePaneId.WhatsNew]: 0,
   }
 
   getPreferencesBubbleCount(preferencePaneId: PreferencePaneId): number {

packages/services/src/Domain/VaultInvite/VaultInviteService.ts

@@ -41,6 +41,7 @@ import { StatusServiceInterface } from '../Status/StatusServiceInterface'
 import { ApplicationEvent } from '../Event/ApplicationEvent'
 import { WebSocketsServiceEvent } from '../Api/WebSocketsServiceEvent'
 import { NotificationServiceEvent, NotificationServiceEventPayload } from '../UserEvent/NotificationServiceEvent'
+import { PreferencePaneId } from '@standardnotes/snjs'
 
 export class VaultInviteService
   extends AbstractService<VaultInviteServiceEvent>
@@ -101,7 +102,7 @@ export class VaultInviteService
   }
 
   updatePendingInviteCount() {
-    this.status.setPreferencesBubbleCount('vaults', Object.keys(this.pendingInvites).length)
+    this.status.setPreferencesBubbleCount(PreferencePaneId.Vaults, Object.keys(this.pendingInvites).length)
   }
 
   addPendingInvite(invite: InviteRecord): void {

packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite'
 import Icon from '@/Components/Icon/Icon'
-import { SyncQueueStrategy } from '@standardnotes/snjs'
+import { PreferencePaneId, SyncQueueStrategy } from '@standardnotes/snjs'
 import { STRING_GENERIC_SYNC_ERROR } from '@/Constants/Strings'
 import { useCallback, useMemo, useState, FunctionComponent } from 'react'
 import { AccountMenuPane } from './AccountMenuPane'
@@ -57,13 +57,13 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
 
   const openPreferences = useCallback(() => {
     application.accountMenuController.closeAccountMenu()
-    application.preferencesController.setCurrentPane('account')
+    application.preferencesController.setCurrentPane(PreferencePaneId.Account)
     application.preferencesController.openPreferences()
   }, [application])
 
   const openHelp = useCallback(() => {
     application.accountMenuController.closeAccountMenu()
-    application.preferencesController.setCurrentPane('help-feedback')
+    application.preferencesController.setCurrentPane(PreferencePaneId.HelpFeedback)
     application.preferencesController.openPreferences()
   }, [application])
 

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -13,6 +13,7 @@ import {
   SNNote,
   ContentType,
   LocalPrefKey,
+  PreferencePaneId,
 } from '@standardnotes/snjs'
 import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
@@ -247,7 +248,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   }
 
   const managePlugins = useCallback(() => {
-    application.openPreferences('plugins')
+    application.openPreferences(PreferencePaneId.Plugins)
   }, [application])
 
   return (

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

@@ -4,11 +4,11 @@ import { classNames } from '@standardnotes/snjs'
 import { Select, SelectItem, SelectLabel, SelectPopover, SelectStoreProps, useSelectStore } from '@ariakit/react'
 import { KeyboardKey } from '@standardnotes/ui-services'
 
-type DropdownProps = {
+type DropdownProps<T extends string> = {
   label: string
-  items: DropdownItem[]
-  value: string
-  onChange: (value: string) => void
+  items: DropdownItem<T>[]
+  value: T
+  onChange: (value: T) => void
   disabled?: boolean
   classNameOverride?: {
     wrapper?: string
@@ -20,7 +20,7 @@ type DropdownProps = {
   showLabel?: boolean
 }
 
-const Dropdown = ({
+const Dropdown = <T extends string>({
   label,
   value,
   onChange,
@@ -30,7 +30,7 @@ const Dropdown = ({
   classNameOverride = {},
   popoverPlacement,
   showLabel,
-}: DropdownProps) => {
+}: DropdownProps<T>) => {
   const select = useSelectStore({
     value,
     setValue: onChange,

packages/web/src/javascripts/Components/Dropdown/DropdownItem.tsx

@@ -1,9 +1,9 @@
 import { IconType } from '@standardnotes/snjs'
 
-export type DropdownItem = {
+export type DropdownItem<T extends string> = {
   icon?: IconType
   iconClassName?: string
   label: string
-  value: string
+  value: T
   disabled?: boolean
 }

packages/web/src/javascripts/Components/FileContextMenu/FileContextMenuBackupOption.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 import MenuItem from '../Menu/MenuItem'
 import { useApplication } from '../ApplicationProvider'
-import { FileBackupRecord, FileItem } from '@standardnotes/snjs'
+import { FileBackupRecord, FileItem, PreferencePaneId } from '@standardnotes/snjs'
 import { dateToStringStyle1 } from '@/Utils/DateUtils'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 import MenuSection from '../Menu/MenuSection'
@@ -31,7 +31,7 @@ export const FileContextMenuBackupOption: FunctionComponent<{ file: FileItem }>
   }, [backupInfo, application])
 
   const configureFileBackups = useCallback(() => {
-    application.openPreferences('backups')
+    application.openPreferences(PreferencePaneId.Backups)
   }, [application])
 
   if (!application.fileBackups) {

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

@@ -9,6 +9,7 @@ import {
   StatusServiceEvent,
   HttpErrorResponseBody,
   getErrorMessageFromErrorResponseBody,
+  PreferencePaneId,
 } from '@standardnotes/snjs'
 import {
   STRING_NEW_UPDATE_READY,
@@ -343,7 +344,7 @@ class Footer extends AbstractComponent<Props, State> {
 
   openPreferences = (openWhatsNew: boolean) => {
     if (openWhatsNew) {
-      this.application.preferencesController.setCurrentPane('whats-new')
+      this.application.preferencesController.setCurrentPane(PreferencePaneId.WhatsNew)
     }
     this.application.preferencesController.openPreferences()
   }

packages/web/src/javascripts/Components/Preferences/Controller/MenuItems.ts

@@ -1,28 +1,29 @@
+import { PreferencePaneId } from '@/__mocks__/@standardnotes/snjs'
 import { PreferencesMenuItem } from './PreferencesMenuItem'
 
 export const PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
-  { id: 'whats-new', label: "What's New", icon: 'asterisk', order: 0 },
-  { id: 'account', label: 'Account', icon: 'user', order: 1 },
-  { id: 'general', label: 'General', icon: 'settings', order: 3 },
-  { id: 'security', label: 'Security', icon: 'security', order: 4 },
-  { id: 'backups', label: 'Backups', icon: 'restore', order: 5 },
-  { id: 'appearance', label: 'Appearance', icon: 'themes', order: 6 },
-  { id: 'listed', label: 'Listed', icon: 'listed', order: 7 },
-  { id: 'shortcuts', label: 'Shortcuts', icon: 'keyboard', order: 8 },
-  { id: 'plugins', label: 'Plugins', icon: 'dashboard', order: 8 },
-  { id: 'accessibility', label: 'Accessibility', icon: 'accessibility', order: 9 },
-  { id: 'get-free-month', label: 'Get a free month', icon: 'star', order: 10 },
-  { id: 'help-feedback', label: 'Help & feedback', icon: 'help', order: 11 },
+  { id: PreferencePaneId.WhatsNew, label: "What's New", icon: 'asterisk', order: 0 },
+  { id: PreferencePaneId.Account, label: 'Account', icon: 'user', order: 1 },
+  { id: PreferencePaneId.General, label: 'General', icon: 'settings', order: 3 },
+  { id: PreferencePaneId.Security, label: 'Security', icon: 'security', order: 4 },
+  { id: PreferencePaneId.Backups, label: 'Backups', icon: 'restore', order: 5 },
+  { id: PreferencePaneId.Appearance, label: 'Appearance', icon: 'themes', order: 6 },
+  { id: PreferencePaneId.Listed, label: 'Listed', icon: 'listed', order: 7 },
+  { id: PreferencePaneId.Shortcuts, label: 'Shortcuts', icon: 'keyboard', order: 8 },
+  { id: PreferencePaneId.Plugins, label: 'Plugins', icon: 'dashboard', order: 8 },
+  { id: PreferencePaneId.Accessibility, label: 'Accessibility', icon: 'accessibility', order: 9 },
+  { id: PreferencePaneId.GetFreeMonth, label: 'Get a free month', icon: 'star', order: 10 },
+  { id: PreferencePaneId.HelpFeedback, label: 'Help & feedback', icon: 'help', order: 11 },
 ]
 
 export const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
-  { id: 'whats-new', label: "What's New", icon: 'asterisk', order: 0 },
-  { id: 'account', label: 'Account', icon: 'user', order: 1 },
-  { id: 'general', label: 'General', icon: 'settings', order: 3 },
-  { id: 'security', label: 'Security', icon: 'security', order: 4 },
-  { id: 'backups', label: 'Backups', icon: 'restore', order: 5 },
-  { id: 'appearance', label: 'Appearance', icon: 'themes', order: 6 },
-  { id: 'listed', label: 'Listed', icon: 'listed', order: 7 },
-  { id: 'plugins', label: 'Plugins', icon: 'dashboard', order: 8 },
-  { id: 'help-feedback', label: 'Help & feedback', icon: 'help', order: 11 },
+  { id: PreferencePaneId.WhatsNew, label: "What's New", icon: 'asterisk', order: 0 },
+  { id: PreferencePaneId.Account, label: 'Account', icon: 'user', order: 1 },
+  { id: PreferencePaneId.General, label: 'General', icon: 'settings', order: 3 },
+  { id: PreferencePaneId.Security, label: 'Security', icon: 'security', order: 4 },
+  { id: PreferencePaneId.Backups, label: 'Backups', icon: 'restore', order: 5 },
+  { id: PreferencePaneId.Appearance, label: 'Appearance', icon: 'themes', order: 6 },
+  { id: PreferencePaneId.Listed, label: 'Listed', icon: 'listed', order: 7 },
+  { id: PreferencePaneId.Plugins, label: 'Plugins', icon: 'dashboard', order: 8 },
+  { id: PreferencePaneId.HelpFeedback, label: 'Help & feedback', icon: 'help', order: 11 },
 ]

packages/web/src/javascripts/Components/Preferences/Controller/PreferencesSessionController.ts

@@ -13,7 +13,7 @@ import { PREFERENCES_MENU_ITEMS, READY_PREFERENCES_MENU_ITEMS } from './MenuItem
  * Preferences menu. It is created and destroyed each time the menu is opened and closed.
  */
 export class PreferencesSessionController {
-  private _selectedPane: PreferencePaneId = 'account'
+  private _selectedPane: PreferencePaneId = PreferencePaneId.Account
   private _menu: PreferencesMenuItem[]
   private _extensionLatestVersions: PackageProvider = new PackageProvider(new Map())
 
@@ -26,11 +26,11 @@ export class PreferencesSessionController {
       : READY_PREFERENCES_MENU_ITEMS.slice()
 
     if (application.featuresController.isVaultsEnabled()) {
-      menuItems.push({ id: 'vaults', label: 'Vaults', icon: 'safe-square', order: 5 })
+      menuItems.push({ id: PreferencePaneId.Vaults, label: 'Vaults', icon: 'safe-square', order: 5 })
     }
 
     if (isDesktopApplication()) {
-      menuItems.push({ id: 'home-server', label: 'Home Server', icon: 'server', order: 5 })
+      menuItems.push({ id: PreferencePaneId.HomeServer, label: 'Home Server', icon: 'server', order: 5 })
     }
 
     this._menu = menuItems.sort((a, b) => a.order - b.order)
@@ -107,15 +107,15 @@ export class PreferencesSessionController {
       return this.selectedMenuItem.id
     }
 
-    return 'account'
+    return PreferencePaneId.Account
   }
 
   selectPane = (key: PreferencePaneId) => {
     this._selectedPane = key
   }
 
   sectionHasBubble(id: PreferencePaneId): boolean {
-    if (id === 'security') {
+    if (id === PreferencePaneId.Security) {
       return securityPrefsHasBubble(this.application)
     }
 

packages/web/src/javascripts/Components/Preferences/PaneSelector.tsx

@@ -13,39 +13,40 @@ import WhatsNew from './Panes/WhatsNew/WhatsNew'
 import HomeServer from './Panes/HomeServer/HomeServer'
 import Vaults from './Panes/Vaults/Vaults'
 import PluginsPane from './Panes/Plugins/PluginsPane'
+import { PreferencePaneId } from '@standardnotes/snjs'
 
 const PaneSelector: FunctionComponent<PreferencesProps & { menu: PreferencesSessionController }> = ({
   menu,
   application,
 }) => {
   switch (menu.selectedPaneId) {
-    case 'general':
+    case PreferencePaneId.General:
       return <General />
-    case 'account':
+    case PreferencePaneId.Account:
       return <AccountPreferences application={application} />
-    case 'appearance':
+    case PreferencePaneId.Appearance:
       return <Appearance application={application} />
-    case 'home-server':
+    case PreferencePaneId.HomeServer:
       return <HomeServer />
-    case 'security':
+    case PreferencePaneId.Security:
       return <Security application={application} />
-    case 'vaults':
+    case PreferencePaneId.Vaults:
       return <Vaults />
-    case 'backups':
+    case PreferencePaneId.Backups:
       return <Backups application={application} />
-    case 'listed':
+    case PreferencePaneId.Listed:
       return <Listed application={application} />
-    case 'shortcuts':
+    case PreferencePaneId.Shortcuts:
       return null
-    case 'plugins':
+    case PreferencePaneId.Plugins:
       return <PluginsPane pluginsLatestVersions={menu.extensionsLatestVersions} />
-    case 'accessibility':
+    case PreferencePaneId.Accessibility:
       return null
-    case 'get-free-month':
+    case PreferencePaneId.GetFreeMonth:
       return null
-    case 'help-feedback':
+    case PreferencePaneId.HelpFeedback:
       return <HelpAndFeedback application={application} />
-    case 'whats-new':
+    case PreferencePaneId.WhatsNew:
       return <WhatsNew application={application} />
     default:
       return <General />

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -4,7 +4,6 @@ import Dropdown from '../Dropdown/Dropdown'
 import { DropdownItem } from '../Dropdown/DropdownItem'
 import PreferencesMenuItem from './PreferencesComponents/MenuItem'
 import { PreferencesSessionController } from './Controller/PreferencesSessionController'
-import { PreferencePaneId } from '@standardnotes/services'
 
 type Props = {
   menu: PreferencesSessionController
@@ -45,9 +44,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
           items={dropdownMenuItems}
           label="Preferences Menu"
           value={selectedPaneId}
-          onChange={(paneId) => {
-            selectPane(paneId as PreferencePaneId)
-          }}
+          onChange={selectPane}
           classNameOverride={{
             wrapper: 'relative',
             button: 'focus:outline-none focus:shadow-none focus:ring-none',

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

@@ -7,6 +7,7 @@ import SingleVaultSelectionMenu from './SingleVaultSelectionMenu'
 import { useApplication } from '../ApplicationProvider'
 import MenuItemSeparator from '../Menu/MenuItemSeparator'
 import MenuItem from '../Menu/MenuItem'
+import { PreferencePaneId } from '@/__mocks__/@standardnotes/snjs'
 
 type SettingsMode = 'many' | 'single'
 
@@ -44,7 +45,7 @@ const VaultSelectionMenu = () => {
       <MenuItem
         icon="settings"
         onClick={() => {
-          application.preferencesController.openPreferences('vaults')
+          application.preferencesController.openPreferences(PreferencePaneId.Vaults)
         }}
       >
         Open vault settings