Refactor: Switch to horizontal tabs in Code Studio

pages/1_⚡_Code_Studio.py

@@ -29,76 +29,44 @@ if "processed_files" not in st.session_state or not st.session_state.processed_f
     st.stop()
 
 # --- Layout ---
-# We use a custom 3-column layout to mimic IDE
-# Col 1: Activity Bar (Narrow, just icons)
-# Col 2: Side Panel (Resizable-ish via column ratio, contains the active tool)
-# Col 3: Main Editor (Wide, contains code)
+# We use a 2-column layout: Side Panel (with Tabs) | Main Editor
+# Ratio: 3.5 : 6.5
+col_panel, col_editor = st.columns([3.5, 6.5])
 
-# Define column ratios
-# Activity bar needs to be very narrow. Streamlit cols are proportional.
-# Ratio: 0.5 : 3 : 7
-col_activity, col_panel, col_editor = st.columns([0.5, 3, 7])
-
-# --- 1. Activity Bar ---
-with col_activity:
-    # We use a vertical layout of buttons. 
-    # To make them look like tabs, we can use a custom component or just buttons that update state.
-    # Current limitation: Buttons rerun app. That's fine for Streamlit.
-    
-    st.markdown("<div style='margin-top: 10px;'></div>", unsafe_allow_html=True)
-    
-    # Explorer Tab
-    if st.button("📁", key="tab_explorer", help="Explorer", use_container_width=True):
-        st.session_state.active_tab = "explorer"
-    
-    # Search Tab
-    if st.button("🔍", key="tab_search", help="Search", use_container_width=True):
-        st.session_state.active_tab = "search"
-        
-    # Chat Tab
-    if st.button("💬", key="tab_chat", help="Chat", use_container_width=True):
-        st.session_state.active_tab = "chat"
-        
-    # Generate Tab
-    if st.button("✨", key="tab_generate", help="Generate", use_container_width=True):
-        st.session_state.active_tab = "generate"
-
-    # Settings / Home (Exit)
-    st.markdown("<div style='margin-top: 50vh;'></div>", unsafe_allow_html=True)
-    if st.button("🏠", key="tab_home", help="Back to Home", use_container_width=True):
-        st.switch_page("app.py")
-
-
-# --- 2. Side Panel ---
+# --- Side Panel (Tabs) ---
 with col_panel:
-    active_tab = st.session_state.active_tab
+    # Use native Streamlit tabs for horizontal navigation
+    tab_explorer, tab_search, tab_chat, tab_generate = st.tabs(["📁 Explorer", "🔍 Search", "💬 Chat", "✨ Generate"])
     
-    if active_tab == "explorer":
-        st.markdown("### 📁 Explorer")
+    with tab_explorer:
+        st.markdown("### 📁 Project Files")
         render_file_tree(
             st.session_state.get("indexed_files", []),
             st.session_state.get("workspace_root", "")
         )
         
-    elif active_tab == "search":
+        st.divider()
+        if st.button("🏠 Home", use_container_width=True):
+            st.switch_page("app.py")
+
+    with tab_search:
         render_search_panel(st.session_state.get("indexed_files", []))
-        
-    elif active_tab == "chat":
+
+    with tab_chat:
         chat_engine = st.session_state.get("chat_engine")
         if chat_engine:
             render_chat_panel(chat_engine)
         else:
-            st.error("Chat engine unavailable.")
-            
-    elif active_tab == "generate":
+            st.error("Chat engine unavailable. Please index a codebase first.")
+
+    with tab_generate:
         chat_engine = st.session_state.get("chat_engine")
         if chat_engine:
             render_generate_panel(chat_engine, st.session_state.get("indexed_files", []))
         else:
             st.error("Chat engine unavailable.")
 
-
-# --- 3. Main Editor ---
+# --- Main Editor ---
 with col_editor:
     # If a file is selected, show it. Otherwise show welcome/empty state.
     selected_file = st.session_state.get("selected_file")
@@ -108,7 +76,7 @@ with col_editor:
         with st.container():
             # Breadcrumbs / File Header
             filename = os.path.basename(selected_file)
-            st.markdown(f"**{filename}**")
+            st.caption(f"Editing: {filename}")
             
             # Code Viewer
             render_code_viewer_simple(selected_file)
@@ -120,7 +88,7 @@ with col_editor:
             <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; opacity: 0.5;">
                 <h1>⚡ Code Studio</h1>
                 <p>Select a file from the explorer to view context.</p>
-                <p>Use the activity bar on the left to toggle tools.</p>
+                <p>Use the tabs on the left to switch between tools.</p>
             </div>
             """, 
             unsafe_allow_html=True