Update app.py

app.py

@@ -1,46 +1,153 @@
 import streamlit as st 
 
+import time
+from datetime import datetime
+
 # Set page config
-st.set_page_config(page_title="Fixed Top Toolbar", layout="wide")
+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")
 
-# CSS to fix the entire top toolbar
+# 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>
-    /* Target the entire header/toolbar section */
-    header[data-testid="stHeader"],
-    header.css-18ni7ap.e8zbici2,
-    .stApp > header {
-        position: fixed !important;
+    /* Fix the first container to serve as our header */
+    .stApp > div:first-child {
+        position: sticky !important;
         top: 0 !important;
-        left: 0 !important;
-        right: 0 !important;
-        height: auto !important;
-        z-index: 999999 !important;
         background-color: white !important;
-        box-shadow: 0 1px 5px rgba(0,0,0,0.1) !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;
     }
     
-    /* Add padding to main content to prevent it being hidden under fixed header */
-    .main .block-container {
-        padding-top: 3rem !important;
+    /* Custom status indicator styles */
+    .status-indicator {
+        display: inline-block;
+        padding: 5px 10px;
+        border-radius: 4px;
+        margin-right: 10px;
     }
-    
-    /* Make sure status widget appears above other elements */
-    [data-testid="stStatusWidget"] {
-        z-index: 1000000 !important;
+    .status-running {
+        background-color: #ffeb3b;
+        color: #000;
+    }
+    .status-idle {
+        background-color: #4caf50;
+        color: white;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Your regular Streamlit app content
-st.title("App with Fixed Top Toolbar")
-st.write("Scroll down to test if the toolbar and status widget stay fixed")
+# 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!")
 
-# Generate content for scrolling
-for i in range(30):
-    st.write(f"Testing content line {i}")
-    if i % 5 == 0:
-        st.markdown("---")
+# 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")