Update app.py

app.py

@@ -1,16 +1,14 @@
-from __future__ import annotations
-
-import streamlit as st
+# app.py
+"""
+AI Skill Swap — Unified App (Backend + Module 2 + Module 3 UI)
+Features:
+- JSON-backed ProfileStore (create / read / update / delete)
+- Groq LLM integration with robust error handling
+- Streamlit UI with animated success messages
+- Single-file, drop-in replacement for your previous app.py
+"""
 
-# Set page config as the VERY FIRST Streamlit command
-st.set_page_config(
-    page_title="AI Skill Swap",
-    page_icon="🤝",
-    layout="wide",
-    initial_sidebar_state="expanded"
-)
-
-# Now import other modules
+from __future__ import annotations
 import os
 import json
 import uuid
@@ -20,11 +18,13 @@ from dataclasses import dataclass, asdict
 from pathlib import Path
 from typing import List, Dict, Any, Optional, Tuple
 
-# Lazy import Groq
+import streamlit as st
+
+# Lazy import Groq so app runs without the package if not installed.
 try:
     from groq import Groq
 except Exception:
-    Groq = None
+    Groq = None  # type: ignore
 
 # ---------- Config ----------
 DATA_FILE = Path("users.json")
@@ -32,6 +32,7 @@ MODEL = "llama-3.3-70b-versatile"
 if not DATA_FILE.exists():
     DATA_FILE.write_text("[]", encoding="utf-8")
 
+
 # ---------- Data model ----------
 @dataclass
 class Profile:
@@ -56,13 +57,16 @@ class Profile:
     def to_dict(self) -> Dict[str, Any]:
         return asdict(self)
 
+
 # ---------- Storage & Validation ----------
 class ProfileStore:
-    def __init__(self, path: Path = DATA_FILE):
+    """JSON file-backed profile store."""
+
+    def __init__(self, path: Path = DATA_FILE) -> None:
         self.path = path
         self._ensure_file()
 
-    def _ensure_file(self):
+    def _ensure_file(self) -> None:
         if not self.path.exists():
             self.path.write_text("[]", encoding="utf-8")
 
@@ -71,9 +75,10 @@ class ProfileStore:
             data = json.loads(self.path.read_text(encoding="utf-8"))
             return [Profile.from_dict(d) for d in data if isinstance(d, dict)]
         except json.JSONDecodeError:
+            # Corrupted file -> return empty list
             return []
 
-    def save_all(self, profiles: List[Profile]):
+    def save_all(self, profiles: List[Profile]) -> None:
         data = [p.to_dict() for p in profiles]
         self.path.write_text(json.dumps(data, indent=2, ensure_ascii=False), encoding="utf-8")
 
@@ -98,13 +103,13 @@ class ProfileStore:
             existing.availability = profile.availability
             existing.preferences = profile.preferences
             self.save_all(profiles)
-            return True, "Profile updated successfully! 🎉"
+            return True, "Profile updated."
         else:
             if not profile.id:
                 profile.id = str(uuid.uuid4())
             profiles.append(profile)
             self.save_all(profiles)
-            return True, "Profile created successfully! 🎉"
+            return True, "Profile created."
 
     def delete(self, username: str) -> Tuple[bool, str]:
         profiles = self.load_all()
@@ -112,7 +117,8 @@ class ProfileStore:
         if len(new) == len(profiles):
             return False, "Profile not found."
         self.save_all(new)
-        return True, "Profile deleted successfully."
+        return True, "Profile deleted."
+
 
 def validate_profile(profile: Profile) -> Tuple[bool, Optional[str]]:
     if not profile.username or not profile.username.strip():
@@ -128,6 +134,7 @@ def validate_profile(profile: Profile) -> Tuple[bool, Optional[str]]:
             return False, "Individual skill entries must be 120 characters or fewer."
     return True, None
 
+
 # ---------- Utilities ----------
 def normalize_skill_list(text: Optional[str]) -> List[str]:
     if not text:
@@ -143,6 +150,7 @@ def normalize_skill_list(text: Optional[str]) -> List[str]:
             out.append(it)
     return out
 
