migrate places page and components to svelte 4

immich-app · Jan 26, 2025 · 0c777aa · 0c777aa
1 parent 731ac9a
commit 0c777aa
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 62 deletions.
diff --git a/web/src/lib/components/places-page/places-card-group.svelte b/web/src/lib/components/places-page/places-card-group.svelte
@@ -9,19 +9,22 @@
   import { getAssetThumbnailUrl } from '$lib/utils';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
 
-  export let places: AssetResponseDto[];
-  export let group: PlacesGroup | undefined = undefined;
+  interface Props {
+    places: AssetResponseDto[];
+    group?: PlacesGroup | undefined;
+  }
 
-  $: isCollapsed = !!group && isPlacesGroupCollapsed($placesViewSettings, group.id);
+  let { places, group = undefined }: Props = $props();
 
-  $: iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90';
+  let isCollapsed = $derived(!!group && isPlacesGroupCollapsed($placesViewSettings, group.id));
+  let iconRotation = $derived(isCollapsed ? 'rotate-0' : 'rotate-90');
 </script>
 
 {#if group}
   <div class="grid">
     <button
       type="button"
-      on:click={() => togglePlacesGroupCollapsing(group.id)}
+      onclick={() => togglePlacesGroupCollapsing(group.id)}
       class="w-fit mt-2 pt-2 pr-2 mb-2 dark:text-immich-dark-fg"
       aria-expanded={!isCollapsed}
     >

diff --git a/web/src/lib/components/places-page/places-controls.svelte b/web/src/lib/components/places-page/places-controls.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import { IconButton } from '@immich/ui';
   import Dropdown from '$lib/components/elements/dropdown.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
   import { PlacesGroupBy, placesViewSettings } from '$lib/stores/preferences.store';
   import {
     mdiFolderArrowUpOutline,
@@ -17,37 +17,30 @@
     expandAllPlacesGroups,
     collapseAllPlacesGroups,
   } from '$lib/utils/places-utils';
-  import SearchBar from '$lib/components/elements/search-bar.svelte';
   import { fly } from 'svelte/transition';
   import { t } from 'svelte-i18n';
 
-  export let searchQuery: string;
-  export let placesGroups: string[];
+  interface Props {
+    placesGroups: string[];
+    searchQuery: string;
+  }
+
+  let { placesGroups, searchQuery = $bindable() }: Props = $props();
 
   const handleChangeGroupBy = ({ id }: PlacesGroupOptionMetadata) => {
     $placesViewSettings.groupBy = id;
   };
 
-  let selectedGroupOption: PlacesGroupOptionMetadata;
-  let groupIcon: string;
+  let groupIcon = $derived.by(() => {
+    return selectedGroupOption.id === PlacesGroupBy.None ? mdiFolderRemoveOutline : mdiFolderArrowUpOutline; // OR mdiFolderArrowDownOutline
+  });
 
-  $: {
-    selectedGroupOption = findGroupOptionMetadata($placesViewSettings.groupBy);
-    if (selectedGroupOption.isDisabled()) {
-      selectedGroupOption = findGroupOptionMetadata(PlacesGroupBy.None);
-    }
-  }
-
-  $: {
-    groupIcon = selectedGroupOption.id === PlacesGroupBy.None ? mdiFolderRemoveOutline : mdiFolderArrowUpOutline; // OR mdiFolderArrowDownOutline
-  }
+  let selectedGroupOption = $derived(findGroupOptionMetadata($placesViewSettings.groupBy));
 
-  $: placesGroupByNames = ((): Record<PlacesGroupBy, string> => {
-    return {
-      [PlacesGroupBy.None]: $t('group_no'),
-      [PlacesGroupBy.Country]: $t('group_country'),
-    };
-  })();
+  let placesGroupByNames: Record<PlacesGroupBy, string> = $derived({
+    [PlacesGroupBy.None]: $t('group_no'),
+    [PlacesGroupBy.Country]: $t('group_country'),
+  });
 </script>
 
 <!-- Search Places -->
@@ -60,7 +53,7 @@
   title={$t('group_places_by')}
   options={Object.values(groupOptionsMetadata)}
   selectedOption={selectedGroupOption}
-  on:select={({ detail }) => handleChangeGroupBy(detail)}
+  onSelect={handleChangeGroupBy}
   render={({ id, isDisabled }) => ({
     title: placesGroupByNames[id],
     icon: groupIcon,
@@ -70,23 +63,29 @@
 
 {#if getSelectedPlacesGroupOption($placesViewSettings) !== PlacesGroupBy.None}
   <span in:fly={{ x: -50, duration: 250 }}>
-    <!-- Expand Countries -->
+    <!-- Expand Countries Groups -->
     <div class="hidden xl:flex gap-0">
       <div class="block">
-        <LinkButton title={$t('expand_all')} on:click={() => expandAllPlacesGroups()}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiUnfoldMoreHorizontal} size="18" />
-          </div>
-        </LinkButton>
+        <IconButton
+          title={$t('expand_all')}
+          onclick={() => expandAllPlacesGroups()}
+          variant="ghost"
+          color="secondary"
+          shape="round"
+          icon={mdiUnfoldMoreHorizontal}
+        />
       </div>
 
-      <!-- Collapse Countries -->
+      <!-- Collapse Countries Groups -->
       <div class="block">
-        <LinkButton title={$t('collapse_all')} on:click={() => collapseAllPlacesGroups(placesGroups)}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiUnfoldLessHorizontal} size="18" />
-          </div>
-        </LinkButton>
+        <IconButton
+          title={$t('collapse_all')}
+          onclick={() => collapseAllPlacesGroups(placesGroups)}
+          variant="ghost"
+          color="secondary"
+          shape="round"
+          icon={mdiUnfoldLessHorizontal}
+        />
       </div>
     </div>
   </span>

diff --git a/web/src/lib/components/places-page/places-list.svelte b/web/src/lib/components/places-page/places-list.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PlacesCardGroup from './places-card-group.svelte';
   import { groupBy } from 'lodash-es';
   import { normalizeSearchString } from '$lib/utils/string-utils';
   import { type AssetResponseDto } from '@immich/sdk';
@@ -8,15 +9,23 @@
 
   import { type PlacesGroup, getSelectedPlacesGroupOption } from '$lib/utils/places-utils';
   import { t } from 'svelte-i18n';
-  import PlacesCardGroup from './places-card-group.svelte';
-
-  export let places: AssetResponseDto[] = [];
-  export let searchQuery: string = '';
-  export let userSettings: PlacesViewSettings;
-  export let searchResultCount: number = 0;
-  export let placesGroupIds: string[] = [];
+  import { run } from 'svelte/legacy';
+
+  interface Props {
+    places?: AssetResponseDto[];
+    searchQuery?: string;
+    searchResultCount: number;
+    userSettings: PlacesViewSettings;
+    placesGroupIds?: string[];
+  }
 
-  $: hasPlaces = places.length > 0;
+  let {
+    places = $bindable([]),
+    searchQuery = '',
+    searchResultCount = $bindable(0),
+    userSettings,
+    placesGroupIds = $bindable([]),
+  }: Props = $props();
 
   interface PlacesGroupOption {
     [option: string]: (places: AssetResponseDto[]) => PlacesGroup[];
@@ -61,13 +70,15 @@
     },
   };
 
-  let filteredPlaces: AssetResponseDto[] = [];
-  let groupedPlaces: PlacesGroup[] = [];
+  let filteredPlaces: AssetResponseDto[] = $state([]);
+  let groupedPlaces: PlacesGroup[] = $state([]);
 
-  let placesGroupOption: string = PlacesGroupBy.None;
+  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);
 
@@ -79,16 +90,16 @@
     }
 
     searchResultCount = filteredPlaces.length;
