feat(renderer): adopt data router navigation

ARCHITECTURE.md

@@ -36,7 +36,7 @@ The renderer is layered. **Runtime imports flow in one direction only** — a mo
         |
       routes                      screens
         |
-   App.tsx / index.tsx            composition root - may import any layer
+   App.tsx / router.tsx / index.tsx   composition root - may import any layer
 ```
 
 - `utils/` is split by concern: `api`, `auth`, `core`, `forges`, `notifications`, `system`, `ui`.
@@ -45,7 +45,8 @@ The renderer is layered. **Runtime imports flow in one direction only** — a mo
 - `stores/index.ts` is the public store facade for `hooks`, `components`, and `routes`. Lower layers (`utils`) import the specific store module instead (for example `stores/useFiltersStore`): the barrel re-exports every store and its dependencies, which would pull the account/auth/forge graph into leaf utilities and create cycles.
 - `utils` and `stores` are **peers** — they may reference each other. Neither may import `hooks`, `components`, or `routes`.
 - `components/` is grouped by feature (`notifications`, `filters`, `settings`, `login`, `avatars`, `layout`, `metrics`, `primitives`).
-- The composition root (`App.tsx`, `index.tsx`) is the only place allowed to wire every layer together.
+- The composition root (`App.tsx`, `router.tsx`, `index.tsx`) is the only place allowed to wire every layer together.
+- `router.tsx` owns the single route table and creates the hash data router. A root layout route renders the window chrome, global shortcuts, and sidebar around an `<Outlet />`; a nested protected layout route owns the login redirect for every authenticated screen. Destinations shared with the sidebar and shortcuts live in `nav.ts`.
 
 ## State ownership
 

package.json

@@ -139,7 +139,7 @@
     "react-devtools": "8.0.0",
     "react-dom": "19.3.1",
     "react-i18next": "17.1.9",
-    "react-router-dom": "7.18.5",
+    "react-router": "8.5.0",
     "rimraf": "6.1.3",
     "semver": "7.8.5",
     "tailwindcss": "4.3.3",

scripts/verifyPackagedDependencies.js

@@ -27,7 +27,7 @@ const FORBIDDEN_PACKAGES = [
   'react',
   'react-dom',
   'react-i18next',
-  'react-router-dom',
+  'react-router',
 ];
 const BUILD_ONLY_PACKAGES = [
   'electron',

src/renderer/App.test.tsx

@@ -0,0 +1,121 @@
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createMemoryRouter, RouterProvider } from 'react-router';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import { mockGitHubCloudAccount } from './__mocks__/account-mocks';
+import { mockSettings } from './__mocks__/state-mocks';
+
+import { useAccountsStore, useSettingsStore } from './stores';
+
+import type { Account } from './types';
+
+import { routes } from './router';
+
+// Route resolution is the subject of these tests, so use the real router
+// instead of the global `useNavigate` mock from vitest.setup.ts.
+vi.unmock('react-router');
+
+function renderAt(path: string, { accounts = [] }: { accounts?: Account[] } = {}) {
+  useAccountsStore.setState({ accounts });
+  useSettingsStore.setState(mockSettings);
+
+  const router = createMemoryRouter(routes, { initialEntries: [path] });
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false } },
+  });
+
+  const result = render(
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  );
+
+  return { ...result, router };
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('renderer/App routing', () => {
+  it('redirects an unauthenticated protected route to login and preserves the destination', async () => {
+    const { router } = renderAt('/settings');
+
+    expect(await screen.findByTestId('login-scroll-container')).toBeInTheDocument();
+    await waitFor(() => expect(router.state.location.pathname).toBe('/login'));
+    expect(router.state.location.state).toEqual({
+      from: expect.objectContaining({ pathname: '/settings' }),
+    });
+  });
+
+  it('returns to the requested destination after login', async () => {
+    const { router } = renderAt('/settings');
+    await screen.findByTestId('login-scroll-container');
+
+    act(() => {
+      useAccountsStore.setState({ accounts: [mockGitHubCloudAccount] });
+    });
+
+    await waitFor(() => expect(router.state.location.pathname).toBe('/settings'));
+    expect(await screen.findByTestId('settings')).toBeInTheDocument();
+  });
+
+  it('lands on the default route when login is opened directly', async () => {
+    const { router } = renderAt('/login');
+    await screen.findByTestId('login-scroll-container');
+
+    act(() => {
+      useAccountsStore.setState({ accounts: [mockGitHubCloudAccount] });
+    });
+
+    await waitFor(() => expect(router.state.location.pathname).toBe('/'));
+    expect(await screen.findByText('No new notifications')).toBeInTheDocument();
+  });
+
+  it('resolves an unknown route to the default screen', async () => {
+    const { router } = renderAt('/unknown', { accounts: [mockGitHubCloudAccount] });
+
+    await waitFor(() => expect(router.state.location.pathname).toBe('/'));
+    expect(await screen.findByText('No new notifications')).toBeInTheDocument();
+  });
+
+  it('marks the active sidebar destination with aria-current', async () => {
+    renderAt('/filters', { accounts: [mockGitHubCloudAccount] });
+
+    expect(await screen.findByTestId('filters')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Filters' })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('button', { name: 'Settings' })).not.toHaveAttribute('aria-current');
+  });
+
+  it('keeps back navigation working', async () => {
+    const { router } = renderAt('/', { accounts: [mockGitHubCloudAccount] });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Settings' }));
+    await waitFor(() => expect(router.state.location.pathname).toBe('/settings'));
+
+    await act(async () => {
+      await router.navigate(-1);
+    });
+
+    await waitFor(() => expect(router.state.location.pathname).toBe('/'));
+    expect(await screen.findByText('No new notifications')).toBeInTheDocument();
+  });
+
+  it('settles on the last route for rapid navigation', async () => {
+    const { router } = renderAt('/', { accounts: [mockGitHubCloudAccount] });
+
+    const settings = screen.getByRole('button', { name: 'Settings' });
+    const home = screen.getByRole('button', { name: 'Gitify' });
+
+    act(() => {
+      settings.click();
+      home.click();
+    });
+
+    await waitFor(() => expect(router.state.location.pathname).toBe('/'));
+    expect(screen.queryByTestId('settings')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Settings' })).not.toHaveFocus();
+  });
+});