Update app.py

app.py

@@ -353,6 +353,17 @@ def inject_custom_css():
         box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
     }
     
+    /* Secondary button */
+    .stButton button[kind="secondary"] {
+        background: #6c757d;
+        border: 1px solid #6c757d;
+    }
+    
+    .stButton button[kind="secondary"]:hover {
+        background: #5a6268;
+        border-color: #545b62;
+    }
+    
     /* Animations */
     @keyframes fadeIn {
         from { opacity: 0; transform: translateY(20px); }
@@ -370,31 +381,6 @@ def inject_custom_css():
         margin-top: 1rem;
     }
     
-    .action-btn {
-        padding: 0.4rem 0.8rem;
-        border: none;
-        border-radius: 8px;
-        font-size: 0.8rem;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.3s ease;
-    }
-    
-    .edit-btn {
-        background: #28a745;
-        color: white;
-    }
-    
-    .delete-btn {
-        background: #dc3545;
-        color: white;
-    }
-    
-    .action-btn:hover {
-        transform: translateY(-1px);
-        opacity: 0.9;
-    }
-    
     /* Responsive design */
     @media (max-width: 768px) {
         .main-header {
@@ -407,6 +393,16 @@ def inject_custom_css():
             padding: 6px 12px;
         }
     }
+    
+    /* Modal-like form styling */
+    .edit-form-container {
+        background: white;
+        padding: 2rem;
+        border-radius: 15px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+        border: 1px solid #e0e0e0;
+        margin: 1rem 0;
+    }
     </style>
     """, unsafe_allow_html=True)
 
@@ -512,38 +508,61 @@ def render_create_account_tab():
     
     store = ProfileStore()
     
-    with st.form("create_account_form", clear_on_submit=True):
+    # Check if we're in edit mode
+    edit_mode = st.session_state.get("edit_profile", False)
+    current_profile = None
+    if edit_mode and st.session_state.get("username"):
+        current_profile = store.find_by_username(st.session_state["username"])
+    
+    with st.form("create_account_form", clear_on_submit=not edit_mode):
         col1, col2 = st.columns(2)
         
         with col1:
             username = st.text_input("👤 Username*", 
-                                   placeholder="Enter your unique username")
+                                   value=st.session_state.get("username", ""),
+                                   placeholder="Enter your unique username",
+                                   disabled=edit_mode)  # Cannot change username in edit mode
+            
             offers_text = st.text_area("🎯 Skills I Can Teach*", 
+                                     value=st.session_state.get("offers_text", ""),
                                      placeholder="Python programming\nWeb design\nPublic speaking\nData analysis",
                                      height=120,
                                      help="Enter one skill per line")
+            
             availability = st.text_input("⏰ Availability", 
+                                       value=st.session_state.get("availability", ""),
                                        placeholder="Weekends, Evenings after 6 PM")
         
         with col2:
             # Show current username if editing
-            current_username = st.session_state.get("username", "")
-            if current_username:
-                st.info(f"Currently editing: **{current_username}**")
+            if edit_mode and current_profile:
+                st.info(f"✏️ Editing profile: **{current_profile.username}**")
             
             wants_text = st.text_area("🎓 Skills I Want to Learn*", 
+                                    value=st.session_state.get("wants_text", ""),
                                     placeholder="Machine learning\nGraphic design\nDigital marketing\nSpanish language",
                                     height=120,
                                     help="Enter one skill per line")
+            
             preferences = st.text_input("💫 Preferences", 
+                                      value=st.session_state.get("preferences", ""),
                                       placeholder="Online sessions, English language")
         
         col1, col2 = st.columns(2)
         with col1:
-            submit_button = st.form_submit_button("🚀 Create Profile", use_container_width=True)
+            if edit_mode:
+                submit_button = st.form_submit_button("💾 Update Profile", use_container_width=True)
+            else:
+                submit_button = st.form_submit_button("🚀 Create Profile", use_container_width=True)
+        
         with col2:
-            if current_username:
-                delete_button = st.form_submit_button("🗑️ Delete Profile", use_container_width=True, type="secondary")
+            if edit_mode:
+                cancel_button = st.form_submit_button("❌ Cancel Edit", use_container_width=True, type="secondary")
+            else:
+                # Only show delete button if user has a profile
+                current_username = st.session_state.get("username", "")
+                if current_username and store.find_by_username(current_username):
+                    delete_button = st.form_submit_button("🗑️ Delete Profile", use_container_width=True, type="secondary")
         
         if submit_button:
             if not username.strip():
@@ -568,25 +587,31 @@ def render_create_account_tab():
                     st.session_state["wants_text"] = wants_text
                     st.session_state["availability"] = availability
                     st.session_state["preferences"] = preferences
+                    st.session_state["edit_profile"] = False  # Exit edit mode
                     st.success("✅ " + msg)
                     # Auto-redirect to Community tab
-                    st.session_state.current_tab = "Community"
                     st.rerun()
                 else:
                     st.error("❌ " + msg)
         
-        if current_username and delete_button:
-            ok, msg = store.delete(current_username)
-            if ok:
-                st.session_state["username"] = ""
-                st.session_state["offers_text"] = ""
-                st.session_state["wants_text"] = ""
-                st.session_state["availability"] = ""
-                st.session_state["preferences"] = ""
-                st.success("✅ " + msg)
-                st.rerun()
-            else:
-                st.error("❌ " + msg)
+        if edit_mode and cancel_button:
+            st.session_state["edit_profile"] = False
+            st.rerun()
+        
+        if not edit_mode and 'delete_button' in locals() and delete_button:
+            current_username = st.session_state.get("username", "")
+            if current_username:
+                ok, msg = store.delete(current_username)
+                if ok:
+                    st.session_state["username"] = ""
+                    st.session_state["offers_text"] = ""
+                    st.session_state["wants_text"] = ""
+                    st.session_state["availability"] = ""
+                    st.session_state["preferences"] = ""
+                    st.success("✅ " + msg)
+                    st.rerun()
+                else:
+                    st.error("❌ " + msg)
 
 def render_community_tab():
     """Community tab with modern card layout"""
@@ -625,65 +650,75 @@ def render_community_tab():
             render_profile_card(profile, store)
 
 def render_profile_card(profile: Profile, store: ProfileStore):
-    """Render a single profile card"""
+    """Render a single profile card with proper data display"""
     current_user = st.session_state.get("username", "")
     is_current_user = current_user.lower() == profile.username.lower()
     
-    st.markdown(f"""
-    <div class="profile-card fade-in">
-        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem;">
-            <h3 style="margin: 0; color: #333;">👤 {profile.username}</h3>
-            {f'<span style="background: #667eea; color: white; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem;">You</span>' if is_current_user else ''}
-        </div>
-        
-        <div style="margin-bottom: 1rem;">
-            <div style="margin-bottom: 0.8rem;">
-                <strong style="color: #667eea;">🎯 Teaches:</strong><br>
-                <div style="margin-top: 0.5rem;">
-                    {" ".join([f'<span class="skill-tag">{skill}</span>' for skill in profile.offers]) if profile.offers else "<span style='color: #999;'>No skills listed</span>"}
-                </div>
-            </div>
-            <div>
-                <strong style="color: #667eea;">🎓 Wants to Learn:</strong><br>
-                <div style="margin-top: 0.5rem;">
-                    {" ".join([f'<span class="skill-tag skill-tag-want">{skill}</span>' for skill in profile.wants]) if profile.wants else "<span style='color: #999;'>No skills listed</span>"}
-                </div>
+    # Create the card content using Streamlit components instead of raw HTML
+    with st.container():
+        st.markdown(f"""
+        <div class="profile-card fade-in">
+            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem;">
+                <h3 style="margin: 0; color: #333;">👤 {profile.username}</h3>
+                {'<span style="background: #667eea; color: white; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem;">You</span>' if is_current_user else ''}
             </div>
         </div>
+        """, unsafe_allow_html=True)
         
