From bec24835837fbda01ce89f526b241399a5bb1d0b Mon Sep 17 00:00:00 2001
From: AJ <ajisaacs27@gmail.com>
Date: Sun, 12 Oct 2025 15:05:17 -0400
Subject: [PATCH] Add auto-scroll to first amount match in receipt mapping
 modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When opening the map receipt modal, the transaction list now automatically scrolls to center on the first green-highlighted amount match (if one exists). This makes it easier to quickly find and select the most likely matching transaction without having to manually scroll through the list.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 MoneyMap/Pages/Receipts.cshtml | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/MoneyMap/Pages/Receipts.cshtml b/MoneyMap/Pages/Receipts.cshtml
index 154b434..2a4940e 100644
--- a/MoneyMap/Pages/Receipts.cshtml
+++ b/MoneyMap/Pages/Receipts.cshtml
@@ -317,7 +317,7 @@
                                     Rows highlighted in <span class="badge bg-success">green</span> have matching amounts.
                                 </div>
                                 <input type="hidden" id="transactionId@(r.Id)" name="transactionId" required />
-                                <div style="max-height: 400px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 0.25rem;">
+                                <div id="transactionListContainer@(r.Id)" style="max-height: 400px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 0.25rem;">
                                     <table class="table table-sm table-hover mb-0" style="font-size: 0.85rem;">
                                         <thead style="position: sticky; top: 0; background-color: white; z-index: 1;">
                                             <tr>
@@ -330,10 +330,16 @@
                                             </tr>
                                         </thead>
                                         <tbody>
+                                            @{
+                                                var firstMatchId = matches.FirstOrDefault(t => t.IsAmountMatch)?.Id;
+                                            }
                                             @foreach (var txn in matches)
                                             {
                                                 var rowClass = txn.IsAmountMatch ? "table-success" : "";
-                                                <tr class="@rowClass" style="cursor: pointer;"
+                                                var isFirstMatch = txn.Id == firstMatchId;
+                                                <tr class="@rowClass"
+                                                    id="@(isFirstMatch ? $"firstMatch{r.Id}" : "")"
+                                                    style="cursor: pointer;"
                                                     onclick="document.getElementById('transactionId@(r.Id)').value = '@txn.Id';
                                                              document.querySelectorAll('#mapModal@(r.Id) tbody tr').forEach(tr => tr.classList.remove('table-primary'));
                                                              this.classList.add('table-primary');">
@@ -352,6 +358,25 @@
                                         </tbody>
                                     </table>
                                 </div>
+                                @if (firstMatchId.HasValue)
+                                {
+                                    <script>
+                                        // Auto-scroll to first amount match when modal opens
+                                        document.getElementById('mapModal@(r.Id)').addEventListener('shown.bs.modal', function() {
+                                            var firstMatch = document.getElementById('firstMatch@(r.Id)');
+                                            if (firstMatch) {
+                                                var container = document.getElementById('transactionListContainer@(r.Id)');
+                                                var containerTop = container.scrollTop;
+                                                var elementTop = firstMatch.offsetTop;
+                                                var containerHeight = container.clientHeight;
+                                                var elementHeight = firstMatch.clientHeight;
+
+                                                // Scroll so the element is centered in the viewport
+                                                container.scrollTop = elementTop - (containerHeight / 2) + (elementHeight / 2);
+                                            }
+                                        });
+                                    </script>
+                                }
                             }
                             else
                             {