Save expanded state for sections in location state and restore on navigation

6 files changed, 27 insertions, 11 deletions

diff --git a/gui/src/renderer/components/VpnSettings.tsx b/gui/src/renderer/components/VpnSettings.tsx
index f6d446cc43..1213703f61 100644
--- a/gui/src/renderer/components/VpnSettings.tsx
+++ b/gui/src/renderer/components/VpnSettings.tsx
@@ -260,7 +260,7 @@ function DnsBlockers() {
   );
 
   return (
-    <Cell.ExpandableSection sectionTitle={title}>
+    <Cell.ExpandableSection sectionTitle={title} expandableId="dns-blockers">
       <BlockAds />
       <BlockTrackers />
       <BlockMalware />
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index dea8c6dbc2..18c39a7396 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -276,6 +276,8 @@ function Udp2tcpPortSetting() {
     [],
   );
 
+  const expandableProps = useMemo(() => ({ expandable: true, id: 'udp2tcp-port' }), []);
+
   const selectPort = useCallback(
     async (port: LiftedConstraint<number>) => {
       await setObfuscationSettings({
@@ -307,7 +309,7 @@ function Udp2tcpPortSetting() {
           value={port}
           onSelect={selectPort}
           disabled={obfuscationSettings.selectedObfuscation === ObfuscationType.off}
-          expandable
+          expandable={expandableProps}
           thinTitle
           automaticValue={'any' as const}
         />
diff --git a/gui/src/renderer/components/cell/Section.tsx b/gui/src/renderer/components/cell/Section.tsx
index 1971e8dcb7..8ba5975476 100644
--- a/gui/src/renderer/components/cell/Section.tsx
+++ b/gui/src/renderer/components/cell/Section.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
+import { useAppContext } from '../../context';
+import { useHistory } from '../../lib/history';
 import { useBoolean } from '../../lib/utilityHooks';
 import Accordion from '../Accordion';
 import ChevronButton from '../ChevronButton';
@@ -56,12 +58,23 @@ const StyledTitleContainer = styled(Container)({
 });
 
 interface ExpandableSectionProps extends SectionProps {
+  expandableId: string;
   expandedInitially?: boolean;
 }
 
 export function ExpandableSection(props: ExpandableSectionProps) {
-  const { expandedInitially, sectionTitle, ...otherProps } = props;
-  const [expanded, , , toggleExpanded] = useBoolean(!!expandedInitially);
+  const { expandableId, expandedInitially, sectionTitle, ...otherProps } = props;
+
+  const history = useHistory();
+  const { setNavigationHistory } = useAppContext();
+  const expandedValue =
+    history.location.state.expandedSections[props.expandableId] ?? !!expandedInitially;
+  const [expanded, , , toggleExpanded] = useBoolean(expandedValue);
+
+  useEffect(() => {
+    history.location.state.expandedSections[props.expandableId] = expanded;
+    setNavigationHistory(history.asObject);
+  }, [expanded]);
 
   const title = (
     <>
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index cfd2357d6c..ed49444da1 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -26,7 +26,7 @@ interface CommonSelectorProps<T, U> {
   selectedCellRef?: React.Ref<HTMLElement>;
   className?: string;
   details?: React.ReactElement;
-  expandable?: boolean;
+  expandable?: { expandable: boolean; id: string };
   disabled?: boolean;
   thinTitle?: boolean;
   automaticLabel?: string;
@@ -98,14 +98,15 @@ export default function Selector<T, U>(props: SelectorProps<T, U>) {
     </Cell.Group>
   );
 
-  if (props.expandable) {
+  if (props.expandable?.expandable) {
     return (
       <AriaInput>
         <Cell.ExpandableSection
           role="listbox"
           expandedInitially={false}
           className={props.className}
-          sectionTitle={title}>
+          sectionTitle={title}
+          expandableId={props.expandable.id}>
           {children}
         </Cell.ExpandableSection>
       </AriaInput>
diff --git a/gui/src/renderer/lib/history.tsx b/gui/src/renderer/lib/history.tsx
index e74552f786..b81aef50fe 100644
--- a/gui/src/renderer/lib/history.tsx
+++ b/gui/src/renderer/lib/history.tsx
@@ -194,7 +194,7 @@ export default class History {
         pathname: location.pathname ?? this.location.pathname,
         search: location.search ?? '',
         hash: location.hash ?? '',
-        state: location.state ?? { scrollPosition: [0, 0], expandedSections: [] },
+        state: location.state ?? { scrollPosition: [0, 0], expandedSections: {} },
         key: location.key ?? this.getRandomKey(),
       };
     }
@@ -205,7 +205,7 @@ export default class History {
       pathname: path,
       search: '',
       hash: '',
-      state: state ?? { scrollPosition: [0, 0], expandedSections: [] },
+      state: state ?? { scrollPosition: [0, 0], expandedSections: {} },
       key: this.getRandomKey(),
     };
   }
diff --git a/gui/src/shared/ipc-types.ts b/gui/src/shared/ipc-types.ts
index 4d2a35357f..81ca28b1ac 100644
--- a/gui/src/shared/ipc-types.ts
+++ b/gui/src/shared/ipc-types.ts
@@ -15,7 +15,7 @@ export type IChangelog = Array<string>;
 
 export interface LocationState {
   scrollPosition: [number, number];
-  expandedSections: number[];
+  expandedSections: Record<string, boolean>;
 }
 
 export interface IHistoryObject {