Hide quick-search pills on low zoom levels

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>

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) {