Show live Bitcoin price in page title

app/main.py

@@ -78,6 +78,21 @@ HOME_HTML = """\
 </div>
 <script>
 (function() {
+  function updateTitleFromPrice() {
+    const priceDisplay = document.getElementById('price-display');
+    const price = priceDisplay && priceDisplay.dataset.titlePrice;
+    if (price) {
+      document.title = price + ' | BTC Price';
+    }
+  }
+
+  const pricePanel = document.getElementById('price-panel');
+  new MutationObserver(updateTitleFromPrice).observe(pricePanel, {
+    childList: true,
+    subtree: true,
+  });
+  updateTitleFromPrice();
+
   function initChart(containerId, endpoint, intervalMs) {
     const container = document.getElementById(containerId);
     const chart = LightweightCharts.createChart(container, {
@@ -233,11 +248,12 @@ def price_json_to_html(text: str) -> str:
     else:
         ts = ""
 
+    formatted_price = f'${da_fmt(",.2f", p)}'
     html = (
-        '<div id="price-display">'
+        f'<div id="price-display" data-title-price="{formatted_price}">'
         '<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">'
         '<div class="text-center">'
-        f'<p class="text-4xl font-bold {color}">${da_fmt(",.2f", p)}</p>'
+        f'<p class="text-4xl font-bold {color}">{formatted_price}</p>'
     )
 
     if data.get("price_eur") is not None: