From 5bd49d3a03bb6402647bb922a6829657aa0296f6 Mon Sep 17 00:00:00 2001
From: Tudor <tudor.sitaru@gmail.com>
Date: Thu, 15 Jan 2026 12:02:21 +0000
Subject: [PATCH] Add Compare button to map view school list

- Add orange Compare button alongside Details button
- Toggle to Remove when school is in comparison
- Stack buttons vertically with consistent sizing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/app.js     | 34 +++++++++++++++++++++++++++++++---
 frontend/styles.css | 29 ++++++++++++++++++++++++++---
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index 1b19dec..ee56ef0 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -1138,6 +1138,10 @@ function renderCompactSchoolList(schools) {
           ? `<span class="distance-badge">${school.distance.toFixed(1)} mi</span>`
           : "";
 
+      const isInCompare = state.selectedSchools.some((s) => s.urn === school.urn);
+      const compareButtonText = isInCompare ? "Remove" : "Compare";
+      const compareButtonClass = isInCompare ? "btn-compare active" : "btn-compare";
+
       return `
         <div class="school-list-item" data-urn="${school.urn}">
           <div class="school-list-item-content">
@@ -1158,7 +1162,10 @@ function renderCompactSchoolList(schools) {
               </span>
             </div>
           </div>
-          <button class="btn btn-secondary school-list-item-details" data-urn="${school.urn}">Details</button>
+          <div class="school-list-item-actions">
+            <button class="btn ${compareButtonClass}" data-urn="${school.urn}">${compareButtonText}</button>
+            <button class="btn btn-secondary school-list-item-details" data-urn="${school.urn}">Details</button>
+          </div>
         </div>
       `;
     })
@@ -1169,8 +1176,8 @@ function renderCompactSchoolList(schools) {
   // Add click handlers for list items (to highlight on map)
   elements.schoolsGrid.querySelectorAll(".school-list-item").forEach((item) => {
     item.addEventListener("click", (e) => {
-      // Don't trigger if clicking the details button
-      if (e.target.closest(".school-list-item-details")) return;
+      // Don't trigger if clicking buttons
+      if (e.target.closest(".school-list-item-actions")) return;
       const urn = parseInt(item.dataset.urn, 10);
       highlightSchoolCard(urn, true);
     });
@@ -1184,6 +1191,27 @@ function renderCompactSchoolList(schools) {
       openSchoolModal(urn);
     });
   });
+
+  // Add click handlers for compare buttons
+  elements.schoolsGrid.querySelectorAll(".btn-compare").forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const urn = parseInt(btn.dataset.urn, 10);
+      const school = schools.find((s) => s.urn === urn);
+      if (!school) return;
+
+      const isInCompare = state.selectedSchools.some((s) => s.urn === urn);
+      if (isInCompare) {
+        removeFromComparison(urn);
+        btn.textContent = "Compare";
+        btn.classList.remove("active");
+      } else {
+        addToComparison(school);
+        btn.textContent = "Remove";
+        btn.classList.add("active");
+      }
+    });
+  });
 }
 
 // =============================================================================
diff --git a/frontend/styles.css b/frontend/styles.css
index d5d6f32..533e9b1 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -570,10 +570,33 @@ body {
     color: var(--text-primary);
 }
 
-.school-list-item-details {
+.school-list-item-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
     flex-shrink: 0;
-    padding: 0.5rem 0.875rem;
-    font-size: 0.8rem;
+}
+
+.school-list-item-actions .btn {
+    padding: 0.4rem 0.75rem;
+    font-size: 0.75rem;
+    white-space: nowrap;
+}
+
+.btn-compare {
+    background: var(--accent-coral);
+    color: white;
+    border: 1px solid var(--accent-coral);
+}
+
+.btn-compare:hover {
+    background: #d4654a;
+    border-color: #d4654a;
+}
+
+.btn-compare.active {
+    background: var(--text-muted);
+    border-color: var(--text-muted);
 }
 
 /* Search location marker on map */