feat(web): revamp places (#12219)

* revamp places

* add english translations

* migrate places page and components to svelte 5

* fix lint

* chore: cleanup

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>

web/src/lib/components/elements/dropdown.svelte

@@ -26,12 +26,14 @@
     controlable?: boolean;
     hideTextOnSmallScreen?: boolean;
     title?: string | undefined;
+    position?: 'bottom-left' | 'bottom-right';
     onSelect: (option: T) => void;
     onClickOutside?: () => void;
     render?: (item: T) => string | RenderedOption;
   }
 
   let {
+    position = 'bottom-left',
     class: className = '',
     options,
     selectedOption = $bindable(options[0]),
@@ -76,9 +78,24 @@
   };
 
   let renderedSelectedOption = $derived(renderOption(selectedOption));
+
+  const getAlignClass = (position: 'bottom-left' | 'bottom-right') => {
+    switch (position) {
+      case 'bottom-left': {
+        return 'left-0';
+      }
+      case 'bottom-right': {
+        return 'right-0';
+      }
+
+      default: {
+        return '';
+      }
+    }
+  };
 </script>
 
-<div use:clickOutside={{ onOutclick: handleClickOutside, onEscape: handleClickOutside }}>
+<div use:clickOutside={{ onOutclick: handleClickOutside, onEscape: handleClickOutside }} class="relative">
   <!-- BUTTON TITLE -->
   <Button onclick={() => (showMenu = true)} fullWidth {title} variant="ghost" color="secondary" size="small">
     {#if renderedSelectedOption?.icon}
@@ -91,7 +108,9 @@
   {#if showMenu}
     <div
       transition:fly={{ y: -30, duration: 250 }}
-      class="text-sm font-medium fixed z-50 flex min-w-[250px] max-h-[70vh] overflow-y-auto immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white {className}"
+      class="text-sm font-medium absolute z-50 flex min-w-[250px] max-h-[70vh] overflow-y-auto immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white {className} {getAlignClass(
+        position,
+      )}"
     >
       {#each options as option (option)}
         {@const renderedOption = renderOption(option)}

web/src/lib/components/places-page/places-card-group.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { AppRoute } from '$lib/constants';
+  import { AssetMediaSize, type AssetResponseDto } from '@immich/sdk';
+  import { placesViewSettings } from '$lib/stores/preferences.store';
+  import { type PlacesGroup, isPlacesGroupCollapsed, togglePlacesGroupCollapsing } from '$lib/utils/places-utils';
+  import { mdiChevronRight } from '@mdi/js';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { t } from 'svelte-i18n';
+  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
+
+  interface Props {
+    places: AssetResponseDto[];
+    group?: PlacesGroup | undefined;
+  }
+
+  let { places, group = undefined }: Props = $props();
+
+  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"
+      onclick={() => togglePlacesGroupCollapsing(group.id)}
+      class="w-fit mt-2 pt-2 pr-2 mb-2 dark:text-immich-dark-fg"
+      aria-expanded={!isCollapsed}
+    >
+      <Icon
+        path={mdiChevronRight}
+        size="24"
+        class="inline-block -mt-2.5 transition-all duration-[250ms] {iconRotation}"
+      />
+      <span class="font-bold text-3xl text-black dark:text-white">{group.name}</span>
+      <span class="ml-1.5">({$t('places_count', { values: { count: places.length } })})</span>
+    </button>
+    <hr class="dark:border-immich-dark-gray" />
+  </div>
+{/if}
+
+<div class="mt-4">
+  {#if !isCollapsed}
+    <div class="flex flex-row flex-wrap gap-4">
+      {#each places as item}
+        {@const city = item.exifInfo?.city}
+        <a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city })}" draggable="false">
+          <div
+            class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
+          >
+            <img
+              src={getAssetThumbnailUrl({ id: item.id, size: AssetMediaSize.Thumbnail })}
+              alt={city}
+              class="object-cover w-[156px] h-[156px]"
+            />
+          </div>
+          <span
+            class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
+          >
+            {city}
+          </span>
+        </a>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { IconButton } from '@immich/ui';
+  import Dropdown from '$lib/components/elements/dropdown.svelte';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
+  import { PlacesGroupBy, placesViewSettings } from '$lib/stores/preferences.store';
+  import {
+    mdiFolderArrowUpOutline,
+    mdiFolderRemoveOutline,
+    mdiUnfoldLessHorizontal,
+    mdiUnfoldMoreHorizontal,
+  } from '@mdi/js';
+  import {
+    type PlacesGroupOptionMetadata,
+    findGroupOptionMetadata,
+    getSelectedPlacesGroupOption,
+    groupOptionsMetadata,
+    expandAllPlacesGroups,
+    collapseAllPlacesGroups,
+  } from '$lib/utils/places-utils';
+  import { fly } from 'svelte/transition';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    placesGroups: string[];
+    searchQuery: string;
+  }
+
+  let { placesGroups, searchQuery = $bindable() }: Props = $props();
+
+  const handleChangeGroupBy = ({ id }: PlacesGroupOptionMetadata) => {
+    $placesViewSettings.groupBy = id;
+  };
+
+  let groupIcon = $derived.by(() => {
+    return selectedGroupOption.id === PlacesGroupBy.None ? mdiFolderRemoveOutline : mdiFolderArrowUpOutline; // OR mdiFolderArrowDownOutline
+  });
+
+  let selectedGroupOption = $derived(findGroupOptionMetadata($placesViewSettings.groupBy));
+
+  let placesGroupByNames: Record<PlacesGroupBy, string> = $derived({
+    [PlacesGroupBy.None]: $t('group_no'),
+    [PlacesGroupBy.Country]: $t('group_country'),
+  });
+</script>
+
+<!-- Search Places -->
+<div class="hidden md:block h-10 xl:w-60 2xl:w-80">
+  <SearchBar placeholder={$t('search_places')} bind:name={searchQuery} showLoadingSpinner={false} />
+</div>
+
+<!-- Group Places -->
+<Dropdown
+  position="bottom-right"
+  title={$t('group_places_by')}
+  options={Object.values(groupOptionsMetadata)}
+  selectedOption={selectedGroupOption}
+  onSelect={handleChangeGroupBy}
+  render={({ id, isDisabled }) => ({
+    title: placesGroupByNames[id],
+    icon: groupIcon,
+    disabled: isDisabled(),
+  })}
+/>
+
+{#if getSelectedPlacesGroupOption($placesViewSettings) !== PlacesGroupBy.None}
+  <span in:fly={{ x: -50, duration: 250 }}>
+    <!-- Expand Countries Groups -->
+    <div class="hidden xl:flex gap-0">
+      <div class="block">
+        <IconButton
+          title={$t('expand_all')}
+          onclick={() => expandAllPlacesGroups()}
+          variant="ghost"
+          color="secondary"
+          shape="round"
+          icon={mdiUnfoldMoreHorizontal}
+        />
+      </div>
+
+      <!-- Collapse Countries Groups -->
+      <div class="block">
+        <IconButton
+          title={$t('collapse_all')}
+          onclick={() => collapseAllPlacesGroups(placesGroups)}
+          variant="ghost"
+          color="secondary"
+          shape="round"
+          icon={mdiUnfoldLessHorizontal}
+        />
+      </div>
+    </div>
+  </span>
+{/if}

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

@@ -0,0 +1,121 @@
+<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';
+  import { mdiMapMarkerOff } from '@mdi/js';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { PlacesGroupBy, type PlacesViewSettings } from '$lib/stores/preferences.store';
+
+  import { type PlacesGroup, getSelectedPlacesGroupOption } from '$lib/utils/places-utils';
+  import { t } from 'svelte-i18n';
+  import { run } from 'svelte/legacy';
+
+  interface Props {
+    places?: AssetResponseDto[];
+    searchQuery?: string;
+    searchResultCount: number;
+    userSettings: PlacesViewSettings;
+    placesGroupIds?: string[];
+  }
+
+  let {
+    places = $bindable([]),
+    searchQuery = '',
+    searchResultCount = $bindable(0),
+    userSettings,
+    placesGroupIds = $bindable([]),
+  }: Props = $props();
+
+  interface PlacesGroupOption {
+    [option: string]: (places: AssetResponseDto[]) => PlacesGroup[];
+  }
+
+  const groupOptions: PlacesGroupOption = {
+    /** No grouping */
+    [PlacesGroupBy.None]: (places): PlacesGroup[] => {
+      return [
+        {
+          id: $t('places'),
+          name: $t('places'),
+          places,
+        },
+      ];
+    },
+
+    /** Group by year */
+    [PlacesGroupBy.Country]: (places): PlacesGroup[] => {
+      const unknownCountry = $t('unknown_country');
+
+      const groupedByCountry = groupBy(places, (place) => {
+        return place.exifInfo?.country ?? unknownCountry;
+      });
+
+      const sortedByCountryName = Object.entries(groupedByCountry).sort(([a], [b]) => {
+        // We make sure empty albums stay at the end of the list
+        if (a === unknownCountry) {
+          return 1;
+        } else if (b === unknownCountry) {
+          return -1;
+        } else {
+          return a.localeCompare(b);
+        }
+      });
+
+      return sortedByCountryName.map(([country, places]) => ({
+        id: country,
+        name: country,
+        places,
+      }));
+    },
+  };
+
+  let filteredPlaces: AssetResponseDto[] = $state([]);
+  let groupedPlaces: PlacesGroup[] = $state([]);
+
+  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;
+    }
+
+    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}
+  <!-- Album Cards -->
+  {#if placesGroupOption === PlacesGroupBy.None}
+    <PlacesCardGroup places={groupedPlaces[0].places} />
+  {:else}
+    {#each groupedPlaces as placeGroup (placeGroup.id)}
+      <PlacesCardGroup places={placeGroup.places} group={placeGroup} />
+    {/each}
+  {/if}
+{:else}
+  <div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
+    <div class="flex flex-col content-center items-center text-center">
+      <Icon path={mdiMapMarkerOff} size="3.5em" />
+      <p class="mt-5 text-3xl font-medium">{$t('no_places')}</p>
+    </div>
+  </div>
+{/if}