feat(server, web)!: Move reverse geocoding settings to the UI (#4222)

* feat: reverse geocoding settings

* chore: open api

* re-init geocoder if precision has been updated

* update docs

* chore: update verbiage

* fix: re-init logic

* fix: reset to default

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/api/open-api/api.ts

@@ -1055,6 +1055,22 @@ export interface CheckExistingAssetsResponseDto {
      */
     'existingIds': Array<string>;
 }
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
+export const CitiesFile = {
+    Cities15000: 'cities15000',
+    Cities5000: 'cities5000',
+    Cities1000: 'cities1000',
+    Cities500: 'cities500'
+} as const;
+
+export type CitiesFile = typeof CitiesFile[keyof typeof CitiesFile];
+
+
 /**
  * 
  * @export
@@ -2650,6 +2666,12 @@ export interface ServerFeaturesDto {
      * @memberof ServerFeaturesDto
      */
     'passwordLogin': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof ServerFeaturesDto
+     */
+    'reverseGeocoding': boolean;
     /**
      * 
      * @type {boolean}
@@ -3093,6 +3115,12 @@ export interface SystemConfigDto {
      * @memberof SystemConfigDto
      */
     'passwordLogin': SystemConfigPasswordLoginDto;
+    /**
+     * 
+     * @type {SystemConfigReverseGeocodingDto}
+     * @memberof SystemConfigDto
+     */
+    'reverseGeocoding': SystemConfigReverseGeocodingDto;
     /**
      * 
      * @type {SystemConfigStorageTemplateDto}
@@ -3438,6 +3466,27 @@ export interface SystemConfigPasswordLoginDto {
      */
     'enabled': boolean;
 }
