fix: use component displayName property

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>