From 1999ef8a21f9a0c57fcc4139113439271f591607 Mon Sep 17 00:00:00 2001
From: Ronny <ronny975@gmail.com>
Date: Sun, 12 Apr 2026 15:56:59 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20rank=20change=20arrow=20(=E2=86=91/?=
 =?UTF-8?q?=E2=86=93)=20in=20dashboard=20stats=20tile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/DashboardPage.module.css | 18 ++++++++++++++++++
 frontend/src/pages/DashboardPage.tsx        | 21 ++++++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/DashboardPage.module.css b/frontend/src/pages/DashboardPage.module.css
index 8c12281..b20a722 100644
--- a/frontend/src/pages/DashboardPage.module.css
+++ b/frontend/src/pages/DashboardPage.module.css
@@ -308,6 +308,20 @@
   color: var(--gold);
 }
 
+.rankUp {
+  font-size: 0.7rem;
+  color: var(--success);
+  margin-left: 4px;
+  font-weight: 700;
+}
+
+.rankDown {
+  font-size: 0.7rem;
+  color: var(--error);
+  margin-left: 4px;
+  font-weight: 700;
+}
+
 .statLabel {
   display: block;
   font-size: 0.65rem;
@@ -360,6 +374,10 @@
   line-height: 1.4;
 }
 
+.nudgeStreak {
+  border-left: 3px solid var(--error) !important;
+}
+
 /* ═══════════════════════════════════════
    STATES
    ═══════════════════════════════════════ */
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 7818fa3..fde0150 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -49,6 +49,21 @@ export default function DashboardPage(_props: Props) {
 
   const { hero, stats, nudges } = data;
 
+  const lastRank = parseInt(localStorage.getItem('tippspiel_last_rank') || '0');
+  const rankDiff = lastRank > 0 && stats.rank !== null ? lastRank - stats.rank : 0;
+
+  // Streak break detection via localStorage
+  const STREAK_KEY = 'tippspiel_last_streak';
+  const lastStreak = parseInt(localStorage.getItem(STREAK_KEY) || '0');
+  const streakBroken = lastStreak >= 3 && stats.streak === 0;
+
+  // Keep stored streak up to date when active
+  useEffect(() => {
+    if (stats.streak > 0) {
+      localStorage.setItem(STREAK_KEY, String(stats.streak));
+    }
+  }, [stats.streak]);
+
   return (
     <div className={styles.dashboard}>
       {/* Hero Card */}
@@ -140,7 +155,11 @@ export default function DashboardPage(_props: Props) {
       {/* Stats Row */}
       <div className={styles.statsRow}>
         <div className={`card ${styles.statTile}`}>
-          <span className={styles.statValue}>{stats.rank !== null ? stats.rank : '—'}</span>
+          <span className={styles.statValue}>
+            {stats.rank !== null ? stats.rank : '—'}
+            {rankDiff > 0 && <span className={styles.rankUp}>↑{rankDiff}</span>}
+            {rankDiff < 0 && <span className={styles.rankDown}>↓{Math.abs(rankDiff)}</span>}
+          </span>
           <span className={styles.statLabel}>Dein Rang</span>
         </div>
         <div className={`card ${styles.statTile}`}>