From 7d10884db7a043647f421c3c9cdd7281ac7cb73b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= <lukas@kucharczyk.xyz>
Date: Sat, 20 Jun 2026 21:21:14 +0200
Subject: [PATCH] feat(layout): extract NavbarPlaytime as OOB-swappable
 component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 common/layout.py              | 24 ++++++++++++++++++++----
 tests/test_navbar_playtime.py | 15 +++++++++++++++
 2 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 tests/test_navbar_playtime.py

diff --git a/common/layout.py b/common/layout.py
index 81f5c74..8a0f255 100644
--- a/common/layout.py
+++ b/common/layout.py
@@ -187,6 +187,25 @@ def _main_script(mastered: bool) -> str:
     return _MAIN_SCRIPT_A + ("true" if mastered else "false") + _MAIN_SCRIPT_B
 
 
+def NavbarPlaytime(
+    today_played: str, last_7_played: str, *, oob: bool = False
+) -> "Node":
+    """The navbar 'Today · Last 7 days' totals. Carries a stable id so
+    htmx endpoints can refresh it out-of-band after a session change."""
+    from common.components import Safe
+
+    oob_attr = ' hx-swap-oob="true"' if oob else ""
+    return Safe(
+        f'<li id="navbar-playtime"{oob_attr} '
+        'class="dark:text-white flex flex-col items-center text-xs">'
+        '<span class="flex uppercase gap-1">Today'
+        '<span class="dark:text-gray-400">·</span>Last 7 days</span>'
+        '<span class="flex items-center gap-1">'
+        f'{today_played}<span class="dark:text-gray-400">·</span>'
+        f"{last_7_played}</span></li>"
+    )
+
+
 def Navbar(
     *, today_played: str, last_7_played: str, current_year: int, csrf_token: str
 ) -> "Node":
@@ -225,10 +244,7 @@ def Navbar(
                         </svg>
                     </button>
                 </li>
-                <li class="dark:text-white flex flex-col items-center text-xs">
-                    <span class="flex uppercase gap-1">Today<span class="dark:text-gray-400">·</span>Last 7 days</span>
-                    <span class="flex items-center gap-1">{today_played}<span class="dark:text-gray-400">·</span>{last_7_played}</span>
-                </li>
+                {NavbarPlaytime(today_played, last_7_played)}
                 <li>
                     <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
                 </li>
diff --git a/tests/test_navbar_playtime.py b/tests/test_navbar_playtime.py
new file mode 100644
index 0000000..6c26efd
--- /dev/null
+++ b/tests/test_navbar_playtime.py
@@ -0,0 +1,15 @@
+from common.layout import NavbarPlaytime
+
+
+def test_navbar_playtime_has_stable_id_and_values():
+    html = str(NavbarPlaytime("1 h 00 m", "7 h 00 m"))
+    assert 'id="navbar-playtime"' in html
+    assert "1 h 00 m" in html
+    assert "7 h 00 m" in html
+    assert "hx-swap-oob" not in html
+
+
+def test_navbar_playtime_oob_flag():
+    html = str(NavbarPlaytime("1 h 00 m", "7 h 00 m", oob=True))
+    assert 'id="navbar-playtime"' in html
+    assert 'hx-swap-oob="true"' in html