Update app.py

app.py

@@ -4,22 +4,21 @@ from written_module import written_dashboard
 from file_dashboard import file_based_learning_router
 from file_utils import save_nickname_to_db, load_latest_nickname
 
+
 def main_app():
     with gr.Blocks(css="light_mode_chatter_owl.css") as app:
         current_mode = gr.State("spoken")
+        dark_mode_state = gr.State("light")
+        sidebar_visible = gr.State(True)
 
-        with gr.Row():
-            # === Static Top Bar (with icons) ===
-            gr.Markdown("""
-                <div id="top-bar">
-                    <span id="collapse-left">☰</span>
-                    <span id="dark-mode-toggle">🌙</span>
-                </div>
-            """, elem_id="top-bar")
+        # === Header Top Bar ===
+        with gr.Row(elem_id="top-bar"):
+            collapse_btn = gr.Button("☰", elem_id="collapse-left", size="sm")
+            darkmode_btn = gr.Button("🌙", elem_id="dark-toggle", size="sm")
 
         with gr.Row():
             # === Sidebar ===
-            with gr.Column(scale=1, min_width=220, elem_id="sidebar"):
+            with gr.Column(scale=1, min_width=220, elem_id="sidebar") as sidebar:
                 gr.Markdown("""
                     <div id="brand-header">
                       <img src="images/chatternest_logo.png" alt="ChatterNest Logo" width="60" style="margin-bottom: 0.5em;">
@@ -37,29 +36,46 @@ def main_app():
                 nickname_input.change(fn=handle_nickname, inputs=[nickname_input], outputs=[nickname_display])
 
                 gr.Markdown("---")
-
-                # Navigation
-                btn_spoken = gr.Button("🗣 Spoken Communication")
+                btn_spoken = gr.Button("🔡 Spoken Communication")
                 btn_written = gr.Button("✍️ Written Communication")
                 gr.Markdown("### 📄 File-Based Learning")
-                btn_file_study = gr.Button(" 📘 Study Guides")
-                btn_file_view = gr.Button(" 📁 Files")
-
+                btn_file_study = gr.Button("\u2003📘 Study Guides")
+                btn_file_view = gr.Button("\u2003📁 Files")
                 gr.Markdown("---")
 
             # === Main View Panels ===
-            with gr.Column(scale=4, elem_classes=["main-content"]):
-                nickname_display  # Optional name confirmation message
-
+            with gr.Column(scale=4, elem_classes=["main-content"], elem_id="main-column") as main_column:
+                nickname_display
                 with gr.Column(visible=True, elem_id="module-wrapper") as spoken_panel:
-                    spoken_dashboard(nickname_input)  # ✅ pass textbox directly
+                    spoken_dashboard(nickname_input)
 
                 with gr.Column(visible=False, elem_id="module-wrapper") as written_panel:
-                    written_dashboard(nickname_input)  # ✅ pass textbox directly
+                    written_dashboard(nickname_input)
 
                 file_router, switch_view, study_panel, file_panel = file_based_learning_router(nickname_input)
 
-        # === Mode Visibility Logic ===
+        # === Toggle Sidebar Logic ===
+        def toggle_sidebar(current):
+            return gr.update(visible=not current), not current
+
+        collapse_btn.click(
+            fn=toggle_sidebar,
+            inputs=[sidebar_visible],
+            outputs=[sidebar, sidebar_visible]
+        )
+
+        # === Toggle Dark Mode Logic ===
+        def toggle_theme(current_theme):
+            new_theme = "dark" if current_theme == "light" else "light"
+            return app.set_theme(new_theme), new_theme
+
+        darkmode_btn.click(
+            fn=toggle_theme,
+            inputs=[dark_mode_state],
+            outputs=[dark_mode_state]
+        )
+
+        # === Mode Switching Logic ===
         def switch_mode(mode):
             return (
                 gr.update(visible=(mode == "spoken")),
@@ -69,20 +85,17 @@ def main_app():
                 mode
             )
 
-        # === Button Hooks ===
         btn_spoken.click(fn=switch_mode, inputs=[gr.State("spoken")],
                          outputs=[spoken_panel, written_panel, study_panel, file_panel, current_mode])
-
         btn_written.click(fn=switch_mode, inputs=[gr.State("written")],
                           outputs=[spoken_panel, written_panel, study_panel, file_panel, current_mode])
-
         btn_file_study.click(fn=switch_mode, inputs=[gr.State("study")],
                              outputs=[spoken_panel, written_panel, study_panel, file_panel, current_mode])
-
         btn_file_view.click(fn=switch_mode, inputs=[gr.State("file")],
                             outputs=[spoken_panel, written_panel, study_panel, file_panel, current_mode])
 
     return app
 
+
 if __name__ == "__main__":
     main_app().launch(server_name="0.0.0.0", server_port=7860)