Okruszki nawigacyjne i CTA naglowka jako <Link>

- 16 przyciskow w breadcrumbach zamienionych na <Link> (semantyka linku,
  otwieranie w nowej karcie, podglad celu na hover)
- naglowek: "Moje konto" i "Dodaj ogloszenie za darmo" jako <Link>
- CSS breadcrumbow rozszerzony o warianty <a>, wyglad bez zmian
  (zweryfikowane zrzutami ekranu)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/App.tsx

@@ -5141,9 +5141,9 @@ function DistrictRankingPage() {
     <section className="district-ranking-page" aria-label="Ranking dzielnic">
       <div className="district-ranking-shell">
         <div className="district-breadcrumb">
-          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
+          <Link to={ROUTES.account}>Panel główny</Link>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => navigate(ROUTES.districtRanking)}>Ranking dzielnic</button>
+          <Link className="active" to={ROUTES.districtRanking}>Ranking dzielnic</Link>
         </div>
 
         <div className="district-ranking-title">
@@ -5272,9 +5272,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={() => navigate(ROUTES.account)}>Panel główny</button>
+            <Link to={ROUTES.account}>Panel główny</Link>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => navigate(ROUTES.negotiation)}>Ile możesz utargować?</button>
+            <Link className="active" to={ROUTES.negotiation}>Ile możesz utargować?</Link>
           </div>
 
           <div className="negotiation-title">
@@ -5309,9 +5309,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={() => navigate(ROUTES.account)}>Panel główny</button>
+          <Link to={ROUTES.account}>Panel główny</Link>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => navigate(ROUTES.negotiation)}>Ile możesz utargować?</button>
+          <Link className="active" to={ROUTES.negotiation}>Ile możesz utargować?</Link>
         </div>
 
         <div className="negotiation-title">
