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/preferences/panes/extensions-segments/RenameExtension.tsx

@@ -0,0 +1,58 @@
+import { FunctionComponent } from "preact";
+import { useState, useRef, useEffect } from "preact/hooks";
+
+export const RenameExtension: FunctionComponent<{
+  extensionName: string, changeName: (newName: string) => void
+}> = ({ extensionName, changeName }) => {
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [newExtensionName, setNewExtensionName] = useState<string>(extensionName);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isRenaming) {
+      inputRef.current!.focus();
+    }
+  }, [inputRef, isRenaming]);
+
+  const startRenaming = () => {
+    setNewExtensionName(extensionName);
+    setIsRenaming(true);
+  };
+
+  const cancelRename = () => {
+    setNewExtensionName(extensionName);
+    setIsRenaming(false);
+  };
+
+  const confirmRename = () => {
+    if (!newExtensionName) {
+      return;
+    }
+    changeName(newExtensionName);
+    setIsRenaming(false);
+  };
+
+  return (
+    <div className="flex flex-row mr-3 items-center">
+      <input
+        ref={inputRef}
+        disabled={!isRenaming}
+        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 ?
+        <>
+          <a className="pt-1 cursor-pointer" onClick={confirmRename}>Confirm</a>
+          <div className="min-w-3" />
+          <a className="pt-1 cursor-pointer" onClick={cancelRename}>Cancel</a>
+        </> :
+        <a className="pt-1 cursor-pointer" onClick={startRenaming}>Rename</a>
+      }
+    </div>
+  );
+};