From b3fc5411cacb1b3f5afa33c8c887ca2b18552b3e Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Wed, 17 Jun 2026 15:23:54 +0200
Subject: [PATCH] fix(atlas): cursor-following tooltips and removing countries
 from search

Two related Atlas fixes:

- Country tooltips were bound with sticky:false, which anchors them at the
  feature's bounds centre. For countries with overseas territories (e.g.
  France) that centre sits far out in the ocean, so the tooltip popped up
  nowhere near the area being hovered. Make them sticky so they track the
  cursor.

- Selecting an already-visited country from the search bar always opened the
  "Mark / Bucket" dialog, with no way to remove it. Tiny countries like
  Vatican City or Singapore are hard to hit on the map, so search was the only
  way in. Mirror the map-click behaviour: a manually-marked country opens the
  Remove confirmation, a trip/place-backed one opens its detail.
---
 client/src/pages/atlas/useAtlas.ts | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/atlas/useAtlas.ts b/client/src/pages/atlas/useAtlas.ts
index 9a2f8953..99d02868 100644
--- a/client/src/pages/atlas/useAtlas.ts
+++ b/client/src/pages/atlas/useAtlas.ts
@@ -340,7 +340,10 @@ export function useAtlas() {
               </div>
             </div>`
           layer.bindTooltip(tooltipHtml, {
-            sticky: false, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
+            // sticky so the tooltip tracks the cursor; non-sticky anchors it at the feature's
+            // bounds centre, which for countries with overseas territories (e.g. France) lands
+            // far out in the ocean instead of over the area being hovered.
+            sticky: true, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
           })
           layer.on('click', () => {
             if (c.placeCount === 0 && c.tripCount === 0) {
@@ -363,7 +366,7 @@ export function useAtlas() {
             country_layer_by_a2_ref.current[countryCode] = layer
             const name = feature.properties?.NAME || feature.properties?.ADMIN || resolveName(countryCode)
             layer.bindTooltip(`<div style="font-size:12px;font-weight:600">${name}</div>`, {
-              sticky: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
+              sticky: true, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
             })
             layer.on('click', () => handleMarkCountry(countryCode, name))
             layer.on('mouseover', (e) => {
@@ -552,6 +555,20 @@ export function useAtlas() {
     } catch (e ) {
       console.error('Error fitting bounds', e)
      }
+
+    // Mirror the map-click behaviour so an already-visited country can be removed
+    // straight from search. Tiny countries (Vatican City, Singapore) are hard to
+    // hit on the map, so search was the only way in — but it always opened the
+    // "Mark / Bucket" dialog with no Remove option.
+    const visited = data?.countries.find(c => c.code === country_code)
+    if (visited) {
+      if (visited.placeCount === 0 && visited.tripCount === 0) {
+        handleUnmarkCountry(country_code)
+      } else {
+        loadCountryDetailRef.current(country_code)
+      }
+      return
+    }
     setConfirmAction({ type: 'choose', code: country_code, name: country_label })
   }