+/**
+ * 
+ * @export
+ * @interface SystemConfigReverseGeocodingDto
+ */
+export interface SystemConfigReverseGeocodingDto {
+    /**
+     * 
+     * @type {CitiesFile}
+     * @memberof SystemConfigReverseGeocodingDto
+     */
+    'citiesFileOverride': CitiesFile;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SystemConfigReverseGeocodingDto
+     */
+    'enabled': boolean;
+}
+
+
 /**
  * 
  * @export

web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte

@@ -4,23 +4,25 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import { handleError } from '$lib/utils/handle-error';
-  import { api, SystemConfigMapDto } from '@api';
-  import { isEqual } from 'lodash-es';
+  import { api, CitiesFile, SystemConfigDto } from '@api';
+  import { cloneDeep, isEqual } from 'lodash-es';
   import { fade } from 'svelte/transition';
+  import SettingAccordion from '../setting-accordion.svelte';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import SettingSwitch from '../setting-switch.svelte';
+  import SettingSelect from '../setting-select.svelte';
 
-  export let mapConfig: SystemConfigMapDto; // this is the config that is being edited
+  export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
 
-  let savedConfig: SystemConfigMapDto;
-  let defaultConfig: SystemConfigMapDto;
+  let savedConfig: SystemConfigDto;
+  let defaultConfig: SystemConfigDto;
 
-  async function getConfigs() {
+  async function refreshConfig() {
     [savedConfig, defaultConfig] = await Promise.all([
-      api.systemConfigApi.getConfig().then((res) => res.data.map),
-      api.systemConfigApi.getDefaults().then((res) => res.data.map),
+      api.systemConfigApi.getConfig().then((res) => res.data),
+      api.systemConfigApi.getDefaults().then((res) => res.data),
     ]);
   }
 
@@ -28,11 +30,21 @@
     try {
       const { data: current } = await api.systemConfigApi.getConfig();
       const { data: updated } = await api.systemConfigApi.updateConfig({
-        systemConfigDto: { ...current, map: mapConfig },
+        systemConfigDto: {
+          ...current,
+          map: {
+            enabled: config.map.enabled,
+            tileUrl: config.map.tileUrl,
+          },
+          reverseGeocoding: {
+            enabled: config.reverseGeocoding.enabled,
+            citiesFileOverride: config.reverseGeocoding.citiesFileOverride,
+          },
+        },
       });
 
-      mapConfig = { ...updated.map };
-      savedConfig = { ...updated.map };
+      config = cloneDeep(updated);
+      savedConfig = cloneDeep(updated);
 
       notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
     } catch (error) {
@@ -43,8 +55,8 @@
   async function reset() {
     const { data: resetConfig } = await api.systemConfigApi.getConfig();
 
-    mapConfig = { ...resetConfig.map };
-    savedConfig = { ...resetConfig.map };
+    config = cloneDeep(resetConfig);
+    savedConfig = cloneDeep(resetConfig);
 
     notificationController.show({
       message: 'Reset settings to the recent saved settings',
@@ -55,8 +67,8 @@
   async function resetToDefault() {
     const { data: configs } = await api.systemConfigApi.getDefaults();
 
-    mapConfig = { ...configs.map };
-    defaultConfig = { ...configs.map };
+    config = cloneDeep(configs);
+    defaultConfig = cloneDeep(configs);
 
     notificationController.show({
       message: 'Reset map settings to default',
@@ -65,30 +77,81 @@
   }
 </script>
 
-<div>
-  {#await getConfigs() then}
+<div class="mt-2">
+  {#await refreshConfig() then}
     <div in:fade={{ duration: 500 }}>
       <form autocomplete="off" on:submit|preventDefault>
-        <div class="ml-4 mt-4 flex flex-col gap-4">
-          <SettingSwitch title="ENABLED" {disabled} subtitle="Enable map features" bind:checked={mapConfig.enabled} />
+        <div class="flex flex-col gap-4">
+          <SettingAccordion title="Map Settings" subtitle="Manage map settings">
+            <div class="ml-4 mt-4 flex flex-col gap-4">
+              <SettingSwitch
+                title="ENABLED"
+                {disabled}
+                subtitle="Enable map features"
+                bind:checked={config.map.enabled}
+              />
 
-          <hr />
+              <hr />
 
-          <SettingInputField
-            inputType={SettingInputFieldType.TEXT}
-            label="Tile URL"
-            desc="URL to a leaflet compatible tile server"
-            bind:value={mapConfig.tileUrl}
-            required={true}
-            disabled={disabled || !mapConfig.enabled}
-            isEdited={mapConfig.tileUrl !== savedConfig.tileUrl}
-          />
+              <SettingInputField
+                inputType={SettingInputFieldType.TEXT}
+                label="Tile URL"
+                desc="URL to a leaflet compatible tile server"
+                bind:value={config.map.tileUrl}
+                required={true}
+                disabled={disabled || !config.map.enabled}
+                isEdited={config.map.tileUrl !== savedConfig.map.tileUrl}
+              />
+            </div></SettingAccordion
+          >
+
+          <SettingAccordion title="Reverse Geocoding Settings">
+            <svelte:fragment slot="subtitle">
+              <p class="text-sm dark:text-immich-dark-fg">
+                Manage <a
+                  href="https://immich.app/docs/features/reverse-geocoding"
+                  class="underline"
+                  target="_blank"
+                  rel="noreferrer">Reverse Geocoding</a
+                > settings
+              </p>
+            </svelte:fragment>
+            <div class="ml-4 mt-4 flex flex-col gap-4">
+              <SettingSwitch
+                title="ENABLED"
+                {disabled}
+                subtitle="Enable reverse geocoding"
+                bind:checked={config.reverseGeocoding.enabled}
+              />
+
+              <hr />
+
+              <SettingSelect
+                label="Precision"
+                desc="Set reverse geocoding precision"
+                name="reverse-geocoding-precision"
+                bind:value={config.reverseGeocoding.citiesFileOverride}
+                options={[
+                  { value: CitiesFile.Cities500, text: 'Cities with more than 500 people' },
+                  { value: CitiesFile.Cities1000, text: 'Cities with more than 1000 people' },
+                  { value: CitiesFile.Cities5000, text: 'Cities with more than 5000 people' },
+                  { value: CitiesFile.Cities15000, text: 'Cities with more than 15000 people' },
+                ]}
+                disabled={disabled || !config.reverseGeocoding.enabled}
+                isEdited={config.reverseGeocoding.citiesFileOverride !==
+                  savedConfig.reverseGeocoding.citiesFileOverride}
+              />
+            </div></SettingAccordion
+          >
 
           <SettingButtonsRow
             on:reset={reset}
             on:save={saveSetting}
             on:reset-to-default={resetToDefault}
-            showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+            showResetToDefault={!isEqual(
+              { ...savedConfig.map, ...savedConfig.reverseGeocoding },
+              { ...defaultConfig.map, ...defaultConfig.reverseGeocoding },
+            )}
             {disabled}
           />
         </div>

web/src/lib/components/admin-page/settings/setting-accordion.svelte

@@ -14,7 +14,9 @@
         {title}
       </h2>
 
-      <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+      <slot name="subtitle">
+        <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+      </slot>
     </div>
 
     <button

web/src/lib/stores/server-config.store.ts

@@ -10,6 +10,7 @@ export const featureFlags = writable<FeatureFlags>({
   sidecar: true,
   tagImage: true,
   map: true,
+  reverseGeocoding: true,
   search: true,
   oauth: false,
   oauthAutoLaunch: false,

web/src/routes/admin/system-settings/+page.svelte

@@ -67,12 +67,12 @@
       <JobSettings disabled={$featureFlags.configFile} jobConfig={configs.job} />
     </SettingAccordion>
 
-    <SettingAccordion title="Machine Learning Settings" subtitle="Manage model settings">
+    <SettingAccordion title="Machine Learning Settings" subtitle="Manage machine learning features and settings">
       <MachineLearningSettings disabled={$featureFlags.configFile} machineLearningConfig={configs.machineLearning} />
     </SettingAccordion>
 
-    <SettingAccordion title="Map Settings" subtitle="Manage map settings">
-      <MapSettings disabled={$featureFlags.configFile} mapConfig={configs.map} />
+    <SettingAccordion title="Map & GPS Settings" subtitle="Manage map related features and setting">
+      <MapSettings disabled={$featureFlags.configFile} config={configs} />
     </SettingAccordion>
 
     <SettingAccordion title="OAuth Authentication" subtitle="Manage the login with OAuth settings">