refactor(web): search box (#7397)

* refactor search suggestion handling

* chore: open api

* revert server changes

* chore: open api

* update location filters

* location filter cleanup

* refactor people filter

* refactor camera filter

* refactor display filter

* cleanup

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

web/src/lib/components/shared-components/search-bar/search-location-section.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" context="module">
+  export interface SearchLocationFilter {
+    country?: string;
+    state?: string;
+    city?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
+  import Combobox, { toComboBoxOptions } from '../combobox.svelte';
+
+  export let filters: SearchLocationFilter;
+
+  let countries: string[] = [];
+  let states: string[] = [];
+  let cities: string[] = [];
+
+  $: countryFilter = filters.country;
+  $: stateFilter = filters.state;
+  $: updateCountries();
+  $: updateStates(countryFilter);
+  $: updateCities(countryFilter, stateFilter);
+
+  async function updateCountries() {
+    countries = await getSearchSuggestions({
+      $type: SearchSuggestionType.Country,
+    });
+
+    if (filters.country && !countries.includes(filters.country)) {
+      filters.country = undefined;
+    }
+  }
+
+  async function updateStates(country?: string) {
+    states = await getSearchSuggestions({
+      $type: SearchSuggestionType.State,
+      country,
+    });
+
+    if (filters.state && !states.includes(filters.state)) {
+      filters.state = undefined;
+    }
+  }
+
+  async function updateCities(country?: string, state?: string) {
+    cities = await getSearchSuggestions({
+      $type: SearchSuggestionType.City,
+      country,
+      state,
+    });
+
+    if (filters.city && !cities.includes(filters.city)) {
+      filters.city = undefined;
+    }
+  }
+</script>
+
+<div id="location-selection">
+  <p class="immich-form-label">PLACE</p>
+
+  <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5 mt-1">
+    <div class="w-full">
+      <label class="text-sm text-black dark:text-white" for="search-place-country">Country</label>
+      <Combobox
+        id="search-place-country"
+        options={toComboBoxOptions(countries)}
+        selectedOption={filters.country ? { label: filters.country, value: filters.country } : undefined}
+        on:select={({ detail }) => (filters.country = detail?.value)}
+        placeholder="Search country..."
+      />
+    </div>
+
+    <div class="w-full">
+      <label class="text-sm text-black dark:text-white" for="search-place-state">State</label>
+      <Combobox
+        id="search-place-state"
+        options={toComboBoxOptions(states)}
+        selectedOption={filters.state ? { label: filters.state, value: filters.state } : undefined}
+        on:select={({ detail }) => (filters.state = detail?.value)}
+        placeholder="Search state..."
+      />
+    </div>
+
+    <div class="w-full">
+      <label class="text-sm text-black dark:text-white" for="search-place-city">City</label>
+      <Combobox
+        id="search-place-city"
+        options={toComboBoxOptions(cities)}
+        selectedOption={filters.city ? { label: filters.city, value: filters.city } : undefined}
+        on:select={({ detail }) => (filters.city = detail?.value)}
+        placeholder="Search city..."
+      />
+    </div>
+  </div>
+</div>