code-crawler / pages /1_⚡_Code_Studio.py.bak
Asish Karthikeya Gogineni
Refactor: Code Structure Update & UI Redesign
a3bdcf1
"""
⚡ Code Studio - The Main IDE Interface
"""
import streamlit as st
import os
from components.style import apply_custom_css
from components.file_explorer import render_file_tree
from components.code_viewer import render_code_viewer_simple
from components.panels import render_chat_panel, render_search_panel, render_generate_panel
st.set_page_config(
page_title="Code Studio",
page_icon="⚡",
layout="wide",
initial_sidebar_state="collapsed" # Hide standard sidebar
)
apply_custom_css()
# --- State Management ---
if "active_tab" not in st.session_state:
st.session_state.active_tab = "explorer"
if "processed_files" not in st.session_state or not st.session_state.processed_files:
# If accessed directly without processing, redirect home
st.warning("⚠️ Please index a codebase first.")
if st.button("Go Home"):
st.switch_page("app.py")
st.stop()
# --- Layout Configuration ---
# Allow user to resize the split
with st.sidebar:
st.header("⚙️ Layout Settings")
split_ratio = st.slider(
"Panel Width (%)",
min_value=20,
max_value=80,
value=30,
step=5,
help="Adjust the width of the left panel (Chat/Explorer)."
)
# Calculate column ratios based on percentage
panel_width = split_ratio / 100.0
editor_width = 1.0 - panel_width
# Main Layout
col_panel, col_editor = st.columns([panel_width, editor_width])
# --- Side Panel (Tabs) ---
with col_panel:
# Use native Streamlit tabs for horizontal navigation
tab_explorer, tab_search, tab_chat, tab_generate = st.tabs(["📁 Explorer", "🔍 Search", "💬 Chat", "✨ Generate"])
with tab_explorer:
st.markdown("### 📁 Project Files")
render_file_tree(
st.session_state.get("indexed_files", []),
st.session_state.get("workspace_root", "")
)
st.divider()
if st.button("🏠 Index New Codebase", use_container_width=True):
st.session_state.processed_files = False
st.session_state.chat_engine = None
st.session_state.indexed_files = None
st.session_state.workspace_root = None
st.session_state.selected_file = None
st.switch_page("app.py")
with tab_search:
render_search_panel(st.session_state.get("indexed_files", []))
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. 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.")
# --- 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")
if selected_file:
# We use a container to ensure height consistency
with st.container():
# Alignment Spacer: Matches the height of st.tabs headers (~50px)
st.markdown("<div style='height: 50px;'></div>", unsafe_allow_html=True)
# Breadcrumbs / File Header
filename = os.path.basename(selected_file)
st.caption(f"Editing: {filename}")
# Code Viewer
render_code_viewer_simple(selected_file)
else:
# Empty State
st.markdown(
"""
<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 tabs on the left to switch between tools.</p>
</div>
""",
unsafe_allow_html=True
)