From 7c2b8fe5453c73f7fd6e1ab322c4996438b2f446 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 30 Jun 2022 13:49:03 -0500
Subject: [PATCH] chore: improve preferences folder hierarchies (#1186)

---
 packages/web/package.json                     |  1 +
 .../Panes/Extensions/ExtensionItemProps.tsx   | 11 ----
 .../Advanced/AdvancedSection.tsx}             | 16 ++---
 .../Advanced}/OfflineSubscription.tsx         |  0
 .../Packages/ConfirmCustomPackage.tsx}        | 10 +--
 .../Advanced/Packages/PackageEntry.tsx}       | 22 +++++--
 .../Packages/PackageEntrySubInfo.tsx}         |  4 +-
 .../Packages/Provider/PackageProvider.ts}     | 12 ++--
 .../Advanced/Packages/Section.tsx}            | 62 ++++++++++++-------
 .../Packages/Types/AnyPackageType.ts}         |  2 +-
 .../Preferences/Panes/General/General.tsx     |  6 +-
 .../Preferences/Panes/Security/Security.tsx   |  4 +-
 .../TwoFactorAuth/AuthAppInfoPopup.tsx        |  0
 .../{ => Security}/TwoFactorAuth/Bullet.tsx   |  0
 .../TwoFactorAuth/CopyButton.tsx              |  0
 .../{ => Security}/TwoFactorAuth/MfaProps.ts  |  0
 .../TwoFactorAuth/SaveSecretKey.tsx           |  0
 .../TwoFactorAuth/ScanQRCode.tsx              |  0
 .../TwoFactorAuth/TwoFactorActivation.ts      |  0
 .../TwoFactorAuth/TwoFactorActivationView.tsx |  0
 .../TwoFactorAuth/TwoFactorAuth.ts            |  0
 .../TwoFactorAuthView/TwoFactorAuthView.tsx   |  0
 .../TwoFactorDescription.tsx                  |  0
 .../TwoFactorAuthView/TwoFactorSwitch.tsx     |  0
 .../TwoFactorAuthView/TwoFactorTitle.tsx      |  0
 .../TwoFactorAuth/TwoFactorAuthWrapper.tsx    |  0
 .../TwoFactorAuth/TwoFactorSuccess.tsx        |  0
 .../TwoFactorAuth/Verification.tsx            |  0
 .../TwoFactorAuth/download-secret-key.tsx     |  0
 .../Components/Preferences/PreferencesMenu.ts |  8 +--
 .../Preferences/PreferencesProps.tsx          |  2 +-
 31 files changed, 88 insertions(+), 72 deletions(-)
 delete mode 100644 packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionItemProps.tsx
 rename packages/web/src/javascripts/Components/Preferences/Panes/{Account/Advanced.tsx => General/Advanced/AdvancedSection.tsx} (67%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{Account => General/Advanced}/OfflineSubscription.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{Extensions/ConfirmCustomExtension.tsx => General/Advanced/Packages/ConfirmCustomPackage.tsx} (86%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{Extensions/ExtensionItem.tsx => General/Advanced/Packages/PackageEntry.tsx} (74%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{Extensions/ExtensionInfoCell.tsx => General/Advanced/Packages/PackageEntrySubInfo.tsx} (92%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{Extensions/ExtensionsLatestVersions.ts => General/Advanced/Packages/Provider/PackageProvider.ts} (77%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{Extensions/Extensions.tsx => General/Advanced/Packages/Section.tsx} (68%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{Extensions/AnyExtension.ts => General/Advanced/Packages/Types/AnyPackageType.ts} (52%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/AuthAppInfoPopup.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/Bullet.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/CopyButton.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/MfaProps.ts (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/SaveSecretKey.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/ScanQRCode.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/TwoFactorActivation.ts (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/TwoFactorActivationView.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/TwoFactorAuth.ts (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/TwoFactorAuthView/TwoFactorDescription.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/TwoFactorAuthView/TwoFactorSwitch.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/TwoFactorAuthView/TwoFactorTitle.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/TwoFactorAuthWrapper.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/TwoFactorSuccess.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/Verification.tsx (100%)
 rename packages/web/src/javascripts/Components/Preferences/Panes/{ => Security}/TwoFactorAuth/download-secret-key.tsx (100%)

diff --git a/packages/web/package.json b/packages/web/package.json
index cf8a8368a..72976048a 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -15,6 +15,7 @@
     "prebuild": "yarn clean",
     "build": "webpack --config web.webpack.prod.js && yarn tsc",
     "lint": "eslint src/javascripts",
+    "format": "prettier --write src/javascripts",
     "tsc": "tsc --project tsconfig.json",
     "test": "jest --config jest.config.js --coverage",
     "upgrade:snjs": "ncu -u '@standardnotes/*'"
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionItemProps.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionItemProps.tsx
deleted file mode 100644
index c8419a7f6..000000000
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionItemProps.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { WebApplication } from '@/Application/Application'
-import { AnyExtension } from './AnyExtension'
-
-export interface ExtensionItemProps {
-  application: WebApplication
-  extension: AnyExtension
-  first: boolean
-  latestVersion: string | undefined
-  uninstall: (extension: AnyExtension) => void
-  toggleActivate?: (extension: AnyExtension) => void
-}
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Advanced.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/AdvancedSection.tsx
similarity index 67%
rename from packages/web/src/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/AdvancedSection.tsx
index 343e49c6e..ed9ff7836 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/AdvancedSection.tsx
@@ -1,29 +1,29 @@
 import { FunctionComponent } from 'react'
-import OfflineSubscription from '@/Components/Preferences/Panes/Account/OfflineSubscription'
+import OfflineSubscription from '@/Components/Preferences/Panes/General/Advanced/OfflineSubscription'
 import { WebApplication } from '@/Application/Application'
 import { observer } from 'mobx-react-lite'
 import { ViewControllerManager } from '@/Services/ViewControllerManager'
-import Extensions from '@/Components/Preferences/Panes/Extensions/Extensions'
-import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
+import PackagesPreferencesSection from '@/Components/Preferences/Panes/General/Advanced/Packages/Section'
+import { PackageProvider } from '@/Components/Preferences/Panes/General/Advanced/Packages/Provider/PackageProvider'
 import AccordionItem from '@/Components/Shared/AccordionItem'
-import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
-import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+import PreferencesGroup from '../../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
   viewControllerManager: ViewControllerManager
-  extensionsLatestVersions: ExtensionsLatestVersions
+  extensionsLatestVersions: PackageProvider
 }
 
 const Advanced: FunctionComponent<Props> = ({ application, viewControllerManager, extensionsLatestVersions }) => {
   return (
     <PreferencesGroup>
       <PreferencesSegment>
-        <AccordionItem title={'Advanced Settings'}>
+        <AccordionItem title={'Advanced Options'}>
           <div className="flex flex-row items-center">
             <div className="flex flex-grow flex-col">
               <OfflineSubscription application={application} viewControllerManager={viewControllerManager} />
-              <Extensions
+              <PackagesPreferencesSection
                 className={'mt-3'}
                 application={application}
                 extensionsLatestVersions={extensionsLatestVersions}
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/OfflineSubscription.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/OfflineSubscription.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/ConfirmCustomPackage.tsx
similarity index 86%
rename from packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/ConfirmCustomPackage.tsx
index b3800bcfd..cbfb59556 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/ConfirmCustomPackage.tsx
@@ -2,11 +2,11 @@ import { DisplayStringForContentType } from '@standardnotes/snjs'
 import Button from '@/Components/Button/Button'
 import { Fragment, FunctionComponent } from 'react'
 import { Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
-import { AnyExtension } from './AnyExtension'
-import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+import { AnyPackageType } from './Types/AnyPackageType'
+import PreferencesSegment from '../../../../PreferencesComponents/PreferencesSegment'
 
-const ConfirmCustomExtension: FunctionComponent<{
-  component: AnyExtension
+const ConfirmCustomPackage: FunctionComponent<{
+  component: AnyPackageType
   callback: (confirmed: boolean) => void
 }> = ({ component, callback }) => {
   const fields = [
@@ -66,4 +66,4 @@ const ConfirmCustomExtension: FunctionComponent<{
   )
 }
 
-export default ConfirmCustomExtension
+export default ConfirmCustomPackage
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/PackageEntry.tsx
similarity index 74%
rename from packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/PackageEntry.tsx
index 47b11b79e..0f30c09a5 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/PackageEntry.tsx
@@ -3,9 +3,10 @@ import { ComponentMutator, SNComponent } from '@standardnotes/snjs'
 import { SubtitleLight } from '@/Components/Preferences/PreferencesComponents/Content'
 import Switch from '@/Components/Switch/Switch'
 import Button from '@/Components/Button/Button'
-import ExtensionInfoCell from './ExtensionInfoCell'
-import { ExtensionItemProps } from './ExtensionItemProps'
-import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+import PackageEntrySubInfo from './PackageEntrySubInfo'
+import PreferencesSegment from '../../../../PreferencesComponents/PreferencesSegment'
+import { WebApplication } from '@/Application/Application'
+import { AnyPackageType } from './Types/AnyPackageType'
 
 const UseHosted: FunctionComponent<{
   offlineOnly: boolean
@@ -17,7 +18,16 @@ const UseHosted: FunctionComponent<{
   </div>
 )
 
-const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, extension, uninstall }) => {
+interface PackageEntryProps {
+  application: WebApplication
+  extension: AnyPackageType
+  first: boolean
+  latestVersion: string | undefined
+  uninstall: (extension: AnyPackageType) => void
+  toggleActivate?: (extension: AnyPackageType) => void
+}
+
+const PackageEntry: FunctionComponent<PackageEntryProps> = ({ application, extension, uninstall }) => {
   const [offlineOnly, setOfflineOnly] = useState(extension instanceof SNComponent ? extension.offlineOnly : false)
   const [extensionName, setExtensionName] = useState(extension.displayName)
 
@@ -56,7 +66,7 @@ const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, ext
 
   return (
     <PreferencesSegment classes={'mb-5'}>
-      <ExtensionInfoCell isThirdParty={isThirdParty} extensionName={extensionName} changeName={changeExtensionName} />
+      <PackageEntrySubInfo isThirdParty={isThirdParty} extensionName={extensionName} changeName={changeExtensionName} />
 
       <div className="my-1" />
 
@@ -71,4 +81,4 @@ const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, ext
   )
 }
 
-export default ExtensionItem
+export default PackageEntry
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionInfoCell.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/PackageEntrySubInfo.tsx
similarity index 92%
rename from packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionInfoCell.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/PackageEntrySubInfo.tsx
index 13cd176c5..899236bd9 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionInfoCell.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/PackageEntrySubInfo.tsx
@@ -6,7 +6,7 @@ type Props = {
   isThirdParty: boolean
 }
 
-const ExtensionInfoCell: FunctionComponent<Props> = ({ extensionName, changeName, isThirdParty }) => {
+const PackageEntrySubInfo: FunctionComponent<Props> = ({ extensionName, changeName, isThirdParty }) => {
   const [isRenaming, setIsRenaming] = useState(false)
   const [newExtensionName, setNewExtensionName] = useState<string>(extensionName)
 
@@ -73,4 +73,4 @@ const ExtensionInfoCell: FunctionComponent<Props> = ({ extensionName, changeName
   )
 }
 
-export default ExtensionInfoCell
+export default PackageEntrySubInfo
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/Provider/PackageProvider.ts
similarity index 77%
rename from packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
rename to packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/Provider/PackageProvider.ts
index 30f73b636..dbae56519 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/Provider/PackageProvider.ts
@@ -1,13 +1,13 @@
 import { WebApplication } from '@/Application/Application'
 import { ClientDisplayableError, FeatureDescription } from '@standardnotes/snjs'
 import { makeAutoObservable, observable } from 'mobx'
-import { AnyExtension } from './AnyExtension'
+import { AnyPackageType } from '../Types/AnyPackageType'
 import { ComponentChecksumsType } from '@standardnotes/components-meta'
 import RawComponentChecksumsFile from '@standardnotes/components-meta/dist/zips/checksums.json'
 const ComponentChecksums = RawComponentChecksumsFile as ComponentChecksumsType
 
-export class ExtensionsLatestVersions {
-  static async load(application: WebApplication): Promise<ExtensionsLatestVersions | undefined> {
+export class PackageProvider {
+  static async load(application: WebApplication): Promise<PackageProvider | undefined> {
     const response = await application.getAvailableSubscriptions()
 
     if (response instanceof ClientDisplayableError) {
@@ -18,16 +18,16 @@ export class ExtensionsLatestVersions {
     collectFeatures(response.PLUS_PLAN?.features as FeatureDescription[], versionMap)
     collectFeatures(response.PRO_PLAN?.features as FeatureDescription[], versionMap)
 
-    return new ExtensionsLatestVersions(versionMap)
+    return new PackageProvider(versionMap)
   }
 
   constructor(private readonly latestVersionsMap: Map<string, string>) {
-    makeAutoObservable<ExtensionsLatestVersions, 'latestVersionsMap'>(this, {
+    makeAutoObservable<PackageProvider, 'latestVersionsMap'>(this, {
       latestVersionsMap: observable.ref,
     })
   }
 
-  getVersion(extension: AnyExtension): string | undefined {
+  getVersion(extension: AnyPackageType): string | undefined {
     return this.latestVersionsMap.get(extension.package_info.identifier)
   }
 }
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/Extensions.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/Section.tsx
similarity index 68%
rename from packages/web/src/javascripts/Components/Preferences/Panes/Extensions/Extensions.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/Section.tsx
index 7ea78c800..698ed009a 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/Extensions.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/Section.tsx
@@ -3,26 +3,34 @@ import Button from '@/Components/Button/Button'
 import DecoratedInput from '@/Components/Input/DecoratedInput'
 import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, useEffect, useRef, useState } from 'react'
-import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
+import { Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
 import { observer } from 'mobx-react-lite'
-import { ExtensionsLatestVersions } from './ExtensionsLatestVersions'
-import ExtensionItem from './ExtensionItem'
-import ConfirmCustomExtension from './ConfirmCustomExtension'
-import { AnyExtension } from './AnyExtension'
-import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+import { PackageProvider } from './Provider/PackageProvider'
+import PackageEntry from './PackageEntry'
+import ConfirmCustomPackage from './ConfirmCustomPackage'
+import { AnyPackageType } from './Types/AnyPackageType'
+import PreferencesSegment from '../../../../PreferencesComponents/PreferencesSegment'
 
 const loadExtensions = (application: WebApplication) =>
-  application.items.getItems([ContentType.ActionsExtension, ContentType.Component, ContentType.Theme]) as AnyExtension[]
+  application.items.getItems([
+    ContentType.ActionsExtension,
+    ContentType.Component,
+    ContentType.Theme,
+  ]) as AnyPackageType[]
 
 type Props = {
   application: WebApplication
-  extensionsLatestVersions: ExtensionsLatestVersions
+  extensionsLatestVersions: PackageProvider
   className?: string
 }
 
-const Extensions: FunctionComponent<Props> = ({ application, extensionsLatestVersions, className = '' }) => {
+const PackagesPreferencesSection: FunctionComponent<Props> = ({
+  application,
+  extensionsLatestVersions,
+  className = '',
+}) => {
   const [customUrl, setCustomUrl] = useState('')
-  const [confirmableExtension, setConfirmableExtension] = useState<AnyExtension | undefined>(undefined)
+  const [confirmableExtension, setConfirmableExtension] = useState<AnyPackageType | undefined>(undefined)
   const [extensions, setExtensions] = useState(loadExtensions(application))
 
   const confirmableEnd = useRef<HTMLDivElement>(null)
@@ -33,7 +41,7 @@ const Extensions: FunctionComponent<Props> = ({ application, extensionsLatestVer
     }
   }, [confirmableExtension, confirmableEnd])
 
-  const uninstallExtension = async (extension: AnyExtension) => {
+  const uninstallExtension = async (extension: AnyPackageType) => {
     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.',
@@ -69,7 +77,7 @@ const Extensions: FunctionComponent<Props> = ({ application, extensionsLatestVer
   }
 
   const confirmExtension = async () => {
-    await application.mutator.insertItem(confirmableExtension as AnyExtension)
+    await application.mutator.insertItem(confirmableExtension as AnyPackageType)
     application.sync.sync().catch(console.error)
     setExtensions(loadExtensions(application))
   }
@@ -95,7 +103,7 @@ const Extensions: FunctionComponent<Props> = ({ application, extensionsLatestVer
           {visibleExtensions
             .sort((e1, e2) => e1.displayName?.toLowerCase().localeCompare(e2.displayName?.toLowerCase()))
             .map((extension, i) => (
-              <ExtensionItem
+              <PackageEntry
                 key={extension.uuid}
                 application={application}
                 extension={extension}
@@ -110,20 +118,28 @@ const Extensions: FunctionComponent<Props> = ({ application, extensionsLatestVer
       <div>
         {!confirmableExtension && (
           <PreferencesSegment>
-            <Title>Install Custom Extension</Title>
-            <DecoratedInput
-              placeholder={'Enter Extension URL'}
-              value={customUrl}
-              onChange={(value) => {
-                setCustomUrl(value)
-              }}
+            <Subtitle>Install External Package</Subtitle>
+            <div className={'mt-2'}>
+              <DecoratedInput
+                placeholder={'Enter Package URL'}
+                value={customUrl}
+                onChange={(value) => {
+                  setCustomUrl(value)
+                }}
+              />
+            </div>
+            <Button
+              disabled={customUrl.length === 0}
+              className="mt-3 min-w-20"
+              primary
+              label="Install"
+              onClick={() => submitExtensionUrl(customUrl)}
             />
-            <Button className="mt-3 min-w-20" label="Install" onClick={() => submitExtensionUrl(customUrl)} />
           </PreferencesSegment>
         )}
         {confirmableExtension && (
           <PreferencesSegment>
-            <ConfirmCustomExtension component={confirmableExtension} callback={handleConfirmExtensionSubmit} />
+            <ConfirmCustomPackage component={confirmableExtension} callback={handleConfirmExtensionSubmit} />
             <div ref={confirmableEnd} />
           </PreferencesSegment>
         )}
@@ -132,4 +148,4 @@ const Extensions: FunctionComponent<Props> = ({ application, extensionsLatestVer
   )
 }
 
-export default observer(Extensions)
+export default observer(PackagesPreferencesSection)
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/AnyExtension.ts b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/Types/AnyPackageType.ts
similarity index 52%
rename from packages/web/src/javascripts/Components/Preferences/Panes/Extensions/AnyExtension.ts
rename to packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/Types/AnyPackageType.ts
index b7b4565f1..31a23e1ae 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Extensions/AnyExtension.ts
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/Types/AnyPackageType.ts
@@ -1,3 +1,3 @@
 import { SNActionsExtension, SNComponent, SNTheme } from '@standardnotes/snjs'
 
-export type AnyExtension = SNComponent | SNTheme | SNActionsExtension
+export type AnyPackageType = SNComponent | SNTheme | SNActionsExtension
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
index 280a0777a..a06824b6e 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
@@ -1,18 +1,18 @@
 import { WebApplication } from '@/Application/Application'
 import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { FunctionComponent } from 'react'
-import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
+import { PackageProvider } from '@/Components/Preferences/Panes/General/Advanced/Packages/Provider/PackageProvider'
 import { observer } from 'mobx-react-lite'
 import Tools from './Tools'
 import Defaults from './Defaults'
 import LabsPane from './Labs/Labs'
-import Advanced from '@/Components/Preferences/Panes/Account/Advanced'
+import Advanced from '@/Components/Preferences/Panes/General/Advanced/AdvancedSection'
 import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 
 type Props = {
   viewControllerManager: ViewControllerManager
   application: WebApplication
-  extensionsLatestVersions: ExtensionsLatestVersions
+  extensionsLatestVersions: PackageProvider
 }
 
 const General: FunctionComponent<Props> = ({ viewControllerManager, application, extensionsLatestVersions }) => (
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/Security.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/Security.tsx
index b59e025da..0b01c8d23 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/Security.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/Security.tsx
@@ -1,8 +1,8 @@
 import { WebApplication } from '@/Application/Application'
 import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { FunctionComponent } from 'react'
-import TwoFactorAuthWrapper from '../TwoFactorAuth/TwoFactorAuthWrapper'
-import { MfaProps } from '../TwoFactorAuth/MfaProps'
+import TwoFactorAuthWrapper from './TwoFactorAuth/TwoFactorAuthWrapper'
+import { MfaProps } from './TwoFactorAuth/MfaProps'
 import Encryption from './Encryption'
 import PasscodeLock from './PasscodeLock'
 import Privacy from './Privacy'
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/AuthAppInfoPopup.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/AuthAppInfoPopup.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Bullet.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/Bullet.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Bullet.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/Bullet.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/CopyButton.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/CopyButton.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/MfaProps.ts b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/MfaProps.ts
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/MfaProps.ts
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/MfaProps.ts
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/SaveSecretKey.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/SaveSecretKey.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/ScanQRCode.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/ScanQRCode.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivation.ts b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorActivation.ts
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivation.ts
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorActivation.ts
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivationView.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorActivationView.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivationView.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorActivationView.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuth.ts b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuth.ts
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuth.ts
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuth.ts
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorDescription.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorDescription.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorDescription.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorDescription.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorSwitch.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorSwitch.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorSwitch.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorSwitch.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorTitle.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorTitle.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorTitle.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorTitle.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthWrapper.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthWrapper.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthWrapper.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthWrapper.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorSuccess.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorSuccess.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/Verification.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/Verification.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/download-secret-key.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/download-secret-key.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/download-secret-key.tsx
rename to packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/download-secret-key.tsx
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts b/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts
index 188fa27ca..5bddfd42f 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts
@@ -1,7 +1,7 @@
 import { action, makeAutoObservable, observable } from 'mobx'
 import { IconType } from '@standardnotes/snjs'
 import { WebApplication } from '@/Application/Application'
-import { ExtensionsLatestVersions } from './Panes/Extensions/ExtensionsLatestVersions'
+import { PackageProvider } from './Panes/General/Advanced/Packages/Provider/PackageProvider'
 import { securityPrefsHasBubble } from './Panes/Security/securityPrefsHasBubble'
 
 const PREFERENCE_IDS = [
@@ -59,7 +59,7 @@ const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
 export class PreferencesMenu {
   private _selectedPane: PreferenceId = 'account'
   private _menu: PreferencesMenuItem[]
-  private _extensionLatestVersions: ExtensionsLatestVersions = new ExtensionsLatestVersions(new Map())
+  private _extensionLatestVersions: PackageProvider = new PackageProvider(new Map())
 
   constructor(private application: WebApplication, private readonly _enableUnfinishedFeatures: boolean) {
     this._menu = this._enableUnfinishedFeatures ? PREFERENCES_MENU_ITEMS : READY_PREFERENCES_MENU_ITEMS
@@ -79,7 +79,7 @@ export class PreferencesMenu {
   }
 
   private loadLatestVersions(): void {
-    ExtensionsLatestVersions.load(this.application)
+    PackageProvider.load(this.application)
       .then((versions) => {
         if (versions) {
           this._extensionLatestVersions = versions
@@ -88,7 +88,7 @@ export class PreferencesMenu {
       .catch(console.error)
   }
 
-  get extensionsLatestVersions(): ExtensionsLatestVersions {
+  get extensionsLatestVersions(): PackageProvider {
     return this._extensionLatestVersions
   }
 
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesProps.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesProps.tsx
index 1e4949fd6..856b8e933 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesProps.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesProps.tsx
@@ -1,5 +1,5 @@
 import { WebApplication } from '@/Application/Application'
-import { MfaProps } from './Panes/TwoFactorAuth/MfaProps'
+import { MfaProps } from './Panes/Security/TwoFactorAuth/MfaProps'
 import { ViewControllerManager } from '@/Services/ViewControllerManager'
 
 export interface PreferencesProps extends MfaProps {