feat(navigation): persist view params customisation

apps/client/src/common/components/navigation-menu/client-link/ClientLink.tsx

@@ -1,9 +1,16 @@
-import { PropsWithChildren } from 'react';
-import { IoArrowUp } from 'react-icons/io5';
-import { useNavigate } from 'react-router';
+import { MouseEvent, PropsWithChildren } from 'react';
+import { IoArrowUp, IoCloseOutline } from 'react-icons/io5';
+import { useLocation, useNavigate, useSearchParams } from 'react-router';
 
 import { useElectronEvent } from '../../../hooks/useElectronEvent';
+import {
+  hasCustomParams,
+  reservedParams,
+  stripReservedParams,
+  useSavedViewParams,
+} from '../../../stores/savedViewParams';
 import { handleLinks } from '../../../utils/linkUtils';
+import IconButton from '../../buttons/IconButton';
 import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
 
 import style from './ClientLink.module.scss';
@@ -16,32 +23,100 @@ interface ClientLinkProps {
 
 export default function ClientLink({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
   const { isElectron } = useElectronEvent();
-  const navigate = useNavigate();
 
   if (isElectron) {
     return (
-      <NavigationMenuItem
-        active={current}
-        onClick={() => {
-          handleLinks(to);
-          postAction?.();
-        }}
-      >
+      <ElectronNavigationItem current={current} to={to} postAction={postAction}>
         {children}
-        <IoArrowUp className={style.linkIcon} />
-      </NavigationMenuItem>
+      </ElectronNavigationItem>
     );
   }
 
   return (
-    <NavigationMenuItem
-      active={current}
-      onClick={() => {
-        navigate(`/${to}`);
-        postAction?.();
-      }}
-    >
+    <BrowserNavigationItem current={current} to={to} postAction={postAction}>
       {children}
+    </BrowserNavigationItem>
+  );
+}
+
+function ElectronNavigationItem({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
+  const navigateToLink = () => {
+    handleLinks(to);
+    postAction?.();
+  };
+
+  return (
+    <NavigationMenuItem active={current} onClick={navigateToLink}>
+      {children}
+      <span className={style.trailing}>
+        <IoArrowUp className={style.linkIcon} />
+      </span>
+    </NavigationMenuItem>
+  );
+}
+
+function BrowserNavigationItem({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { params: savedParams, save, clear } = useSavedViewParams();
+
+  /**
+   * Save the params of the view we are leaving and resolve the destination,
+   * restoring any params previously saved for the target view.
+   */
+  const resolveDestination = () => {
+    const currentView = location.pathname.replace(/^\//, '');
+    save(currentView, stripReservedParams(location.search));
+    const restored = savedParams[to];
+    return `${to}${restored ? `?${restored}` : ''}`;
+  };
+
+  const isCustomised = current ? hasCustomParams(searchParams) : Boolean(savedParams[to]);
+
+  const navigateToLink = () => {
+    const destination = resolveDestination();
+    navigate(`/${destination}`);
+    postAction?.();
+  };
+
+  /**
+   * Clear the saved settings for this route without navigating to it.
+   * When it is the current view, also reset the live URL to its defaults.
+   */
+  const clearViewSettings = (event: MouseEvent) => {
+    event.stopPropagation();
+    clear(to);
+
+    // if mounted, clear the URL params
+    if (current) {
+      const preserved = new URLSearchParams();
+      reservedParams.forEach((key) => {
+        const value = searchParams.get(key);
+        if (value !== null) preserved.set(key, value);
+      });
+      setSearchParams(preserved);
+    }
+  };
+
+  return (
+    <NavigationMenuItem active={current} onClick={navigateToLink}>
+      {children}
+      {isCustomised && (
+        <span className={style.trailing}>
+          <span className={style.indicator} aria-hidden data-testid='client-link__saved-indicator' />
+          <IconButton
+            variant='ghosted-white'
+            size='small'
+            className={style.clear}
+            aria-label='Clear saved view settings'
+            title='Clear saved view settings'
+            onClick={clearViewSettings}
+          >
+            <IoCloseOutline />
+          </IconButton>
+        </span>
+      )}
     </NavigationMenuItem>
   );
 }