fix: hide horizontal separator if "offline subscriptions" section is hidden (#740)

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

@@ -20,7 +20,13 @@ const loadExtensions = (application: WebApplication) => application.getItems([
 export const Extensions: FunctionComponent<{
   application: WebApplication
   extensionsLatestVersions: ExtensionsLatestVersions,
-}> = observer(({ application, extensionsLatestVersions }) => {
+  className?: string,
+}> = observer(
+  ({
+     application,
+     extensionsLatestVersions,
+     className = ''
+   }) => {
 
   const [customUrl, setCustomUrl] = useState('');
   const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined);
@@ -84,7 +90,7 @@ export const Extensions: FunctionComponent<{
     });
 
   return (
-    <div>
+    <div className={className}>
       {visibleExtensions.length > 0 &&
         <div>
           {

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

@@ -1,12 +1,11 @@
 import { FunctionalComponent } from 'preact';
-import { PreferencesGroup, PreferencesSegment, Title } from '@/preferences/components';
+import { PreferencesGroup, PreferencesSegment } from '@/preferences/components';
 import { OfflineSubscription } from '@/preferences/panes/account/offlineSubscription';
 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 {
@@ -24,8 +23,7 @@ export const Advanced: FunctionalComponent<IProps> = observer(
             <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 className={'mt-3'} application={application} extensionsLatestVersions={extensionsLatestVersions} />
-                <Extensions application={application} extensionsLatestVersions={extensionsLatestVersions} />
               </div>
             </div>
           </AccordionItem>

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

@@ -10,6 +10,7 @@ import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/strings';
 import { ButtonType } from '@standardnotes/snjs';
+import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
 
 interface IProps {
   application: WebApplication;
@@ -55,10 +56,6 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
     setIsSuccessfullyRemoved(true);
   };
 
-  if (!shouldShowOfflineSubscription()) {
-    return null;
-  }
-
   const handleRemoveClick = async () => {
     application.alertService.confirm(
       STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
@@ -77,7 +74,12 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
       });
   };
 
+  if (!shouldShowOfflineSubscription()) {
+    return null;
+  }
+
   return (
+    <>
       <div className='flex items-center justify-between'>
         <div className='flex flex-col mt-3 w-full'>
           <Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
@@ -120,5 +122,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
           </form>
         </div>
       </div>
+      <HorizontalSeparator classes='mt-8 mb-5' />
+    </>
   );
 });