pr12.diff

diff --git a/extension/popup.css b/extension/popup.css
index a962895..2ae4fa9 100644
--- a/extension/popup.css
+++ b/extension/popup.css
@@ -58,12 +58,62 @@ button {
     font-weight: 500;
     cursor: pointer;
     transition: background-color 0.2s;
+    white-space: nowrap;
 }
 
 button:hover {
     background-color: #1d4ed8;
 }
 
+button:disabled {
+    background-color: #93c5fd;
+    cursor: not-allowed;
+}
+
+.results-controls {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 10px;
+}
+
+#sortSelect {
+    padding: 7px 10px;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    font-size: 12px;
+    font-family: 'Inter', sans-serif;
+    background: white;
+    color: #334155;
+    cursor: pointer;
+    outline: none;
+    flex-shrink: 0;
+}
+
+#sortSelect:focus {
+    border-color: #2563eb;
+}
+
+#filterInput {
+    flex-grow: 1;
+    padding: 7px 12px;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    font-size: 12px;
+    font-family: 'Inter', sans-serif;
+    outline: none;
+    transition: border-color 0.2s;
+    color: #334155;
+}
+
+#filterInput:focus {
+    border-color: #2563eb;
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+}
+
+#filterInput::placeholder {
+    color: #94a3b8;
+}
+
 table {
     width: 100%;
     border-collapse: collapse;
@@ -86,6 +136,10 @@ th {
     color: #475569;
 }
 
+tr:last-child td {
+    border-bottom: none;
+}
+
 .platform-badge {
     padding: 4px 8px;
     border-radius: 12px;
@@ -97,11 +151,30 @@ th {
 .platform-amazon { background-color: #fef08a; color: #854d0e; }
 .platform-flipkart { background-color: #bfdbfe; color: #1e40af; }
 
+.best-deal-badge {
+    display: inline-block;
+    margin-left: 4px;
+    padding: 2px 6px;
+    background: linear-gradient(135deg, #10b981, #059669);
+    color: white;
+    border-radius: 8px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.3px;
+    vertical-align: middle;
+    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.4);
+}
+
 .price-text {
     font-weight: 600;
     color: #0f172a;
 }
 
+.price-cheapest {
+    font-weight: 700;
+    color: #059669; /* Green for best deal */
+}
+
 .buy-btn {
     text-decoration: none;
     background-color: #10b981;
@@ -145,4 +218,12 @@ th {
     font-size: 14px;
 }
 
+.result-count {
+    text-align: right;
+    font-size: 11px;
+    color: #94a3b8;
+    margin-top: 8px;
+    padding: 0 4px;
+}
+
 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
diff --git a/extension/popup.html b/extension/popup.html
index 2270a0f..230c395 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -25,6 +25,17 @@
         </div>
 
         <div id="resultsContainer" class="hidden">
+            <!-- Controls: Sort + Filter -->
+            <div class="results-controls">
+                <select id="sortSelect" title="Sort results">
+                    <option value="cheapest">Cheapest First</option>
+                    <option value="priciest">Priciest First</option>
+                    <option value="platform-az">Platform AΓÇôZ</option>
+                    <option value="platform-za">Platform ZΓÇôA</option>
+                </select>
+                <input type="text" id="filterInput" placeholder="Filter results..." title="Real-time filter">
+            </div>
+
             <table>
                 <thead>
                     <tr>
@@ -38,6 +49,7 @@
                     <!-- Dynamic rows will be inserted here by JavaScript -->
                 </tbody>
             </table>
+            <div id="resultCount" class="result-count"></div>
         </div>
         
         <div id="error" class="hidden error-msg"></div>
diff --git a/extension/popup.js b/extension/popup.js
index ca64096..ce6203a 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -5,66 +5,129 @@ document.addEventListener('DOMContentLoaded', function() {
     const resultsContainer = document.getElementById('resultsContainer');
     const resultsBody = document.getElementById('resultsBody');
     const errorDiv = document.getElementById('error');
+    const sortSelect = document.getElementById('sortSelect');
+    const filterInput = document.getElementById('filterInput');
+    const resultCount = document.getElementById('resultCount');
 
-    // Trigger search on Enter key
-    searchInput.addEventListener('keypress', function(e) {
-        if (e.key === 'Enter') {
-            searchBtn.click();
+    let cachedResults = []; // Store results for sort/filter without re-fetching
+
+    // ΓöÇΓöÇ Sort & Filter Logic ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
+    function applySortAndFilter() {
+        const sortBy = sortSelect.value;
+        const filterText = filterInput.value.toLowerCase().trim();
+
+        // Filter first
+        let visible = cachedResults;
+        if (filterText) {
+            visible = visible.filter(p =>
+                p.name.toLowerCase().includes(filterText) ||
+                p.platform.toLowerCase().includes(filterText) ||
+                String(p.price).includes(filterText)
+            );
+        }
+
+        // Find cheapest for "Best Deal" badge
+        const cheapestPrice = Math.min(...visible.map(p => p.price));
+
+        // Sort
+        visible.sort((a, b) => {
+            switch (sortBy) {
+                case 'cheapest':  return a.price - b.price;
+                case 'priciest':  return b.price - a.price;
+                case 'platform-az': return a.platform.localeCompare(b.platform);
+                case 'platform-za': return b.platform.localeCompare(a.platform);
+                default:           return 0;
+            }
+        });
+
+        renderResults(visible, cheapestPrice);
+    }
+
+    // ΓöÇΓöÇ Render Results ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
+    function renderResults(results, cheapestPrice) {
+        resultsBody.innerHTML = '';
+
+        if (results.length === 0) {
+            resultCount.textContent = 'No results match your filter.';
+            return;
         }
+
+        resultCount.textContent = `Showing ${results.length} result${results.length !== 1 ? 's' : ''}`;
+
+        results.forEach(product => {
+            const tr = document.createElement('tr');
+            const isCheapest = product.price === cheapestPrice;
+
+            const platformClass = product.platform.toLowerCase() === 'amazon'
+                ? 'platform-amazon'
+                : 'platform-flipkart';
+
+            const formattedPrice = '\u20b9' + product.price.toLocaleString('en-IN');
+            const displayTitle = product.name.length > 35
+                ? product.name.substring(0, 35) + '...'
+                : product.name;
+
+            tr.innerHTML = `
+                <td>
+                    <span class="platform-badge ${platformClass}">${product.platform}</span>
+                    ${isCheapest ? '<span class="best-deal-badge" title="Lowest price!">Best Deal</span>' : ''}
+                </td>
+                <td title="${product.name}">${displayTitle}</td>
+                <td class="${isCheapest ? 'price-cheapest' : 'price-text'}">${formattedPrice}</td>
+                <td><a href="${product.url}" target="_blank" class="buy-btn">View</a></td>
+            `;
+            resultsBody.appendChild(tr);
+        });
+    }
+
+    // ΓöÇΓöÇ Event Listeners ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
+    searchInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') searchBtn.click();
     });
 
+    // Re-render on sort or filter change (no new search needed)
+    sortSelect.addEventListener('change', () => {
+        if (cachedResults.length) applySortAndFilter();
+    });
+    filterInput.addEventListener('input', () => {
+        if (cachedResults.length) applySortAndFilter();
+    });
+
+    // ΓöÇΓöÇ Search ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
     searchBtn.addEventListener('click', function() {
         const query = searchInput.value.trim();
         if (!query) return;
 
-        // Reset UI state
         errorDiv.classList.add('hidden');
         resultsContainer.classList.add('hidden');
         loadingDiv.classList.remove('hidden');
         resultsBody.innerHTML = '';
+        filterInput.value = '';
+        sortSelect.value = 'cheapest';
+        cachedResults = [];
+        resultCount.textContent = '';
         searchBtn.disabled = true;
 
-        // Send message to background script (which forwards to Java Engine)
         chrome.runtime.sendMessage({ type: 'SEARCH', query: query }, function(response) {
-            
             loadingDiv.classList.add('hidden');
             searchBtn.disabled = false;
 
             if (chrome.runtime.lastError || !response || response.error) {
-                errorDiv.textContent = (response && response.error) ? response.error : "Failed to connect to the Price Scout Java Engine.";
+                errorDiv.textContent = (response && response.error)
+                    ? response.error
+                    : 'Failed to connect to the Price Scout Java Engine.';
                 errorDiv.classList.remove('hidden');
                 return;
             }
 
             if (response.results && response.results.length > 0) {
-                renderResults(response.results);
+                cachedResults = response.results;
+                applySortAndFilter();
                 resultsContainer.classList.remove('hidden');
             } else {
-                errorDiv.textContent = "No valid deals found for this product.";
+                errorDiv.textContent = 'No valid deals found for this product.';
                 errorDiv.classList.remove('hidden');
             }
         });
     });
-
-    function renderResults(results) {
-        results.forEach(product => {
-            const tr = document.createElement('tr');
-            
-            const platformClass = product.platform.toLowerCase() === 'amazon' ? 'platform-amazon' : 'platform-flipkart';
-            
-            // Format price with Indian Rupee formatting
-            const formattedPrice = "₹" + product.price.toLocaleString('en-IN');
-
-            // Truncate long titles
-            const displayTitle = product.name.length > 30 ? product.name.substring(0, 30) + '...' : product.name;
-
-            tr.innerHTML = `
-                <td><span class="platform-badge ${platformClass}">${product.platform}</span></td>
-                <td title="${product.name}">${displayTitle}</td>
-                <td class="price-text">${formattedPrice}</td>
-                <td><a href="${product.url}" target="_blank" class="buy-btn">View</a></td>
-            `;
-            resultsBody.appendChild(tr);
-        });
-    }
 });