Update app.py

app.py

@@ -285,18 +285,22 @@ st.markdown("""
         color: white;
     }
     
-    .bookmark-item {
-        border: 1px solid #333;
+    .stExpander {
+        background-color: #2d2d2d;
         border-radius: 8px;
-        padding: 6px;
-        margin-bottom: 6px;
-        background-color: #1a1a1a;
+        border: 1px solid #444;
     }
     
     .bookmark-image {
-        border: none;
+        border: 1px solid #444;
         border-radius: 4px;
         margin-bottom: 8px;
+        transition: transform 0.2s ease;
+    }
+    
+    .bookmark-image:hover {
+        transform: scale(1.05);
+        border-color: #4CAF50;
     }
     
     .product-image {
@@ -304,7 +308,37 @@ st.markdown("""
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.3);
     }
+    
+    /* Equal height columns */
+    [data-testid="column"] {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    [data-testid="column"] > div {
+        flex: 1;
+    }
+    
+    /* Selectbox enhancement */
+    .stSelectbox input {
+        cursor: text !important;
+    }
 </style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Auto-select text in selectbox when focused
+    const observer = new MutationObserver(function(mutations) {
+        const selectInput = document.querySelector('[data-baseweb="select"] input');
+        if (selectInput) {
+            selectInput.addEventListener('focus', function() {
+                this.select();
+            });
+        }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+});
+</script>
 """, unsafe_allow_html=True)
 
 # Initialize session state
@@ -674,46 +708,9 @@ def export_bookmarked_models_pdf():
                 elements.append(img)
                 elements.append(Spacer(1, 0.2*inch))
         
-        # Specifications table
-            with spec_col:
-                # Specifications
-                specs = model_data['data'].get('specs', {})
-                specs = clean_spec_data(specs)
-                
-                if specs:
-                    st.markdown("### Technical Specifications")
-                    
-                    st.markdown("**Electrical Specifications:**")
-                    if specs.get('voltage') and specs.get('voltage') != 'N/A':
-                        st.write(f"Voltage: {specs['voltage']}")
-                    if specs.get('amperage') and specs.get('amperage') != 'N/A':
-                        st.write(f"Amperage: {specs['amperage']}")
-                    if specs.get('phase') and specs.get('phase') != 'N/A':
-                        st.write(f"Phase: {specs['phase']}")
-                    if specs.get('frequency') and specs.get('frequency') != 'N/A':
-                        st.write(f"Frequency: {specs['frequency']}")
-                    
-                    st.markdown("**Physical Specifications:**")
-                    if specs.get('dimensions') and specs.get('dimensions') != 'N/A':
-                        st.write(f"Dimensions: {specs['dimensions']}")
-                    if specs.get('weight') and specs.get('weight') != 'N/A':
-                        st.write(f"Weight: {specs['weight']}")
-                    
-                    st.markdown("**Performance Specifications:**")
-                    if specs.get('refrigerant') and specs.get('refrigerant') != 'N/A':
-                        st.write(f"Refrigerant: {specs['refrigerant']}")
-                    if specs.get('temperature_range') and specs.get('temperature_range') != 'N/A':
-                        st.write(f"Temperature: {specs['temperature_range']}")
-                    if specs.get('compressor') and specs.get('compressor') != 'N/A':
-                        st.write(f"Compressor: {specs['compressor']}")
-                    if specs.get('btu') and specs.get('btu') != 'N/A':
-                        st.write(f"BTU: {specs['btu']}")
-                    if specs.get('capacity') and specs.get('capacity') != 'N/A':
-                        st.write(f"Capacity: {specs['capacity']}")
-        else:
-            # No file path - show specifications in original two-column layout
-            specs = model_data['data'].get('specs', {})
-            specs = clean_spec_data(specs)
+        # Get specifications for table
+        specs = model_data['data'].get('specs', {})
+        specs = clean_spec_data(specs)
         
         # Create specifications data for table
         spec_data = [['Specification', 'Value']]
@@ -835,101 +832,115 @@ def display_bookmarked_models():
         st.info("📌 No models bookmarked yet. Select models to create your custom list!")
         return
     
-    st.markdown("### 📌 Bookmarked Models")
-    
-    view_col1, view_col2, view_col3 = st.columns([2, 1, 1])
-    with view_col2:
-        st.markdown(f"**{len(st.session_state.bookmarked_models)} models selected**")
-    
-    with view_col3:
-        # Toggle for text-only view - optimized to avoid loading
-        toggle_label = "📷 Show Images" if st.session_state.text_only_view else "📝 Text Only"
-        if st.button(toggle_label, key="toggle_view", use_container_width=True):
-            st.session_state.text_only_view = not st.session_state.text_only_view
-            # Don't use st.rerun() to avoid loading screen
-    
-    # Display bookmarked models with or without images
-    if st.session_state.text_only_view:
-        # Text-only view (original compact list)
-        display_limit = 5
-        for idx, model in enumerate(st.session_state.bookmarked_models[:display_limit]):
-            col_model, col_remove = st.columns([5, 1])
-            with col_model:
-                st.text(f"• {model}")
-            with col_remove:
-                if st.button("❌", key=f"remove_bookmark_list_{idx}", help=f"Remove {model}"):
-                    st.session_state.bookmarked_models.remove(model)
-                    st.rerun()
+    # Collapsible header
+    with st.expander(f"📌 Bookmarked Models ({len(st.session_state.bookmarked_models)} selected)", expanded=True):
+        view_col1, view_col2, view_col3 = st.columns([2, 1, 1])
         
-        if len(st.session_state.bookmarked_models) > display_limit:
-            with st.expander(f"Show all {len(st.session_state.bookmarked_models)} bookmarks"):
-                for idx, model in enumerate(st.session_state.bookmarked_models[display_limit:], display_limit):
-                    col_model, col_remove = st.columns([5, 1])
-                    with col_model:
-                        st.text(f"• {model}")
-                    with col_remove:
-                        if st.button("❌", key=f"remove_bookmark_exp_{idx}", help=f"Remove {model}"):
-                            st.session_state.bookmarked_models.remove(model)
-                            st.rerun()
-    else:
-        # Image view
-        # Display in grid layout
-        cols_per_row = 6  # Changed from 4 to 6 columns for narrower items
-        for i in range(0, len(st.session_state.bookmarked_models), cols_per_row):
-            cols = st.columns(cols_per_row)
+        with view_col3:
+            # Toggle for text-only view - optimized to avoid loading
+            toggle_label = "📷 Show Images" if st.session_state.text_only_view else "📝 Text Only"
+            if st.button(toggle_label, key="toggle_view", use_container_width=True):
+                st.session_state.text_only_view = not st.session_state.text_only_view
+        
+        # Display bookmarked models with or without images
+        if st.session_state.text_only_view:
+            # Text-only view (original compact list)
+            display_limit = 5
+            for idx, model in enumerate(st.session_state.bookmarked_models[:display_limit]):
+                col_select, col_remove = st.columns([5, 1])
+                with col_select:
+                    if st.button(f"• {model}", key=f"select_text_{idx}", use_container_width=True, help=f"Click to view {model}"):
+                        st.session_state.selected_model = model
+                        st.rerun()
+                with col_remove:
+                    if st.button("❌", key=f"remove_bookmark_list_{idx}", help=f"Remove {model}"):
+                        st.session_state.bookmarked_models.remove(model)
+                        st.rerun()
             
-            for j, col in enumerate(cols):
-                if i + j < len(st.session_state.bookmarked_models):
-                    model = st.session_state.bookmarked_models[i + j]
-                    model_data = get_model_data(model)
-                    
-                    with col:
-                        # Container for each bookmarked item
-                        st.markdown('<div class="bookmark-item">', unsafe_allow_html=True)
+            if len(st.session_state.bookmarked_models) > display_limit:
+                with st.expander(f"Show all {len(st.session_state.bookmarked_models)} bookmarks"):
+                    for idx, model in enumerate(st.session_state.bookmarked_models[display_limit:], display_limit):
+                        col_select, col_remove = st.columns([5, 1])
+                        with col_select:
+                            if st.button(f"• {model}", key=f"select_text_exp_{idx}", use_container_width=True, help=f"Click to view {model}"):
+                                st.session_state.selected_model = model
+                                st.rerun()
+                        with col_remove:
+                            if st.button("❌", key=f"remove_bookmark_exp_{idx}", help=f"Remove {model}"):
+                                st.session_state.bookmarked_models.remove(model)
+                                st.rerun()
+
+        else:  # ← THIS IS THE KEY FIX - Added else block
+            # Image view
+            # Display in grid layout
+            cols_per_row = 6  # Changed from 4 to 6 columns for narrower items
+            for i in range(0, len(st.session_state.bookmarked_models), cols_per_row):
+                cols = st.columns(cols_per_row)
+                
+                for j, col in enumerate(cols):
+                    if i + j < len(st.session_state.bookmarked_models):
+                        model = st.session_state.bookmarked_models[i + j]
+                        model_data = get_model_data(model)
                         
-                        # Try to get and display thumbnail
-                        if model_data and model_data.get('file_path'):
-                            pdf_filename = model_data['file_path'].replace('\\', '/').split('/')[-1]
-                            pdf_url = f"https://huggingface.co/spaces/TurboAir/TurboAirViewer/resolve/main/pdfs/{pdf_filename}"
-                            
-                            # Check if image is already cached
-                            cache_key = f"thumb_{model}"
-                            img_base64 = st.session_state.product_images.get(cache_key)
+                        with col:
+                            # Container for each bookmarked item
+                            st.markdown('<div class="bookmark-item">', unsafe_allow_html=True)
                             
-                            if img_base64:
-                                # Use cached image
-                                st.markdown(
-                                    f'<img src="data:image/png;base64,{img_base64}" '
-                                    f'style="width:100%; max-height:150px; object-fit:contain;" '
-                                    f'class="bookmark-image">',
-                                    unsafe_allow_html=True
-                                )
-                            else:
-                                # Extract image with minimal loading indication
-                                img_base64 = extract_pdf_thumbnail(pdf_url, model, max_width=200, max_height=250)
+                            # Container for each bookmarked item
+                            with st.container():
+                                # Try to get and display thumbnail
+                                if model_data and model_data.get('file_path'):
+                                    pdf_filename = model_data['file_path'].replace('\\', '/').split('/')[-1]
+                                    pdf_url = f"https://huggingface.co/spaces/TurboAir/TurboAirViewer/resolve/main/pdfs/{pdf_filename}"
+                                    
+                                    # Check if image is already cached
+                                    cache_key = f"thumb_{model}"
+                                    img_base64 = st.session_state.product_images.get(cache_key)
+                                    
+                                    if img_base64:
+                                        # Use cached image
+                                        st.markdown(
+                                            f'<img src="data:image/png;base64,{img_base64}" '
+                                            f'style="width:100%; max-height:150px; object-fit:contain; cursor:pointer;" '
+                                            f'class="bookmark-image">',
+                                            unsafe_allow_html=True
+                                        )
+                                    else:
+                                        # Extract image with minimal loading indication
+                                        img_base64 = extract_pdf_thumbnail(pdf_url, model, max_width=200, max_height=250)
+                                        
+                                        if img_base64:
+                                            st.markdown(
+                                                f'<img src="data:image/png;base64,{img_base64}" '
+                                                f'style="width:100%; max-height:200px; object-fit:contain; cursor:pointer;" '
+                                                f'class="bookmark-image">',
+                                                unsafe_allow_html=True
+                                            )
+                                        else:
+                                            st.info("📄 No preview")
                                 
-                                if img_base64:
-                                    st.markdown(
-                                        f'<img src="data:image/png;base64,{img_base64}" '
-                                        f'style="width:100%; max-height:200px; object-fit:contain;" '
-                                        f'class="bookmark-image">',
-                                        unsafe_allow_html=True
-                                    )
-                                else:
-                                    st.info("📄 No preview available")
-                        
-                        # Model info
-                        st.markdown(f"<p style='font-size: 14px; font-weight: bold; margin: 4px 0;'>{model}</p>", unsafe_allow_html=True)
-                        st.caption(get_product_type(model))
-                        
-                        # Remove button
-                        if st.button("Remove", key=f"remove_img_{i}_{j}", use_container_width=True):
-                            st.session_state.bookmarked_models.remove(model)
-                            st.rerun()
-                        
-                        st.markdown('</div>', unsafe_allow_html=True)
+                                # Model name button
+                                if st.button(f"{model}", key=f"select_model_{i}_{j}", use_container_width=True, type="secondary"):
+                                    st.session_state.selected_model = model
+                                    st.rerun()
+                                
+                                # Product type caption
+                                st.caption(get_product_type(model))
+                                
+                                # Action buttons row
+                                col_view, col_remove = st.columns(2)
+                                with col_view:
+                                    if st.button("👁️ View", key=f"view_{i}_{j}", use_container_width=True):
+                                        st.session_state.selected_model = model
+                                        st.rerun()
+                                with col_remove:
+                                    if st.button("❌", key=f"remove_img_{i}_{j}", use_container_width=True, type="secondary"):
+                                        st.session_state.bookmarked_models.remove(model)
+                                        st.rerun()
+                            
+                            st.markdown('</div>', unsafe_allow_html=True)
     
-    # Export section
+    # Export section - MOVED OUTSIDE THE IF/ELSE AND PROPERLY INDENTED
     st.markdown("---")
     export_col1, export_col2, export_col3 = st.columns(3)
     
@@ -975,7 +986,10 @@ if not all_models:
     st.stop()
 
 # Bookmarks section
-display_bookmarked_models()
+if st.session_state.bookmarked_models:
+    display_bookmarked_models()
+else:
+    st.info("📌 No models bookmarked yet. Select models to create your custom list!")
 
 # Main content area
 col1, col2 = st.columns([1, 3])
@@ -1000,55 +1014,57 @@ with col2:
             grouped_models[product_type] = []
         grouped_models[product_type].append(model)
     
-    # Create formatted options
-    formatted_options = ['']
+    # Create formatted options with empty first option for easy typing
+    formatted_options = ['']  # Empty first option
     for product_type in sorted(grouped_models.keys()):
         for model in sorted(grouped_models[product_type]):
             formatted_options.append(model)
     
-    # Search selectbox
+    # Search selectbox with clear typing experience
+    if st.session_state.selected_model and st.session_state.selected_model in formatted_options:
+        default_index = formatted_options.index(st.session_state.selected_model)
+    else:
+        default_index = 0
+    
     selected = st.selectbox(
         "Select or type a model number:",
         options=formatted_options,
-        format_func=lambda x: format_model_option(x) if x else "Select a model or start typing...",
+        format_func=lambda x: format_model_option(x) if x else "↓ Click here and start typing model number...",
         key="model_search",
-        index=formatted_options.index(st.session_state.selected_model) if st.session_state.selected_model in formatted_options else 0,
-        help="Start typing to filter models"
+        index=default_index,
+        help="Click and start typing to search models"
     )
     
     if selected:
         st.session_state.selected_model = selected
 
 # Display selected model
-if selected and selected != '':
+if st.session_state.selected_model and st.session_state.selected_model != '':
     st.markdown("---")
     
-    model_data = get_model_data(selected)
+    model_data = get_model_data(st.session_state.selected_model)
     
     if model_data:
         # Model header with bookmark
         col1, col2 = st.columns([4, 1])
         with col1:
-            st.markdown(f"## {selected}")
-            st.caption(f"Product Type: {get_product_type(selected)}")
+            st.markdown(f"## {st.session_state.selected_model}")
+            st.caption(f"Product Type: {get_product_type(st.session_state.selected_model)}")
             if model_data.get('quality'):
                 quality_class = f"quality-{model_data['quality']}"
                 st.markdown(f'<span class="quality-badge {quality_class}">Data Quality: {model_data["quality"].title()}</span>', 
                           unsafe_allow_html=True)
         
         with col2:
-            is_bookmarked = selected in st.session_state.bookmarked_models
+            is_bookmarked = st.session_state.selected_model in st.session_state.bookmarked_models
             bookmark_label = "❌ Remove" if is_bookmarked else "📌 Bookmark"
-            if st.button(bookmark_label, key=f"bookmark_{selected}", use_container_width=True):
+            if st.button(bookmark_label, key=f"bookmark_{st.session_state.selected_model}", use_container_width=True):
                 if is_bookmarked:
-                    st.session_state.bookmarked_models.remove(selected)
+                    st.session_state.bookmarked_models.remove(st.session_state.selected_model)
                     st.success("Bookmark removed!")
                 else:
-                    if len(st.session_state.bookmarked_models) >= 50:
-                        st.error("Maximum 50 bookmarks allowed")
-                    else:
-                        st.session_state.bookmarked_models.append(selected)
-                        st.success("Model bookmarked!")
+                    st.session_state.bookmarked_models.append(st.session_state.selected_model)
+                    st.success("Model bookmarked!")
                 time.sleep(0.5)
                 st.rerun()
         
@@ -1063,13 +1079,13 @@ if selected and selected != '':
             with img_col:
                 st.markdown("### Product Image")
                 # Check if image is already cached
-                cache_key = f"thumb_{selected}"
+                cache_key = f"thumb_{st.session_state.selected_model}"
                 img_base64 = st.session_state.product_images.get(cache_key)
                 
                 if not img_base64:
                     # Extract image if not cached
                     with st.spinner("Loading product image..."):
-                        img_base64 = extract_pdf_thumbnail(pdf_url, selected, max_width=400, max_height=500)
+                        img_base64 = extract_pdf_thumbnail(pdf_url, st.session_state.selected_model, max_width=400, max_height=500)
                 
                 if img_base64:
                     st.markdown(
@@ -1189,14 +1205,14 @@ if selected and selected != '':
         
         with action_col1:
             # PDF toggle button
-            pdf_key = f'show_pdf_{selected}'
+            pdf_key = f'show_pdf_{st.session_state.selected_model}'
             button_text = "📄 Hide PDF" if st.session_state.get(pdf_key, False) else "📄 View PDF"
-            if st.button(button_text, use_container_width=True, key=f"view_pdf_{selected}"):
+            if st.button(button_text, use_container_width=True, key=f"view_pdf_{st.session_state.selected_model}"):
                 st.session_state[pdf_key] = not st.session_state.get(pdf_key, False)
         
         with action_col2:
             # Google search button
-            google_search = f"https://www.google.com/search?q=turboair+{selected.replace(' ', '+')}+price"
+            google_search = f"https://www.google.com/search?q=turboair+{st.session_state.selected_model.replace(' ', '+')}+price"
             st.markdown(f'''
             <a href="{google_search}" target="_blank" style="text-decoration: none;">
                 <button class="google-search-button">
@@ -1206,13 +1222,13 @@ if selected and selected != '':
             ''', unsafe_allow_html=True)
         
         # Display PDF preview if requested
-        pdf_key = f'show_pdf_{selected}'
+        pdf_key = f'show_pdf_{st.session_state.selected_model}'
         if st.session_state.get(pdf_key, False):
             st.markdown("---")
             st.markdown("### 📄 PDF Specification Sheet")
             
             if 'file_path' in model_data and model_data['file_path']:
-                display_pdf_preview(model_data['file_path'], selected)
+                display_pdf_preview(model_data['file_path'], st.session_state.selected_model)
             else:
                 st.error("❌ No PDF file path found for this model.")
                 st.info("PDF file may not be available.")
@@ -1221,7 +1237,7 @@ if selected and selected != '':
         st.markdown("---")
         st.caption(f"Source: {model_data['filename']}")
     else:
-        st.error(f"No data found for model {selected}")
+        st.error(f"No data found for model {st.session_state.selected_model}")
 
 # Stats at bottom
 st.markdown("---")