feat(server): search unknown place (#10866)

* Allow submission of null country

* Update searchAssetBuilder to handle nulls

andWhere({country:null}) produces `"exifInfo"."country" = NULL`. We want
`"exifInfo"."country" IS NULL`, so we have to treat NULL as a special
case

* Allow null country in frontend

* Make the query code a bit more straightforward

* Remove unused brackets import

* Remove log message

* Don't change whitespace for no reason

* Fix prettier style issue

* Update search.dto.ts validators per @jrasm91's recommendation

* Update api types

* Combine null country and state into one guard clause

* chore: clean up

* chore: add e2e for null/empty city, state, country search

* refactor: server returns suggestion for null values

* chore: clean up

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
Co-authored-by: Jason Rasmussen <jason@rasm.me>

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

@@ -7,9 +7,9 @@
 </script>
 
 <script lang="ts">
-  import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
-  import Combobox, { toComboBoxOptions } from '../combobox.svelte';
+  import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
   import { handlePromiseError } from '$lib/utils';
+  import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
   export let filters: SearchLocationFilter;
@@ -25,33 +25,41 @@
   $: handlePromiseError(updateCities(countryFilter, stateFilter));
 
   async function updateCountries() {
-    countries = await getSearchSuggestions({
+    const results: Array<string | null> = await getSearchSuggestions({
       $type: SearchSuggestionType.Country,
+      includeNull: true,
     });
 
+    countries = results.map((result) => result ?? '');
+
     if (filters.country && !countries.includes(filters.country)) {
       filters.country = undefined;
     }
   }
 
   async function updateStates(country?: string) {
-    states = await getSearchSuggestions({
+    const results: Array<string | null> = await getSearchSuggestions({
       $type: SearchSuggestionType.State,
       country,
+      includeNull: true,
     });
 
+    states = results.map((result) => result ?? '');
+
     if (filters.state && !states.includes(filters.state)) {
       filters.state = undefined;
     }
   }
 
   async function updateCities(country?: string, state?: string) {
-    cities = await getSearchSuggestions({
+    const results: Array<string | null> = await getSearchSuggestions({
       $type: SearchSuggestionType.City,
       country,
       state,
     });
 
+    cities = results.map((result) => result ?? '');
+
     if (filters.city && !cities.includes(filters.city)) {
       filters.city = undefined;
     }
@@ -66,9 +74,9 @@
       <Combobox
         label={$t('country')}
         on:select={({ detail }) => (filters.country = detail?.value)}
-        options={toComboBoxOptions(countries)}
+        options={asComboboxOptions(countries)}
         placeholder={$t('search_country')}
-        selectedOption={filters.country ? { label: filters.country, value: filters.country } : undefined}
+        selectedOption={asSelectedOption(filters.country)}
       />
     </div>
 
@@ -76,9 +84,9 @@
       <Combobox
         label={$t('state')}
         on:select={({ detail }) => (filters.state = detail?.value)}
-        options={toComboBoxOptions(states)}
+        options={asComboboxOptions(states)}
         placeholder={$t('search_state')}
-        selectedOption={filters.state ? { label: filters.state, value: filters.state } : undefined}
+        selectedOption={asSelectedOption(filters.state)}
       />
     </div>
 
@@ -86,9 +94,9 @@
       <Combobox
         label={$t('city')}
         on:select={({ detail }) => (filters.city = detail?.value)}
-        options={toComboBoxOptions(cities)}
+        options={asComboboxOptions(cities)}
         placeholder={$t('search_city')}
-        selectedOption={filters.city ? { label: filters.city, value: filters.city } : undefined}
+        selectedOption={asSelectedOption(filters.city)}
       />
     </div>
   </div>