feat(server,web): server config (#4006)

* feat: server config

* chore: open api

* fix: redirect /map to /photos when disabled

web/src/routes/(user)/map/+page.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import MapSettingsModal from '$lib/components/map-page/map-settings-modal.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { mapSettings } from '$lib/stores/preferences.store';
+  import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
   import { MapMarkerResponseDto, api } from '@api';
   import { isEqual, omit } from 'lodash-es';
+  import { DateTime, Duration } from 'luxon';
   import { onDestroy, onMount } from 'svelte';
   import Cog from 'svelte-material-icons/Cog.svelte';
   import type { PageData } from './$types';
-  import { DateTime, Duration } from 'luxon';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
 
   export let data: PageData;
 
@@ -29,12 +32,12 @@
   });
 
   onDestroy(() => {
-    if (abortController) {
-      abortController.abort();
-    }
+    abortController?.abort();
     assetViewingStore.showAssetViewer(false);
   });
 
+  $: $featureFlags.map || goto(AppRoute.PHOTOS);
+
   async function loadMapMarkers() {
     if (abortController) {
       abortController.abort();
@@ -98,70 +101,72 @@
   }
 </script>
 
-<UserPageLayout user={data.user} title={data.meta.title}>
-  <div class="isolate h-full w-full">
-    {#if leaflet}
-      {@const { Map, TileLayer, AssetMarkerCluster, Control } = leaflet}
-      <Map
-        center={[30, 0]}
-        zoom={3}
-        allowDarkMode={$mapSettings.allowDarkMode}
-        options={{
-          maxBounds: [
-            [-90, -180],
-            [90, 180],
-          ],
-          minZoom: 2,
-        }}
-      >
-        <TileLayer
-          urlTemplate={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
+{#if $featureFlags.loaded && $featureFlags.map}
+  <UserPageLayout user={data.user} title={data.meta.title}>
+    <div class="isolate h-full w-full">
+      {#if leaflet}
+        {@const { Map, TileLayer, AssetMarkerCluster, Control } = leaflet}
+        <Map
+          center={[30, 0]}
+          zoom={3}
+          allowDarkMode={$mapSettings.allowDarkMode}
           options={{
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            maxBounds: [
+              [-90, -180],
+              [90, 180],
+            ],
+            minZoom: 2,
           }}
-        />
-        <AssetMarkerCluster
-          markers={mapMarkers}
-          on:view={({ detail }) => onViewAssets(detail.assetIds, detail.activeAssetIndex)}
-        />
-        <Control>
-          <button
-            class="flex h-8 w-8 items-center justify-center rounded-sm border-2 border-black/20 bg-white font-bold text-black/70 hover:bg-gray-50 focus:bg-gray-50"
-            title="Open map settings"
-            on:click={() => (showSettingsModal = true)}
-          >
-            <Cog size="100%" class="p-1" />
-          </button>
-        </Control>
-      </Map>
-    {/if}
-  </div>
-</UserPageLayout>
+        >
+          <TileLayer
+            urlTemplate={$serverConfig.mapTileUrl}
+            options={{
+              attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            }}
+          />
+          <AssetMarkerCluster
+            markers={mapMarkers}
+            on:view={({ detail }) => onViewAssets(detail.assetIds, detail.activeAssetIndex)}
+          />
+          <Control>
+            <button
+              class="flex h-8 w-8 items-center justify-center rounded-sm border-2 border-black/20 bg-white font-bold text-black/70 hover:bg-gray-50 focus:bg-gray-50"
+              title="Open map settings"
+              on:click={() => (showSettingsModal = true)}
+            >
+              <Cog size="100%" class="p-1" />
+            </button>
+          </Control>
+        </Map>
+      {/if}
+    </div>
+  </UserPageLayout>
 
-<Portal target="body">
-  {#if $showAssetViewer}
-    <AssetViewer
-      asset={$viewingAsset}
-      showNavigation={viewingAssets.length > 1}
-      on:next={navigateNext}
-      on:previous={navigatePrevious}
-      on:close={() => assetViewingStore.showAssetViewer(false)}
+  <Portal target="body">
+    {#if $showAssetViewer}
+      <AssetViewer
+        asset={$viewingAsset}
+        showNavigation={viewingAssets.length > 1}
+        on:next={navigateNext}
+        on:previous={navigatePrevious}
+        on:close={() => assetViewingStore.showAssetViewer(false)}
+      />
+    {/if}
+  </Portal>
+
+  {#if showSettingsModal}
+    <MapSettingsModal
+      settings={{ ...$mapSettings }}
+      on:close={() => (showSettingsModal = false)}
+      on:save={async ({ detail }) => {
+        const shouldUpdate = !isEqual(omit(detail, 'allowDarkMode'), omit($mapSettings, 'allowDarkMode'));
+        showSettingsModal = false;
+        $mapSettings = detail;
+
+        if (shouldUpdate) {
+          mapMarkers = await loadMapMarkers();
+        }
+      }}
     />
   {/if}
-</Portal>
-
-{#if showSettingsModal}
-  <MapSettingsModal
-    settings={{ ...$mapSettings }}
-    on:close={() => (showSettingsModal = false)}
-    on:save={async ({ detail }) => {
-      const shouldUpdate = !isEqual(omit(detail, 'allowDarkMode'), omit($mapSettings, 'allowDarkMode'));
-      showSettingsModal = false;
-      $mapSettings = detail;
-
-      if (shouldUpdate) {
-        mapMarkers = await loadMapMarkers();
-      }
-    }}
-  />
 {/if}