feat(layout): extract NavbarPlaytime as OOB-swappable component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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">
+                {NavbarPlaytime(today_played, last_7_played)}
-                    <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>
                 <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>

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