feat(preferences): extension modals into extension panes (#683)

* feat(preferences): show inline extensions in extensions pane

* wip

* wip

* refactor: convert ComponentView to React component

* refactor: convert ComponentView to React component

* chore: fix merge conflicts

* feat: don't show features whose `area` is "room", update modal items' icons in Preferences menu

* chore: fix TS error

* feat: don't show 2FA Manager in modal-based component

* feat: remove `ExtendedDataReloadComplete` event, since Extensions Manger is being removed from the app

* chore: avoid hardcoded values in svg image, optimize `if` condition

* chore: remove remnant comment

* fix: fix typescript errors

Co-authored-by: vardanhakobyan <vardan_live@live.com>

app/assets/templates/directives/component-modal.pug

@@ -14,4 +14,6 @@
         ng-if='ctrl.component.active'
         component-uuid="ctrl.component.uuid",
         application='ctrl.application'
+        app-state='self.appState'
+        broadcast='$broadcast'
         )

app/assets/templates/directives/component-view.pug

@@ -1,90 +0,0 @@
-.sn-component(ng-if='ctrl.issueLoading')
-  .sk-app-bar.no-edges.no-top-edge.dynamic-height
-    .left
-      .sk-app-bar-item
-        .sk-label.warning There was an issue loading {{ctrl.component.name}}.
-    .right
-      .sk-app-bar-item(ng-click='ctrl.reloadIframe()')
-        button.sn-button.small.info Reload
-.sn-component(ng-if='ctrl.expired')
-  .sk-app-bar.no-edges.no-top-edge.dynamic-height
-    .left
-      .sk-app-bar-item
-        .sk-app-bar-item-column
-          .sk-circle.danger.small
-        .sk-app-bar-item-column
-          div
-            a.sk-label.sk-base(
-              href='https://dashboard.standardnotes.com',
-              rel='noopener',
-              target='_blank'
-              )
-              | Your Extended subscription expired on
-              | {{ctrl.component.dateToLocalizedString(ctrl.component.valid_until)}}.
-            .sk-p
-              | Extensions are in a read-only state.
-    .right
-      .sk-app-bar-item(ng-click='ctrl.reloadStatus(true)')
-        button.sn-button.small.info Reload
-      .sk-app-bar-item
-        .sk-app-bar-item-column
-          a.sn-button.small.warning(
-            href='https://standardnotes.com/help/41/expired',
-            rel='noopener',
-            target='_blank'
-            ) Help
-.sn-component(ng-if='ctrl.isDeprecated && !ctrl.deprecationMessageDismissed')
-  .sk-app-bar.no-edges.no-top-edge.dynamic-height
-    .left
-      .sk-app-bar-item
-        .sk-label.warning {{ctrl.deprecationMessage || 'This extension is deprecated.'}}
-    .right
-      .sk-app-bar-item(ng-click='ctrl.dismissDeprecationMessage()')
-        button.sn-button.small.info Dismiss
-
-.sn-component(ng-if="ctrl.error == 'offline-restricted'")
-  .sk-panel.static
-    .sk-panel-content
-      .sk-panel-section.stretch
-        .sk-panel-column
-        .sk-h1.sk-bold You have restricted this extension to be used offline only.
-        .sk-subtitle Offline extensions are not available in the Web app.
-        .sk-panel-row
-        .sk-panel-row
-          .sk-panel-column
-            .sk-p You can either:
-            ul
-              li.sk-p
-                strong Enable the Hosted option
-                |  for this extension by opening the 'Extensions' menu and
-                | toggling 'Use hosted when local is unavailable' under this
-                | extension's options. Then press Reload below.
-              li.sk-p
-                strong Use the Desktop application.
-        .sk-panel-row
-          button.sn-button.small.info(
-            ng-click='ctrl.reloadStatus()',
-            ng-if='!ctrl.reloading'
-          ) Reload
-          .sk-spinner.info.small(ng-if='ctrl.reloading')
-.sn-component(ng-if="ctrl.error == 'url-missing'")
-  .sk-panel.static
-    .sk-panel-content
-      .sk-panel-section.stretch
-        .sk-panel-section-title This extension is not installed correctly.
-        p Please uninstall {{ctrl.component.name}}, then re-install it.
-        p
-          | This issue can occur if you access Standard Notes using an older
-          | version of the app.
-          | Ensure you are running at least version 2.1 on all platforms.
-iframe(
-  data-component-id='{{ctrl.component.uuid}}',
-  frameborder='0',
-  ng-init='ctrl.onIframeInit()'
-  ng-attr-id='component-iframe-{{ctrl.component.uuid}}',
-  ng-if='ctrl.component.uuid && !ctrl.reloading && ctrl.componentValid',
-  ng-src='{{ctrl.getUrl() | trusted}}',
-  sandbox='allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms allow-downloads'
-  )
-  | Loading
-.loading-overlay(ng-if='ctrl.loading')

app/assets/templates/directives/revision-preview-modal.pug

@@ -33,4 +33,6 @@
             ng-if="ctrl.state.editor",
             template-component="ctrl.state.editor",
             application='ctrl.application'
+            app-state='self.appState'
+            broadcast='$broadcast'
             )