From 7d72448ebfaf60c8798c5b014dd066f9ab8b645e Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Wed, 1 Apr 2026 11:41:58 -0700
Subject: [PATCH] Make hop counts collapse to be neater. Closes #144.

---
 frontend/src/components/PathModal.tsx | 56 +++++++++++++++++----------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/PathModal.tsx b/frontend/src/components/PathModal.tsx
index 61d30d3..1a9883f 100644
--- a/frontend/src/components/PathModal.tsx
+++ b/frontend/src/components/PathModal.tsx
@@ -406,9 +406,12 @@ interface HopNodeProps {
   distanceUnit: DistanceUnit;
 }
 
+const AMBIGUOUS_MATCH_PREVIEW_LIMIT = 3;
+
 function HopNode({ hop, hopNumber, prevLocation, distanceUnit }: HopNodeProps) {
   const isAmbiguous = hop.matches.length > 1;
   const isUnknown = hop.matches.length === 0;
+  const [expanded, setExpanded] = useState(false);
 
   // Calculate distance from previous location for a contact
   // Returns null if prev location unknown/ambiguous or contact has no valid location
@@ -447,27 +450,38 @@ function HopNode({ hop, hopNumber, prevLocation, distanceUnit }: HopNodeProps) {
           <div className="font-medium text-muted-foreground">&lt;UNKNOWN&gt;</div>
         ) : isAmbiguous ? (
           <div>
-            {hop.matches.map((contact) => {
-              const dist = getDistanceForContact(contact);
-              const hasLocation = isValidLocation(contact.lat, contact.lon);
-              return (
-                <div key={contact.public_key} className="font-medium truncate">
-                  {contact.name || contact.public_key.slice(0, 12)}
-                  {dist !== null && (
-                    <span className="text-xs text-muted-foreground ml-1">
-                      - {formatDistance(dist, distanceUnit)}
-                    </span>
-                  )}
-                  {hasLocation && (
-                    <CoordinateLink
-                      lat={contact.lat!}
-                      lon={contact.lon!}
-                      publicKey={contact.public_key}
-                    />
-                  )}
-                </div>
-              );
-            })}
+            {(expanded ? hop.matches : hop.matches.slice(0, AMBIGUOUS_MATCH_PREVIEW_LIMIT)).map(
+              (contact) => {
+                const dist = getDistanceForContact(contact);
+                const hasLocation = isValidLocation(contact.lat, contact.lon);
+                return (
+                  <div key={contact.public_key} className="font-medium truncate">
+                    {contact.name || contact.public_key.slice(0, 12)}
+                    {dist !== null && (
+                      <span className="text-xs text-muted-foreground ml-1">
+                        - {formatDistance(dist, distanceUnit)}
+                      </span>
+                    )}
+                    {hasLocation && (
+                      <CoordinateLink
+                        lat={contact.lat!}
+                        lon={contact.lon!}
+                        publicKey={contact.public_key}
+                      />
+                    )}
+                  </div>
+                );
+              }
+            )}
+            {!expanded && hop.matches.length > AMBIGUOUS_MATCH_PREVIEW_LIMIT && (
+              <button
+                type="button"
+                className="text-xs text-primary hover:underline cursor-pointer"
+                onClick={() => setExpanded(true)}
+              >
+                (and {hop.matches.length - AMBIGUOUS_MATCH_PREVIEW_LIMIT} more)
+              </button>
+            )}
           </div>
         ) : (
           <div className="font-medium truncate">