feat: move extensions from prefs menu's left pane to General->Advanced section (#718)

app/assets/javascripts/preferences/PreferencesMenu.ts

@@ -11,7 +11,6 @@ const PREFERENCE_IDS = [
   'account',
   'appearance',
   'security',
-  'extensions',
   'listed',
   'shortcuts',
   'accessibility',
@@ -38,7 +37,6 @@ const PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
   { id: 'general', label: 'General', icon: 'settings' },
   // { id: 'appearance', label: 'Appearance', icon: 'themes' },
   { id: 'security', label: 'Security', icon: 'security' },
-  { id: 'extensions', label: 'Extensions', icon: 'tune' },
   { id: 'listed', label: 'Listed', icon: 'listed' },
   // { id: 'shortcuts', label: 'Shortcuts', icon: 'keyboard' },
   // { id: 'accessibility', label: 'Accessibility', icon: 'accessibility' },

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -16,7 +16,6 @@ import { WebApplication } from '@/ui_models/application';
 import { MfaProps } from './panes/two-factor-auth/MfaProps';
 import { AppState } from '@/ui_models/app_state';
 import { useEffect, useMemo } from 'preact/hooks';
-import { Extensions } from './panes/Extensions';
 import { ExtensionPane } from './panes/ExtensionPane';
 
 interface PreferencesProps extends MfaProps {
@@ -38,7 +37,11 @@ const PaneSelector: FunctionComponent<
     switch (menu.selectedPaneId) {
       case 'general':
         return (
-          <General appState={appState} application={application} />
+          <General
+            appState={appState}
+            application={application}
+            extensionsLatestVersions={menu.extensionsLatestVersions}
+          />
         );
       case 'account':
         return (
@@ -58,8 +61,6 @@ const PaneSelector: FunctionComponent<
             application={application}
           />
         );
-      case 'extensions':
-        return <Extensions application={application} extensionsLatestVersions={menu.extensionsLatestVersions} />;
       case 'listed':
         return <Listed application={application} />;
       case 'shortcuts':
@@ -81,7 +82,13 @@ const PaneSelector: FunctionComponent<
             />
           );
         } else {
-          return <General appState={appState} application={application} />;
+          return (
+            <General
+              appState={appState}
+              application={application}
+              extensionsLatestVersions={menu.extensionsLatestVersions}
+            />
+          );
         }
     }
   });

app/assets/javascripts/preferences/components/PreferencesSegment.tsx

@@ -1,5 +1,11 @@
 import { FunctionComponent } from 'preact';
 
-export const PreferencesSegment: FunctionComponent = ({ children }) => (
-  <div className="flex flex-col">{children}</div>
+type Props = {
+  classes?: string;
+}
+export const PreferencesSegment: FunctionComponent<Props> = ({
+                                                               children,
+                                                               classes = ''
+                                                             }) => (
+  <div className={`flex flex-col ${classes}`}>{children}</div>
 );

app/assets/javascripts/preferences/panes/AccountPreferences.tsx

@@ -25,7 +25,6 @@ export const AccountPreferences = observer(
           <Authentication application={application} appState={appState} />
           {appState.enableUnfinishedFeatures && <SubscriptionWrapper application={application} />}
           <SignOutWrapper application={application} appState={appState} />
-          <Advanced application={application} appState={appState} />
         </PreferencesPane>
       );
     }
@@ -36,7 +35,6 @@ export const AccountPreferences = observer(
         <Sync application={application} />
         {appState.enableUnfinishedFeatures && <SubscriptionWrapper application={application} />}
         <SignOutWrapper application={application} appState={appState} />
-        <Advanced application={application} appState={appState} />
       </PreferencesPane>
     );
   }

app/assets/javascripts/preferences/panes/Extensions.tsx

@@ -5,8 +5,6 @@ import { WebApplication } from '@/ui_models/application';
 import { FunctionComponent } from 'preact';
 import {
   Title,
-  PreferencesGroup,
-  PreferencesPane,
   PreferencesSegment,
 } from '../components';
 import { ConfirmCustomExtension, ExtensionItem, ExtensionsLatestVersions } from './extensions-segments';
