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/javascripts/components/ComponentView/IsExpired.tsx

@@ -0,0 +1,57 @@
+import { FunctionalComponent } from 'preact';
+
+interface IProps {
+  expiredDate: string;
+  reloadStatus: (doManualReload?: boolean) => void;
+}
+
+export const IsExpired: FunctionalComponent<IProps> = ({
+                                                         expiredDate,
+                                                         reloadStatus
+                                                       }) => {
+  return (
+    <div className={'sn-component'}>
+      <div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
+        <div className={'left'}>
+          <div className={'sk-app-bar-item'}>
+            <div className={'sk-app-bar-item-column'}>
+              <div className={'sk-circle danger small'} />
+            </div>
+            <div className={'sk-app-bar-item-column'}>
+              <div>
+                <a
+                  className={'sk-label sk-base'}
+                  href={'https://dashboard.standardnotes.com'}
+                  rel={'noopener'}
+                  target={'_blank'}
+                >
+                  Your Extended subscription expired on {expiredDate}
+                </a>
+                <div className={'sk-p'}>
+                  Extensions are in a read-only state.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={'right'}>
+          <div className={'sk-app-bar-item'} onClick={() => reloadStatus(true)}>
+            <button className={'sn-button small info'}>Reload</button>
+          </div>
+          <div className={'sk-app-bar-item'}>
+            <div className={'sk-app-bar-item-column'}>
+              <a
+                className={'sn-button small warning'}
+                href={'https://standardnotes.com/help/41/my-extensions-appear-as-expired-even-though-my-subscription-is-still-valid'}
+                rel={'noopener'}
+                target={'_blank'}
+              >
+                Help
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};