feat(navigation): implement contextual back navigation for Neuron's p…

…age (#6345)

# Motivation

The Neuron's page has two potential entry points:  
- The Staking page, accessed by clicking on any row in the
`ProjectsTable`.
- The Portfolio page, accessed by clicking on any of the stake tokens
(#6342).

This PR follows up on #6343 by redirecting users from the Neuron's page
based on their entry method.

# Changes

- Uses the new store `neuronsPageOrigin` to determine the navigation
point when returning from the Neurons page.

# Tests

- Split the current test into a check button and a navigation check that
returns to the Staking page.
- Add a unit test to verify that navigation is correct when coming from
the Portfolio page.

# Todos

- [ ] Add entry to changelog (if necessary).
Not necessary

frontend/src/routes/(app)/(u)/(list)/neurons/+layout.svelte

@@ -3,10 +3,10 @@
   import Content from "$lib/components/layout/Content.svelte";
   import Layout from "$lib/components/layout/Layout.svelte";
   import LayoutList from "$lib/components/layout/LayoutList.svelte";
-  import { AppPath } from "$lib/constants/routes.constants";
+  import { neuronsPageOrigin } from "$lib/derived/routes.derived";
   import { i18n } from "$lib/stores/i18n";
 
-  const back = (): Promise<void> => goto(AppPath.Staking);
+  const back = (): Promise<void> => goto($neuronsPageOrigin);
 </script>
 
 <LayoutList title={$i18n.navigation.neurons}>

frontend/src/tests/routes/app/neurons/layout.spec.ts

@@ -1,6 +1,8 @@
 import { AppPath } from "$lib/constants/routes.constants";
 import { pageStore } from "$lib/derived/page.derived";
 import { layoutTitleStore } from "$lib/stores/layout.store";
+import { referrerPathStore } from "$lib/stores/routes.store";
+import { page } from "$mocks/$app/stores";
 import NeuronsLayout from "$routes/(app)/(u)/(list)/neurons/+layout.svelte";
 import { render } from "@testing-library/svelte";
 import { get } from "svelte/store";
@@ -22,9 +24,36 @@ describe("Neurons layout", () => {
   it("should have a back button", () => {
     const { getByTestId } = render(NeuronsLayout);
     const backButton = getByTestId("back");
+
     expect(backButton).toBeInTheDocument();
-    expect(get(pageStore).path).not.toBe(AppPath.Staking);
+  });
+
+  it("should navigate back to Staking page", () => {
+    page.mock({
+      routeId: AppPath.Neurons,
+    });
+
+    const { getByTestId } = render(NeuronsLayout);
+    const backButton = getByTestId("back");
+
+    expect(get(pageStore).path).toEqual(AppPath.Neurons);
     backButton.click();
+
     expect(get(pageStore).path).toBe(AppPath.Staking);
   });
+
+  it("should navigate back to Portfolio page if previous page was Portfolio page", async () => {
+    page.mock({
+      routeId: AppPath.Neurons,
+    });
+    referrerPathStore.pushPath(AppPath.Portfolio);
+
+    const { getByTestId } = render(NeuronsLayout);
+    const backButton = getByTestId("back");
+
+    expect(get(pageStore).path).toEqual(AppPath.Neurons);
+    backButton.click();
+
+    expect(get(pageStore).path).toBe(AppPath.Portfolio);
+  });
 });