← Whispering

feat: Complete UI layout with proper element ordering

4a7ab7487066830a1d65bf7e69387d29436232b3 · Claude · Dec 1, 2025 20:41

- Create output panels first, then sidebar
- Use move() to reposition sidebar to left in DOM order
- Pass output_container reference to sidebar for visibility control
- Set initial visibility based on state.text_visible

This completes the dynamic show/hide text panel feature request.

+9 −6 · 1 file changed

• src/whispering_ui/main.py +9 −6

diff --git a/src/whispering_ui/main.py b/src/whispering_ui/main.py
index bb6a11d..4da8b47 100644
--- a/src/whispering_ui/main.py
+++ b/src/whispering_ui/main.py
@@ -104,18 +104,21 @@ def main():
     # === UI LAYOUT ===
     ui.page_title('Whispering')
 
-    # Create main container
+    # Create main container - sidebar on left, output on right
     with ui.row().classes('w-full h-screen'):
-        # Output panels (always created, visibility controlled by state)
+        # Create output panels first (but will be positioned on right)
         output_container = create_output_panels(state)
 
-        # Set initial visibility
+        # Sidebar on left - pass output container so it can toggle visibility
+        sidebar_container = create_sidebar(state, bridge, output_container)
+
+        # Move sidebar to the left (before output in DOM order)
+        sidebar_container.move(output_container)
+
+        # Set initial visibility of output
         if not state.text_visible:
             output_container.set_visibility(False)
 
-        # Sidebar (always visible) - created after output so it can control it
-        create_sidebar(state, bridge, output_container)
-
     # === SAVE SETTINGS ON EXIT ===
     def save_settings_on_exit():
         """Save settings before application closes."""