Update app.py

app.py

@@ -50,10 +50,10 @@ def delete_records(ids):
 def create_html_component(records):
     html_template = """
     <style>
-        .song-list {
+        .record-list {
             font-family: Arial, sans-serif;
         }
-        .song-item {
+        .record-item {
             display: flex;
             align-items: center;
             margin-bottom: 10px;
@@ -61,41 +61,41 @@ def create_html_component(records):
             border: 1px solid #ddd;
             border-radius: 5px;
         }
-        .song-image {
+        .record-image {
             width: 50px;
             height: 50px;
             margin-right: 10px;
         }
-        .song-details {
+        .record-details {
             flex-grow: 1;
         }
-        .song-title {
+        .record-title {
             font-weight: bold;
         }
-        .song-description {
+        .record-description {
             font-style: italic;
             color: #666;
         }
-        .song-actions {
+        .record-actions {
             display: flex;
             align-items: center;
         }
-        .song-actions button {
+        .record-actions button {
             margin-left: 5px;
         }
     </style>
-    <div class="song-list">
+    <div class="record-list">
     """
     
     for record in records:
         html_template += f"""
-        <div class="song-item">
-            <img src="https://via.placeholder.com/50" class="song-image" alt="Song thumbnail">
-            <div class="song-details">
-                <div class="song-title">{record['name']}</div>
-                <div class="song-description">{record['document']}</div>
+        <div class="record-item">
+            <img src="https://via.placeholder.com/50" class="record-image" alt="Record thumbnail">
+            <div class="record-details">
+                <div class="record-title">{record['name']}</div>
+                <div class="record-description">{record['document']}</div>
             </div>
-            <div class="song-actions">
+            <div class="record-actions">
                 <button onclick="Streamlit.setComponentValue({{action: 'extend', id: '{record['id']}'}})">Extend</button>
                 <label>
                     Public
@@ -113,20 +113,6 @@ def create_html_component(records):
 # Streamlit app
 st.title("🌟 Cosmos DB Record Management")
 
-# Sidebar
-st.sidebar.title("Suno")
-st.sidebar.markdown("### Home")
-st.sidebar.markdown("### Create")
-st.sidebar.markdown("### Library")
-st.sidebar.markdown("### Explore (BETA)")
-st.sidebar.markdown("---")
-st.sidebar.markdown("2360 credits")
-st.sidebar.markdown("### Subscription")
-st.sidebar.markdown("### What's New? 5")
-st.sidebar.markdown("### Community")
-st.sidebar.markdown("### Help")
-st.sidebar.markdown("### About")
-
 # Login section
 if 'logged_in' not in st.session_state:
     st.session_state.logged_in = False
@@ -147,34 +133,33 @@ else:
     database = client.get_database_client(DATABASE_NAME)
     container = database.get_container_client(CONTAINER_NAME)
 
+    # Fetch all records
+    records_df = fetch_all_records()
+
+    # Sidebar for data editing
+    st.sidebar.title("Edit Records")
+    edited_df = st.sidebar.data_editor(records_df, num_rows="dynamic", key="sidebar_editor")
+
     # Main Content Area
-    st.title("Create")
-    st.checkbox("Custom Mode", key="custom_mode")
-    st.text_area("Song Description", "a futuristic anime song about a literal banana", key="song_description")
-    st.radio("Instrumental", ["Yes", "No"], key="instrumental")
-    st.selectbox("Version", ["v1", "v2", "v3"], key="version")
-    st.button("Create 🎵")
-
-    # Fetch and display all records
     st.subheader("📊 All Records")
-    records = fetch_all_records().to_dict('records')
     
     # Create and render the HTML component
-    html_component = create_html_component(records)
+    html_component = create_html_component(edited_df.to_dict('records'))
     component_value = html(html_component, height=400)
     
     # Handle component interactions
     if component_value:
-        action = component_value['action']
-        record_id = component_value['id']
-        if action == 'extend':
-            st.write(f"Extending record {record_id}")
-        elif action == 'toggle_public':
-            st.write(f"Toggling public status for record {record_id}")
-        elif action == 'like':
-            st.write(f"Liked record {record_id}")
-        elif action == 'dislike':
-            st.write(f"Disliked record {record_id}")
+        action = component_value.get('action')
+        record_id = component_value.get('id')
+        if action and record_id:
+            if action == 'extend':
+                st.write(f"Extending record {record_id}")
+            elif action == 'toggle_public':
+                st.write(f"Toggling public status for record {record_id}")
+            elif action == 'like':
+                st.write(f"Liked record {record_id}")
+            elif action == 'dislike':
+                st.write(f"Disliked record {record_id}")
 
     # Add delete and download buttons
     col1, col2 = st.columns(2)
@@ -183,7 +168,7 @@ else:
             st.warning("Deletion functionality needs to be implemented for the new component")
 
     with col2:
-        if st.download_button("📥 Download Data", pd.DataFrame(records).to_csv(index=False), "cosmos_db_data.csv", "text/csv"):
+        if st.download_button("📥 Download Data", edited_df.to_csv(index=False), "cosmos_db_data.csv", "text/csv"):
             st.success("Data downloaded successfully!")
 
     # Input fields for new record
@@ -248,4 +233,4 @@ else:
 
 # Preview section
 st.markdown("---")
-st.markdown("### Select a song to preview.")
+st.markdown("### Select a record to preview.")