@@ -70,55 +68,54 @@ export const Extensions: FunctionComponent<{
     .filter(extension => !['modal', 'rooms'].includes(extension.area));
 
   return (
-    <PreferencesPane>
+    <div>
       {visibleExtensions.length > 0 &&
-        <PreferencesGroup>
-          {
-            visibleExtensions
-              .sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
-              .map((extension, i) => (
-                <ExtensionItem
-                  application={application}
-                  extension={extension}
-                  latestVersion={extensionsLatestVersions.getVersion(extension)}
-                  first={i === 0}
-                  uninstall={uninstallExtension}
-                  toggleActivate={toggleActivateExtension} />
-              ))
-          }
-        </PreferencesGroup>
+      <div>
+        {
+          visibleExtensions
+            .sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
+            .map((extension, i) => (
+              <ExtensionItem
+                application={application}
+                extension={extension}
+                latestVersion={extensionsLatestVersions.getVersion(extension)}
+                first={i === 0}
+                uninstall={uninstallExtension}
+                toggleActivate={toggleActivateExtension} />
+            ))
+        }
+      </div>
       }
 
-      <PreferencesGroup>
+      <div>
         {!confirmableExtension &&
-          <PreferencesSegment>
-            <Title>Install Custom Extension</Title>
-            <div className="min-h-2" />
-            <DecoratedInput
-              placeholder={'Enter Extension URL'}
-              text={customUrl}
-              onChange={(value) => { setCustomUrl(value); }}
-            />
-            <div className="min-h-2" />
-            <Button
-              className="min-w-20"
-              type="normal"
-              label="Install"
-              onClick={() => submitExtensionUrl(customUrl)}
-            />
-
-          </PreferencesSegment>
+        <PreferencesSegment>
+          <Title>Install Custom Extension</Title>
+          <div className="min-h-2" />
+          <DecoratedInput
+            placeholder={'Enter Extension URL'}
+            text={customUrl}
+            onChange={(value) => { setCustomUrl(value); }}
+          />
+          <div className="min-h-2" />
+          <Button
+            className="min-w-20"
+            type="normal"
+            label="Install"
+            onClick={() => submitExtensionUrl(customUrl)}
+          />
+        </PreferencesSegment>
         }
         {confirmableExtension &&
-          <PreferencesSegment>
-            <ConfirmCustomExtension
-              component={confirmableExtension}
-              callback={handleConfirmExtensionSubmit}
-            />
-            <div ref={confirmableEnd} />
-          </PreferencesSegment>
+        <PreferencesSegment>
+          <ConfirmCustomExtension
+            component={confirmableExtension}
+            callback={handleConfirmExtensionSubmit}
+          />
+          <div ref={confirmableEnd} />
+        </PreferencesSegment>
         }
-      </PreferencesGroup>
-    </PreferencesPane>
+      </div>
+    </div>
   );
 });

app/assets/javascripts/preferences/panes/General.tsx

@@ -3,16 +3,27 @@ import { AppState } from '@/ui_models/app_state';
 import { FunctionComponent } from 'preact';
 import { PreferencesPane } from '../components';
 import { ErrorReporting, Tools, Defaults } from './general-segments';
+import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
+import { Advanced } from '@/preferences/panes/account';
+import { observer } from 'mobx-react-lite';
 
 interface GeneralProps {
   appState: AppState;
   application: WebApplication;
+  extensionsLatestVersions: ExtensionsLatestVersions,
 }
 
-export const General: FunctionComponent<GeneralProps> = (props) => (
-  <PreferencesPane>
-    <Tools application={props.application} />
-    <Defaults application={props.application} />
-    <ErrorReporting appState={props.appState} />
-  </PreferencesPane>
+export const General: FunctionComponent<GeneralProps> = observer(
+  ({
+     appState,
+     application,
+     extensionsLatestVersions
+   }) => (
+    <PreferencesPane>
+      <Tools application={application} />
+      <Defaults application={application} />
+      <ErrorReporting appState={appState} />
+      <Advanced application={application} appState={appState} extensionsLatestVersions={extensionsLatestVersions} />
+    </PreferencesPane>
+  )
 );

app/assets/javascripts/preferences/panes/account/Advanced.tsx

@@ -4,23 +4,33 @@ import { OfflineSubscription } from '@/preferences/panes/account/offlineSubscrip
 import { WebApplication } from '@/ui_models/application';
 import { observer } from 'mobx-react-lite';
 import { AppState } from '@/ui_models/app_state';
+import { Extensions } from '@/preferences/panes/Extensions';
+import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
+import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { AccordionItem } from '@/components/shared/AccordionItem';
 
 interface IProps {
   application: WebApplication;
   appState: AppState;
+  extensionsLatestVersions: ExtensionsLatestVersions;
 }
 
-export const Advanced: FunctionalComponent<IProps> = observer(({ application, appState }) => {
-  return (
-    <PreferencesGroup>
-      <PreferencesSegment>
-        <div className='flex flex-row items-center'>
-          <div className='flex-grow flex flex-col'>
-            <Title>Advanced Settings</Title>
-            <OfflineSubscription application={application} appState={appState} />
-          </div>
-        </div>
-      </PreferencesSegment>
-    </PreferencesGroup>
-  );
-});
+export const Advanced: FunctionalComponent<IProps> = observer(
+  ({ application, appState, extensionsLatestVersions }) => {
+    return (
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <AccordionItem title={'Advanced Settings'}>
+            <div className='flex flex-row items-center'>
+              <div className='flex-grow flex flex-col'>
+                <OfflineSubscription application={application} appState={appState} />
+                <HorizontalSeparator classes="mt-8 mb-8" />
+                <Extensions application={application} extensionsLatestVersions={extensionsLatestVersions} />
+              </div>
+            </div>
+          </AccordionItem>
+        </PreferencesSegment>
+      </PreferencesGroup>
+    );
+  }
+);

app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx

@@ -109,7 +109,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
     const isToggleable = [ComponentArea.EditorStack, ComponentArea.TagsList].includes(extension.area);
 
     return (
-      <PreferencesSegment>
+      <PreferencesSegment classes={'mb-5'}>
         {first && <>
           <Title>Extensions</Title>
           <div className="w-full min-h-3" />