@@ -7287,9 +7287,9 @@ function AccountComparisonPage({ onOpenListing }: { onOpenListing: (id: number)
 
         <div className="comparison-main">
           <div className="comparison-breadcrumb">
-            <button type="button" onClick={() => navigate(ROUTES.home)}>Strona główna</button>
+            <Link to={ROUTES.home}>Strona główna</Link>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => navigate(ROUTES.comparison)}>Porównywarka mieszkań</button>
+            <Link className="active" to={ROUTES.comparison}>Porównywarka mieszkań</Link>
           </div>
 
           <div className="comparison-head">
@@ -14890,9 +14890,9 @@ function CreditCalculatorPage({ onSearchWithBudget }: { onSearchWithBudget: (max
     <section className="credit-page" aria-label="Kalkulator zdolności kredytowej">
       <div className="credit-shell">
         <div className="breadcrumb credit-breadcrumb">
-          <button type="button" onClick={() => navigate(ROUTES.guideBuying)}>Poradnik kupna</button>
+          <Link to={ROUTES.guideBuying}>Poradnik kupna</Link>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => navigate(ROUTES.creditCalculator)}>Kalkulator zdolności kredytowej</button>
+          <Link className="active" to={ROUTES.creditCalculator}>Kalkulator zdolności kredytowej</Link>
         </div>
         {pageBody}
       </div>
@@ -15058,9 +15058,9 @@ function ValuationPage() {
     <section className="valuation-page" aria-label="Wycena nieruchomości">
       <div className="valuation-shell">
         <div className="breadcrumb valuation-breadcrumb">
-          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
+          <Link to={ROUTES.account}>Panel główny</Link>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => navigate(ROUTES.valuation)}>Wycena nieruchomości</button>
+          <Link className="active" to={ROUTES.valuation}>Wycena nieruchomości</Link>
         </div>
 
         <div className={`valuation-title ${isValuationResultStep ? 'result' : ''}`}>
@@ -16922,9 +16922,9 @@ function PriceHistoryPage({ user }: { user: AuthUser | null }) {
     <section className="history-page" aria-label="Historia cen">
       <div className="history-shell">
         <div className="breadcrumb history-breadcrumb">
-          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
+          <Link to={ROUTES.account}>Panel główny</Link>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => navigate(ROUTES.priceHistory)}>Historia cen</button>
+          <Link className="active" to={ROUTES.priceHistory}>Historia cen</Link>
         </div>
 
         <div className="history-title">
@@ -18676,10 +18676,10 @@ function Header({
           </NavLink>
         )}
         {!isLoggedIn && (
-          <button className="icon-text" onClick={() => navigate(ROUTES.login)}>
+          <Link className="icon-text" to={ROUTES.login}>
             <Icon name="user" />
             <span>Moje konto</span>
-          </button>
+          </Link>
         )}
         {isLoggedIn && (
           <div className="account-menu-wrap" ref={accountMenuRef}>
@@ -18721,10 +18721,10 @@ function Header({
             )}
           </div>
         )}
-        <button className="post-button" onClick={() => navigate(ROUTES.add)}>
+        <Link className="post-button" to={ROUTES.add}>
           <span>Dodaj ogłoszenie za darmo</span>
           <small>0 zł • Bez prowizji</small>
-        </button>
+        </Link>
       </div>
     </header>
   );
@@ -19644,9 +19644,9 @@ function MessagesPage({
       <div className="messages-shell">
         <div className="messages-header">
           <div className="messages-breadcrumb" aria-label="Nawigacja wiadomości">
-            <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
+            <Link to={ROUTES.account}>Panel główny</Link>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => navigate(ROUTES.messages)}>Wiadomości</button>
+            <Link className="active" to={ROUTES.messages}>Wiadomości</Link>
           </div>
           <h1>Wiadomości</h1>
         </div>

frontend/src/styles.css

@@ -6000,7 +6000,7 @@ svg {
   margin-bottom: 22px;
 }
 
-.valuation-breadcrumb button {
+.valuation-breadcrumb button, .valuation-breadcrumb a {
   background: transparent;
   border: 0;
   color: #768398;
@@ -6009,7 +6009,7 @@ svg {
   padding: 0;
 }
 
-.valuation-breadcrumb button.active {
+.valuation-breadcrumb button.active, .valuation-breadcrumb a.active {
   color: #14223a;
 }
 
@@ -6876,7 +6876,7 @@ svg {
   padding: 0;
 }
 
-.history-breadcrumb button {
+.history-breadcrumb button, .history-breadcrumb a {
   background: transparent;
   border: 0;
   color: #7a8798;
@@ -6885,7 +6885,7 @@ svg {
   padding: 0;
 }
 
-.history-breadcrumb button.active {
+.history-breadcrumb button.active, .history-breadcrumb a.active {
   color: #14223a;
 }
 
@@ -9553,7 +9553,7 @@ svg {
   margin-bottom: 24px;
 }
 
-.district-breadcrumb button {
+.district-breadcrumb button, .district-breadcrumb a {
   background: transparent;
   border: 0;
   color: #768398;
@@ -9562,7 +9562,7 @@ svg {
   padding: 0;
 }
 
-.district-breadcrumb button.active {
+.district-breadcrumb button.active, .district-breadcrumb a.active {
   color: #14223a;
 }
 
@@ -10090,7 +10090,7 @@ svg {
   margin-bottom: 18px;
 }
 
-.negotiation-breadcrumb button {
+.negotiation-breadcrumb button, .negotiation-breadcrumb a {
   background: transparent;
   border: 0;
   color: #768398;
@@ -10099,7 +10099,7 @@ svg {
   padding: 0;
 }
 
-.negotiation-breadcrumb button.active {
+.negotiation-breadcrumb button.active, .negotiation-breadcrumb a.active {
   color: #14223a;
 }
 
@@ -15192,7 +15192,7 @@ svg {
   margin: 2px 0 8px;
 }
 
-.messages-page .messages-breadcrumb button {
+.messages-page .messages-breadcrumb button, .messages-page .messages-breadcrumb a {
   background: transparent;
   border: 0;
   color: #718094;
@@ -15201,7 +15201,7 @@ svg {
   padding: 0;
 }
 
-.messages-page .messages-breadcrumb button.active {
+.messages-page .messages-breadcrumb button.active, .messages-page .messages-breadcrumb a.active {
   color: #14223a;
 }
 
@@ -24390,7 +24390,7 @@ svg {
   gap: 6px;
 }
 
-.comparison-breadcrumb button {
+.comparison-breadcrumb button, .comparison-breadcrumb a {
   background: transparent;
   border: 0;
   color: inherit;
@@ -24398,7 +24398,7 @@ svg {
   padding: 0;
 }
 
-.comparison-breadcrumb button.active {
+.comparison-breadcrumb button.active, .comparison-breadcrumb a.active {
   color: #152640;
 }
 
@@ -26776,3 +26776,16 @@ svg {
 
 /* Routing: pozycje menu admina to teraz <a> (NavLink) */
 .admin-nav a { color: inherit; cursor: pointer; text-decoration: none; }
+
+/* Routing: okruszki nawigacyjne to teraz <Link> */
+.breadcrumb a,
+.district-breadcrumb a,
+.negotiation-breadcrumb a,
+.comparison-breadcrumb a,
+.messages-breadcrumb a,
+.valuation-breadcrumb a,
+.history-breadcrumb a,
+.credit-breadcrumb a { color: inherit; cursor: pointer; text-decoration: none; }
+
+/* Routing: naglowkowe CTA jako <Link> - zachowanie wygladu przyciskow */
+.post-button { align-content: center; text-decoration: none; }