onboarding preserve params

src/pages/onboarding/Onboarding.tsx

@@ -1,6 +1,5 @@
 import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
 
 import { Button } from "@/components/buttons/Button";
 import { Stepper } from "@/components/layout/Stepper";
@@ -8,7 +7,10 @@ import { CenterContainer } from "@/components/layout/ThinContainer";
 import { Modal, ModalCard, useModal } from "@/components/overlays/Modal";
 import { Heading1, Heading2, Paragraph } from "@/components/utils/Text";
 import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout";
-import { useRedirectBack } from "@/pages/onboarding/onboardingHooks";
+import {
+  useNavigateOnboarding,
+  useRedirectBack,
+} from "@/pages/onboarding/onboardingHooks";
 import { Card, CardContent, Link } from "@/pages/onboarding/utils";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
 
@@ -21,7 +23,7 @@ function VerticalLine(props: { className?: string }) {
 }
 
 export function OnboardingPage() {
-  const navigate = useNavigate();
+  const navigate = useNavigateOnboarding();
   const skipModal = useModal("skip");
   const { completeAndRedirect } = useRedirectBack();
   const { t } = useTranslation();

src/pages/onboarding/OnboardingExtension.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
 import { useAsyncFn, useInterval } from "react-use";
 
 import { isAllowedExtensionVersion } from "@/backend/extension/compatibility";
@@ -12,7 +11,10 @@ import { Stepper } from "@/components/layout/Stepper";
 import { CenterContainer } from "@/components/layout/ThinContainer";
 import { Heading2, Paragraph } from "@/components/utils/Text";
 import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout";
-import { useRedirectBack } from "@/pages/onboarding/onboardingHooks";
+import {
+  useNavigateOnboarding,
+  useRedirectBack,
+} from "@/pages/onboarding/onboardingHooks";
 import { Card, Link } from "@/pages/onboarding/utils";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
 
@@ -104,7 +106,7 @@ export function ExtensionStatus(props: {
 
 export function OnboardingExtensionPage() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const navigate = useNavigateOnboarding();
   const { completeAndRedirect } = useRedirectBack();
 
   const [{ loading, value }, exec] = useAsyncFn(

src/pages/onboarding/OnboardingProxy.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
 import { useAsyncFn } from "react-use";
 
 import { singularProxiedFetch } from "@/backend/helpers/fetch";
@@ -12,7 +11,10 @@ import { Divider } from "@/components/utils/Divider";
 import { ErrorLine } from "@/components/utils/ErrorLine";
 import { Heading2, Paragraph } from "@/components/utils/Text";
 import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout";
-import { useRedirectBack } from "@/pages/onboarding/onboardingHooks";
+import {
+  useNavigateOnboarding,
+  useRedirectBack,
+} from "@/pages/onboarding/onboardingHooks";
 import { Link } from "@/pages/onboarding/utils";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
 import { useAuthStore } from "@/stores/auth";
@@ -21,7 +23,7 @@ const testUrl = "https://postman-echo.com/get";
 
 export function OnboardingProxyPage() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const navigate = useNavigateOnboarding();
   const { completeAndRedirect } = useRedirectBack();
   const [url, setUrl] = useState("");
   const setProxySet = useAuthStore((s) => s.setProxySet);

src/pages/onboarding/onboardingHooks.ts

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import { useQueryParam } from "@/hooks/useQueryParams";
 import { useOnboardingStore } from "@/stores/onboarding";
@@ -20,3 +20,18 @@ export function useRedirectBack() {
 
   return { completeAndRedirect };
 }
+
+export function useNavigateOnboarding() {
+  const navigate = useNavigate();
+  const loc = useLocation();
+  const nav = useCallback(
+    (path: string) => {
+      navigate({
+        pathname: path,
+        search: loc.search,
+      });
+    },
+    [navigate, loc],
+  );
+  return nav;
+}