app.py

import streamlit as st 


import time

# Set page config
st.set_page_config(page_title="Reliable Sticky Status", layout="wide")

# Create an empty container at the top that will serve as our sticky status container
sticky_container = st.empty()

# Use JavaScript to track the real status widget and mirror its state to our custom container
js_code = """
<script>
// Function to observe changes in the status widget
function observeStatusWidget() {
    // Try to find the actual status widget
    const statusWidget = document.querySelector('[data-testid="stStatusWidget"]');
    const runningIndicator = document.querySelector('.stStatusWidget span:contains("Running")');
    const stopButton = document.querySelector('button[kind="formSubmit"]');
    
    // Update our custom status mirror
    const customStatus = document.getElementById('custom-status-mirror');
    if (customStatus) {
        if (runningIndicator) {
            customStatus.className = 'status-running';
            customStatus.textContent = 'RUNNING';
        } else {
            customStatus.className = 'status-idle';
            customStatus.textContent = 'IDLE';
        }
    }
    
    // Continue checking
    setTimeout(observeStatusWidget, 500);
}

// Start observing after a delay to ensure DOM is loaded
setTimeout(observeStatusWidget, 1000);
</script>

<style>
    /* Position the sticky container */
    #sticky-status-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: white;
        padding: 10px;
        z-index: 9999;
        border-bottom: 1px solid #ddd;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Style the status indicators */
    #custom-status-mirror {
        padding: 5px 10px;
        border-radius: 4px;
        font-weight: bold;
    }
    
    .status-running {
        background-color: #ffeb3b;
        color: #000;
    }
    
    .status-idle {
        background-color: #4caf50;
        color: white;
    }
    
    /* Add padding to prevent content from being hidden */
    body {
        padding-top: 60px;
    }
</style>

<div id="sticky-status-container">
    <h3>My Application</h3>
    <div class="status-container">
        <span id="custom-status-mirror" class="status-idle">IDLE</span>
    </div>
</div>
"""

# Add our JavaScript and custom sticky header
st.components.v1.html(js_code, height=50)

# Create a function to simulate a long-running process
def run_long_process():
    progress_bar = st.progress(0)
    for i in range(100):
        time.sleep(0.05)  # Simulate work being done
        progress_bar.progress(i + 1)
    st.success("Process completed!")

# Add a spacer to prevent content overlap with our sticky header
st.markdown("<div style='height: 20px'></div>", unsafe_allow_html=True)

# Main content of the application
st.title("Application with Status Mirror")
st.write("This app demonstrates a custom sticky status indicator")

# Add a button to trigger a process
if st.button("Run Process"):
    run_long_process()

# Add content to demonstrate scrolling
st.markdown("## Sample Content")
for i in range(30):
    st.write(f"Content line {i}")
    if i % 10 == 0:
        st.markdown(f"### Section {i//10 + 1}")

# --- SHARED ON ALL PAGES ---
st.logo(image="images/menu_book_60dp_75FBFD.png")
st.sidebar.title("SBS V2.0 mapper")
st.sidebar.subheader("(work in progress)")
st.sidebar.text("Demo by JA-RAD")

# --- PAGE SETUP ---
type_text_page = st.Page(
    page="pages/type_text.py",
    title="DEMO (work in progress)",
    icon=":material/keyboard:",
    default=True,)

# --- NAVIGATION SETUP ---
pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
#pg = st.navigation({"Chapter_Index": [start_page], "Demo": [type_text_page, upload_file_page], "About": [about_page]}) # WITH SECTIONS
pg.run()