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>
2025-02-06 21:54:01 +01:00
parent 45f7401513
commit 6aad9fae8e
8 changed files with 445 additions and 39 deletions
@@ -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}