From dc845698f15817ebffce5a8b5eb7e0148e7379d4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 20:41:53 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20sidebar=20hint=20=E2=80=94=20correct=20t?=
 =?UTF-8?q?ext=20and=20auto-dismiss=20on=20sidebar=20open?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two bugs fixed:

1. Wrong text ("app.sidebar_hint" key instead of translation):
   The innerHTML was built by JS string concatenation which broke when
   hint_label was injected. Now the full innerHTML is assembled in
   Python (where t() is guaranteed to work) and passed as a single
   JSON string: h.innerHTML = <single-json-string>.

2. Arrow not dismissing on sidebar open:
   The setTimeout/setInterval were scoped to the iframe which Streamlit
   destroys on each re-render, losing the event listeners. Fixed by
   storing timers on window.parent (_sbTimer, _sbPoll) so they survive
   re-renders. Sidebar state is now detected by polling for the
   collapsed-control button disappearing rather than relying on a
   click event that could be missed.

https://claude.ai/code/session_01VTBKKYLiAQ6mDPdmVhpRAT
---
 finance_tracker/web/app.py | 47 +++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/finance_tracker/web/app.py b/finance_tracker/web/app.py
index b251b4c..db4a8af 100644
--- a/finance_tracker/web/app.py
+++ b/finance_tracker/web/app.py
@@ -10,6 +10,7 @@
 support for SCPIs, cryptocurrencies like Bitcoin, savings accounts, and other
 financial assets.
 """
+import html as _html
 import json
 import streamlit as st
 import streamlit.components.v1 as st_components
@@ -122,13 +123,20 @@ def render_db_manager():
         # Uses st_components.html (iframe) so the script actually executes —
         # st.markdown strips <script> tags. window.parent gives access to the
         # main Streamlit page DOM and sessionStorage.
-        hint_label = json.dumps(t("app.sidebar_hint"))
+        # The full innerHTML is built in Python (translation guaranteed) and
+        # passed as a single JSON string to avoid JS concatenation bugs.
+        # Timers are stored on window.parent so they survive Streamlit re-renders.
+        _hint_inner = json.dumps(
+            '<div class="_a">&#x2196;</div>'
+            f'<div class="_t">{_html.escape(t("app.sidebar_hint"))}</div>'
+        )
         st_components.html(f"""<script>
 (function(){{
     var doc=window.parent.document;
-    var ss=window.parent.sessionStorage;
-    if(window.parent._sbHintInit)return;
-    window.parent._sbHintInit=true;
+    var win=window.parent;
+    var ss=win.sessionStorage;
+    if(win._sbHintInit)return;
+    win._sbHintInit=true;
     if(ss.getItem('sbVisited'))return;
     var s=doc.createElement('style');
     s.textContent='@keyframes sb-bounce{{0%,100%{{transform:translate(0,0);opacity:1}}'
@@ -144,24 +152,25 @@ def render_db_manager():
     doc.head.appendChild(s);
     var h=doc.createElement('div');
     h.id='_sb_hint';
-    h.innerHTML='<div class="_a">&#x2196;</div><div class="_t">'+{hint_label}+'</div>';
+    h.innerHTML={_hint_inner};
     doc.body.appendChild(h);
-    var timer=setTimeout(function(){{
-        if(!ss.getItem('sbVisited'))h.style.display='flex';
-    }},20000);
-    function watch(){{
+    function sidebarIsOpen(){{
         var btn=doc.querySelector('[data-testid="stSidebarCollapsedControl"]');
-        if(btn){{
-            btn.addEventListener('click',function(){{
-                ss.setItem('sbVisited','1');
-                clearTimeout(timer);
-                h.style.display='none';
-            }},{{once:true}});
-        }}else{{
-            setTimeout(watch,400);
-        }}
+        return !btn||getComputedStyle(btn).display==='none';
     }}
-    watch();
+    function dismiss(){{
+        ss.setItem('sbVisited','1');
+        h.style.display='none';
+        if(win._sbTimer){{clearTimeout(win._sbTimer);win._sbTimer=null;}}
+        if(win._sbPoll){{clearInterval(win._sbPoll);win._sbPoll=null;}}
+    }}
+    win._sbPoll=setInterval(function(){{
+        if(ss.getItem('sbVisited')){{clearInterval(win._sbPoll);return;}}
+        if(sidebarIsOpen())dismiss();
+    }},400);
+    win._sbTimer=setTimeout(function(){{
+        if(!ss.getItem('sbVisited')&&!sidebarIsOpen())h.style.display='flex';
+    }},20000);
 }})();
 </script>""", height=0)