feat: remember and restore previous route when exiting settings (#1046)

Improves user experience by allowing users to return to the previous
page after visiting the Settings section.

Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>

apps/client/src/App.tsx

@@ -30,10 +30,12 @@ import SharedPage from "@/pages/share/shared-page.tsx";
 import Shares from "@/pages/settings/shares/shares.tsx";
 import ShareLayout from "@/features/share/components/share-layout.tsx";
 import ShareRedirect from '@/pages/share/share-redirect.tsx';
+import { useTrackOrigin } from "@/hooks/use-track-origin";
 
 export default function App() {
   const { t } = useTranslation();
   useRedirectToCloudSelect();
+  useTrackOrigin();
 
   return (
     <>
@@ -59,7 +61,7 @@ export default function App() {
           <Route path={"/share/:shareId/p/:pageSlug"} element={<SharedPage />} />
           <Route path={"/share/p/:pageSlug"} element={<SharedPage />} />
         </Route>
-        
+
         <Route path={"/share/:shareId"} element={<ShareRedirect />} />
         <Route path={"/p/:pageSlug"} element={<PageRedirect />} />
 

apps/client/src/components/settings/atoms/settings-origin-atom.ts

@@ -0,0 +1,10 @@
+import { atom, WritableAtom } from "jotai";
+
+export const settingsOriginAtom: WritableAtom<string | null, [string | null], void> = atom(
+  null,
+  (get, set, newValue) => {
+    if (get(settingsOriginAtom) !== newValue) {
+      set(settingsOriginAtom, newValue);
+    }
+  }
+);

apps/client/src/components/settings/settings-sidebar.tsx

@@ -13,7 +13,7 @@ import {
   IconKey,
   IconWorld,
 } from "@tabler/icons-react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import classes from "./settings.module.css";
 import { useTranslation } from "react-i18next";
 import { isCloud } from "@/lib/config.ts";
@@ -32,6 +32,7 @@ import {
 import AppVersion from "@/components/settings/app-version.tsx";
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
+import { useSettingsNavigation } from "@/hooks/use-settings-navigation";
 
 interface DataItem {
   label: string;
@@ -105,7 +106,7 @@ export default function SettingsSidebar() {
   const { t } = useTranslation();
   const location = useLocation();
   const [active, setActive] = useState(location.pathname);
-  const navigate = useNavigate();
+  const { goBack } = useSettingsNavigation();
   const { isAdmin } = useUserRole();
   const [workspace] = useAtom(workspaceAtom);
   const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
@@ -210,7 +211,12 @@ export default function SettingsSidebar() {
     <div className={classes.navbar}>
       <Group className={classes.title} justify="flex-start">
         <ActionIcon
-          onClick={() => navigate(-1)}
+          onClick={() => {
+            goBack();
+            if (mobileSidebarOpened) {
+              toggleMobileSidebar();
+            }
+          }}
           variant="transparent"
           c="gray"
           aria-label="Back"

apps/client/src/hooks/use-settings-navigation.ts

@@ -0,0 +1,14 @@
+import { settingsOriginAtom } from "@/components/settings/atoms/settings-origin-atom";
+import { useAtomValue } from "jotai";
+import { useNavigate } from "react-router-dom";
+
+export function useSettingsNavigation() {
+  const navigate = useNavigate();
+  const origin = useAtomValue(settingsOriginAtom);
+
+  const goBack = () => {
+    navigate(origin ?? "/home", { replace: true });
+  };
+
+  return { goBack };
+}

apps/client/src/hooks/use-track-origin.ts

@@ -0,0 +1,16 @@
+import { settingsOriginAtom } from "@/components/settings/atoms/settings-origin-atom";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export function useTrackOrigin() {
+  const location = useLocation();
+  const setOrigin = useSetAtom(settingsOriginAtom);
+
+  useEffect(() => {
+    const isInSettings = location.pathname.startsWith("/settings");
+    if (!isInSettings) {
+      setOrigin(location.pathname);
+    }
+  }, [location.pathname, setOrigin]);
+}