-  }
+  });
 
   // Step 2: Group places.
-  $: {
+  run(() => {
     placesGroupOption = getSelectedPlacesGroupOption(userSettings);
     const groupFunc = groupOptions[placesGroupOption] ?? groupOptions[PlacesGroupBy.None];
     groupedPlaces = groupFunc(filteredPlaces);
 
     placesGroupIds = groupedPlaces.map(({ id }) => id);
-  }
+  });
 </script>
 
 {#if hasPlaces}

diff --git a/web/src/routes/(user)/places/+page.svelte b/web/src/routes/(user)/places/+page.svelte
@@ -20,9 +20,9 @@
     };
   };
 
-  let searchQuery = '';
-  let searchResultCount = 0;
-  let placesGroups: string[] = [];
+  let searchQuery = $state('');
+  let searchResultCount = $state(0);
+  let placesGroups: string[] = $state([]);
 
   let places = $derived(data.items.filter((item): item is AssetWithCity => !!item.exifInfo?.city));
   let countVisiblePlaces = $derived(searchQuery ? searchResultCount : places.length);
@@ -36,9 +36,11 @@
   title={$t('places')}
   description={countVisiblePlaces === 0 && !searchQuery ? undefined : `(${countVisiblePlaces.toLocaleString($locale)})`}
 >
-  <div class="flex place-items-center gap-2" slot="buttons">
-    <PlacesControls {placesGroups} bind:searchQuery />
-  </div>
+  {#snippet buttons()}
+    <div class="flex place-items-center gap-2">
+      <PlacesControls {placesGroups} bind:searchQuery />
+    </div>
+  {/snippet}
 
   <Places
     {places}