From e96a5526005718c0cf34a8be1005e3bf1b1bd965 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 20:53:35 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20sidebar=20hint=20=E2=80=94=20use=20st.ht?=
 =?UTF-8?q?ml(),=20fix=20premature=20dismiss=20on=20open=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two bugs fixed:

1. Deprecation warning: replace st.components.v1.html with st.html()
   (available since Streamlit 1.36). st.html() renders inline in the
   main window so scripts execute without an iframe; window.parent and
   the associated cross-origin complexity are no longer needed.

2. Arrow never appeared: the previous poll called sidebarIsOpen() every
   400 ms and immediately set sbVisited='1' when the sidebar was already
   open on load, preventing the hint from ever showing. Fixed by
   introducing window._sbShowing: the poll only dismisses after the
   timer has actually made the hint visible. Also inverted the helper
   to sidebarIsClosed() (truthy = toggle button exists and is visible)
   to make the intent unambiguous.

https://claude.ai/code/session_01VTBKKYLiAQ6mDPdmVhpRAT
---
 finance_tracker/web/app.py | 59 +++++++++++++++++++-------------------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/finance_tracker/web/app.py b/finance_tracker/web/app.py
index db4a8af..8abbeca 100644
--- a/finance_tracker/web/app.py
+++ b/finance_tracker/web/app.py
@@ -13,7 +13,6 @@
 import html as _html
 import json
 import streamlit as st
-import streamlit.components.v1 as st_components
 import os
 from finance_tracker.web.db import get_session, get_db_path, get_engine
 from finance_tracker.web.navigation import build_pages
@@ -120,25 +119,21 @@ def render_db_manager():
             st.rerun()
 
         # Animated arrow hinting at the sidebar toggle after 20 s of inactivity.
-        # 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.
-        # 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.
+        # st.html() (Streamlit ≥1.36) renders inline and executes <script> tags
+        # directly in the main window — no iframe, no window.parent needed.
+        # The full innerHTML is built in Python so translation is guaranteed.
+        # _sbShowing guards the poll so it only dismisses after the hint is visible,
+        # preventing the poll from firing sbVisited before the hint ever appears.
         _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>
+        st.html(f"""<script>
 (function(){{
-    var doc=window.parent.document;
-    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');
+    if(window._sbHintInit)return;
+    window._sbHintInit=true;
+    if(sessionStorage.getItem('sbVisited'))return;
+    var s=document.createElement('style');
     s.textContent='@keyframes sb-bounce{{0%,100%{{transform:translate(0,0);opacity:1}}'
         +'50%{{transform:translate(-9px,-9px);opacity:.75}}}}'
         +'#_sb_hint{{display:none;position:fixed;top:68px;left:44px;z-index:99999;'
@@ -149,30 +144,34 @@ def render_db_manager():
         +'border-radius:10px;font-size:11px;white-space:nowrap;'
         +'font-family:sans-serif;font-weight:600;'
         +'box-shadow:0 2px 6px rgba(0,136,255,.4)}}';
-    doc.head.appendChild(s);
-    var h=doc.createElement('div');
+    document.head.appendChild(s);
+    var h=document.createElement('div');
     h.id='_sb_hint';
     h.innerHTML={_hint_inner};
-    doc.body.appendChild(h);
-    function sidebarIsOpen(){{
-        var btn=doc.querySelector('[data-testid="stSidebarCollapsedControl"]');
-        return !btn||getComputedStyle(btn).display==='none';
+    document.body.appendChild(h);
+    function sidebarIsClosed(){{
+        var btn=document.querySelector('[data-testid="stSidebarCollapsedControl"]');
+        return !!btn&&getComputedStyle(btn).display!=='none';
     }}
     function dismiss(){{
-        ss.setItem('sbVisited','1');
+        sessionStorage.setItem('sbVisited','1');
+        window._sbShowing=false;
         h.style.display='none';
-        if(win._sbTimer){{clearTimeout(win._sbTimer);win._sbTimer=null;}}
-        if(win._sbPoll){{clearInterval(win._sbPoll);win._sbPoll=null;}}
+        if(window._sbTimer){{clearTimeout(window._sbTimer);window._sbTimer=null;}}
+        if(window._sbPoll){{clearInterval(window._sbPoll);window._sbPoll=null;}}
     }}
-    win._sbPoll=setInterval(function(){{
-        if(ss.getItem('sbVisited')){{clearInterval(win._sbPoll);return;}}
-        if(sidebarIsOpen())dismiss();
+    window._sbPoll=setInterval(function(){{
+        if(sessionStorage.getItem('sbVisited')){{clearInterval(window._sbPoll);return;}}
+        if(window._sbShowing&&!sidebarIsClosed())dismiss();
     }},400);
-    win._sbTimer=setTimeout(function(){{
-        if(!ss.getItem('sbVisited')&&!sidebarIsOpen())h.style.display='flex';
+    window._sbTimer=setTimeout(function(){{
+        if(!sessionStorage.getItem('sbVisited')&&sidebarIsClosed()){{
+            h.style.display='flex';
+            window._sbShowing=true;
+        }}
     }},20000);
 }})();
-</script>""", height=0)
+</script>""")
 
         # Show documentation (needs no DB) so users aren't stranded on a blank page
         from finance_tracker.web.views.documentation import render as doc_render