fix: use component displayName property

app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -43,7 +43,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
 }) => {
   const [editors] = useState<SNComponent[]>(() =>
     application.componentManager.componentsForArea(ComponentArea.Editor).sort((a, b) => {
-      return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
+      return a.displayName.toLowerCase() < b.displayName.toLowerCase() ? -1 : 1
     }),
   )
   const [groups, setGroups] = useState<EditorMenuGroup[]>([])

app/assets/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts

@@ -63,7 +63,7 @@ export const createEditorMenuGroups = (application: WebApplication, editors: SNC
 
   editors.forEach((editor) => {
     const editorItem: EditorMenuItem = {
-      name: editor.name,
+      name: editor.displayName,
       component: editor,
       isEntitled: application.features.getFeatureStatus(editor.identifier) === FeatureStatus.Entitled,
     }

app/assets/javascripts/Components/ComponentView/index.tsx

@@ -49,7 +49,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
     const [isDeprecationMessageDismissed, setIsDeprecationMessageDismissed] = useState(false)
     const [didAttemptReload, setDidAttemptReload] = useState(false)
 
-    const component = componentViewer.component
+    const component: SNComponent = componentViewer.component
 
     const manageSubscription = useCallback(() => {
       openSubscriptionDashboard(application)
@@ -182,7 +182,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
       <>
         {hasIssueLoading && (
           <IssueOnLoading
-            componentName={component.name}
+            componentName={component.displayName}
             reloadIframe={() => {
               reloadValidityStatus(), requestReload?.(componentViewer, true)
             }}
@@ -193,7 +193,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
           <IsExpired
             expiredDate={dateToLocalizedString(component.valid_until)}
             featureStatus={featureStatus}
-            componentName={component.name}
+            componentName={component.displayName}
             manageSubscription={manageSubscription}
           />
         )}
@@ -201,7 +201,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
           <IsDeprecated deprecationMessage={deprecationMessage} dismissDeprecationMessage={dismissDeprecationMessage} />
         )}
         {error === ComponentViewerError.OfflineRestricted && <OfflineRestricted />}
-        {error === ComponentViewerError.MissingUrl && <UrlMissing componentName={component.name} />}
+        {error === ComponentViewerError.MissingUrl && <UrlMissing componentName={component.displayName} />}
         {component.uuid && isComponentValid && (
           <iframe
             ref={iframeRef}

app/assets/javascripts/Components/PermissionsModal/index.tsx

@@ -56,7 +56,7 @@ export class PermissionsModal extends Component<Props> {
                 <div className="sk-panel-section">
                   <div className="sk-panel-row">
                     <div className="sk-h2">
-                      <strong>{this.props.component.name}</strong>
+                      <strong>{this.props.component.displayName}</strong>
                       {' would like to interact with your '}
                       {this.props.permissionsString}
                     </div>

app/assets/javascripts/Components/Preferences/Panes/Extensions/AnyExtension.ts

@@ -0,0 +1,3 @@
+import { SNActionsExtension, SNComponent, SNTheme } from '@standardnotes/snjs'
+
+export type AnyExtension = SNComponent | SNTheme | SNActionsExtension

app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx

@@ -1,10 +1,11 @@
-import { DisplayStringForContentType, SNComponent } from '@standardnotes/snjs'
+import { DisplayStringForContentType } from '@standardnotes/snjs'
 import { Button } from '@/Components/Button/Button'
 import { FunctionComponent } from 'preact'
 import { Title, Text, Subtitle, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
+import { AnyExtension } from './AnyExtension'
 
 export const ConfirmCustomExtension: FunctionComponent<{
-  component: SNComponent
+  component: AnyExtension
   callback: (confirmed: boolean) => void
 }> = ({ component, callback }) => {
   const fields = [

app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionInfoCell.tsx

@@ -1,13 +1,16 @@
 import { FunctionComponent } from 'preact'
 import { useState, useRef, useEffect } from 'preact/hooks'
 
-export const RenameExtension: FunctionComponent<{
+export const ExtensionInfoCell: FunctionComponent<{
   extensionName: string
   changeName: (newName: string) => void
-}> = ({ extensionName, changeName }) => {
+  isThirdParty: boolean
+}> = ({ extensionName, changeName, isThirdParty }) => {
   const [isRenaming, setIsRenaming] = useState(false)
   const [newExtensionName, setNewExtensionName] = useState<string>(extensionName)
 
+  const renameable = isThirdParty
+
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -38,15 +41,17 @@ export const RenameExtension: FunctionComponent<{
     <div className="flex flex-row mr-3 items-center">
       <input
         ref={inputRef}
-        disabled={!isRenaming}
+        disabled={!isRenaming || !renameable}
         autocomplete="off"
         className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
         type="text"
         value={newExtensionName}
         onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
       />
+
       <div className="min-w-3" />
-      {isRenaming ? (
+
+      {isRenaming && (
         <>
           <a className="pt-1 cursor-pointer" onClick={confirmRename}>
             Confirm
@@ -56,7 +61,9 @@ export const RenameExtension: FunctionComponent<{
             Cancel
           </a>
         </>
-      ) : (
+      )}
+
+      {renameable && !isRenaming && (
         <a className="pt-1 cursor-pointer" onClick={startRenaming}>
           Rename
         </a>

app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx

@@ -1,11 +1,12 @@
 import { FunctionComponent } from 'preact'
 import { SNComponent } from '@standardnotes/snjs'
-import { PreferencesSegment, SubtitleLight, Title } from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesSegment, SubtitleLight } from '@/Components/Preferences/PreferencesComponents'
 import { Switch } from '@/Components/Switch'
 import { WebApplication } from '@/UIModels/Application'
 import { useState } from 'preact/hooks'
 import { Button } from '@/Components/Button/Button'
-import { RenameExtension } from './RenameExtension'
+import { ExtensionInfoCell } from './ExtensionInfoCell'
+import { AnyExtension } from './AnyExtension'
 
 const UseHosted: FunctionComponent<{
   offlineOnly: boolean
@@ -19,16 +20,16 @@ const UseHosted: FunctionComponent<{
 
 export interface ExtensionItemProps {
   application: WebApplication
-  extension: SNComponent
+  extension: AnyExtension
   first: boolean
   latestVersion: string | undefined
-  uninstall: (extension: SNComponent) => void
-  toggleActivate?: (extension: SNComponent) => void
+  uninstall: (extension: AnyExtension) => void
+  toggleActivate?: (extension: AnyExtension) => void
 }
 
-export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, extension, first, uninstall }) => {
-  const [offlineOnly, setOfflineOnly] = useState(extension.offlineOnly ?? false)
-  const [extensionName, setExtensionName] = useState(extension.name)
+export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, extension, uninstall }) => {
+  const [offlineOnly, setOfflineOnly] = useState(extension instanceof SNComponent ? extension.offlineOnly : false)
+  const [extensionName, setExtensionName] = useState(extension.displayName)
 
   const toggleOffllineOnly = () => {
     const newOfflineOnly = !offlineOnly
@@ -66,17 +67,13 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ applicati
   }
 
   const localInstallable = extension.package_info.download_url
-  const isThirParty = application.features.isThirdPartyFeature(extension.identifier)
+
+  const isThirParty = 'identifier' in extension && application.features.isThirdPartyFeature(extension.identifier)
 
   return (
     <PreferencesSegment classes={'mb-5'}>
-      {first && (
-        <>
-          <Title>Extensions</Title>
-        </>
-      )}
+      <ExtensionInfoCell isThirdParty={isThirParty} extensionName={extensionName} changeName={changeExtensionName} />
 
-      <RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
       <div className="min-h-2" />
 
       {isThirParty && localInstallable && (
@@ -86,7 +83,12 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ applicati
       <>
         <div className="min-h-2" />
         <div className="flex flex-row">
-          <Button className="min-w-20" variant="normal" label="Uninstall" onClick={() => uninstall(extension)} />
+          <Button
+            className="min-w-20"
+            variant="normal"
+            label={isThirParty ? 'Uninstall' : 'Reset'}
+            onClick={() => uninstall(extension)}
+          />
         </div>
       </>
     </PreferencesSegment>

app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts

@@ -1,6 +1,7 @@
 import { WebApplication } from '@/UIModels/Application'
-import { SNComponent, ClientDisplayableError, FeatureDescription } from '@standardnotes/snjs'
+import { ClientDisplayableError, FeatureDescription } from '@standardnotes/snjs'
 import { makeAutoObservable, observable } from 'mobx'
+import { AnyExtension } from './AnyExtension'
 
 export class ExtensionsLatestVersions {
   static async load(application: WebApplication): Promise<ExtensionsLatestVersions | undefined> {
@@ -23,7 +24,7 @@ export class ExtensionsLatestVersions {
     })
   }
 
-  getVersion(extension: SNComponent): string | undefined {
+  getVersion(extension: AnyExtension): string | undefined {
     return this.latestVersionsMap.get(extension.package_info.identifier)
   }
 }

app/assets/javascripts/Components/Preferences/Panes/Extensions/index.tsx

@@ -9,9 +9,10 @@ import { observer } from 'mobx-react-lite'
 import { ExtensionsLatestVersions } from './ExtensionsLatestVersions'
 import { ExtensionItem } from './ExtensionItem'
 import { ConfirmCustomExtension } from './ConfirmCustomExtension'
+import { AnyExtension } from './AnyExtension'
 
 const loadExtensions = (application: WebApplication) =>
-  application.items.getItems([ContentType.ActionsExtension, ContentType.Component, ContentType.Theme]) as SNComponent[]
+  application.items.getItems([ContentType.ActionsExtension, ContentType.Component, ContentType.Theme]) as AnyExtension[]
 
 export const Extensions: FunctionComponent<{
   application: WebApplication
@@ -19,7 +20,7 @@ export const Extensions: FunctionComponent<{
   className?: string
 }> = observer(({ application, extensionsLatestVersions, className = '' }) => {
   const [customUrl, setCustomUrl] = useState('')
-  const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined)
+  const [confirmableExtension, setConfirmableExtension] = useState<AnyExtension | undefined>(undefined)
   const [extensions, setExtensions] = useState(loadExtensions(application))
 
   const confirmableEnd = useRef<HTMLDivElement>(null)
@@ -30,7 +31,7 @@ export const Extensions: FunctionComponent<{
     }
   }, [confirmableExtension, confirmableEnd])
 
-  const uninstallExtension = async (extension: SNComponent) => {
+  const uninstallExtension = async (extension: AnyExtension) => {
     application.alertService
       .confirm(
         'Are you sure you want to uninstall this extension? Note that extensions managed by your subscription will automatically be re-installed on application restart.',
@@ -66,13 +67,23 @@ export const Extensions: FunctionComponent<{
   }
 
   const confirmExtension = async () => {
-    await application.mutator.insertItem(confirmableExtension as SNComponent)
+    await application.mutator.insertItem(confirmableExtension as AnyExtension)
     application.sync.sync().catch(console.error)
     setExtensions(loadExtensions(application))
   }
 
   const visibleExtensions = extensions.filter((extension) => {
-    return extension.package_info != undefined && !['modal', 'rooms'].includes(extension.area)
+    const hasPackageInfo = extension.package_info != undefined
+
+    if (!hasPackageInfo) {
+      return false
+    }
+
+    if (extension instanceof SNComponent) {
+      return !['modal', 'rooms'].includes(extension.area)
+    }
+
+    return true
   })
 
   return (
@@ -80,7 +91,7 @@ export const Extensions: FunctionComponent<{
       {visibleExtensions.length > 0 && (
         <div>
           {visibleExtensions
-            .sort((e1, e2) => e1.name?.toLowerCase().localeCompare(e2.name?.toLowerCase()))
+            .sort((e1, e2) => e1.displayName?.toLowerCase().localeCompare(e2.displayName?.toLowerCase()))
             .map((extension, i) => (
               <ExtensionItem
                 key={extension.uuid}

app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx

@@ -72,7 +72,7 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
         const [iconType, tint] = application.iconsController.getIconAndTintForNoteType(editor.package_info.note_type)
 
         return {
-          label: editor.name,
+          label: editor.displayName,
           value: identifier,
           ...(iconType ? { icon: iconType } : null),
           ...(tint ? { iconClassName: `color-accessory-tint-${tint}` } : null),

app/assets/javascripts/Components/QuickSettingsMenu/index.tsx

@@ -67,7 +67,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(({ appli
   const reloadThemes = useCallback(() => {
     const themes = application.items.getDisplayableItems<SNTheme>(ContentType.Theme).map((item) => {
       return {
-        name: item.name,
+        name: item.displayName,
         identifier: item.identifier,
         component: item,
       }
@@ -263,7 +263,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(({ appli
           >
             <div className="flex items-center">
               <Icon type="window" className="color-neutral mr-2" />
-              {component.name}
+              {component.displayName}
             </div>
             <Switch checked={component.active} className="px-0" />
           </button>