From 59c447fe1f9920eda52320f5db1b9ef52b1ed109 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Tue, 5 May 2026 07:10:28 +0200
Subject: [PATCH] Hide quick-search pills on low zoom levels

---
 app/components/app-header.gjs | 8 +++++++-
 app/components/map.gjs        | 2 ++
 app/services/map-ui.js        | 5 +++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/components/app-header.gjs b/app/components/app-header.gjs
index 0c666ca..425e204 100644
--- a/app/components/app-header.gjs
+++ b/app/components/app-header.gjs
@@ -15,6 +15,7 @@ export default class AppHeaderComponent extends Component {
   @service settings;
   @service nostrAuth;
   @service nostrData;
+  @service mapUi;
   @tracked isUserMenuOpen = false;
   @tracked searchQuery = '';
 
@@ -22,6 +23,11 @@ export default class AppHeaderComponent extends Component {
     return !!this.searchQuery;
   }
 
+  get showQuickSearch() {
+    const zoom = this.mapUi.currentZoom ?? 13;
+    return this.settings.showQuickSearchButtons && zoom >= 12;
+  }
+
   @action
   toggleUserMenu() {
     this.isUserMenuOpen = !this.isUserMenuOpen;
@@ -54,7 +60,7 @@ export default class AppHeaderComponent extends Component {
         />
       </div>
 
-      {{#if this.settings.showQuickSearchButtons}}
+      {{#if this.showQuickSearch}}
         <div class="header-center {{if this.hasQuery 'searching'}}">
           <CategoryChips @onSelect={{this.handleChipSelect}} />
         </div>
diff --git a/app/components/map.gjs b/app/components/map.gjs
index 7ccaee8..85e88cc 100644
--- a/app/components/map.gjs
+++ b/app/components/map.gjs
@@ -284,6 +284,7 @@ export default class MapComponent extends Component {
     // Initialize the UI service with the map center
     const initialCenter = toLonLat(view.getCenter());
     this.mapUi.updateCenter(initialCenter[1], initialCenter[0]);
+    this.mapUi.updateZoom(view.getZoom());
 
     apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty', {
       webfonts: 'data:text/css,',
@@ -1046,6 +1047,7 @@ export default class MapComponent extends Component {
     const view = this.mapInstance.getView();
     const center = toLonLat(view.getCenter());
     this.mapUi.updateCenter(center[1], center[0]);
+    this.mapUi.updateZoom(view.getZoom());
 
     // If in creation mode, update the coordinates in the service AND the URL
     if (this.mapUi.isCreating) {
diff --git a/app/services/map-ui.js b/app/services/map-ui.js
index b5a7823..4109c3a 100644
--- a/app/services/map-ui.js
+++ b/app/services/map-ui.js
@@ -11,6 +11,7 @@ export default class MapUiService extends Service {
   @tracked returnToSearch = false;
   @tracked currentCenter = null;
   @tracked currentBounds = null;
+  @tracked currentZoom = null;
   @tracked searchBoxHasFocus = false;
   @tracked selectionOptions = {};
   @tracked preventNextZoom = false;
@@ -81,6 +82,10 @@ export default class MapUiService extends Service {
     this.currentCenter = { lat, lon };
   }
 
+  updateZoom(zoom) {
+    this.currentZoom = zoom;
+  }
+
   updateBounds(bounds) {
     this.currentBounds = bounds;
   }