Merge 35dbcd288eea4055270e312ca73a65b2fc78720f into d46e50213a0d72c5cd7ca0feabc2df89196bb6d3

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

@@ -0,0 +1,64 @@
+<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';
+
+  export let places: AssetResponseDto[];
+  export let group: PlacesGroup | undefined = undefined;
+
+  $: isCollapsed = !!group && isPlacesGroupCollapsed($placesViewSettings, group.id);
+
+  $: iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90';
+</script>
+
+{#if group}
+  <div class="grid">
+    <button
+      type="button"
+      on:click={() => 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 LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import Dropdown from '$lib/components/elements/dropdown.svelte';
+  import Icon from '$lib/components/elements/icon.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 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[];
+
+  const handleChangeGroupBy = ({ id }: PlacesGroupOptionMetadata) => {
+    $placesViewSettings.groupBy = id;
+  };
+
+  let selectedGroupOption: PlacesGroupOptionMetadata;
+  let groupIcon: string;
+
+  $: {
+    selectedGroupOption = findGroupOptionMetadata($placesViewSettings.groupBy);
+    if (selectedGroupOption.isDisabled()) {
+      selectedGroupOption = findGroupOptionMetadata(PlacesGroupBy.None);
+    }
+  }
+
+  $: {
+    groupIcon = selectedGroupOption.id === PlacesGroupBy.None ? mdiFolderRemoveOutline : mdiFolderArrowUpOutline; // OR mdiFolderArrowDownOutline
+  }
+
+  $: placesGroupByNames = ((): Record<PlacesGroupBy, string> => {
+    return {
+      [PlacesGroupBy.None]: $t('group_no'),
+      [PlacesGroupBy.Country]: $t('group_country'),
+    };
+  })();
+</script>
+
+<!-- Search Places -->
+<div class="hidden xl:block h-10 xl:w-60 2xl:w-80">
+  <SearchBar placeholder={$t('search_places')} bind:name={searchQuery} showLoadingSpinner={false} />
+</div>
+
+<!-- Group Places -->
+<Dropdown
+  title={$t('group_places_by')}
+  options={Object.values(groupOptionsMetadata)}
+  selectedOption={selectedGroupOption}
+  on:select={({ detail }) => handleChangeGroupBy(detail)}
+  render={({ id, isDisabled }) => ({
+    title: placesGroupByNames[id],
+    icon: groupIcon,
+    disabled: isDisabled(),
+  })}
+/>
+
+{#if getSelectedPlacesGroupOption($placesViewSettings) !== PlacesGroupBy.None}
+  <span in:fly={{ x: -50, duration: 250 }}>
+    <!-- Expand Countries -->
+    <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>
+      </div>
+
+      <!-- Collapse Countries -->
+      <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>
+      </div>
+    </div>
+  </span>
+{/if}

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

@@ -0,0 +1,110 @@
+<script lang="ts">
+  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 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[] = [];
+
+  $: hasPlaces = places.length > 0;
+
+  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 > b;
+        }
+      });
+
+      return sortedByCountryName.map(([country, places]) => ({
+        id: country,
+        name: country,
+        places,
+      }));
+    },
+  };
+
+  let filteredPlaces: AssetResponseDto[] = [];
+  let groupedPlaces: PlacesGroup[] = [];
+
+  let placesGroupOption: string = PlacesGroupBy.None;
+
+  // Step 1: Filter using the given search query.
+  $: {
+    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.
+  $: {
+    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}

web/src/lib/i18n/en.json

@@ -737,8 +737,10 @@
   "go_back": "Go back",
   "go_to_search": "Go to search",
   "group_albums_by": "Group albums by...",
+  "group_country": "Group by country",
   "group_no": "No grouping",
   "group_owner": "Group by owner",
+  "group_places_by": "Group places by...",
   "group_year": "Group by year",
   "has_quota": "Has quota",
   "hi_user": "Hi {name} ({email})",
@@ -952,6 +954,7 @@
   "pick_a_location": "Pick a location",
   "place": "Place",
   "places": "Places",
+  "places_count": "{count, plural, one {{count, number} Place} other {{count, number} Places}}",
   "play": "Play",
   "play_memories": "Play memories",
   "play_motion_photo": "Play Motion Photo",
@@ -1234,6 +1237,7 @@
   "unfavorite": "Unfavorite",
   "unhide_person": "Unhide person",
   "unknown": "Unknown",
+  "unknown_country": "Unknown Country",
   "unknown_year": "Unknown Year",
   "unlimited": "Unlimited",
   "unlink_motion_video": "Unlink motion video",

web/src/lib/stores/preferences.store.ts

@@ -91,6 +91,14 @@ export interface AlbumViewSettings {
   };
 }
 
+export interface PlacesViewSettings {
+  groupBy: string;
+  collapsedGroups: {
+    // Grouping Option => Array<Group ID>
+    [group: string]: string[];
+  };
+}
+
 export interface SidebarSettings {
   people: boolean;
   sharing: boolean;
@@ -137,6 +145,16 @@ export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settin
   collapsedGroups: {},
 });
 
