chore: refactor svelte reactivity (#24072)

web/src/lib/components/shared-components/change-location.svelte

@@ -27,7 +27,7 @@
   let { asset = undefined, point: initialPoint, onClose }: Props = $props();
 
   let places: PlacesResponseDto[] = $state([]);
-  let suggestedPlaces: PlacesResponseDto[] = $state([]);
+  let suggestedPlaces: PlacesResponseDto[] = $derived(places.slice(0, 5));
   let searchWord: string = $state('');
   let latestSearchTimeout: number;
   let showLoadingSpinner = $state(false);
@@ -52,9 +52,6 @@
   });
 
   $effect(() => {
-    if (places) {
-      suggestedPlaces = places.slice(0, 5);
-    }
     if (searchWord === '') {
       suggestedPlaces = [];
     }

web/src/lib/components/shared-components/context-menu/context-menu.svelte

@@ -33,37 +33,36 @@
     children,
   }: Props = $props();
 
-  let left: number = $state(0);
-  let top: number = $state(0);
+  const swap = (direction: string) => (direction === 'left' ? 'right' : 'left');
+
+  const layoutDirection = $derived(languageManager.rtl ? swap(direction) : direction);
+  const position = $derived.by(() => {
+    if (!menuElement) {
+      return { left: 0, top: 0 };
+    }
+
+    const rect = menuElement.getBoundingClientRect();
+    const directionWidth = layoutDirection === 'left' ? rect.width : 0;
+    const menuHeight = Math.min(menuElement.clientHeight, height) || 0;
+
+    const left = Math.max(8, Math.min(window.innerWidth - rect.width, x - directionWidth));
+    const top = Math.max(8, Math.min(window.innerHeight - menuHeight, y));
+
+    return { left, top };
+  });
 
   // We need to bind clientHeight since the bounding box may return a height
   // of zero when starting the 'slide' animation.
   let height: number = $state(0);
 
   let isTransitioned = $state(false);
-
-  $effect(() => {
-    if (menuElement) {
-      let layoutDirection = direction;
-      if (languageManager.rtl) {
-        layoutDirection = direction === 'left' ? 'right' : 'left';
-      }
-
-      const rect = menuElement.getBoundingClientRect();
-      const directionWidth = layoutDirection === 'left' ? rect.width : 0;
-      const menuHeight = Math.min(menuElement.clientHeight, height) || 0;
-
-      left = Math.max(8, Math.min(window.innerWidth - rect.width, x - directionWidth));
-      top = Math.max(8, Math.min(window.innerHeight - menuHeight, y));
-    }
-  });
 </script>
 
 <div
   bind:clientHeight={height}
   class="fixed min-w-50 w-max max-w-75 overflow-hidden rounded-lg shadow-lg z-1"
-  style:left="{left}px"
-  style:top="{top}px"
+  style:left="{position.left}px"
+  style:top="{position.top}px"
   transition:slide={{ duration: 250, easing: quintOut }}
   use:clickOutside={{ onOutclick: onClose }}
   onintroend={() => {

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

@@ -64,10 +64,11 @@
     }
   }
 
-  let makeFilter = $derived(filters.make);
-  let modelFilter = $derived(filters.model);
-  let lensModelFilter = $derived(filters.lensModel);
+  const makeFilter = $derived(filters.make);
+  const modelFilter = $derived(filters.model);
+  const lensModelFilter = $derived(filters.lensModel);
 
+  // TODO replace by async $derived, at the latest when it's in stable https://svelte.dev/docs/svelte/await-expressions
   $effect(() => {
     handlePromiseError(updateMakes());
   });

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

@@ -7,11 +7,10 @@
 </script>
 
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
   import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -66,15 +65,12 @@
   }
   let countryFilter = $derived(filters.country);
   let stateFilter = $derived(filters.state);
-  run(() => {
-    handlePromiseError(updateCountries());
-  });
-  run(() => {
-    handlePromiseError(updateStates(countryFilter));
-  });
-  run(() => {
-    handlePromiseError(updateCities(countryFilter, stateFilter));
-  });
+
+  // TODO replace by async $derived, at the latest when it's in stable https://svelte.dev/docs/svelte/await-expressions
+  $effect(() => handlePromiseError(updateStates(countryFilter)));
+  $effect(() => handlePromiseError(updateCities(countryFilter, stateFilter)));
+
+  onMount(() => updateCountries());
 </script>
 
 <div id="location-selection">