Add setting for hiding quick search buttons

app/components/app-header.gjs

@@ -10,6 +10,7 @@ import CategoryChips from '#components/category-chips';
 
 export default class AppHeaderComponent extends Component {
   @service storage;
+  @service settings;
   @tracked isUserMenuOpen = false;
   @tracked searchQuery = '';
 
@@ -49,9 +50,11 @@ export default class AppHeaderComponent extends Component {
         />
       </div>
 
+      {{#if this.settings.showQuickSearchButtons}}
         <div class="header-center {{if this.hasQuery 'searching'}}">
           <CategoryChips @onSelect={{this.handleChipSelect}} />
         </div>
+      {{/if}}
 
       <div class="header-right">
         <div class="user-menu-container">

app/components/app-menu/settings.gjs

@@ -18,6 +18,11 @@ export default class AppMenuSettings extends Component {
     this.settings.updateMapKinetic(event.target.value === 'true');
   }
 
+  @action
+  toggleQuickSearchButtons(event) {
+    this.settings.updateShowQuickSearchButtons(event.target.value === 'true');
+  }
+
   @action
   updatePhotonApi(event) {
     this.settings.updatePhotonApi(event.target.value);
@@ -36,6 +41,30 @@ export default class AppMenuSettings extends Component {
 
     <div class="sidebar-content">
       <section class="settings-section">
+        <div class="form-group">
+          <label for="show-quick-search">Quick search buttons visible</label>
+          <select
+            id="show-quick-search"
+            class="form-control"
+            {{on "change" this.toggleQuickSearchButtons}}
+          >
+            <option
+              value="true"
+              selected={{if this.settings.showQuickSearchButtons "selected"}}
+            >
+              Yes
+            </option>
+            <option
+              value="false"
+              selected={{unless
+                this.settings.showQuickSearchButtons
+                "selected"
+              }}
+            >
+              No
+            </option>
+          </select>
+        </div>
         <div class="form-group">
           <label for="map-kinetic">Map Inertia (Kinetic Panning)</label>
           <select

app/services/settings.js

@@ -5,6 +5,7 @@ export default class SettingsService extends Service {
   @tracked overpassApi = 'https://overpass-api.de/api/interpreter';
   @tracked mapKinetic = true;
   @tracked photonApi = 'https://photon.komoot.io/api/';
+  @tracked showQuickSearchButtons = true;
 
   overpassApis = [
     {
@@ -56,6 +57,13 @@ export default class SettingsService extends Service {
       this.mapKinetic = savedKinetic === 'true';
     }
     // Default is true (initialized in class field)
+
+    const savedShowQuickSearch = localStorage.getItem(
+      'marco:show-quick-search'
+    );
+    if (savedShowQuickSearch !== null) {
+      this.showQuickSearchButtons = savedShowQuickSearch === 'true';
+    }
   }
 
   updateOverpassApi(url) {
@@ -68,6 +76,11 @@ export default class SettingsService extends Service {
     localStorage.setItem('marco:map-kinetic', String(enabled));
   }
 
+  updateShowQuickSearchButtons(enabled) {
+    this.showQuickSearchButtons = enabled;
+    localStorage.setItem('marco:show-quick-search', String(enabled));
+  }
+
   updatePhotonApi(url) {
     this.photonApi = url;
   }

tests/integration/components/app-header-test.gjs

@@ -14,11 +14,15 @@ module('Integration | Component | app-header', function (hooks) {
     class MockRouterService extends Service {}
     class MockMapUiService extends Service {}
     class MockMapService extends Service {}
+    class MockSettingsService extends Service {
+      showQuickSearchButtons = true;
+    }
 
     this.owner.register('service:photon', MockPhotonService);
     this.owner.register('service:router', MockRouterService);
     this.owner.register('service:map-ui', MockMapUiService);
     this.owner.register('service:map', MockMapService);
+    this.owner.register('service:settings', MockSettingsService);
 
     await render(
       <template><AppHeader @onToggleMenu={{this.noop}} /></template>
@@ -43,11 +47,15 @@ module('Integration | Component | app-header', function (hooks) {
       currentCenter = null;
     }
     class MockMapService extends Service {}
+    class MockSettingsService extends Service {
+      showQuickSearchButtons = true;
+    }
 
     this.owner.register('service:photon', MockPhotonService);
     this.owner.register('service:router', MockRouterService);
     this.owner.register('service:map-ui', MockMapUiService);
     this.owner.register('service:map', MockMapService);
+    this.owner.register('service:settings', MockSettingsService);
 
     await render(
       <template><AppHeader @onToggleMenu={{this.noop}} /></template>