+export enum PlacesGroupBy {
+  None = 'None',
+  Country = 'Country',
+}
+
+export const placesViewSettings = persisted<PlacesViewSettings>('places-view-settings', {
+  groupBy: PlacesGroupBy.None,
+  collapsedGroups: {},
+});
+
 export const showDeleteModal = persisted<boolean>('delete-confirm-dialog', true, {});
 
 export const alwaysLoadOriginalFile = persisted<boolean>('always-load-original-file', false, {});

web/src/lib/utils/places-utils.ts

@@ -0,0 +1,95 @@
+import { PlacesGroupBy, placesViewSettings, type PlacesViewSettings } from '$lib/stores/preferences.store';
+import { type AssetResponseDto } from '@immich/sdk';
+import { get } from 'svelte/store';
+
+/**
+ * --------------
+ * Places Grouping
+ * --------------
+ */
+export interface PlacesGroup {
+  id: string;
+  name: string;
+  places: AssetResponseDto[];
+}
+
+export interface PlacesGroupOptionMetadata {
+  id: PlacesGroupBy;
+  isDisabled: () => boolean;
+}
+
+export const groupOptionsMetadata: PlacesGroupOptionMetadata[] = [
+  {
+    id: PlacesGroupBy.None,
+    isDisabled: () => false,
+  },
+  {
+    id: PlacesGroupBy.Country,
+    isDisabled: () => false,
+  },
+];
+
+export const findGroupOptionMetadata = (groupBy: string) => {
+  // Default is no grouping
+  const defaultGroupOption = groupOptionsMetadata[0];
+  return groupOptionsMetadata.find(({ id }) => groupBy === id) ?? defaultGroupOption;
+};
+
+export const getSelectedPlacesGroupOption = (settings: PlacesViewSettings) => {
+  const defaultGroupOption = PlacesGroupBy.None;
+  const albumGroupOption = settings.groupBy ?? defaultGroupOption;
+
+  if (findGroupOptionMetadata(albumGroupOption).isDisabled()) {
+    return defaultGroupOption;
+  }
+  return albumGroupOption;
+};
+
+/**
+ * ----------------------------
+ * Places Groups Collapse/Expand
+ * ----------------------------
+ */
+const getCollapsedPlacesGroups = (settings: PlacesViewSettings) => {
+  settings.collapsedGroups ??= {};
+  const { collapsedGroups, groupBy } = settings;
+  collapsedGroups[groupBy] ??= [];
+  return collapsedGroups[groupBy];
+};
+
+export const isPlacesGroupCollapsed = (settings: PlacesViewSettings, groupId: string) => {
+  if (settings.groupBy === PlacesGroupBy.None) {
+    return false;
+  }
+  return getCollapsedPlacesGroups(settings).includes(groupId);
+};
+
+export const togglePlacesGroupCollapsing = (groupId: string) => {
+  const settings = get(placesViewSettings);
+  if (settings.groupBy === PlacesGroupBy.None) {
+    return;
+  }
+  const collapsedGroups = getCollapsedPlacesGroups(settings);
+  const groupIndex = collapsedGroups.indexOf(groupId);
+  if (groupIndex === -1) {
+    // Collapse
+    collapsedGroups.push(groupId);
+  } else {
+    // Expand
+    collapsedGroups.splice(groupIndex, 1);
+  }
+  placesViewSettings.set(settings);
+};
+
+export const collapseAllPlacesGroups = (groupIds: string[]) => {
+  placesViewSettings.update((settings) => {
+    const collapsedGroups = getCollapsedPlacesGroups(settings);
+    collapsedGroups.length = 0;
+    collapsedGroups.push(...groupIds);
+    return settings;
+  });
+};
+
+export const expandAllPlacesGroups = () => {
+  collapseAllPlacesGroups([]);
+};

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

@@ -1,13 +1,12 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import { AppRoute } from '$lib/constants';
-  import { mdiMapMarkerOff } from '@mdi/js';
+  import PlacesControls from '$lib/components/places-page/places-controls.svelte';
   import type { PageData } from './$types';
-  import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
-  import { AssetMediaSize, type AssetResponseDto } from '@immich/sdk';
+  import { type AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
-  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { locale } from '$lib/stores/preferences.store';
+  import Places from '$lib/components/places-page/places-list.svelte';
+  import { placesViewSettings } from '$lib/stores/preferences.store';
 
   export let data: PageData;
 
@@ -18,42 +17,31 @@
   };
 
   $: places = data.items.filter((item): item is AssetWithCity => !!item.exifInfo?.city);
-  $: hasPlaces = places.length > 0;
+
+  let searchQuery = '';
+  let searchResultCount = 0;
+  let placesGroups: string[] = [];
+
+  $: countVisiblePlaces = searchQuery ? searchResultCount : places.length;
 
   let innerHeight: number;
 </script>
 
 <svelte:window bind:innerHeight />
 
-<UserPageLayout title={$t('places')}>
-  {#if hasPlaces}
-    <div class="flex flex-row flex-wrap gap-4">
-      {#each places as item (item.id)}
-        {@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>
-  {: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}
+<UserPageLayout
+  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>
+
+  <Places
+    {places}
+    userSettings={$placesViewSettings}
+    {searchQuery}
+    bind:searchResultCount
+    bind:placesGroupIds={placesGroups}
+  />
 </UserPageLayout>