app.py

import streamlit as st 

import time
from datetime import datetime

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

# Initialize session state for our custom status indicator
if 'last_update' not in st.session_state:
    st.session_state.last_update = datetime.now().strftime("%H:%M:%S")
if 'is_running' not in st.session_state:
    st.session_state.is_running = False

# Function to toggle the running state
def toggle_running_state():
    st.session_state.is_running = not st.session_state.is_running
    st.session_state.last_update = datetime.now().strftime("%H:%M:%S")

# Function to simulate a computation/process
def run_process():
    with st.spinner("Running process..."):
        # Simulate work
        time.sleep(3)
        st.success("Process completed!")
        st.session_state.is_running = False
        st.session_state.last_update = datetime.now().strftime("%H:%M:%S")

# Create a container for our fixed header
header = st.container()

# Add CSS to fix our custom status indicator at the top
st.markdown("""
<style>
    /* Fix the first container to serve as our header */
    .stApp > div:first-child {
        position: sticky !important;
        top: 0 !important;
        background-color: white !important;
        z-index: 999 !important;
        padding: 1rem !important;
        border-bottom: 1px solid #f0f0f0 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }
    
    /* Custom status indicator styles */
    .status-indicator {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
        margin-right: 10px;
    }
    .status-running {
        background-color: #ffeb3b;
        color: #000;
    }
    .status-idle {
        background-color: #4caf50;
        color: white;
    }
</style>
""", unsafe_allow_html=True)

# Create our custom status indicator in the header container
with header:
    cols = st.columns([3, 1])
    
    with cols[0]:
        st.title("App with Custom Status Indicator")
    
    with cols[1]:
        status_class = "status-running" if st.session_state.is_running else "status-idle"
        status_text = "RUNNING" if st.session_state.is_running else "IDLE"
        
        st.markdown(f"""
        <div style="display: flex; align-items: center; justify-content: flex-end;">
            <div class="status-indicator {status_class}">{status_text}</div>
            <div>Last update: {st.session_state.last_update}</div>
        </div>
        """, unsafe_allow_html=True)
        
        if st.button("Run Process" if not st.session_state.is_running else "Stop", 
                    key="run_button", 
                    on_click=toggle_running_state):
            # If we're now in running state, execute the process
            if st.session_state.is_running:
                run_process()

# Main content area
st.write("Scroll down to test if the custom status indicator stays visible")

# Add a separator
st.markdown("---")

# Create some tabs to organize content
tab1, tab2, tab3 = st.tabs(["Tab 1", "Tab 2", "Tab 3"])

with tab1:
    st.header("Tab 1 Content")
    st.write("This is the content of tab 1")
    
    # Add some sample content for scrolling
    for i in range(10):
        st.write(f"Content line {i} in tab 1")
    
    if st.button("Run Process in Tab 1"):
        with st.spinner("Running process in Tab 1..."):
            st.session_state.is_running = True
            time.sleep(2)
            st.session_state.is_running = False
            st.session_state.last_update = datetime.now().strftime("%H:%M:%S")
            st.success("Process completed in Tab 1!")

with tab2:
    st.header("Tab 2 Content")
    st.write("This is the content of tab 2")
    
    # Add some sample content for scrolling
    for i in range(10):
        st.write(f"Content line {i} in tab 2")
    
    if st.button("Run Process in Tab 2"):
        with st.spinner("Running process in Tab 2..."):
            st.session_state.is_running = True
            time.sleep(3)
            st.session_state.is_running = False
            st.session_state.last_update = datetime.now().strftime("%H:%M:%S")
            st.success("Process completed in Tab 2!")

with tab3:
    st.header("Tab 3 Content")
    st.write("This is the content of tab 3")
    
    # Add some sample content for scrolling
    for i in range(10):
        st.write(f"Content line {i} in tab 3")
    
    if st.button("Run Process in Tab 3"):
        with st.spinner("Running process in Tab 3..."):
            st.session_state.is_running = True
            time.sleep(4)
            st.session_state.is_running = False
            st.session_state.last_update = datetime.now().strftime("%H:%M:%S")
            st.success("Process completed in Tab 3!")

# Add more content to ensure we have enough to scroll
st.markdown("---")
st.header("Additional Content")
for i in range(10):
    st.write(f"Additional content line {i}")

# --- 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()