import streamlit as st
import streamlit.components.v1 as components
def main():
# Set the page configuration
st.set_page_config(page_title="Decks Sidebar UI from Spec", layout="wide")
# Sidebar: Deck selector and Tips & Settings links
st.sidebar.title("Decks Sidebar")
# Deck selector: simulate multiple decks
decks = ["Deck 1", "Deck 2"]
selected_deck = st.sidebar.selectbox("Select a Deck", decks)
st.sidebar.markdown(f"**Current Deck:** {selected_deck}")
# Tips and settings section in sidebar
st.sidebar.markdown("### Tips and Settings")
st.sidebar.markdown("- [Manage Decks](#)")
st.sidebar.markdown("- [Change Display Settings](#)")
st.sidebar.markdown("- [Discover Keyboard Shortcuts](#)")
st.sidebar.markdown("- [Take the Tour Again](#)")
# Main area: Header and embedded drag-and-drop columns list
st.header(f"Columns in {selected_deck}")
# HTML + JavaScript for a draggable list using SortableJS
html_code = """
-
Column 1
☰
-
Column 2
☰
-
Column 3
☰
"""
# Embed the HTML in the main area (adjust height as needed)
components.html(html_code, height=400, scrolling=True)
if __name__ == '__main__':
main()