chore: refactor svelte reactivity (#24072)

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -52,7 +52,7 @@
   let innerHeight: number = $state(0);
   let activityHeight: number = $state(0);
   let chatHeight: number = $state(0);
-  let divHeight: number = $state(0);
+  let divHeight = $derived(innerHeight - activityHeight);
   let previousAssetId: string | undefined = $state(assetId);
   let message = $state('');
   let isSendingMessage = $state(false);
@@ -96,11 +96,7 @@
     }
     isSendingMessage = false;
   };
-  $effect(() => {
-    if (innerHeight && activityHeight) {
-      divHeight = innerHeight - activityHeight;
-    }
-  });
+
   $effect(() => {
     if (assetId && previousAssetId != assetId) {
       previousAssetId = assetId;

web/src/lib/components/asset-viewer/album-list-item.svelte

@@ -35,15 +35,13 @@
     });
   };
 
-  let albumNameArray: string[] = $state(['', '', '']);
-
   // This part of the code is responsible for splitting album name into 3 parts where part 2 is the search query
   // It is used to highlight the search query in the album name
-  $effect(() => {
+  const albumNameArray: string[] = $derived.by(() => {
     let { albumName } = album;
     let findIndex = normalizeSearchString(albumName).indexOf(normalizeSearchString(searchQuery));
     let findLength = searchQuery.length;
-    albumNameArray = [
+    return [
       albumName.slice(0, findIndex),
       albumName.slice(findIndex, findIndex + findLength),
       albumName.slice(findIndex + findLength),

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -395,13 +395,11 @@
     }
   });
 
-  let currentAssetId = $derived(asset.id);
+  // primarily, this is reactive on `asset`
   $effect(() => {
-    if (currentAssetId) {
-      untrack(() => handlePromiseError(handleGetAllAlbums()));
-      ocrManager.clear();
-      handlePromiseError(ocrManager.getAssetOcr(currentAssetId));
-    }
+    handlePromiseError(handleGetAllAlbums());
+    ocrManager.clear();
+    handlePromiseError(ocrManager.getAssetOcr(asset.id));
   });
 </script>
 

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -171,7 +171,6 @@
 
   $effect(() => {
     if (assetFileUrl) {
-      // this can't be in an async context with $effect
       void cast(assetFileUrl);
     }
   });

web/src/lib/components/asset-viewer/video-native-viewer.svelte

@@ -43,7 +43,9 @@
 
   let videoPlayer: HTMLVideoElement | undefined = $state();
   let isLoading = $state(true);
-  let assetFileUrl = $state('');
+  let assetFileUrl = $derived(
+    playOriginalVideo ? getAssetOriginalUrl({ id: assetId, cacheKey }) : getAssetPlaybackUrl({ id: assetId, cacheKey }),
+  );
   let isScrubbing = $state(false);
   let showVideo = $state(false);
 
@@ -53,11 +55,9 @@
   });
 
   $effect(() => {
-    assetFileUrl = playOriginalVideo
-      ? getAssetOriginalUrl({ id: assetId, cacheKey })
-      : getAssetPlaybackUrl({ id: assetId, cacheKey });
-    if (videoPlayer) {
-      videoPlayer.load();
+    // reactive on `assetFileUrl` changes
+    if (assetFileUrl) {
+      videoPlayer?.load();
     }
   });
 

web/src/lib/components/asset-viewer/video-remote-viewer.svelte

@@ -35,7 +35,6 @@
 
   $effect(() => {
     if (assetFileUrl) {
-      // this can't be in an async context with $effect
       void cast(assetFileUrl);
     }
   });

web/src/lib/components/places-page/places-list.svelte

@@ -9,7 +9,6 @@
   import { type PlacesGroup, getSelectedPlacesGroupOption } from '$lib/utils/places-utils';
   import { Icon } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { run } from 'svelte/legacy';
 
   interface Props {
     places?: AssetResponseDto[];
@@ -70,39 +69,27 @@
     },
   };
 
-  let filteredPlaces: AssetResponseDto[] = $state([]);
-  let groupedPlaces: PlacesGroup[] = $state([]);
+  const filteredPlaces = $derived.by(() => {
+    const searchQueryNormalized = normalizeSearchString(searchQuery);
+    return searchQueryNormalized
+      ? places.filter((place) => normalizeSearchString(place.exifInfo?.city ?? '').includes(searchQueryNormalized))
+      : places;
+  });
 
-  let placesGroupOption: string = $state(PlacesGroupBy.None);
-
-  let hasPlaces = $derived(places.length > 0);
-
-  // Step 1: Filter using the given search query.
-  run(() => {
-    if (searchQuery) {
-      const searchQueryNormalized = normalizeSearchString(searchQuery);
-
-      filteredPlaces = places.filter((place) => {
-        return normalizeSearchString(place.exifInfo?.city ?? '').includes(searchQueryNormalized);
-      });
-    } else {
-      filteredPlaces = places;
-    }
+  const placesGroupOption: string = $derived(getSelectedPlacesGroupOption(userSettings));
+  const groupingFunction = $derived(groupOptions[placesGroupOption] ?? groupOptions[PlacesGroupBy.None]);
+  const groupedPlaces: PlacesGroup[] = $derived(groupingFunction(filteredPlaces));
 
+  $effect(() => {
     searchResultCount = filteredPlaces.length;
   });
 
-  // Step 2: Group places.
-  run(() => {
-    placesGroupOption = getSelectedPlacesGroupOption(userSettings);
-    const groupFunc = groupOptions[placesGroupOption] ?? groupOptions[PlacesGroupBy.None];
-    groupedPlaces = groupFunc(filteredPlaces);
-
+  $effect(() => {
     placesGroupIds = groupedPlaces.map(({ id }) => id);
   });
 </script>
 
-{#if hasPlaces}
+{#if places.length > 0}
   <!-- Album Cards -->
   {#if placesGroupOption === PlacesGroupBy.None}
     <PlacesCardGroup places={groupedPlaces[0].places} />

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">