-        <div style="font-size: 0.9rem; color: #666; margin-bottom: 1rem;">
-            {f"⏰ <strong>Available:</strong> {profile.availability}" if profile.availability else ""}
-            {f"<br>💫 <strong>Preferences:</strong> {profile.preferences}" if profile.preferences else ""}
-        </div>
-    </div>
-    """, unsafe_allow_html=True)
-    
-    # Action buttons for current user's profile
-    if is_current_user:
+        # Skills section
         col1, col2 = st.columns(2)
         with col1:
-            if st.button("✏️ Edit", key=f"edit_{profile.id}", use_container_width=True):
-                st.session_state["username"] = profile.username
-                st.session_state["offers_text"] = "\n".join(profile.offers)
-                st.session_state["wants_text"] = "\n".join(profile.wants)
-                st.session_state["availability"] = profile.availability
-                st.session_state["preferences"] = profile.preferences
-                st.session_state.current_tab = "Create Account"
-                st.rerun()
+            st.write("**🎯 Teaches:**")
+            if profile.offers:
+                for skill in profile.offers:
+                    st.markdown(f'<span class="skill-tag">{skill}</span>', unsafe_allow_html=True)
+            else:
+                st.write("No skills listed")
+        
         with col2:
-            if st.button("🗑️ Delete", key=f"delete_{profile.id}", use_container_width=True, type="secondary"):
-                ok, msg = store.delete(profile.username)
-                if ok:
-                    if st.session_state.get("username") == profile.username:
-                        st.session_state["username"] = ""
-                        st.session_state["offers_text"] = ""
-                        st.session_state["wants_text"] = ""
-                        st.session_state["availability"] = ""
-                        st.session_state["preferences"] = ""
-                    st.success("✅ " + msg)
+            st.write("**🎓 Wants to Learn:**")
+            if profile.wants:
+                for skill in profile.wants:
+                    st.markdown(f'<span class="skill-tag skill-tag-want">{skill}</span>', unsafe_allow_html=True)
+            else:
+                st.write("No skills listed")
+        
+        # Additional details
+        if profile.availability or profile.preferences:
+            st.write("---")
+            if profile.availability:
+                st.write(f"**⏰ Available:** {profile.availability}")
+            if profile.preferences:
+                st.write(f"**💫 Preferences:** {profile.preferences}")
+        
+        # Action buttons for current user's profile
+        if is_current_user:
+            st.write("---")
+            col1, col2 = st.columns(2)
+            with col1:
+                if st.button("✏️ Edit", key=f"edit_{profile.id}", use_container_width=True):
+                    st.session_state["username"] = profile.username
+                    st.session_state["offers_text"] = "\n".join(profile.offers)
+                    st.session_state["wants_text"] = "\n".join(profile.wants)
+                    st.session_state["availability"] = profile.availability
+                    st.session_state["preferences"] = profile.preferences
+                    st.session_state["edit_profile"] = True
                     st.rerun()
-                else:
-                    st.error("❌ " + msg)
+            with col2:
+                if st.button("🗑️ Delete", key=f"delete_{profile.id}", use_container_width=True, type="secondary"):
+                    ok, msg = store.delete(profile.username)
+                    if ok:
+                        if st.session_state.get("username") == profile.username:
+                            st.session_state["username"] = ""
+                            st.session_state["offers_text"] = ""
+                            st.session_state["wants_text"] = ""
+                            st.session_state["availability"] = ""
+                            st.session_state["preferences"] = ""
+                            st.session_state["edit_profile"] = False
+                        st.success("✅ " + msg)
+                        st.rerun()
+                    else:
+                        st.error("❌ " + msg)
 
 def render_matches_tab():
     """AI Matches tab"""
@@ -789,6 +824,8 @@ def main():
     # Initialize session state
     if "current_tab" not in st.session_state:
         st.session_state.current_tab = "Dashboard"
+    if "edit_profile" not in st.session_state:
+        st.session_state.edit_profile = False
     
     # Inject custom CSS
     inject_custom_css()