Update app.py

app.py

@@ -284,15 +284,17 @@ def get_compatibility_message(pet):
     return messages
 
 # Function to display pet details page
-# The fix is in the display_pet_details function
-def display_pet_details(pet_id, context="search"):
+# Changes to make keys unique across different tabs
+
+# Function to display pet details page with unique tab identifier
+def display_pet_details(pet_id, context="search", tab_id="tab1"):
     pet = get_pet_details(pet_id)
     if not pet:
         st.error("Unable to retrieve pet details. Please try again.")
         return
     
-    # Back button
-    if st.button("← Back to Search Results", key=f"back_{context}_{pet_id}"):
+    # Back button with unique key that includes tab identifier
+    if st.button("← Back to Search Results", key=f"back_{tab_id}_{context}_{pet_id}"):
         st.session_state.selected_pet = None
         st.rerun()  # Force immediate rerun
     
@@ -373,20 +375,88 @@ def display_pet_details(pet_id, context="search"):
     if pet['url']:
         st.markdown(f"[View on Petfinder]({pet['url']})")
     
-    # Add to favorites
+    # Add to favorites with unique key
     is_favorite = pet['id'] in [p['id'] for p in st.session_state.favorites]
     if not is_favorite:
-        if st.button("Add to Favorites", key=f"add_fav_{context}_{pet_id}"):
+        if st.button("Add to Favorites", key=f"add_fav_{tab_id}_{context}_{pet_id}"):
             st.session_state.favorites.append(pet)
             st.success(f"Added {pet['name']} to favorites!")
             st.rerun()
     else:
-        if st.button("Remove from Favorites", key=f"rem_fav_{context}_{pet_id}"):
+        if st.button("Remove from Favorites", key=f"rem_fav_{tab_id}_{context}_{pet_id}"):
             st.session_state.favorites = [p for p in st.session_state.favorites if p['id'] != pet['id']]
             st.success(f"Removed {pet['name']} from favorites!")
             st.rerun()
 
-# Main app
+# Function to format pet card with unique tab identifier
+def display_pet_card(pet, is_favorite=False, context="search", tab_id="tab1"):
+    col1, col2 = st.columns([1, 2])
+    
+    with col1:
+        if pet['photos'] and len(pet['photos']) > 0:
+            st.image(pet['photos'][0]['medium'], use_container_width=True)
+        else:
+            st.image("https://via.placeholder.com/300x300?text=No+Image", use_container_width=True)
+    
+    with col2:
+        st.markdown(f"<div class='pet-name'>{pet['name']}</div>", unsafe_allow_html=True)
+        
+        # Tags
+        tags_html = ""
+        if pet['status'] == 'adoptable':
+            tags_html += "<span class='tag' style='background-color: #808080;'>Adoptable</span> "
+        else:
+            tags_html += f"<span class='tag' style='background-color: #ffcdd2;'>{pet['status'].title()}</span> "
+        
+        if pet['age']:
+            tags_html += f"<span class='tag'>{pet['age']}</span> "
+        if pet['gender']:
+            tags_html += f"<span class='tag'>{pet['gender']}</span> "
+        if pet['size']:
+            tags_html += f"<span class='tag'>{pet['size']}</span> "
+        
+        st.markdown(f"<div>{tags_html}</div>", unsafe_allow_html=True)
+        
+        st.markdown("<div class='pet-details'>", unsafe_allow_html=True)
+        if pet['breeds']['primary']:
+            breed_text = pet['breeds']['primary']
+            if pet['breeds']['secondary']:
+                breed_text += f" & {pet['breeds']['secondary']}"
+            if pet['breeds']['mixed']:
+                breed_text += " (Mixed)"
+            st.markdown(f"<strong>Breed:</strong> {breed_text}", unsafe_allow_html=True)
+        
+        if pet['colors']['primary'] or pet['colors']['secondary'] or pet['colors']['tertiary']:
+            colors = [c for c in [pet['colors']['primary'], pet['colors']['secondary'], pet['colors']['tertiary']] if c]
+            st.markdown(f"<strong>Colors:</strong> {', '.join(colors)}", unsafe_allow_html=True)
+        
+        if 'location' in pet and pet['contact']['address']['city'] and pet['contact']['address']['state']:
+            st.markdown(f"<strong>Location:</strong> {pet['contact']['address']['city']}, {pet['contact']['address']['state']}", unsafe_allow_html=True)
+        
+        st.markdown("</div>", unsafe_allow_html=True)
+        
+        if pet['description']:
+            st.markdown(f"<div class='pet-description'>{pet['description'][:300]}{'...' if len(pet['description']) > 300 else ''}</div>", unsafe_allow_html=True)
+        
+        col1, col2 = st.columns(2)
+        with col1:
+            if st.button("View Details", key=f"details_{tab_id}_{context}_{pet['id']}"):
+                st.session_state.selected_pet = pet['id']
+                st.rerun()
+        with col2:
+            if not is_favorite:
+                if st.button("Add to Favorites", key=f"fav_{tab_id}_{context}_{pet['id']}"):
+                    if pet['id'] not in [p['id'] for p in st.session_state.favorites]:
+                        st.session_state.favorites.append(pet)
+                        st.success(f"Added {pet['name']} to favorites!")
+                        st.rerun()
+            else:
+                if st.button("Remove from Favorites", key=f"unfav_{tab_id}_{context}_{pet['id']}"):
+                    st.session_state.favorites = [p for p in st.session_state.favorites if p['id'] != pet['id']]
+                    st.success(f"Removed {pet['name']} from favorites!")
+                    st.rerun()
+
+# Main app with updated function calls
 def main():
     # Title
     st.markdown("<h1 class='main-header'>🐾 PetMatch</h1>", unsafe_allow_html=True)
@@ -398,7 +468,7 @@ def main():
     with tab1:
         # If a pet is selected, show details
         if st.session_state.selected_pet:
-            display_pet_details(st.session_state.selected_pet, context="search")
+            display_pet_details(st.session_state.selected_pet, context="search", tab_id="tab1")
         else:
             # Search form
             with st.expander("Search Options", expanded=True):
@@ -493,7 +563,7 @@ def main():
                 
                 for pet in results[start_idx:end_idx]:
                     st.markdown("---")
-                    display_pet_card(pet)
+                    display_pet_card(pet, tab_id="tab1")
     
     with tab2:
         st.markdown("### Your Favorite Pets")
@@ -503,11 +573,11 @@ def main():
         else:
             # Check if a pet is selected from favorites
             if st.session_state.selected_pet:
-                display_pet_details(st.session_state.selected_pet, context="search")
+                display_pet_details(st.session_state.selected_pet, context="favorites", tab_id="tab2")
             else:
                 for pet in st.session_state.favorites:
                     st.markdown("---")
-                    display_pet_card(pet, is_favorite=True, context="favorites")
+                    display_pet_card(pet, is_favorite=True, context="favorites", tab_id="tab2")
     
     with tab3:
         st.markdown("### About PetMatch")