From d69a83fdeddc69f2b442ebf74f5a3dbef0486a2a Mon Sep 17 00:00:00 2001
From: Janez T <hey@dz0ny.dev>
Date: Wed, 15 Oct 2025 10:47:33 +0200
Subject: [PATCH] feat: Implement auto-zoom functionality for preselected
 contacts and SAR markers in DetailedCompassDialog

---
 lib/widgets/map/compass/compass_header.dart  | 16 +++++++++++-----
 lib/widgets/map/detailed_compass_dialog.dart |  8 ++++++++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/lib/widgets/map/compass/compass_header.dart b/lib/widgets/map/compass/compass_header.dart
index 3c42a5b..d438d53 100644
--- a/lib/widgets/map/compass/compass_header.dart
+++ b/lib/widgets/map/compass/compass_header.dart
@@ -299,11 +299,11 @@ class _LargeCompassPainter extends CustomPainter {
           ..style = PaintingStyle.fill;
         canvas.drawCircle(Offset(dotX, dotY), dotSize, dotPaint);
 
-        // Draw white border
+        // Draw darker shade border (same color family)
         final borderPaint = Paint()
-          ..color = Colors.white
+          ..color = Colors.blue.shade800
           ..style = PaintingStyle.stroke
-          ..strokeWidth = 2;
+          ..strokeWidth = 2.5;
         canvas.drawCircle(Offset(dotX, dotY), dotSize, borderPaint);
 
         // Draw distance label near the contact (only if not too crowded)
@@ -388,21 +388,27 @@ class _LargeCompassPainter extends CustomPainter {
 
         // Determine color based on SAR marker type
         Color markerColor;
+        Color borderColor;
         switch (marker.type) {
           case SarMarkerType.foundPerson:
             markerColor = Colors.green;
+            borderColor = Colors.green.shade900;
             break;
           case SarMarkerType.fire:
             markerColor = Colors.red;
+            borderColor = Colors.red.shade900;
             break;
           case SarMarkerType.stagingArea:
             markerColor = Colors.orange;
+            borderColor = Colors.orange.shade900;
             break;
           case SarMarkerType.object:
             markerColor = Colors.purple;
+            borderColor = Colors.purple.shade900;
             break;
           case SarMarkerType.unknown:
             markerColor = Colors.grey;
+            borderColor = Colors.grey.shade900;
             break;
         }
 
@@ -424,9 +430,9 @@ class _LargeCompassPainter extends CustomPainter {
           ..style = PaintingStyle.fill;
         canvas.drawCircle(Offset(dotX, dotY), dotSize, dotPaint);
 
-        // Draw white border
+        // Draw darker shade border (same color family)
         final borderPaint = Paint()
-          ..color = Colors.white
+          ..color = borderColor
           ..style = PaintingStyle.stroke
           ..strokeWidth = 2.5;
         canvas.drawCircle(Offset(dotX, dotY), dotSize, borderPaint);
diff --git a/lib/widgets/map/detailed_compass_dialog.dart b/lib/widgets/map/detailed_compass_dialog.dart
index 6b051be..da6f6ab 100644
--- a/lib/widgets/map/detailed_compass_dialog.dart
+++ b/lib/widgets/map/detailed_compass_dialog.dart
@@ -63,6 +63,14 @@ class _DetailedCompassDialogState extends State<DetailedCompassDialog> {
     _selectedContact = widget.preSelectedContact;
     _selectedSarMarker = widget.preSelectedSarMarker;
 
+    // Auto-zoom if item is preselected
+    if (_selectedContact != null || _selectedSarMarker != null) {
+      // Use post-frame callback to ensure position is set
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _autoZoomForSelection();
+      });
+    }
+
     // Subscribe to compass updates
     final compassStream = FlutterCompass.events;
     if (compassStream != null) {