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

app/assets/javascripts/components/shared/AccordionItem.tsx

@@ -0,0 +1,44 @@
+import { FunctionalComponent } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+import ArrowDown from '../../../svg/arrow-down.svg';
+import { Title } from '@/preferences/components';
+
+type Props = {
+  title: string | JSX.Element;
+  className?: string;
+}
+
+export const AccordionItem: FunctionalComponent<Props> = ({
+                                                            title,
+                                                            className = '',
+                                                            children
+                                                          }) => {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className={className}>
+      <div
+        className={'relative flex cursor-pointer hover:underline'}
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+        }}
+      >
+        <Title>{title}</Title>
+        <ArrowDown
+          className={'sn-accordion-arrow-icon absolute right-0'}
+          width={20}
+          height={20}
+          data-is-expanded={isExpanded}
+        />
+      </div>
+      <div
+        className={'accordion-contents-container cursor-auto'}
+        data-is-expanded={isExpanded}
+        ref={elementRef}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

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" />

app/assets/stylesheets/_sn.scss

@@ -100,6 +100,24 @@
   }
 }
 
+.sn-accordion-arrow-icon {
+  &[data-is-expanded='true'] {
+    transform: rotate(180deg);
+  }
+}
+.accordion-contents-container {
+  transition: all 0.23s ease-out;
+  transform-origin: top;
+  transform: scaleY(0);
+  height: 0;
+
+  &[data-is-expanded='true'] {
+    height: auto;
+    transform-origin: top;
+    transform: none;
+  }
+}
+
 /** Lesser specificity will give priority to reach's styles */
 [data-reach-custom-checkbox-container].sn-switch {
   @extend .duration-150;
@@ -273,6 +291,9 @@
 .mb-5 {
   margin-bottom: 1.25rem;
 }
+.mb-8 {
+  margin-bottom: 2rem;
+}
 
 .max-w-89 {
   max-width: 22.25rem;
@@ -525,6 +546,10 @@
   left: -14rem;
 }
 
+.right-0 {
+  right: 0;
+}
+
 .-right-2 {
   right: -0.5rem;
 }

app/assets/stylesheets/_ui.scss

@@ -126,6 +126,9 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 .mt-5 {
   margin-top: 1.015625rem;
 }
+.mt-8 {
+  margin-top: 2rem;
+}
 
 .p-0 {
   padding: 0rem;

app/assets/svg/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.4167 6.90759L10.2417 10.7326L14.0667 6.90759L15.2417 8.09093L10.2417 13.0909L5.2417 8.09093L6.4167 6.90759Z" fill="#181818"/>
+</svg>