Skip to content

fix: sidebar hint arrow now actually executes (st_components.html) #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SKOHscripts merged 1 commit into from
May 26, 2026
Merged

fix: sidebar hint arrow now actually executes (st_components.html) #28

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 18 additions & 13 deletions finance_tracker/web/app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"""
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
Expand Down Expand Up @@ -118,14 +119,18 @@ def render_db_manager():
st.rerun()

# Animated arrow hinting at the sidebar toggle after 20 s of inactivity.
# Injected into document.body via JS so it survives Streamlit re-renders.
# 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"))
st.markdown(f"""<script>
st_components.html(f"""<script>
(function(){{
if(window._sbHintInit)return;
window._sbHintInit=true;
if(sessionStorage.getItem('sbVisited'))return;
var s=document.createElement('style');
var doc=window.parent.document;
var ss=window.parent.sessionStorage;
if(window.parent._sbHintInit)return;
window.parent._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}}'
+'50%{{transform:translate(-9px,-9px);opacity:.75}}}}'
+'#_sb_hint{{display:none;position:fixed;top:68px;left:44px;z-index:99999;'
Expand All @@ -136,19 +141,19 @@ 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)}}';
document.head.appendChild(s);
var h=document.createElement('div');
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>';
document.body.appendChild(h);
doc.body.appendChild(h);
var timer=setTimeout(function(){{
if(!sessionStorage.getItem('sbVisited'))h.style.display='flex';
if(!ss.getItem('sbVisited'))h.style.display='flex';
}},20000);
function watch(){{
var btn=document.querySelector('[data-testid="stSidebarCollapsedControl"]');
var btn=doc.querySelector('[data-testid="stSidebarCollapsedControl"]');
if(btn){{
btn.addEventListener('click',function(){{
sessionStorage.setItem('sbVisited','1');
ss.setItem('sbVisited','1');
clearTimeout(timer);
h.style.display='none';
}},{{once:true}});
Expand All @@ -158,7 +163,7 @@ def render_db_manager():
}}
watch();
}})();
</script>""", unsafe_allow_html=True)
</script>""", height=0)

# 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
Expand Down
Loading