+
 def make_prompt_for_matching(current_user: Profile, all_users: List[Profile], top_k: int = 5) -> Tuple[str, str]:
     users_desc = []
     for u in all_users:
@@ -174,6 +182,7 @@ def make_prompt_for_matching(current_user: Profile, all_users: List[Profile], to
 
     return system_instructions, user_message
 
+
 # ---------- Groq LLM helper ----------
 def init_groq_client():
     api_key = os.environ.get("GROQ_API_KEY")
@@ -186,6 +195,7 @@ def init_groq_client():
     except Exception:
         return None
 
+
 def ask_groq_for_matches(system_instructions: str, user_message: str, model: str = MODEL) -> List[Dict[str, Any]]:
     client = init_groq_client()
     if client is None:
@@ -199,6 +209,7 @@ def ask_groq_for_matches(system_instructions: str, user_message: str, model: str
     except Exception as e:
         raise RuntimeError(f"Groq call failed: {e}")
     content = (resp.choices[0].message.content or "")
+    # Try to extract JSON array from model response
     json_match = re.search(r"(\[\s*\{[\s\S]*?\}\s*\])", content)
     if not json_match:
         raise RuntimeError(f"No JSON array found in LLM response. Raw output:\n{content[:1000]}")
@@ -210,653 +221,120 @@ def ask_groq_for_matches(system_instructions: str, user_message: str, model: str
     except json.JSONDecodeError as e:
         raise RuntimeError(f"Failed to parse JSON from LLM output: {e}\nRaw:\n{content[:1000]}")
 
-# ---------- Modern UI Components ----------
-def inject_custom_css():
-    st.markdown("""
-    <style>
-    /* Modern header styling */
-    .main-header {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        padding: 2rem;
-        border-radius: 15px;
-        color: white;
-        margin-bottom: 2rem;
-        text-align: center;
-        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
-    }
-    
-    /* Tab styling */
-    .stTabs [data-baseweb="tab-list"] {
-        gap: 8px;
-        background: transparent;
-    }
-    
-    .stTabs [data-baseweb="tab"] {
-        height: 50px;
-        white-space: pre-wrap;
-        border-radius: 10px 10px 0px 0px;
-        gap: 8px;
-        padding: 8px 16px;
-        background: #f8f9fa;
-        border: 1px solid #e9ecef;
-        font-weight: 600;
-        transition: all 0.3s ease;
-    }
-    
-    .stTabs [aria-selected="true"] {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-        color: white !important;
-        border-color: #667eea !important;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-    }
-    
-    /* Card styling */
-    .feature-card {
-        background: white;
-        padding: 1.5rem;
-        border-radius: 15px;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-        border-left: 4px solid #667eea;
-        margin-bottom: 1rem;
-        transition: transform 0.3s ease;
-        height: 100%;
-    }
-    
-    .feature-card:hover {
-        transform: translateY(-5px);
-    }
-    
-    .profile-card {
-        background: white;
-        padding: 1.5rem;
-        border-radius: 15px;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
-        margin-bottom: 1rem;
-        border: 1px solid #e0e0e0;
-        transition: all 0.3s ease;
-    }
-    
-    .profile-card:hover {
-        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
-        transform: translateY(-2px);
-    }
-    
-    .match-card {
-        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-        color: white;
-        padding: 1.5rem;
-        border-radius: 15px;
-        margin-bottom: 1rem;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-    }
-    
-    /* Skill tags */
-    .skill-tag {
-        display: inline-block;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        padding: 0.3rem 0.8rem;
-        border-radius: 20px;
-        margin: 0.2rem;
-        font-size: 0.8rem;
-        font-weight: 500;
-        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
-    }
-    
-    .skill-tag-want {
-        background: linear-gradient(135deg, #fd746c 0%, #ff9068 100%);
-    }
-    
-    /* Stats cards */
-    .stats-card {
-        background: white;
-        padding: 1.5rem;
-        border-radius: 15px;
-        text-align: center;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
-        border-top: 4px solid #667eea;
-        transition: transform 0.3s ease;
-    }
-    
-    .stats-card:hover {
-        transform: translateY(-3px);
-    }
-    
-    /* Form styling */
-    .stTextInput input, .stTextArea textarea {
-        border-radius: 10px !important;
-        border: 2px solid #e0e0e0 !important;
-        padding: 0.8rem !important;
-        transition: all 0.3s ease;
-    }
-    
-    .stTextInput input:focus, .stTextArea textarea:focus {
-        border-color: #667eea !important;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
-    }
-    
-    /* Button styling */
-    .stButton button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        border: none;
-        padding: 0.7rem 1.5rem;
-        border-radius: 10px;
-        font-weight: 600;
-        transition: all 0.3s ease;
-        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-    }
-    
-    .stButton button:hover {
-        transform: translateY(-2px);
-        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); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-    
-    .fade-in {
-        animation: fadeIn 0.6s ease-out;
-    }
-    
-    /* Action buttons in cards */
-    .action-buttons {
-        display: flex;
-        gap: 8px;
-        margin-top: 1rem;
-    }
-    
-    /* Responsive design */
-    @media (max-width: 768px) {
-        .main-header {
-            padding: 1rem;
-            margin-bottom: 1rem;
-        }
-        
-        .stTabs [data-baseweb="tab"] {
-            font-size: 0.8rem;
-            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)
-
-def render_modern_header():
-    st.markdown("""
-    <div class="main-header fade-in">
-        <h1 style="margin:0; font-size: 2.5rem;">🤝 AI Skill Swap</h1>
-        <p style="margin:0; font-size: 1.2rem; opacity: 0.9;">Connect • Learn • Grow Together</p>
-    </div>
-    """, unsafe_allow_html=True)
-
-def render_dashboard_tab():
-    """Dashboard tab with stats and features"""
-    st.markdown("## 🎯 Dashboard Overview")
-    
-    store = ProfileStore()
-    profiles = store.load_all()
-    current_user = None
-    if st.session_state.get("username"):
-        current_user = store.find_by_username(st.session_state["username"])
-    
-    # Stats cards
-    col1, col2, col3, col4 = st.columns(4)
-    with col1:
-        st.markdown(f"""
-        <div class="stats-card">
-            <h3>👥</h3>
-            <h2 style="margin:0; color: #667eea;">{len(profiles)}</h2>
-            <p style="margin:0; color: #666;">Community Members</p>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    with col2:
-        total_skills = sum(len(p.offers) + len(p.wants) for p in profiles)
-        st.markdown(f"""
-        <div class="stats-card">
-            <h3>🎯</h3>
-            <h2 style="margin:0; color: #667eea;">{total_skills}</h2>
-            <p style="margin:0; color: #666;">Skills Shared</p>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    with col3:
-        active_matches = len([p for p in profiles if p.offers and p.wants])
-        st.markdown(f"""
-        <div class="stats-card">
-            <h3>🤝</h3>
-            <h2 style="margin:0; color: #667eea;">{active_matches}</h2>
-            <p style="margin:0; color: #666;">Active Learners</p>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    with col4:
-        status = "Ready!" if current_user else "Create Profile"
-        st.markdown(f"""
-        <div class="stats-card">
-            <h3>👤</h3>
-            <h2 style="margin:0; color: #667eea;">{status}</h2>
-            <p style="margin:0; color: #666;">Your Status</p>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    # Feature cards
-    st.markdown("## 🚀 How It Works")
-    col1, col2, col3 = st.columns(3)
-    
-    with col1:
-        st.markdown("""
-        <div class="feature-card">
-            <h3 style="color: #667eea;">📝 Create Profile</h3>
-            <p style="color: #555;">List skills you can teach and want to learn. Set your availability and preferences.</p>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    with col2:
-        st.markdown("""
-        <div class="feature-card">
-            <h3 style="color: #667eea;">🤖 AI Matching</h3>
-            <p style="color: #555;">Our AI finds perfect skill exchange partners based on mutual interests.</p>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    with col3:
-        st.markdown("""
-        <div class="feature-card">
-            <h3 style="color: #667eea;">🎯 Connect & Learn</h3>
-            <p style="color: #555;">Connect with matches and start your skill exchange journey together!</p>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    # Quick start guide
-    if not current_user:
-        st.markdown("""
-        <div class="feature-card" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border: none;">
-            <h3 style="color: #333;">🎉 Get Started!</h3>
-            <p style="color: #555;">Go to the <strong>Create Account</strong> tab to create your profile and start finding perfect skill exchange partners!</p>
-        </div>
-        """, unsafe_allow_html=True)
-
-def render_create_account_tab():
-    """Create Account tab with profile form"""
-    st.markdown("## 👤 Create Your Profile")
-    
-    store = ProfileStore()
-    
-    # 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*", 
-                                   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
-            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:
-            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 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():
-                st.error("❌ Please enter a username!")
-            elif not offers_text.strip() and not wants_text.strip():
-                st.error("❌ Please add at least one skill you can teach or want to learn!")
+
+# ---------- UI (Streamlit) ----------
+st.set_page_config(page_title="AI Skill Swap", page_icon="🤝", layout="wide")
+st.title("AI Skill Swap — Match & Exchange Skills")
+
+# Insert CSS for animations only (dark mode removed)
+CSS = """
+<style>
+.card{padding:18px;border-radius:12px;background:#ffffff;box-shadow:0 6px 18px rgba(0,0,0,0.08);margin-bottom:12px}
+.success-animation{animation:pop 0.45s cubic-bezier(.2,.9,.2,1)}
+@keyframes pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
+.small-muted{font-size:12px;color:grey;margin-top:6px}
+.btn-primary{background:linear-gradient(90deg,#6d28d9,#4f46e5);color:white;padding:8px 12px;border-radius:8px;border:none}
+</style>
+"""
+st.markdown(CSS, unsafe_allow_html=True)
+
+# Layout: sidebar for profiles, main area for matches
+store = ProfileStore()
+
+with st.sidebar:
+    st.header("Your profile")
+    with st.form("profile_form"):
+        username = st.text_input("Username", value=st.session_state.get("username", ""))
+        offers_text = st.text_area("Skills you can teach (one per line or comma-separated)", value=st.session_state.get("offers_text", ""))
+        wants_text = st.text_area("Skills you want to learn (one per line or comma-separated)", value=st.session_state.get("wants_text", ""))
+        availability = st.text_input("Availability (e.g., Weekends)", value=st.session_state.get("availability", ""))
+        preferences = st.text_input("Preferences (e.g., language, online)", value=st.session_state.get("preferences", ""))
+        save = st.form_submit_button("Save / Update profile", use_container_width=True)
+        if save:
+            offers = normalize_skill_list(offers_text)
+            wants = normalize_skill_list(wants_text)
+            profile = Profile(id=str(uuid.uuid4()), username=username.strip(), offers=offers, wants=wants, availability=availability.strip(), preferences=preferences.strip())
+            ok, msg = store.add_or_update(profile)
+            if ok:
+                st.session_state["username"] = username
+                st.session_state["offers_text"] = offers_text
+                st.session_state["wants_text"] = wants_text
+                st.session_state["availability"] = availability
+                st.session_state["preferences"] = preferences
+                st.success(msg)
+                st.markdown(f"<div class='card success-animation' style='border-left:6px solid #4F46E5;'><b>Saved</b><div class='small-muted'>{username} saved to local storage.</div></div>", unsafe_allow_html=True)
             else:
-                offers = normalize_skill_list(offers_text)
-                wants = normalize_skill_list(wants_text)
-                profile = Profile(
-                    id=str(uuid.uuid4()), 
-                    username=username.strip(), 
-                    offers=offers, 
-                    wants=wants, 
-                    availability=availability.strip(), 
-                    preferences=preferences.strip()
-                )
-                ok, msg = store.add_or_update(profile)
-                if ok:
-                    st.session_state["username"] = username
-                    st.session_state["offers_text"] = offers_text
-                    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.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)
+                st.error(msg)
+
+    st.markdown("---")
+    st.header("Load / Delete")
+    profiles = store.load_all()
+    options = ["-- new profile --"] + [p.username for p in profiles]
+    selected = st.selectbox("Choose profile", options, index=0)
+    if st.button("Load profile") and selected != "-- new profile --":
+        p = store.find_by_username(selected)
+        if p:
+            st.session_state["username"] = p.username
+            st.session_state["offers_text"] = "\n".join(p.offers)
+            st.session_state["wants_text"] = "\n".join(p.wants)
+            st.session_state["availability"] = p.availability
+            st.session_state["preferences"] = p.preferences
+            st.experimental_rerun()
+        else:
+            st.warning("Profile not found.")
+    if st.button("Delete profile") and selected != "-- new profile --":
+        ok, m = store.delete(selected)
+        if ok:
+            st.success(m)
+            # clear session state for form
+            st.session_state["username"] = ""
+            st.session_state["offers_text"] = ""
+            st.session_state["wants_text"] = ""
+            st.session_state["availability"] = ""
+            st.session_state["preferences"] = ""
+            time.sleep(0.2)
+            st.experimental_rerun()
+        else:
+            st.error(m)
 
-def render_community_tab():
-    """Community tab with modern card layout"""
-    st.markdown("## 🌐 Community Members")
-    
-    store = ProfileStore()
+st.markdown("---")
+
+col1, col2 = st.columns([2, 3])
+
+with col1:
+    st.subheader("Community profiles")
     profiles = store.load_all()
-    
     if not profiles:
-        st.info("🌟 Be the first to join our community! Create your profile in the **Create Account** tab.")
-        return
-    
-    # Search and filter
-    col1, col2 = st.columns([2, 1])
-    with col1:
-        search_term = st.text_input("🔍 Search by name...", placeholder="Enter username to search")
-    with col2:
-        all_skills = list(set(s for p in profiles for s in p.offers + p.wants))
-        filter_skill = st.selectbox("Filter by skill", ["All skills"] + sorted(all_skills))
-    
-    # Display profiles in modern cards
-    filtered_profiles = []
-    for p in profiles:
-        if search_term and search_term.lower() not in p.username.lower():
-            continue
-        if filter_skill != "All skills" and filter_skill not in p.offers + p.wants:
-            continue
-        filtered_profiles.append(p)
-    
-    st.write(f"**Showing {len(filtered_profiles)} of {len(profiles)} members**")
-    
-    # Display profiles in columns for better layout
-    cols = st.columns(2)
-    for idx, profile in enumerate(filtered_profiles):
-        with cols[idx % 2]:
-            render_profile_card(profile, store)
-
-def render_profile_card(profile: Profile, store: ProfileStore):
-    """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()
-    
-    # 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)
-        
-        # Skills section
-        col1, col2 = st.columns(2)
-        with col1:
-            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:
-            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()
-            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"""
-    st.markdown("## 🤖 AI-Powered Skill Matching")
-    
-    store = ProfileStore()
+        st.info("No profiles yet — create your profile in the sidebar.")
+    else:
+        for p in profiles:
+            st.markdown(f"**{p.username}** — offers: {', '.join(p.offers) or '—'}; wants: {', '.join(p.wants) or '—'}")
+            with st.expander("Details"):
+                st.write(p.to_dict())
+
+with col2:
+    st.subheader("Find Matches (AI)")
     profiles = store.load_all()
-    
     if not profiles:
-        st.info("👥 Add some profiles in the **Create Account** tab to start finding amazing skill matches!")
-        return
-    
-    # Matching interface
-    col1, col2 = st.columns([2, 1])
-    with col1:
-        profile_options = [p.username for p in profiles]
-        selected_profile = st.selectbox("👤 Select profile for matching", profile_options)
-    with col2:
-        top_k = st.slider("Number of matches", 1, 10, 5)
-    
-    if st.button("🎯 Find AI Matches", type="primary", use_container_width=True):
-        with st.spinner("🔍 Analyzing profiles and finding perfect matches..."):
-            time.sleep(1)
-            current = store.find_by_username(selected_profile)
-            if not current:
-                st.error("❌ Profile not found.")
-            else:
-                try:
-                    sys_ins, user_msg = make_prompt_for_matching(current, profiles, top_k=top_k)
-                    matches = ask_groq_for_matches(sys_ins, user_msg)
-                    
-                    st.success(f"🎉 Found {len(matches)} perfect matches for {selected_profile}!")
-                    
-                    for i, match in enumerate(matches, 1):
-                        score = match.get('score', 0)
-                        username = match.get('username', 'Unknown')
-                        reason = match.get('reason', 'Great compatibility based on shared interests!')
-                        
-                        # Color based on score
-                        if score >= 80:
-                            color = "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
-                            emoji = "💎"
-                        elif score >= 60:
-                            color = "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
-                            emoji = "⭐"
-                        else:
-                            color = "linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
-                            emoji = "👍"
-                            
-                        st.markdown(f"""
-                        <div class="match-card" style="background: {color};">
-                            <div style="display: flex; justify-content: space-between; align-items: center;">
-                                <div>
-                                    <h3 style="margin:0; color: white;">{emoji} Match #{i}: {username}</h3>
-                                    <h1 style="margin:0; color: white; font-size: 2.5rem;">{score}/100</h1>
-                                </div>
-                                <div style="font-size: 3rem;">{emoji}</div>
-                            </div>
-                            <p style="margin: 1rem 0 0 0; color: white; opacity: 0.9;">{reason}</p>
-                        </div>
-                        """, unsafe_allow_html=True)
-                        
-                except Exception as e:
-                    st.error(f"❌ Error generating matches: {str(e)}")
-
-def render_settings_tab():
-    """Settings tab"""
-    st.markdown("## ⚙️ Settings & Information")
-    
-    col1, col2 = st.columns(2)
-    
-    with col1:
-        st.markdown("""
-        <div class="feature-card">
-            <h3 style="color: #667eea;">ℹ️ About AI Skill Swap</h3>
-            <p style="color: #555;">Connect with amazing people and exchange skills in a friendly community.</p>
-            <p style="color: #555;"><strong>Features:</strong></p>
-            <ul style="color: #555;">
-            <li>🤖 AI-powered matching</li>
-            <li>👥 Community discovery</li>
-            <li>🎯 Skill-based connections</li>
-            <li>💫 Personalized preferences</li>
-            </ul>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    with col2:
-        st.markdown("""
-        <div class="feature-card">
-            <h3 style="color: #667eea;">🛠️ Technical Info</h3>
-            <p style="color: #555;"><strong>Built with:</strong></p>
-            <ul style="color: #555;">
-            <li>Streamlit - Modern web framework</li>
-            <li>Groq LLM - AI matching engine</li>
-            <li>Python - Backend logic</li>
-            <li>JSON - Data storage</li>
-            </ul>
-        </div>
-        """, unsafe_allow_html=True)
-
-# ---------- Main App ----------
-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()
-    
-    # Render modern header
-    render_modern_header()
-    
-    # Create tabs for main navigation
-    tab1, tab2, tab3, tab4, tab5 = st.tabs([
-        "🏠 Dashboard", 
-        "👤 Create Account", 
-        "🌐 Community", 
-        "🤖 AI Matches", 
-        "⚙️ Settings"
-    ])
-    
-    # Render content based on selected tab
-    with tab1:
-        render_dashboard_tab()
-    
-    with tab2:
-        render_create_account_tab()
-    
-    with tab3:
-        render_community_tab()
-    
-    with tab4:
-        render_matches_tab()
-    
-    with tab5:
-        render_settings_tab()
-
-if __name__ == "__main__":
-    main()
+        st.info("Add some profiles to test matchmaking.")
+    else:
+        pick = st.selectbox("Match for profile", [p.username for p in profiles])
+        top_k = st.slider("Top K matches", 1, 10, 3)
+        if st.button("Run AI matchmaking"):
+            # animated spinner + success card
+            with st.spinner("Generating matches via Groq LLM..."):
+                time.sleep(0.6)
+                current = store.find_by_username(pick)
+                if not current:
+                    st.error("Profile not found.")
+                else:
+                    try:
+                        sys_ins, user_msg = make_prompt_for_matching(current, profiles, top_k=top_k)
+                        # ask groq
+                        matches = ask_groq_for_matches(sys_ins, user_msg)
+                        st.markdown("<div class='card success-animation' style='border-left:6px solid #4F46E5;'><b>Matches Found</b><div class='small-muted'>Below are the top matches returned by the AI.</div></div>", unsafe_allow_html=True)
+                        st.json(matches)
+                    except Exception as e:
+                        st.error(str(e))
+
+st.markdown("---")