From ec5a7289f6965bfd7f59374503d111306731789b Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Thu, 23 Jul 2026 23:34:35 +0200
Subject: [PATCH] Zastap useState(view) routingiem opartym o react-router-dom

Rdzen migracji - kazdy widok ma wlasny adres URL:
- render {view === '...'} zastapiony przez <Routes> z 31 trasami
- usuniete: type View, PROTECTED_VIEWS, proteza #login, stan view/mapCity/
  mapOfferType/selectedListingId/messageThreadTarget
- prop onNavigate (166 wystapien) zastapiony hookiem useNavigate w komponentach
- /oferta/:id czyta identyfikator z adresu (ListingDetailRoute)
- /mapa?miasto=&typ= czyta parametry z query stringa (MapSearchRoute)
- dane przejsciowe miedzy trasami (watek wiadomosci, oferta do negocjacji)
  przekazywane w location.state zamiast globalnego stanu
- ProtectedRoute na trasach konta, requireAdmin na /admin
- powrot do zamierzonego celu po zalogowaniu (location.state.from)
- Header i AccountSidebar: <button> -> <NavLink>, aktywnosc z adresu
- strona 404 dla nieznanych adresow
- CSS: selektory menu rozszerzone o warianty <a> (wyglad bez zmian)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx    | 744 +++++++++++++++++++++-------------------
 frontend/src/styles.css |  47 ++-
 2 files changed, 417 insertions(+), 374 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c71a078..39e39d3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,8 @@
 import { Fragment, type ChangeEvent as ReactChangeEvent, type ClipboardEvent as ReactClipboardEvent, type Dispatch, type DragEvent as ReactDragEvent, type FormEvent as ReactFormEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, type SetStateAction, type WheelEvent as ReactWheelEvent, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import './styles.css';
+import { Link, NavLink, Navigate, Outlet, Route, Routes, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { ROUTES, listingPath, mapPath, negotiationPath, adminTabPath, ADMIN_PATH_TO_TAB, type AdminTabKey } from './routes';
+import { ProtectedRoute } from './ProtectedRoute';
 import { apiFetch, useAuth } from './auth';
 import type { AuthUser, ContactPreference, PreferredLanguage } from './auth';
 import { useNotifications, toDisplayNotifications } from './notifications';
@@ -12,7 +15,8 @@ const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href;
 const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href;
 const SMS_VERIFICATION_CODE = '123456';
 
-type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'guideBuying' | 'creditCalculator' | 'map' | 'login' | 'account' | 'accountSearches' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
+// Podswietlenie aktywnej pozycji menu wyznacza NavLink na podstawie adresu.
+const navLinkClass = ({ isActive }: { isActive: boolean }) => (isActive ? 'active' : '');
 
 type MessageThreadListing = {
   listingId: number;
@@ -113,11 +117,6 @@ type LiveListingSummary = ApiListingSummary & {
 
 const LIVE_LISTINGS_REFRESH_MS = 15000;
 
-const PROTECTED_VIEWS = new Set<View>([
-  'add', 'admin', 'account', 'accountSearches', 'accountPriceAlerts', 'accountMeetings', 'accountListings', 'accountSettings',
-  'accountSecurity', 'accountProfileEdit', 'accountPublicProfile', 'accountHelpContact', 'notifications', 'favorites', 'messages', 'comparison',
-]);
-
 type NotificationCategory = 'listing' | 'messages' | 'system';
 
 type UserNotification = {
@@ -703,28 +702,28 @@ const insightCards = [
     title: 'AI wycena mieszkania',
     text: 'Sprawdź ile warte jest Twoje mieszkanie w 2 minuty',
     action: 'Wycena za darmo',
-    view: 'valuation' as const,
+    path: ROUTES.valuation,
   },
   {
     icon: 'trend',
     title: 'Historia cen',
     text: 'Sprawdź jak zmieniały się ceny w okolicy',
     action: 'Zobacz wykresy',
-    view: 'priceHistory' as const,
+    path: ROUTES.priceHistory,
   },
   {
     icon: 'house',
     title: 'Ranking dzielnic',
     text: 'Porównaj dzielnice pod kątem życia i inwestycji',
     action: 'Zobacz ranking',
-    view: 'districtRanking' as const,
+    path: ROUTES.districtRanking,
   },
   {
     icon: 'coin',
     title: 'Ile możesz utargować?',
     text: 'AI podpowie realistyczną cenę transakcyjną',
     action: 'Sprawdź teraz',
-    view: 'negotiation' as const,
+    path: ROUTES.negotiation,
   },
 ];
 
@@ -2618,12 +2617,8 @@ function preferredLanguageLabel(language: PreferredLanguage | null | undefined):
 
 function App() {
   const { user, logout } = useAuth();
-  const [view, setView] = useState<View>(() => (window.location.hash === '#login' ? 'login' : 'home'));
-  const [mapCity, setMapCity] = useState('');
-  const [mapOfferType, setMapOfferType] = useState<ApiOfferType>('SALE');
-  const [selectedNegotiationOffer, setSelectedNegotiationOffer] = useState<BuyOffer | null>(buyListings[0] ?? null);
-  const [selectedListingId, setSelectedListingId] = useState<number | null>(null);
-  const [messageThreadTarget, setMessageThreadTarget] = useState<MessageThreadTarget | null>(null);
+  const navigate = useNavigate();
+  const location = useLocation();
   const [favoriteListingsState, setFavoriteListingsState] = useState<FavoriteListing[]>(favoriteListings);
   const [favoritesPreferredTab, setFavoritesPreferredTab] = useState<FavoriteTab>('buy');
   const [listingPriceAlertSubscriptionsState, setListingPriceAlertSubscriptionsState] = useState<ListingPriceAlertSubscription[]>([]);
@@ -2653,41 +2648,17 @@ function App() {
   const notificationsCenter = useNotifications();
   const [savedSearchesState, setSavedSearchesState] = useState<SavedSearchRecord[]>([]);
 
-  const clearLoginHash = () => {
-    if (window.location.hash === '#login') {
-      window.history.replaceState(null, '', `${window.location.pathname}${window.location.search}`);
-    }
-  };
-
-  // Nawigacja z bramka autoryzacji: widoki chronione wymagaja zalogowania,
-  // panel admina wymaga roli ADMIN.
-  const navigate = (nextView: View) => {
-    let target = nextView;
-    if (target === 'admin' && user?.role !== 'ADMIN') {
-      target = user ? 'account' : 'login';
-    } else if (PROTECTED_VIEWS.has(target) && !user) {
-      target = 'login';
-    }
-
-    setView(target);
-    if (target === 'login') {
-      window.location.hash = 'login';
-      return;
-    }
-    clearLoginHash();
-  };
-
-  // Po udanym logowaniu kierujemy admina do panelu, uzytkownika do konta
-  // (pomijamy bramke navigate, bo stan user moze byc jeszcze swiezo ustawiany).
+  // Po udanym logowaniu wracamy tam, gdzie uzytkownik zmierzal (ProtectedRoute zapisuje cel
+  // w location.state.from). Gdy wszedl na logowanie wprost - admin do panelu, uzytkownik do konta.
   const handleAuthenticated = (loggedUser: AuthUser) => {
-    setView(loggedUser.role === 'ADMIN' ? 'admin' : 'account');
-    clearLoginHash();
+    const from = (location.state as { from?: string } | null)?.from;
+    const fallback = loggedUser.role === 'ADMIN' ? ROUTES.admin : ROUTES.account;
+    navigate(from && from !== ROUTES.login ? from : fallback, { replace: true });
   };
 
   const handleLogout = () => {
     logout();
-    setView('home');
-    clearLoginHash();
+    navigate(ROUTES.home);
   };
 
   // Z kalkulatora zdolności: ustaw maksymalną cenę ofert na obliczony budżet i przejdź do wyszukiwarki.
@@ -2698,20 +2669,9 @@ function App() {
       filters.setPriceMin('');
       filters.setPriceMax(String(Math.round(maxPrice)));
     }
-    navigate('buy');
+    navigate(ROUTES.buy);
   };
 
-  useEffect(() => {
-    const onHashChange = () => {
-      if (window.location.hash === '#login') {
-        setView('login');
-      }
-    };
-
-    window.addEventListener('hashchange', onHashChange);
-    return () => window.removeEventListener('hashchange', onHashChange);
-  }, []);
-
   useEffect(() => {
     if (!user) {
       setSavedSearchesState([]);
@@ -2832,10 +2792,10 @@ function App() {
   }, [user]);
 
   useEffect(() => {
-    if (view === 'favorites') {
+    if (location.pathname === ROUTES.favorites) {
       setUnreadFavoriteIds(new Set());
     }
-  }, [view]);
+  }, [location.pathname]);
 
   useEffect(() => {
     const preferred = user?.preferredLanguage ?? 'PL';
@@ -3033,25 +2993,25 @@ function App() {
         translationTimerRef.current = null;
       }
     };
-  }, [user?.preferredLanguage, view]);
+  }, [user?.preferredLanguage, location.pathname]);
 
+  // Miasto i typ oferty trafiaja do query stringa - wynik na mapie da sie udostepnic linkiem.
   const openMap = (name: string, source: 'buy' | 'rent' = 'buy') => {
-    setMapCity(name);
-    setMapOfferType(source === 'rent' ? 'RENT' : 'SALE');
-    navigate('map');
+    navigate(mapPath(name, source === 'rent' ? 'RENT' : 'SALE'));
   };
+
+  // Wybrana oferta to dane przejsciowe miedzy trasami - przekazujemy je w location.state,
+  // dzieki czemu nie zostaja w globalnym stanie po opuszczeniu widoku.
   const openNegotiation = (offer: BuyOffer) => {
-    setSelectedNegotiationOffer(offer);
-    navigate('negotiation');
+    navigate(negotiationPath(), { state: { offer } });
   };
+
   const openListing = (id: number) => {
-    setSelectedListingId(id);
-    navigate('listingDetail');
+    navigate(listingPath(id));
   };
 
   const openMessagesWithTarget = (target: MessageThreadTarget) => {
-    setMessageThreadTarget(target);
-    navigate('messages');
+    navigate(ROUTES.messages, { state: { threadTarget: target } });
   };
 
   // Klik w powiadomienie: oznacz jako przeczytane (znika z dzwonka, licznik -1) i przejdź do właściwego miejsca.
@@ -3059,7 +3019,7 @@ function App() {
     notificationsCenter.markRead(notification.id);
     const link = notification.link;
     if (!link) {
-      navigate('notifications');
+      navigate(ROUTES.notifications);
       return;
     }
     if (link.startsWith('listing:')) {
@@ -3070,35 +3030,35 @@ function App() {
       }
     }
     if (link.startsWith('messages')) {
-      navigate('messages');
+      navigate(ROUTES.messages);
       return;
     }
     if (link === 'priceAlerts') {
-      navigate('accountPriceAlerts');
+      navigate(ROUTES.accountPriceAlerts);
       return;
     }
     if (link === 'meetings') {
-      navigate('accountMeetings');
+      navigate(ROUTES.accountMeetings);
       return;
     }
     if (link === 'savedSearches') {
-      navigate('accountSearches');
+      navigate(ROUTES.accountSearches);
       return;
     }
     if (link === 'favorites') {
-      navigate('favorites');
+      navigate(ROUTES.favorites);
       return;
     }
     if (link === 'accountSecurity' || link === 'account' || link === 'accountListings') {
-      navigate(link as View);
+      navigate(ROUTES[link]);
       return;
     }
-    navigate('notifications');
+    navigate(ROUTES.notifications);
   };
 
   const toggleSavedSearch = (mode: SavedSearchMode) => {
     if (!user) {
-      navigate('login');
+      navigate(ROUTES.login);
       return;
     }
 
@@ -3121,7 +3081,7 @@ function App() {
 
   const openSavedSearch = (savedSearch: SavedSearchRecord) => {
     applySavedSearchToFilters(filters, savedSearch);
-    navigate(savedSearch.mode === 'rent' ? 'rent' : 'buy');
+    navigate(savedSearch.mode === 'rent' ? ROUTES.rent : ROUTES.buy);
   };
 
   const removeSavedSearch = (savedSearchId: string) => {
@@ -3406,107 +3366,177 @@ function App() {
   }, [user, monitoredListingIdList, monitoredListingIdsSignature, listingPriceAlertIdList, listingPriceAlertIdsSignature]);
 
   return (
-    <div className={`site-shell ${view === 'login' ? 'login-shell' : ''}`}>
-      <Header activeView={view} onNavigate={navigate} onLogout={handleLogout} hasUnreadFavorites={unreadFavoriteIds.size > 0} onOpenNotification={handleOpenNotification} />
+    <div className={`site-shell ${location.pathname === ROUTES.login ? 'login-shell' : ''}`}>
+      <Header onLogout={handleLogout} hasUnreadFavorites={unreadFavoriteIds.size > 0} onOpenNotification={handleOpenNotification} />
       <main>
-        {view === 'login' && <LoginPage onLogin={handleAuthenticated} />}
-        {view === 'admin' && <AdminPage onNavigate={navigate} />}
-        {view === 'account' && <AccountDashboardPage onNavigate={navigate} activeView={view} savedSearches={savedSearchesState} onOpenSavedSearch={openSavedSearch} />}
-        {view === 'accountSearches' && (
-          <AccountSavedSearchesPage
-            onNavigate={navigate}
-            activeView={view}
-            savedSearches={savedSearchesState}
-            onOpenSavedSearch={openSavedSearch}
-            onRemoveSavedSearch={removeSavedSearch}
+        <Routes>
+          {/* Trasy publiczne */}
+          <Route path={ROUTES.home} element={<HomePage filters={filters} onOpenMap={openMap} />} />
+          <Route path={ROUTES.login} element={<LoginPage onLogin={handleAuthenticated} />} />
+          <Route
+            path={ROUTES.buy}
+            element={(
+              <BuyPage
+                filters={filters}
+                onOpenMap={openMap}
+                onOpenNegotiation={openNegotiation}
+                onOpenListing={openListing}
+                isFavorite={isListingFavorite}
+                onToggleFavorite={toggleSummaryFavorite}
+                savedSearchActive={buySearchSaved}
+                onToggleSavedSearch={() => toggleSavedSearch('buy')}
+              />
+            )}
           />
-        )}
-        {view === 'accountPriceAlerts' && <AccountPriceAlertsPage onNavigate={navigate} activeView={view} user={user} onOpenListing={openListing} />}
-        {view === 'comparison' && <AccountComparisonPage onNavigate={navigate} activeView={view} onOpenListing={openListing} />}
-        {view === 'accountMeetings' && <AccountMeetingsPage onNavigate={navigate} activeView={view} />}
-        {view === 'accountListings' && <AccountListingsPage onNavigate={navigate} activeView={view} onOpenListing={openListing} />}
-        {view === 'accountSettings' && <AccountSettingsPage onNavigate={navigate} activeView={view} />}
-        {view === 'accountSecurity' && <AccountSecurityPage onNavigate={navigate} activeView={view} />}
-        {view === 'accountProfileEdit' && <AccountProfileEditPage onNavigate={navigate} activeView={view} />}
-        {view === 'accountPublicProfile' && <AccountPublicProfilePage onNavigate={navigate} activeView={view} />}
-        {view === 'accountHelpContact' && <AccountHelpContactPage onNavigate={navigate} activeView={view} user={user} />}
-        {view === 'notifications' && <NotificationsPage onOpenNotification={handleOpenNotification} />}
-        {view === 'messages' && (
-          <MessagesPage
-            onNavigate={navigate}
-            onOpenListing={openListing}
-            initialThreadTarget={messageThreadTarget}
-            onThreadTargetHandled={() => setMessageThreadTarget(null)}
+          <Route
+            path={ROUTES.rent}
+            element={(
+              <RentPage
+                filters={filters}
+                onOpenMap={openMap}
+                onOpenListing={openListing}
+                isFavorite={isListingFavorite}
+                onToggleFavorite={toggleSummaryFavorite}
+                savedSearchActive={rentSearchSaved}
+                onToggleSavedSearch={() => toggleSavedSearch('rent')}
+              />
+            )}
           />
-        )}
-        {view === 'favorites' && (
-          <FavoritesPage
-            onNavigate={navigate}
-            onOpenListing={openListing}
-            onStartChat={openMessagesWithTarget}
-            favoritesState={favoriteListingsState}
-            setFavoritesState={setFavoriteListingsState}
-            preferredTab={favoritesPreferredTab}
+          <Route
+            path={ROUTES.listingDetail}
+            element={(
+              <ListingDetailRoute
+                onStartChat={openMessagesWithTarget}
+                isFavorite={isListingFavorite}
+                onToggleFavorite={toggleListingFavorite}
+                isListingAlertEnabled={isListingPriceAlertEnabled}
+                onToggleListingAlert={toggleListingPriceAlert}
+              />
+            )}
           />
-        )}
-        {view === 'buy' && (
-          <BuyPage
-            filters={filters}
-            onOpenMap={openMap}
-            onOpenNegotiation={openNegotiation}
-            onOpenListing={openListing}
-            isFavorite={isListingFavorite}
-            onToggleFavorite={toggleSummaryFavorite}
-            savedSearchActive={buySearchSaved}
-            onToggleSavedSearch={() => toggleSavedSearch('buy')}
-          />
-        )}
-        {view === 'rent' && (
-          <RentPage
-            filters={filters}
-            onOpenMap={openMap}
-            onOpenListing={openListing}
-            isFavorite={isListingFavorite}
-            onToggleFavorite={toggleSummaryFavorite}
-            savedSearchActive={rentSearchSaved}
-            onToggleSavedSearch={() => toggleSavedSearch('rent')}
-          />
-        )}
-        {view === 'sell' && <SellPage onNavigate={navigate} />}
-        {view === 'valuation' && <ValuationPage onNavigate={navigate} />}
-        {view === 'creditCalculator' && <CreditCalculatorPage onNavigate={navigate} onSearchWithBudget={handleSearchWithBudget} />}
-        {view === 'priceHistory' && <PriceHistoryPage onNavigate={navigate} user={user} />}
-        {view === 'districtRanking' && <DistrictRankingPage onNavigate={navigate} />}
-        {view === 'negotiation' && (
-          <NegotiationPage
-            onNavigate={navigate}
-            offers={buyListings}
-            selectedOffer={selectedNegotiationOffer}
-            onSelectOffer={setSelectedNegotiationOffer}
-          />
-        )}
-        {view === 'add' && <AddListingPage onNavigate={navigate} />}
-        {view === 'listingDetail' && (
-          <ListingDetailPage
-            listingId={selectedListingId}
-            onNavigate={navigate}
-            onStartChat={openMessagesWithTarget}
-            isFavorite={isListingFavorite}
-            onToggleFavorite={toggleListingFavorite}
-            isListingAlertEnabled={isListingPriceAlertEnabled}
-            onToggleListingAlert={toggleListingPriceAlert}
-          />
-        )}
-        {view === 'services' && <ServicesPage />}
-        {view === 'guides' && <GuidesPage onNavigate={navigate} />}
-        {view === 'guideBuying' && <GuideBuyingPage onNavigate={navigate} />}
-        {view === 'map' && <MapSearchPage initialCity={mapCity} offerType={mapOfferType} onNavigate={navigate} />}
-        {view === 'home' && <HomePage onNavigate={navigate} filters={filters} onOpenMap={openMap} />}
+          <Route path={ROUTES.map} element={<MapSearchRoute />} />
+          <Route path={ROUTES.sell} element={<SellPage />} />
+          <Route path={ROUTES.valuation} element={<ValuationPage />} />
+          <Route path={ROUTES.creditCalculator} element={<CreditCalculatorPage onSearchWithBudget={handleSearchWithBudget} />} />
+          <Route path={ROUTES.priceHistory} element={<PriceHistoryPage user={user} />} />
+          <Route path={ROUTES.districtRanking} element={<DistrictRankingPage />} />
+          <Route path={ROUTES.negotiation} element={<NegotiationRoute />} />
+          <Route path={ROUTES.services} element={<ServicesPage />} />
+          <Route path={ROUTES.guides} element={<GuidesPage />} />
+          <Route path={ROUTES.guideBuying} element={<GuideBuyingPage />} />
+
+          {/* Trasy wymagajace zalogowania */}
+          <Route element={<ProtectedRoute />}>
+            <Route path={ROUTES.account} element={<AccountDashboardPage savedSearches={savedSearchesState} onOpenSavedSearch={openSavedSearch} />} />
+            <Route
+              path={ROUTES.accountSearches}
+              element={(
+                <AccountSavedSearchesPage
+                  savedSearches={savedSearchesState}
+                  onOpenSavedSearch={openSavedSearch}
+                  onRemoveSavedSearch={removeSavedSearch}
+                />
+              )}
+            />
+            <Route path={ROUTES.accountPriceAlerts} element={<AccountPriceAlertsPage user={user} onOpenListing={openListing} />} />
+            <Route path={ROUTES.comparison} element={<AccountComparisonPage onOpenListing={openListing} />} />
+            <Route path={ROUTES.accountMeetings} element={<AccountMeetingsPage />} />
+            <Route path={ROUTES.accountListings} element={<AccountListingsPage onOpenListing={openListing} />} />
+            <Route path={ROUTES.accountSettings} element={<AccountSettingsPage />} />
+            <Route path={ROUTES.accountSecurity} element={<AccountSecurityPage />} />
+            <Route path={ROUTES.accountProfileEdit} element={<AccountProfileEditPage />} />
+            <Route path={ROUTES.accountPublicProfile} element={<AccountPublicProfilePage />} />
+            <Route path={ROUTES.accountHelpContact} element={<AccountHelpContactPage user={user} />} />
+            <Route path={ROUTES.notifications} element={<NotificationsPage onOpenNotification={handleOpenNotification} />} />
+            <Route path={ROUTES.messages} element={<MessagesPage onOpenListing={openListing} />} />
+            <Route path={ROUTES.add} element={<AddListingPage />} />
+            <Route
+              path={ROUTES.favorites}
+              element={(
+                <FavoritesPage
+                  onOpenListing={openListing}
+                  onStartChat={openMessagesWithTarget}
+                  favoritesState={favoriteListingsState}
+                  setFavoritesState={setFavoriteListingsState}
+                  preferredTab={favoritesPreferredTab}
+                />
+              )}
+            />
+          </Route>
+
+          {/* Panel administratora - zakladki jako podsciezki /admin/* */}
+          <Route element={<ProtectedRoute requireAdmin />}>
+            <Route path={`${ROUTES.admin}/*`} element={<AdminPage />} />
+          </Route>
+
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
       </main>
     </div>
   );
 }
 
+// Szczegoly oferty: identyfikator pochodzi z adresu (/oferta/:id), nie ze stanu Reacta.
+// Dzieki temu link do oferty da sie wyslac, odswiezyc i otworzyc w nowej karcie.
+function ListingDetailRoute(props: {
+  onStartChat: (target: MessageThreadTarget) => void;
+  isFavorite: (listingId: number) => boolean;
+  onToggleFavorite: (listing: ApiListingDetail) => void;
+  isListingAlertEnabled: (listingId: number) => boolean;
+  onToggleListingAlert: (listing: ApiListingDetail) => void;
+}) {
+  const { id } = useParams<{ id: string }>();
+  const listingId = Number(id);
+
+  if (!Number.isFinite(listingId) || listingId <= 0) {
+    return <NotFoundPage />;
+  }
+
+  return <ListingDetailPage listingId={listingId} {...props} />;
+}
+
+// Mapa czyta miasto i typ oferty z query stringa (/mapa?miasto=Krakow&typ=wynajem).
+function MapSearchRoute() {
+  const [searchParams] = useSearchParams();
+  const city = searchParams.get('miasto') ?? '';
+  const offerType: ApiOfferType = searchParams.get('typ') === 'wynajem' ? 'RENT' : 'SALE';
+
+  return <MapSearchPage key={`${city}-${offerType}`} initialCity={city} offerType={offerType} />;
+}
+
+// Negocjacje: oferta wskazana z listy ofert przychodzi w location.state (dane przejsciowe),
+// wybor z rozwijanej listy to juz zwykly stan formularza.
+function NegotiationRoute() {
+  const location = useLocation();
+  const offerFromState = (location.state as { offer?: BuyOffer } | null)?.offer ?? null;
+  const [selectedOffer, setSelectedOffer] = useState<BuyOffer | null>(offerFromState ?? buyListings[0] ?? null);
+
+  useEffect(() => {
+    if (offerFromState) {
+      setSelectedOffer(offerFromState);
+    }
+  }, [offerFromState]);
+
+  return <NegotiationPage offers={buyListings} selectedOffer={selectedOffer} onSelectOffer={setSelectedOffer} />;
+}
+
+// Nieznany adres: czytelny komunikat zamiast pustego ekranu.
+function NotFoundPage() {
+  return (
+    <section className="not-found-page" aria-label="Nie znaleziono strony">
+      <div className="not-found-shell">
+        <h1>404</h1>
+        <h2>Nie znaleźliśmy tej strony</h2>
+        <p>Adres jest nieprawidłowy albo strona została przeniesiona.</p>
+        <div className="not-found-actions">
+          <Link className="not-found-primary" to={ROUTES.home}>Wróć na stronę główną</Link>
+          <Link className="not-found-secondary" to={ROUTES.buy}>Przeglądaj oferty</Link>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 type AdminListing = {
   id: number;
   title: string;
@@ -3815,7 +3845,8 @@ function AdminMessageModal({ user, onClose }: { user: AuthUser; onClose: () => v
   );
 }
 
-function AdminPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function AdminPage() {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const [tab, setTab] = useState<AdminTab>('dashboard');
   const [users, setUsers] = useState<AuthUser[]>([]);
@@ -4204,7 +4235,7 @@ function AdminPage({ onNavigate }: { onNavigate: (view: View) => void }) {
             <button type="button" onClick={loadData}>Odśwież status <Icon name="arrow" /></button>
           </div>
 
-          <button type="button" className="admin-back" onClick={() => onNavigate('home')}>
+          <button type="button" className="admin-back" onClick={() => navigate(ROUTES.home)}>
             <Icon name="arrow" /> Wróć do strony głównej
           </button>
         </aside>
@@ -4323,7 +4354,7 @@ function AdminPage({ onNavigate }: { onNavigate: (view: View) => void }) {
                   <h2>Szybkie akcje</h2>
                 </div>
                 <div className="admin-quick-actions-grid">
-                  <button type="button" onClick={() => onNavigate('add')}><Icon name="document" /> Dodaj nowe ogłoszenie <Icon name="arrow" /></button>
+                  <button type="button" onClick={() => navigate(ROUTES.add)}><Icon name="document" /> Dodaj nowe ogłoszenie <Icon name="arrow" /></button>
                   <button type="button" onClick={() => setTab('categories')}><Icon name="list" /> Zarządzaj kategoriami <Icon name="arrow" /></button>
                   <button type="button" onClick={() => setTab('locations')}><Icon name="pin" /> Zarządzaj lokalizacjami <Icon name="arrow" /></button>
                   <button type="button" onClick={() => setTab('promotions')}><Icon name="spark" /> Zarządzaj banerami <Icon name="arrow" /></button>
@@ -5045,7 +5076,8 @@ function AdminPage({ onNavigate }: { onNavigate: (view: View) => void }) {
   );
 }
 
-function DistrictRankingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function DistrictRankingPage() {
+  const navigate = useNavigate();
   const [rankingMetric, setRankingMetric] = useState<DistrictRankingMetric>('overall');
   const [propertyType, setPropertyType] = useState<DistrictPropertyType>('flat');
   const [marketType, setMarketType] = useState<DistrictMarketType>('all');
@@ -5096,9 +5128,9 @@ function DistrictRankingPage({ onNavigate }: { onNavigate: (view: View) => void
     <section className="district-ranking-page" aria-label="Ranking dzielnic">
       <div className="district-ranking-shell">
         <div className="district-breadcrumb">
-          <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => onNavigate('districtRanking')}>Ranking dzielnic</button>
+          <button type="button" className="active" onClick={() => navigate(ROUTES.districtRanking)}>Ranking dzielnic</button>
         </div>
 
         <div className="district-ranking-title">
@@ -5210,16 +5242,15 @@ function DistrictRankingPage({ onNavigate }: { onNavigate: (view: View) => void
 }
 
 function NegotiationPage({
-  onNavigate,
   offers,
   selectedOffer,
   onSelectOffer,
 }: {
-  onNavigate: (view: View) => void;
   offers: BuyOffer[];
   selectedOffer: BuyOffer | null;
   onSelectOffer: (offer: BuyOffer) => void;
 }) {
+  const navigate = useNavigate();
   const fallbackOffer = offers[0] ?? null;
   const activeOffer = selectedOffer ?? fallbackOffer;
 
@@ -5228,9 +5259,9 @@ function NegotiationPage({
       <section className="negotiation-page" aria-label="Ile możesz utargować">
         <div className="negotiation-shell">
           <div className="negotiation-breadcrumb">
-            <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+            <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => onNavigate('negotiation')}>Ile możesz utargować?</button>
+            <button type="button" className="active" onClick={() => navigate(ROUTES.negotiation)}>Ile możesz utargować?</button>
           </div>
 
           <div className="negotiation-title">
@@ -5265,9 +5296,9 @@ function NegotiationPage({
     <section className="negotiation-page" aria-label="Ile możesz utargować">
       <div className="negotiation-shell">
         <div className="negotiation-breadcrumb">
-          <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => onNavigate('negotiation')}>Ile możesz utargować?</button>
+          <button type="button" className="active" onClick={() => navigate(ROUTES.negotiation)}>Ile możesz utargować?</button>
         </div>
 
         <div className="negotiation-title">
@@ -5370,7 +5401,7 @@ function NegotiationPage({
                 <p>Nasi eksperci pomogą Ci przejść przez proces zakupu i wynegocjować najlepszą cenę.</p>
               </div>
               <div className="negotiation-cta-action">
-                <button type="button" onClick={() => onNavigate('services')}>Skontaktuj się z ekspertem</button>
+                <button type="button" onClick={() => navigate(ROUTES.services)}>Skontaktuj się z ekspertem</button>
                 <small>Pierwsza konsultacja gratis</small>
               </div>
             </section>
@@ -5424,23 +5455,13 @@ function NegotiationPage({
   );
 }
 
-function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountSidebar() {
   const { user } = useAuth();
-  const isSettingsView = activeView === 'accountSettings' || activeView === 'accountProfileEdit' || activeView === 'accountPublicProfile';
-  const isSecurityView = activeView === 'accountSecurity';
-  const isHelpContactView = activeView === 'accountHelpContact';
-  const isDashboardView = activeView === 'account';
-  const isSearchesView = activeView === 'accountSearches';
-  const isFavoritesView = activeView === 'favorites';
-  const isPriceAlertsView = activeView === 'accountPriceAlerts';
-  const isMeetingsView = activeView === 'accountMeetings';
-  const isListingsView = activeView === 'accountListings';
-  const isPriceHistoryView = activeView === 'priceHistory';
-  const isNegotiationView = activeView === 'negotiation';
-  const isValuationView = activeView === 'valuation';
-  const isCreditCalculatorView = activeView === 'creditCalculator';
-  const isDistrictRankingView = activeView === 'districtRanking';
-  const isComparisonView = activeView === 'comparison';
+  const location = useLocation();
+  // Ustawienia obejmuja takze podstrony profilu - podswietlamy je wspolna pozycja menu.
+  const isSettingsSection = location.pathname === ROUTES.accountSettings
+    || location.pathname === ROUTES.accountProfileEdit
+    || location.pathname === ROUTES.accountPublicProfile;
   const [messagesUnreadCount, setMessagesUnreadCount] = useState(0);
   const allListingsCount = (() => {
     if (typeof window === 'undefined') {
@@ -5515,35 +5536,35 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
 
       <div className="account-menu">
         <h3>Moje aktywności</h3>
-        <button className={isDashboardView ? 'active' : ''} onClick={() => onNavigate('account')}><Icon name="house" /> Panel główny</button>
-        <button className={isSearchesView ? 'active' : ''} onClick={() => onNavigate('accountSearches')}><Icon name="search" /> Zapisane wyszukiwania <span>{savedSearchCount}</span></button>
-        <button className={isFavoritesView ? 'active' : ''} onClick={() => onNavigate('favorites')}><Icon name="heart" /> Ulubione ogłoszenia <span>{favoritesCount}</span></button>
-        <button className={isPriceAlertsView ? 'active' : ''} onClick={() => onNavigate('accountPriceAlerts')}><Icon name="bell" /> Alerty cenowe <span>{priceAlertsCount}</span></button>
-        <button className={isComparisonView ? 'active' : ''} onClick={() => onNavigate('comparison')}><Icon name="shuffle" /> Porównanie mieszkań</button>
+        <NavLink to={ROUTES.account} className={navLinkClass}><Icon name="house" /> Panel główny</NavLink>
+        <NavLink to={ROUTES.accountSearches} className={navLinkClass}><Icon name="search" /> Zapisane wyszukiwania <span>{savedSearchCount}</span></NavLink>
+        <NavLink to={ROUTES.favorites} className={navLinkClass}><Icon name="heart" /> Ulubione ogłoszenia <span>{favoritesCount}</span></NavLink>
+        <NavLink to={ROUTES.accountPriceAlerts} className={navLinkClass}><Icon name="bell" /> Alerty cenowe <span>{priceAlertsCount}</span></NavLink>
+        <NavLink to={ROUTES.comparison} className={navLinkClass}><Icon name="shuffle" /> Porównanie mieszkań</NavLink>
       </div>
 
       <div className="account-menu">
         <h3>Moje transakcje</h3>
-        <button className={activeView === 'messages' ? 'active' : ''} onClick={() => onNavigate('messages')}><Icon name="message" /> Zapytania i wiadomości <span>{messagesUnreadCount}</span></button>
-        <button className={isMeetingsView ? 'active' : ''} onClick={() => onNavigate('accountMeetings')}><Icon name="calendar" /> Umówione spotkania</button>
-        <button className={isListingsView ? 'active' : ''} onClick={() => onNavigate('accountListings')}><Icon name="document" /> Moje oferty <span className="tag">{allListingsCount}</span></button>
+        <NavLink to={ROUTES.messages} className={navLinkClass}><Icon name="message" /> Zapytania i wiadomości <span>{messagesUnreadCount}</span></NavLink>
+        <NavLink to={ROUTES.accountMeetings} className={navLinkClass}><Icon name="calendar" /> Umówione spotkania</NavLink>
+        <NavLink to={ROUTES.accountListings} className={navLinkClass}><Icon name="document" /> Moje oferty <span className="tag">{allListingsCount}</span></NavLink>
       </div>
 
       <div className="account-menu">
         <h3>Moje narzędzia</h3>
-        <button className={isCreditCalculatorView ? 'active' : ''} onClick={() => onNavigate('creditCalculator')}><Icon name="money" /> Zdolność kredytowa</button>
-        <button className={isPriceHistoryView ? 'active' : ''} onClick={() => onNavigate('priceHistory')}><Icon name="chart" /> Historia cen</button>
-        <button className={isNegotiationView ? 'active' : ''} onClick={() => onNavigate('negotiation')}><Icon name="coin" /> Ile możesz utargować?</button>
-        <button className={isValuationView ? 'active' : ''} onClick={() => onNavigate('valuation')}><Icon name="calculator" /> Wyceny mieszkań</button>
-        <button className={isDistrictRankingView ? 'active' : ''} onClick={() => onNavigate('districtRanking')}><Icon name="house" /> Ranking dzielnic</button>
+        <NavLink to={ROUTES.creditCalculator} className={navLinkClass}><Icon name="money" /> Zdolność kredytowa</NavLink>
+        <NavLink to={ROUTES.priceHistory} className={navLinkClass}><Icon name="chart" /> Historia cen</NavLink>
+        <NavLink to={ROUTES.negotiation} className={navLinkClass}><Icon name="coin" /> Ile możesz utargować?</NavLink>
+        <NavLink to={ROUTES.valuation} className={navLinkClass}><Icon name="calculator" /> Wyceny mieszkań</NavLink>
+        <NavLink to={ROUTES.districtRanking} className={navLinkClass}><Icon name="house" /> Ranking dzielnic</NavLink>
       </div>
 
       <div className="account-menu">
         <h3>Ustawienia</h3>
-        <button className={isSettingsView ? 'active' : ''} onClick={() => onNavigate('accountSettings')}><Icon name="gear" /> Dane i ustawienia</button>
-        <button className={activeView === 'notifications' ? 'active' : ''} onClick={() => onNavigate('notifications')}><Icon name="bell" /> Powiadomienia</button>
-        <button className={isSecurityView ? 'active' : ''} onClick={() => onNavigate('accountSecurity')}><Icon name="shield" /> Bezpieczeństwo</button>
-        <button className={isHelpContactView ? 'active' : ''} onClick={() => onNavigate('accountHelpContact')}><Icon name="phone" /> Pomoc i kontakt</button>
+        <NavLink to={ROUTES.accountSettings} className={isSettingsSection ? 'active' : ''}><Icon name="gear" /> Dane i ustawienia</NavLink>
+        <NavLink to={ROUTES.notifications} className={navLinkClass}><Icon name="bell" /> Powiadomienia</NavLink>
+        <NavLink to={ROUTES.accountSecurity} className={navLinkClass}><Icon name="shield" /> Bezpieczeństwo</NavLink>
+        <NavLink to={ROUTES.accountHelpContact} className={navLinkClass}><Icon name="phone" /> Pomoc i kontakt</NavLink>
       </div>
 
       <div className="account-premium-card">
@@ -5558,16 +5579,13 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
 }
 
 function AccountDashboardPage({
-  onNavigate,
-  activeView,
   savedSearches,
   onOpenSavedSearch,
 }: {
-  onNavigate: (view: View) => void;
-  activeView: View;
   savedSearches: SavedSearchRecord[];
   onOpenSavedSearch: (savedSearch: SavedSearchRecord) => void;
 }) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   type DashboardWidgetId = 'recent' | 'alerts' | 'searches' | 'tools';
   type DashboardWidgetConfig = {
@@ -5594,12 +5612,12 @@ function AccountDashboardPage({
   const [activeAlerts, setActiveAlerts] = useState<boolean[]>(() => alerts.map(() => true));
 
   const tools = [
-    { icon: 'money', title: 'Zdolność kredytowa', text: 'Sprawdź, na jaki kredyt Cię stać i jaka będzie rata', view: 'creditCalculator' as View },
-    { icon: 'chart', title: 'Historia cen', text: 'Sprawdź jak zmieniały się ceny mieszkań w czasie', view: 'priceHistory' as View },
-    { icon: 'coin', title: 'Ile możesz utargować?', text: 'AI podpowie realistyczną cenę transakcyjną', view: 'negotiation' as View },
-    { icon: 'calculator', title: 'Wycena mieszkania', text: 'Darmowa wycena Twojego mieszkania online', view: 'valuation' as View },
-    { icon: 'house', title: 'Ranking dzielnic', text: 'Zobacz najlepsze dzielnice w Polsce', view: 'districtRanking' as View },
-    { icon: 'shuffle', title: 'Porównanie mieszkań', text: 'Porównuj oferty i wybieraj najlepsze', view: 'comparison' as View },
+    { icon: 'money', title: 'Zdolność kredytowa', text: 'Sprawdź, na jaki kredyt Cię stać i jaka będzie rata', path: ROUTES.creditCalculator },
+    { icon: 'chart', title: 'Historia cen', text: 'Sprawdź jak zmieniały się ceny mieszkań w czasie', path: ROUTES.priceHistory },
+    { icon: 'coin', title: 'Ile możesz utargować?', text: 'AI podpowie realistyczną cenę transakcyjną', path: ROUTES.negotiation },
+    { icon: 'calculator', title: 'Wycena mieszkania', text: 'Darmowa wycena Twojego mieszkania online', path: ROUTES.valuation },
+    { icon: 'house', title: 'Ranking dzielnic', text: 'Zobacz najlepsze dzielnice w Polsce', path: ROUTES.districtRanking },
+    { icon: 'shuffle', title: 'Porównanie mieszkań', text: 'Porównuj oferty i wybieraj najlepsze', path: ROUTES.comparison },
   ];
 
   const recentListings = [
@@ -5794,7 +5812,7 @@ function AccountDashboardPage({
       <section className="account-panel" key="searches">
         <div className="account-panel-head">
           <h2>Moje wyszukiwania</h2>
-          <button type="button" onClick={() => onNavigate('accountSearches')}>Zobacz wszystkie <Icon name="arrow" /></button>
+          <button type="button" onClick={() => navigate(ROUTES.accountSearches)}>Zobacz wszystkie <Icon name="arrow" /></button>
         </div>
         <div className="account-searches">
           {savedSearches.slice(0, 4).map((row) => (
@@ -5821,7 +5839,7 @@ function AccountDashboardPage({
             </article>
           ))}
           {savedSearches.length === 0 && <p className="account-searches-empty">Nie masz jeszcze zapisanych wyszukiwań. Wejdź w Kup lub Wynajem i kliknij dzwonek „Zapisz wyszukiwanie”.</p>}
-          <button type="button" className="account-new-search" onClick={() => onNavigate('buy')}>Utwórz nowe wyszukiwanie <Icon name="plus" /></button>
+          <button type="button" className="account-new-search" onClick={() => navigate(ROUTES.buy)}>Utwórz nowe wyszukiwanie <Icon name="plus" /></button>
         </div>
       </section>
     ),
@@ -5836,11 +5854,11 @@ function AccountDashboardPage({
               key={tool.title}
               role="button"
               tabIndex={0}
-              onClick={() => onNavigate(tool.view)}
+              onClick={() => navigate(tool.path)}
               onKeyDown={(event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                   event.preventDefault();
-                  onNavigate(tool.view);
+                  navigate(tool.path);
                 }
               }}
             >
@@ -5860,7 +5878,7 @@ function AccountDashboardPage({
   return (
     <section className="account-page" aria-label="Panel konta użytkownika">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main">
           <div className="account-heading">
@@ -6019,18 +6037,15 @@ function AccountDashboardPage({
 }
 
 function AccountSavedSearchesPage({
-  onNavigate,
-  activeView,
   savedSearches,
   onOpenSavedSearch,
   onRemoveSavedSearch,
 }: {
-  onNavigate: (view: View) => void;
-  activeView: View;
   savedSearches: SavedSearchRecord[];
   onOpenSavedSearch: (savedSearch: SavedSearchRecord) => void;
   onRemoveSavedSearch: (savedSearchId: string) => void;
 }) {
+  const navigate = useNavigate();
   const [query, setQuery] = useState('');
   const [modeFilter, setModeFilter] = useState<'all' | SavedSearchMode>('all');
   const [sortMode, setSortMode] = useState<'newest' | 'oldest' | 'city'>('newest');
@@ -6066,7 +6081,7 @@ function AccountSavedSearchesPage({
   return (
     <section className="account-page account-searches-page" aria-label="Zapisane wyszukiwania">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main">
           <section className="account-panel account-searches-panel">
@@ -6075,7 +6090,7 @@ function AccountSavedSearchesPage({
                 <h1>Zapisane wyszukiwania</h1>
                 <p>Wróć do swoich filtrów jednym kliknięciem i przejdź od razu do odpowiedniej listy ofert.</p>
               </div>
-              <button type="button" onClick={() => onNavigate('buy')}>Dodaj nowe <Icon name="plus" /></button>
+              <button type="button" onClick={() => navigate(ROUTES.buy)}>Dodaj nowe <Icon name="plus" /></button>
             </div>
 
             <div className="account-searches-stats" aria-label="Statystyki zapisanych wyszukiwań">
@@ -6171,7 +6186,7 @@ function AccountSavedSearchesPage({
               <div className="account-searches-empty-state">
                 <strong>Nie masz jeszcze zapisanych wyszukiwań</strong>
                 <p>Ustaw filtry w Kup lub Wynajem i kliknij dzwonek „Zapisz wyszukiwanie”, a pojawią się tutaj.</p>
-                <button type="button" className="account-empty-add-button" onClick={() => onNavigate('buy')}>
+                <button type="button" className="account-empty-add-button" onClick={() => navigate(ROUTES.buy)}>
                   <Icon name="search" /> Przejdź do wyszukiwania
                 </button>
               </div>
@@ -6202,12 +6217,8 @@ function AccountSavedSearchesPage({
 }
 
 function AccountHelpContactPage({
-  onNavigate,
-  activeView,
   user,
 }: {
-  onNavigate: (view: View) => void;
-  activeView: View;
   user: AuthUser | null;
 }) {
   type HelpContactFormValues = {
@@ -6425,7 +6436,7 @@ function AccountHelpContactPage({
   return (
     <section className="account-page account-help-contact-page" aria-label="Pomoc i kontakt">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main">
           <section className="help-contact-panel">
@@ -6554,16 +6565,13 @@ function AccountHelpContactPage({
 }
 
 function AccountPriceAlertsPage({
-  onNavigate,
-  activeView,
   user,
   onOpenListing,
 }: {
-  onNavigate: (view: View) => void;
-  activeView: View;
   user: AuthUser | null;
   onOpenListing: (id: number) => void;
 }) {
+  const navigate = useNavigate();
   const [cityAlerts, setCityAlerts] = useState<CityPriceAlertSubscription[]>([]);
   const [priceEvents, setPriceEvents] = useState<FavoritePriceAlertEvent[]>([]);
   const [cityPriceEvents, setCityPriceEvents] = useState<CityPriceAlertEvent[]>([]);
@@ -6662,7 +6670,7 @@ function AccountPriceAlertsPage({
   return (
     <section className="account-settings-page price-alerts-page" aria-label="Powiadomienia i alerty cenowe">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main">
           <div className="price-alerts-heading">
@@ -6758,7 +6766,7 @@ function AccountPriceAlertsPage({
                     onOpenListing(activeListingEvent.listingId);
                     return;
                   }
-                  onNavigate('priceHistory');
+                  navigate(ROUTES.priceHistory);
                 }}
                 disabled={!latestEventType}
               >
@@ -6813,7 +6821,7 @@ function AccountPriceAlertsPage({
                   </div>
                 )}
               </div>
-              <button type="button" className="price-alerts-link" onClick={() => onNavigate('priceHistory')}>Dodaj kolejne lokalizacje</button>
+              <button type="button" className="price-alerts-link" onClick={() => navigate(ROUTES.priceHistory)}>Dodaj kolejne lokalizacje</button>
             </article>
 
             <article className="price-alerts-card price-alerts-active-list">
@@ -6830,7 +6838,7 @@ function AccountPriceAlertsPage({
                     <span>Usuń</span>
                   </button>
                 )) : (
-                  <button type="button" onClick={() => onNavigate('priceHistory')}>
+                  <button type="button" onClick={() => navigate(ROUTES.priceHistory)}>
                     <div>
                       <strong>Brak aktywnych alertów</strong>
                       <small>Przejdź do historii cen i dodaj pierwszą lokalizację.</small>
@@ -6839,7 +6847,7 @@ function AccountPriceAlertsPage({
                   </button>
                 )}
               </div>
-              <button type="button" className="price-alerts-manage" onClick={() => onNavigate('priceHistory')}>Zarządzaj alertami</button>
+              <button type="button" className="price-alerts-manage" onClick={() => navigate(ROUTES.priceHistory)}>Zarządzaj alertami</button>
             </article>
           </section>
         </div>
@@ -6848,7 +6856,8 @@ function AccountPriceAlertsPage({
   );
 }
 
-function AccountComparisonPage({ onNavigate, activeView, onOpenListing }: { onNavigate: (view: View) => void; activeView: View; onOpenListing: (id: number) => void }) {
+function AccountComparisonPage({ onOpenListing }: { onOpenListing: (id: number) => void }) {
+  const navigate = useNavigate();
   type ComparisonPropertyFilter = 'ALL' | ApiPropertyType | 'LAND' | 'COMMERCIAL' | 'ROOM';
 
   const comparisonPropertyOptions: Array<{ value: ComparisonPropertyFilter; label: string }> = [
@@ -7259,13 +7268,13 @@ function AccountComparisonPage({ onNavigate, activeView, onOpenListing }: { onNa
   return (
     <section className="comparison-page" aria-label="Porównanie mieszkań">
       <div className="comparison-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="comparison-main">
           <div className="comparison-breadcrumb">
-            <button type="button" onClick={() => onNavigate('home')}>Strona główna</button>
+            <button type="button" onClick={() => navigate(ROUTES.home)}>Strona główna</button>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => onNavigate('comparison')}>Porównywarka mieszkań</button>
+            <button type="button" className="active" onClick={() => navigate(ROUTES.comparison)}>Porównywarka mieszkań</button>
           </div>
 
           <div className="comparison-head">
@@ -7449,7 +7458,7 @@ function AccountComparisonPage({ onNavigate, activeView, onOpenListing }: { onNa
   );
 }
 
-function AccountMeetingsPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountMeetingsPage() {
   const { notify } = useNotifications();
   type MeetingType = 'buy' | 'rent' | 'own';
   type MeetingStatus = 'planned' | 'completed' | 'cancelled';
@@ -7846,7 +7855,7 @@ function AccountMeetingsPage({ onNavigate, activeView }: { onNavigate: (view: Vi
   return (
     <section className="account-settings-page meetings-page" aria-label="Umówione spotkania">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main meetings-main">
           <header className="settings-head meetings-head">
@@ -8055,7 +8064,8 @@ function MyApiListingsBand({ onOpenListing }: { onOpenListing: (id: number) => v
   );
 }
 
-function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavigate: (view: View) => void; activeView: View; onOpenListing: (id: number) => void }) {
+function AccountListingsPage({ onOpenListing }: { onOpenListing: (id: number) => void }) {
+  const navigate = useNavigate();
   type ListingCategory = 'sale' | 'rent';
   type ListingStatus = 'active' | 'paused' | 'archived';
   type ListingItem = {
@@ -8538,7 +8548,7 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
     };
 
     window.localStorage.setItem(EDIT_LISTING_DRAFT_STORAGE_KEY, JSON.stringify(draft));
-    onNavigate('add');
+    navigate(ROUTES.add);
   };
 
   const togglePause = (id: string) => {
@@ -8657,7 +8667,7 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
   return (
     <section className="account-settings-page account-listings-page" aria-label="Moje oferty">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main listings-main">
           <header className="settings-head listings-head">
@@ -8814,7 +8824,8 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
   );
 }
 
-function AccountSettingsPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountSettingsPage() {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const [accountSwitches, setAccountSwitches] = useState([true, true, false, false]);
   // Indeks 4 ("Oferty promowane i newsletter") to zgoda marketingowa e-mail zapisywana na serwerze.
@@ -8868,7 +8879,7 @@ function AccountSettingsPage({ onNavigate, activeView }: { onNavigate: (view: Vi
   return (
     <section className="account-settings-page" aria-label="Dane i ustawienia">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main">
           <header className="settings-head">
@@ -8887,7 +8898,7 @@ function AccountSettingsPage({ onNavigate, activeView }: { onNavigate: (view: Vi
               <strong>{getDisplayName(user)}</strong>
               <small>Konto Premium</small>
             </div>
-            <button type="button" onClick={() => onNavigate('accountProfileEdit')}>Edytuj</button>
+            <button type="button" onClick={() => navigate(ROUTES.accountProfileEdit)}>Edytuj</button>
           </div>
           <div className="settings-list">
             <article><span><Icon name="mail" /></span><em>Adres e-mail</em><strong>{user?.email}</strong><Icon name="chevron" /></article>
@@ -8979,7 +8990,7 @@ function AccountSettingsPage({ onNavigate, activeView }: { onNavigate: (view: Vi
   );
 }
 
-function AccountSecurityPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountSecurityPage() {
   const { user } = useAuth();
   const recentSecurityActivity = [
     {
@@ -9086,7 +9097,7 @@ function AccountSecurityPage({ onNavigate, activeView }: { onNavigate: (view: Vi
   return (
     <section className="account-settings-page account-security-page" aria-label="Bezpieczeństwo">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main security-main">
           <header className="settings-head security-head">
@@ -9166,7 +9177,8 @@ function AccountSecurityPage({ onNavigate, activeView }: { onNavigate: (view: Vi
   );
 }
 
-function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountProfileEditPage() {
+  const navigate = useNavigate();
   const { user, updateProfile } = useAuth();
   const { notify } = useNotifications();
   type UploadTarget = 'avatar' | 'cover';
@@ -9630,7 +9642,7 @@ function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view:
     <>
     <section className="account-settings-page" aria-label="Edytuj profil">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main">
           <div className="settings-breadcrumb">Dane i ustawienia <Icon name="chevron" /> <strong>Edytuj profil</strong></div>
@@ -9824,7 +9836,7 @@ function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view:
                   </article>
                   {coverPhotoName && (
                     <div className="cover-photo-actions-row">
-                      <button type="button" className="cover-preview-button" onClick={() => onNavigate('accountPublicProfile')}>Podgląd profilu</button>
+                      <button type="button" className="cover-preview-button" onClick={() => navigate(ROUTES.accountPublicProfile)}>Podgląd profilu</button>
                       <button type="button" className="cover-remove-button" onClick={clearCoverPhoto}>Usuń zdjęcie</button>
                     </div>
                   )}
@@ -9878,7 +9890,7 @@ function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view:
                       {profileVisibility === 'publiczna' && 'Zobacz jak inni widzą Twój profil.'}
                       {profileVisibility === 'kontakty' && 'Profil widzą tylko zaakceptowane kontakty.'}
                     </strong>
-                    <button type="button" className="mini-tag profile-preview-cta" onClick={() => onNavigate('accountPublicProfile')}>
+                    <button type="button" className="mini-tag profile-preview-cta" onClick={() => navigate(ROUTES.accountPublicProfile)}>
                       Zobacz profil <Icon name="arrow" />
                     </button>
                   </article>
@@ -10081,7 +10093,8 @@ function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view:
   );
 }
 
-function AccountPublicProfilePage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountPublicProfilePage() {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const publicProfileCover = window.localStorage.getItem(accountStorageKey('CoverImage', user)) || heroImage;
   const publicReviews = [
@@ -10154,7 +10167,7 @@ function AccountPublicProfilePage({ onNavigate, activeView }: { onNavigate: (vie
   return (
     <section className="account-settings-page public-profile-page" aria-label="Jak inni widzą Twój profil">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main">
           <div className="settings-breadcrumb">Dane i ustawienia <Icon name="chevron" /> <strong>Jak inni widzą Twój profil</strong></div>
@@ -10163,7 +10176,7 @@ function AccountPublicProfilePage({ onNavigate, activeView }: { onNavigate: (vie
               <h1>Jak inni widzą Twój profil</h1>
               <p>Zobacz, jak Twój profil prezentuje się publicznie dla innych użytkowników Mieszko.</p>
             </div>
-            <button type="button" onClick={() => onNavigate('accountProfileEdit')}><Icon name="gear" /> Edytuj profil</button>
+            <button type="button" onClick={() => navigate(ROUTES.accountProfileEdit)}><Icon name="gear" /> Edytuj profil</button>
           </header>
 
           <section className="public-profile-cover-card">
@@ -10855,7 +10868,8 @@ function LoginPage({ onLogin }: { onLogin: (user: AuthUser) => void }) {
   );
 }
 
-function HomePage({ onNavigate, filters, onOpenMap }: { onNavigate: (view: View) => void; filters: FilterState; onOpenMap: (city: string, mode?: 'buy' | 'rent') => void }) {
+function HomePage({ filters, onOpenMap }: { filters: FilterState; onOpenMap: (city: string, mode?: 'buy' | 'rent') => void }) {
+  const navigate = useNavigate();
   const [favoriteListings, setFavoriteListings] = useState<Set<string>>(new Set());
 
   const toggleFavoriteListing = (location: string) => {
@@ -10926,14 +10940,14 @@ function HomePage({ onNavigate, filters, onOpenMap }: { onNavigate: (view: View)
 
       <section className="search-wrap" aria-label="Wyszukiwarka">
         <div className="search-tabs">
-          <button className="active" onClick={() => onNavigate('buy')}>
+          <button className="active" onClick={() => navigate(ROUTES.buy)}>
             Kup
           </button>
-          <button onClick={() => onNavigate('rent')}>Wynajem</button>
+          <button onClick={() => navigate(ROUTES.rent)}>Wynajem</button>
         </div>
 
         <div className="search-panel search-panel-mega">
-          <MegaSearch filters={filters} onOpenMap={onOpenMap} onSearch={() => onNavigate('buy')} />
+          <MegaSearch filters={filters} onOpenMap={onOpenMap} onSearch={() => navigate(ROUTES.buy)} />
         </div>
       </section>
 
@@ -10950,7 +10964,7 @@ function HomePage({ onNavigate, filters, onOpenMap }: { onNavigate: (view: View)
                     <h2>{card.title}</h2>
                     <p>{card.text}</p>
                   </div>
-                  <button type="button" onClick={() => onNavigate(card.view)}>{card.action}</button>
+                  <button type="button" onClick={() => navigate(card.path)}>{card.action}</button>
                 </article>
               ))}
             </div>
@@ -11253,7 +11267,8 @@ function RentPage({
   );
 }
 
-function AddListingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function AddListingPage() {
+  const navigate = useNavigate();
   const [currentStep, setCurrentStep] = useState(0);
   const [listingDetails, setListingDetails] = useState(INITIAL_LISTING_DETAILS);
   const [location, setLocation] = useState<ListingLocation>(INITIAL_LISTING_LOCATION);
@@ -12342,11 +12357,11 @@ function AddListingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
                         znajdziesz je w „Moich ogłoszeniach” ze statusem „Oczekuje”.
                       </p>
                       <div className="publish-success-actions">
-                        <button className="next-step-button" type="button" onClick={() => onNavigate('accountListings')}>
+                        <button className="next-step-button" type="button" onClick={() => navigate(ROUTES.accountListings)}>
                           Przejdź do moich ogłoszeń
                           <Icon name="arrow" />
                         </button>
-                        <button className="back-step-button" type="button" onClick={() => onNavigate('home')}>
+                        <button className="back-step-button" type="button" onClick={() => navigate(ROUTES.home)}>
                           Wróć do strony głównej
                         </button>
                       </div>
@@ -12683,7 +12698,8 @@ async function downloadBuyingChecklistPdf() {
   }
 }
 
-function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function GuideBuyingPage() {
+  const navigate = useNavigate();
   const scrollToId = (id: string) => {
     const target = document.getElementById(id);
     if (target) {
@@ -12697,7 +12713,7 @@ function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
         <img src={heroImage} alt="" />
         <div className="guide-hero-shade" />
         <div className="guides-container guide-hero-inner">
-          <button className="guide-back" onClick={() => onNavigate('guides')}>
+          <button className="guide-back" onClick={() => navigate(ROUTES.guides)}>
             <Icon name="arrow" />
             <span>Wróć do poradników</span>
           </button>
@@ -13132,7 +13148,7 @@ function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
               <h2>Gotowy, by znaleźć swoje mieszkanie?</h2>
               <p>Przeglądaj aktualne oferty dopasowane do Twoich potrzeb i budżetu.</p>
             </div>
-            <button onClick={() => onNavigate('buy')}>
+            <button onClick={() => navigate(ROUTES.buy)}>
               Zobacz oferty mieszkań
               <Icon name="arrow" />
             </button>
@@ -13143,19 +13159,19 @@ function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
           <section className="guide-aside-card">
             <h3><Icon name="calculator" /> Kalkulatory</h3>
             <div className="guide-aside-list">
-              <button onClick={() => onNavigate('creditCalculator')}>
+              <button onClick={() => navigate(ROUTES.creditCalculator)}>
                 <span><strong>Kalkulator zdolności kredytowej</strong><small>Sprawdź, na jaki kredyt Cię stać</small></span>
                 <Icon name="chevron" />
               </button>
-              <button onClick={() => onNavigate('valuation')}>
+              <button onClick={() => navigate(ROUTES.valuation)}>
                 <span><strong>Kalkulator wyceny mieszkania</strong><small>Oszacuj wartość nieruchomości</small></span>
                 <Icon name="chevron" />
               </button>
-              <button onClick={() => onNavigate('priceHistory')}>
+              <button onClick={() => navigate(ROUTES.priceHistory)}>
                 <span><strong>Historia cen</strong><small>Zobacz, jak zmieniały się ceny</small></span>
                 <Icon name="chevron" />
               </button>
-              <button onClick={() => onNavigate('districtRanking')}>
+              <button onClick={() => navigate(ROUTES.districtRanking)}>
                 <span><strong>Ranking dzielnic</strong><small>Porównaj lokalizacje</small></span>
                 <Icon name="chevron" />
               </button>
@@ -13190,7 +13206,8 @@ function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
   );
 }
 
-function GuidesPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function GuidesPage() {
+  const navigate = useNavigate();
   return (
     <section className="guides-page" aria-label="Poradniki">
       <section className="guides-hero">
@@ -13235,13 +13252,13 @@ function GuidesPage({ onNavigate }: { onNavigate: (view: View) => void }) {
                     key={topic.title}
                     role={isBuying ? 'button' : undefined}
                     tabIndex={isBuying ? 0 : undefined}
-                    onClick={isBuying ? () => onNavigate('guideBuying') : undefined}
+                    onClick={isBuying ? () => navigate(ROUTES.guideBuying) : undefined}
                     onKeyDown={
                       isBuying
                         ? (event) => {
                             if (event.key === 'Enter' || event.key === ' ') {
                               event.preventDefault();
-                              onNavigate('guideBuying');
+                              navigate(ROUTES.guideBuying);
                             }
                           }
                         : undefined
@@ -13358,7 +13375,8 @@ function GuidesPage({ onNavigate }: { onNavigate: (view: View) => void }) {
   );
 }
 
-function SellPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function SellPage() {
+  const navigate = useNavigate();
   return (
     <section className="sell-page" aria-label="Sprzedaj mieszkanie">
       <section className="sell-hero">
@@ -13385,7 +13403,7 @@ function SellPage({ onNavigate }: { onNavigate: (view: View) => void }) {
               <span><Icon name="spark" /> Pełne wsparcie</span>
             </div>
 
-            <button className="sell-primary" onClick={() => onNavigate('add')}>Dodaj ogłoszenie za darmo</button>
+            <button className="sell-primary" onClick={() => navigate(ROUTES.add)}>Dodaj ogłoszenie za darmo</button>
             <small>Zajmie Ci to tylko 2 minuty</small>
           </div>
         </div>
@@ -13429,7 +13447,7 @@ function SellPage({ onNavigate }: { onNavigate: (view: View) => void }) {
             <h2>Sprawdź wartość swojego mieszkania</h2>
             <p>Bezpłatna wycena online w 30 sekund</p>
             <div className="valuation-input">Podaj adres mieszkania</div>
-            <button onClick={() => onNavigate('valuation')}>Wyceń mieszkanie</button>
+            <button onClick={() => navigate(ROUTES.valuation)}>Wyceń mieszkanie</button>
             <div className="valuation-result">
               <span>Przykładowa wycena</span>
               <small>Kraków, Zabłocie</small>
@@ -13512,7 +13530,7 @@ function SellPage({ onNavigate }: { onNavigate: (view: View) => void }) {
             <strong>Gotowy na szybką i bezpieczną sprzedaż?</strong>
             <span>Dołącz do tysięcy osób, które już sprzedały z nami swoje mieszkanie.</span>
           </div>
-          <button onClick={() => onNavigate('add')}>Dodaj ogłoszenie za darmo</button>
+          <button onClick={() => navigate(ROUTES.add)}>Dodaj ogłoszenie za darmo</button>
           <small>Zajmie Ci to tylko 2 minuty</small>
         </section>
       </div>
@@ -14552,7 +14570,8 @@ function formatPercent(value: number): string {
   return `${(value * 100).toLocaleString('pl-PL', { maximumFractionDigits: 1 })}%`;
 }
 
-function CreditCalculatorPage({ onNavigate, onSearchWithBudget }: { onNavigate: (view: View) => void; onSearchWithBudget: (maxPrice: number) => void }) {
+function CreditCalculatorPage({ onSearchWithBudget }: { onSearchWithBudget: (maxPrice: number) => void }) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const [form, setForm] = useState<CreditForm>(INITIAL_CREDIT_FORM);
   const [highlight, setHighlight] = useState(false);
@@ -14843,7 +14862,7 @@ function CreditCalculatorPage({ onNavigate, onSearchWithBudget }: { onNavigate:
     return (
       <section className="account-page" aria-label="Kalkulator zdolności kredytowej">
         <div className="account-layout">
-          <AccountSidebar onNavigate={onNavigate} activeView="creditCalculator" />
+          <AccountSidebar />
           <div className="account-main credit-account-main">
             {pageBody}
           </div>
@@ -14856,9 +14875,9 @@ function CreditCalculatorPage({ onNavigate, onSearchWithBudget }: { onNavigate:
     <section className="credit-page" aria-label="Kalkulator zdolności kredytowej">
       <div className="credit-shell">
         <div className="breadcrumb credit-breadcrumb">
-          <button type="button" onClick={() => onNavigate('guideBuying')}>Poradnik kupna</button>
+          <button type="button" onClick={() => navigate(ROUTES.guideBuying)}>Poradnik kupna</button>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => onNavigate('creditCalculator')}>Kalkulator zdolności kredytowej</button>
+          <button type="button" className="active" onClick={() => navigate(ROUTES.creditCalculator)}>Kalkulator zdolności kredytowej</button>
         </div>
         {pageBody}
       </div>
@@ -14866,7 +14885,8 @@ function CreditCalculatorPage({ onNavigate, onSearchWithBudget }: { onNavigate:
   );
 }
 
-function ValuationPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function ValuationPage() {
+  const navigate = useNavigate();
   const [step, setStep] = useState(0);
   const [valuationForm, setValuationForm] = useState<ValuationForm>(INITIAL_VALUATION_FORM);
   const [valuationLocationSuggestOpen, setValuationLocationSuggestOpen] = useState(false);
@@ -15023,9 +15043,9 @@ function ValuationPage({ onNavigate }: { onNavigate: (view: View) => void }) {
     <section className="valuation-page" aria-label="Wycena nieruchomości">
       <div className="valuation-shell">
         <div className="breadcrumb valuation-breadcrumb">
-          <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => onNavigate('valuation')}>Wycena nieruchomości</button>
+          <button type="button" className="active" onClick={() => navigate(ROUTES.valuation)}>Wycena nieruchomości</button>
         </div>
 
         <div className={`valuation-title ${isValuationResultStep ? 'result' : ''}`}>
@@ -15088,7 +15108,7 @@ function ValuationPage({ onNavigate }: { onNavigate: (view: View) => void }) {
                 <div className="valuation-result-actions">
                   <button type="button" className="valuation-back" onClick={() => setStep(2)}><Icon name="arrow" /> Wróć</button>
                   <button type="button" className="valuation-back" disabled={!valuation.ready} onClick={() => downloadValuationReportPdf(valuationForm, valuation, valuationConfidenceLabel)}><Icon name="document" /> Pobierz raport (PDF)</button>
-                  <button type="button" className="valuation-next" onClick={() => onNavigate('add')}>Rozpocznij sprzedaż <Icon name="arrow" /></button>
+                  <button type="button" className="valuation-next" onClick={() => navigate(ROUTES.add)}>Rozpocznij sprzedaż <Icon name="arrow" /></button>
                 </div>
               </section>
             </div>
@@ -16662,7 +16682,8 @@ function historyShortMarketLabel(market: PriceHistoryMarket) {
   return tail;
 }
 
-function PriceHistoryPage({ onNavigate, user }: { onNavigate: (view: View) => void; user: AuthUser | null }) {
+function PriceHistoryPage({ user }: { user: AuthUser | null }) {
+  const navigate = useNavigate();
   const [locationInput, setLocationInput] = useState('');
   const [selectedMarket, setSelectedMarket] = useState<PriceHistoryMarket | null>(null);
   const [propertyType, setPropertyType] = useState<HistoryPropertyType>('Mieszkanie');
@@ -16852,7 +16873,7 @@ function PriceHistoryPage({ onNavigate, user }: { onNavigate: (view: View) => vo
   const createCityAlert = () => {
     if (!user) {
       setCreateAlertFeedback('Zaloguj się, aby dodać alert cenowy.');
-      onNavigate('login');
+      navigate(ROUTES.login);
       return;
     }
     if (!selectedMarket) {
@@ -16886,9 +16907,9 @@ function PriceHistoryPage({ onNavigate, user }: { onNavigate: (view: View) => vo
     <section className="history-page" aria-label="Historia cen">
       <div className="history-shell">
         <div className="breadcrumb history-breadcrumb">
-          <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => onNavigate('priceHistory')}>Historia cen</button>
+          <button type="button" className="active" onClick={() => navigate(ROUTES.priceHistory)}>Historia cen</button>
         </div>
 
         <div className="history-title">
@@ -18067,7 +18088,8 @@ function LocationPickerMap({
   );
 }
 
-function MapSearchPage({ initialCity, offerType, onNavigate }: { initialCity: string; offerType: ApiOfferType; onNavigate: (view: View) => void }) {
+function MapSearchPage({ initialCity, offerType }: { initialCity: string; offerType: ApiOfferType }) {
+  const navigate = useNavigate();
   const knownInitialCity = findKnownCityKey(initialCity);
   const startCity = knownInitialCity ?? '';
   const initialCityValue = initialCity.trim();
@@ -18316,7 +18338,7 @@ function MapSearchPage({ initialCity, offerType, onNavigate }: { initialCity: st
   return (
     <section className="map-search-page" aria-label="Mapa ofert">
       <div className="map-search-bar">
-        <button type="button" className="map-back" onClick={() => onNavigate(isRentMode ? 'rent' : 'buy')}>
+        <button type="button" className="map-back" onClick={() => navigate(isRentMode ? ROUTES.rent : ROUTES.buy)}>
           <Icon name="chevron" />
           <span>Wróć do listy</span>
         </button>
@@ -18443,18 +18465,15 @@ function MapSearchPage({ initialCity, offerType, onNavigate }: { initialCity: st
 }
 
 function Header({
-  activeView,
-  onNavigate,
   onLogout,
   hasUnreadFavorites,
   onOpenNotification,
 }: {
-  activeView: View;
-  onNavigate: (view: View) => void;
   onLogout: () => void;
   hasUnreadFavorites: boolean;
   onOpenNotification: (notification: DisplayNotification) => void;
 }) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const { notifications: serverNotifications, unreadCount } = useNotifications();
   const isLoggedIn = Boolean(user);
@@ -18524,15 +18543,15 @@ function Header({
     };
   }, [isAccountMenuOpen]);
 
-  const goToAccountSection = (targetView: View) => {
+  const goToAccountSection = (targetPath: string) => {
     setIsAccountMenuOpen(false);
-    onNavigate(targetView);
+    navigate(targetPath);
   };
 
   return (
     <header className={isAdmin ? 'header header-admin' : 'header'}>
       <div className="brand-group">
-        <button className="brand" onClick={() => onNavigate('home')} aria-label="Mieszko">
+        <Link className="brand" to={ROUTES.home} aria-label="Mieszko">
           <span className="brand-mark">
             <Icon name="logo" />
           </span>
@@ -18540,38 +18559,41 @@ function Header({
             <strong>mieszko</strong>
             <small>mieszkania za darmo</small>
           </span>
-        </button>
+        </Link>
 
         {isAdmin && <span className="brand-admin-badge">ADMIN</span>}
       </div>
 
       <nav className="nav" aria-label="Główna nawigacja">
-        <button className={activeView === 'buy' ? 'active' : ''} onClick={() => onNavigate('buy')}>
+        <NavLink to={ROUTES.buy} className={navLinkClass}>
           Kupuję
-        </button>
-        <button className={activeView === 'rent' ? 'active' : ''} onClick={() => onNavigate('rent')}>
+        </NavLink>
+        <NavLink to={ROUTES.rent} className={navLinkClass}>
           Wynajmuję
-        </button>
-        <button className={activeView === 'sell' ? 'active' : ''} onClick={() => onNavigate('sell')}>
+        </NavLink>
+        <NavLink to={ROUTES.sell} className={navLinkClass}>
           Jak sprzedawać
-        </button>
-        <button className={activeView === 'valuation' ? 'active' : ''} onClick={() => onNavigate('valuation')}>
+        </NavLink>
+        <NavLink to={ROUTES.valuation} className={navLinkClass}>
           Wycena mieszkania
-        </button>
-        <button className={activeView === 'services' ? 'active' : ''} onClick={() => onNavigate('services')}>
+        </NavLink>
+        <NavLink to={ROUTES.services} className={navLinkClass}>
           Firmy i usługi
-        </button>
-        <button className={activeView === 'guides' ? 'active' : ''} onClick={() => onNavigate('guides')}>
+        </NavLink>
+        <NavLink to={ROUTES.guides} className={navLinkClass}>
           Poradniki
-        </button>
+        </NavLink>
       </nav>
 
       <div className="header-actions">
-        <button className={activeView === 'favorites' ? 'icon-text favorites-shortcut active' : 'icon-text favorites-shortcut'} onClick={() => onNavigate('favorites')}>
+        <NavLink
+          to={ROUTES.favorites}
+          className={({ isActive }) => (isActive ? 'icon-text favorites-shortcut active' : 'icon-text favorites-shortcut')}
+        >
           <Icon name="heart" />
           <span>Ulubione</span>
           {hasUnreadFavorites && <i aria-hidden="true" />}
-        </button>
+        </NavLink>
         {isLoggedIn && (
           <div className="notify-bell-wrap" ref={notificationPopoverRef}>
             <button
@@ -18594,7 +18616,7 @@ function Header({
                     type="button"
                     onClick={() => {
                       setIsNotificationsOpen(false);
-                      onNavigate('notifications');
+                      navigate(ROUTES.notifications);
                     }}
                   >
                     Zobacz wszystkie
@@ -18630,16 +18652,16 @@ function Header({
           </div>
         )}
         {isAdmin && (
-          <button
-            className={activeView === 'admin' ? 'icon-text active' : 'icon-text'}
-            onClick={() => onNavigate('admin')}
+          <NavLink
+            to={ROUTES.admin}
+            className={({ isActive }) => (isActive ? 'icon-text active' : 'icon-text')}
           >
             <Icon name="shield" />
             <span>Panel admina</span>
-          </button>
+          </NavLink>
         )}
         {!isLoggedIn && (
-          <button className="icon-text" onClick={() => onNavigate('login')}>
+          <button className="icon-text" onClick={() => navigate(ROUTES.login)}>
             <Icon name="user" />
             <span>Moje konto</span>
           </button>
@@ -18660,13 +18682,13 @@ function Header({
 
             {isAccountMenuOpen && (
               <div className="account-popover" role="menu" aria-label="Menu konta">
-                <button type="button" role="menuitem" onClick={() => goToAccountSection('account')}>
+                <button type="button" role="menuitem" onClick={() => goToAccountSection(ROUTES.account)}>
                   <Icon name="house" /> Panel główny
                 </button>
-                <button type="button" role="menuitem" onClick={() => goToAccountSection('accountListings')}>
+                <button type="button" role="menuitem" onClick={() => goToAccountSection(ROUTES.accountListings)}>
                   <Icon name="document" /> Moje oferty
                 </button>
-                <button type="button" role="menuitem" onClick={() => goToAccountSection('accountSettings')}>
+                <button type="button" role="menuitem" onClick={() => goToAccountSection(ROUTES.accountSettings)}>
                   <Icon name="gear" /> Dane i ustawienia
                 </button>
                 <button
@@ -18684,7 +18706,7 @@ function Header({
             )}
           </div>
         )}
-        <button className="post-button" onClick={() => onNavigate('add')}>
+        <button className="post-button" onClick={() => navigate(ROUTES.add)}>
           <span>Dodaj ogłoszenie za darmo</span>
           <small>0 zł • Bez prowizji</small>
         </button>
@@ -18762,16 +18784,18 @@ function NotificationsPage({ onOpenNotification }: { onOpenNotification: (notifi
 }
 
 function MessagesPage({
-  onNavigate,
   onOpenListing,
-  initialThreadTarget,
-  onThreadTargetHandled,
 }: {
-  onNavigate: (view: View) => void;
   onOpenListing: (id: number) => void;
-  initialThreadTarget: MessageThreadTarget | null;
-  onThreadTargetHandled: () => void;
 }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  // Rozmowa otwarta z ogloszenia lub ulubionych przychodzi w location.state.
+  // Po zalozeniu watku czyscimy state, zeby powrot Wstecz nie tworzyl go ponownie.
+  const initialThreadTarget = (location.state as { threadTarget?: MessageThreadTarget } | null)?.threadTarget ?? null;
+  const onThreadTargetHandled = useCallback(() => {
+    navigate(location.pathname, { replace: true, state: null });
+  }, [navigate, location.pathname]);
   type BusinessCard = {
     fullName: string;
     phone: string;
@@ -19605,9 +19629,9 @@ function MessagesPage({
       <div className="messages-shell">
         <div className="messages-header">
           <div className="messages-breadcrumb" aria-label="Nawigacja wiadomości">
-            <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+            <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => onNavigate('messages')}>Wiadomości</button>
+            <button type="button" className="active" onClick={() => navigate(ROUTES.messages)}>Wiadomości</button>
           </div>
           <h1>Wiadomości</h1>
         </div>
@@ -19965,20 +19989,19 @@ function MessagesPage({
 }
 
 function FavoritesPage({
-  onNavigate,
   onOpenListing,
   onStartChat,
   favoritesState,
   setFavoritesState,
   preferredTab,
 }: {
-  onNavigate: (view: View) => void;
   onOpenListing: (id: number) => void;
   onStartChat: (target: MessageThreadTarget) => void;
   favoritesState: FavoriteListing[];
   setFavoritesState: Dispatch<SetStateAction<FavoriteListing[]>>;
   preferredTab: FavoriteTab;
 }) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const [activeTab, setActiveTab] = useState<FavoriteTab>('buy');
   const [menuListingId, setMenuListingId] = useState<string | null>(null);
@@ -20265,7 +20288,7 @@ function FavoritesPage({
                 <div className="favorite-content">
                   <h3>Brak ogłoszeń w tej kategorii</h3>
                   <p>{searchQuery || activeFiltersCount > 0 ? 'Zmień filtry lub frazę wyszukiwania, aby zobaczyć więcej ofert.' : 'Dodaj nowe oferty do ulubionych, aby pojawiły się na tej liście.'}</p>
-                  <button type="button" className="favorite-empty-cta" onClick={() => onNavigate(activeTab === 'buy' ? 'buy' : 'rent')}><Icon name="plus" /> {activeTab === 'buy' ? 'Przejdź do ofert Kupuję' : 'Przejdź do ofert Wynajmuję'}</button>
+                  <button type="button" className="favorite-empty-cta" onClick={() => navigate(activeTab === 'buy' ? ROUTES.buy : ROUTES.rent)}><Icon name="plus" /> {activeTab === 'buy' ? 'Przejdź do ofert Kupuję' : 'Przejdź do ofert Wynajmuję'}</button>
                 </div>
               </article>
             )}
@@ -20662,7 +20685,6 @@ function useLiveListings(offerType: ApiOfferType, refreshMs = LIVE_LISTINGS_REFR
 
 function ListingDetailPage({
   listingId,
-  onNavigate,
   onStartChat,
   isFavorite,
   onToggleFavorite,
@@ -20670,13 +20692,13 @@ function ListingDetailPage({
   onToggleListingAlert,
 }: {
   listingId: number | null;
-  onNavigate: (view: View) => void;
   onStartChat: (target: MessageThreadTarget) => void;
   isFavorite: (listingId: number) => boolean;
   onToggleFavorite: (listing: ApiListingDetail) => void;
   isListingAlertEnabled: (listingId: number) => boolean;
   onToggleListingAlert: (listing: ApiListingDetail) => void;
 }) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const [listing, setListing] = useState<ApiListingDetail | null>(null);
   const [loading, setLoading] = useState(true);
@@ -20848,7 +20870,7 @@ function ListingDetailPage({
       <section className="listing-detail-page">
         <div className="listing-detail-state">
           <p>{error ?? 'Nie znaleziono ogłoszenia.'}</p>
-          <button type="button" className="listing-detail-back" onClick={() => onNavigate('buy')}>
+          <button type="button" className="listing-detail-back" onClick={() => navigate(ROUTES.buy)}>
             <Icon name="arrow" /> Wróć do ofert
           </button>
         </div>
@@ -20929,7 +20951,7 @@ function ListingDetailPage({
 
   const openReportModal = () => {
     if (!user) {
-      onNavigate('login');
+      navigate(ROUTES.login);
       return;
     }
     setReportStep(1);
@@ -21121,9 +21143,9 @@ function ListingDetailPage({
   return (
     <section className="listing-detail-page">
       <div className="listing-detail-crumbs">
-        <button type="button" onClick={() => onNavigate('home')}>Panel główny</button>
+        <button type="button" onClick={() => navigate(ROUTES.home)}>Panel główny</button>
         <span>›</span>
-        <button type="button" onClick={() => onNavigate(listing.offerType === 'RENT' ? 'rent' : 'buy')}>
+        <button type="button" onClick={() => navigate(listing.offerType === 'RENT' ? ROUTES.rent : ROUTES.buy)}>
           {listing.offerType === 'RENT' ? 'Wynajmuję' : 'Kupuję'}
         </button>
         <span>›</span>
@@ -21312,7 +21334,7 @@ function ListingDetailPage({
               </div>
             </div>
 
-            <button type="button" className="listing-detail-profile-btn" onClick={() => onNavigate('accountPublicProfile')}>
+            <button type="button" className="listing-detail-profile-btn" onClick={() => navigate(ROUTES.accountPublicProfile)}>
               Wyświetl profil
             </button>
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9239dd0..55ce034 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -86,13 +86,13 @@ svg {
   row-gap: 6px;
 }
 
-.header-admin .nav button {
+.header-admin .nav button, .header-admin .nav a {
   color: #dbe4f0;
   font-size: 12px;
   padding: 8px 0;
 }
 
-.header-admin .nav button.active::after {
+.header-admin .nav button.active::after, .header-admin .nav a.active::after {
   bottom: 2px;
 }
 
@@ -194,7 +194,7 @@ svg {
   min-width: 0;
 }
 
-.nav button {
+.nav button, .nav a {
   background: transparent;
   border: 0;
   color: #111a2e;
@@ -206,7 +206,7 @@ svg {
   white-space: nowrap;
 }
 
-.nav button.active::after {
+.nav button.active::after, .nav a.active::after {
   background: #13a360;
   border-radius: 999px;
   bottom: 20px;
@@ -10798,7 +10798,7 @@ svg {
     gap: 17px;
   }
 
-  .nav button,
+  .nav button, .nav a,
   .icon-text span {
     font-size: 12px;
   }
@@ -11003,11 +11003,11 @@ svg {
     padding-bottom: 4px;
   }
 
-  .nav button {
+  .nav button, .nav a {
     padding: 8px 0 12px;
   }
 
-  .nav button.active::after {
+  .nav button.active::after, .nav a.active::after {
     bottom: 3px;
   }
 
@@ -13947,7 +13947,7 @@ svg {
   text-transform: uppercase;
 }
 
-.account-menu button {
+.account-menu button, .account-menu a {
   align-items: center;
   background: transparent;
   border: 0;
@@ -13964,12 +13964,12 @@ svg {
   width: 100%;
 }
 
-.account-menu button svg {
+.account-menu button svg, .account-menu a svg {
   color: #7d8ca0;
   font-size: 14px;
 }
 
-.account-menu button span {
+.account-menu button span, .account-menu a span {
   background: #e8f8ef;
   border-radius: 999px;
   color: #109253;
@@ -13978,13 +13978,13 @@ svg {
   padding: 1px 6px;
 }
 
-.account-menu button .tag {
+.account-menu button .tag, .account-menu a .tag {
   border-radius: 4px;
   font-size: 9px;
   padding: 1px 5px;
 }
 
-.account-menu button.active {
+.account-menu button.active, .account-menu a.active {
   background: #ebf6f0;
   color: #109253;
 }
@@ -17044,7 +17044,7 @@ svg {
 .account-alerts article > span svg,
 .account-searches article > span svg,
 .account-tools article > span svg,
-.account-menu button svg {
+.account-menu button svg, .account-menu a svg {
   height: 14px;
   width: 14px;
 }
@@ -26752,3 +26752,24 @@ svg {
 
 /* Routing: stan wczytywania profilu przy wejsciu na trase chroniona */
 .route-loading { padding: 80px 24px; text-align: center; color: #5b6472; font-size: 15px; font-weight: 600; }
+
+/* Routing: NavLink/Link renderuja <a> - zerujemy domyslne style linku,
+   zeby menu wygladalo dokladnie tak jak wczesniejsze <button>. */
+.nav a,
+.account-menu a,
+.brand,
+.icon-text {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.not-found-page { display: grid; padding: 90px 24px 120px; place-items: center; }
+.not-found-shell { max-width: 520px; text-align: center; }
+.not-found-shell h1 { color: #13a360; font-size: 88px; font-weight: 900; line-height: 1; margin: 0; }
+.not-found-shell h2 { color: #111a2e; font-size: 24px; font-weight: 800; margin: 16px 0 8px; }
+.not-found-shell p { color: #5b6472; font-size: 15px; margin: 0 0 28px; }
+.not-found-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
+.not-found-actions a { border-radius: 10px; font-size: 14px; font-weight: 800; padding: 12px 22px; text-decoration: none; }
+.not-found-primary { background: #13a360; color: #ffffff; }
+.not-found-secondary { border: 1px solid #d5dde7; color: #27384f; }