refactor(web): simplify places page controls and use ui's Select

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

@@ -13,38 +13,6 @@ export interface PlacesGroup {
   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

web/src/routes/(user)/places/PlacesControls.svelte

@@ -1,24 +1,11 @@
 <script lang="ts">
-  import Dropdown from '$lib/elements/Dropdown.svelte';
   import SearchBar from '$lib/elements/SearchBar.svelte';
   import { PlacesGroupBy, placesViewSettings } from '$lib/stores/preferences.store';
-  import {
-    type PlacesGroupOptionMetadata,
-    collapseAllPlacesGroups,
-    expandAllPlacesGroups,
-    findGroupOptionMetadata,
-    getSelectedPlacesGroupOption,
-    groupOptionsMetadata,
-  } from '$lib/utils/places-utils';
-  import { IconButton } from '@immich/ui';
-  import {
-    mdiFolderArrowUpOutline,
-    mdiFolderRemoveOutline,
-    mdiUnfoldLessHorizontal,
-    mdiUnfoldMoreHorizontal,
-  } from '@mdi/js';
+  import { collapseAllPlacesGroups, expandAllPlacesGroups } from '$lib/utils/places-utils';
+  import { IconButton, Select } from '@immich/ui';
+  import { mdiUnfoldLessHorizontal, mdiUnfoldMoreHorizontal } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { fly } from 'svelte/transition';
+  import { slide } from 'svelte/transition';
 
   interface Props {
     placesGroups: string[];
@@ -27,48 +14,26 @@
 
   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'),
-  });
+  let options = $derived([
+    { value: PlacesGroupBy.None, label: $t('group_no') },
+    { value: PlacesGroupBy.Country, label: $t('group_country') },
+  ]);
 </script>
 
-<!-- Search Places -->
 <div class="hidden h-10 md:block 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(),
-  })}
-/>
+<div title={$t('group_places_by')}>
+  <Select {options} bind:value={$placesViewSettings.groupBy} class="w-fit min-w-50" />
+</div>
 
-{#if getSelectedPlacesGroupOption($placesViewSettings) !== PlacesGroupBy.None}
-  <span in:fly={{ x: -50, duration: 250 }}>
+{#if $placesViewSettings.groupBy !== PlacesGroupBy.None}
+  <span transition:slide={{ axis: 'x', duration: 250 }}>
     <!-- Expand Countries Groups -->
     <div class="hidden gap-0 xl:flex">
       <div class="block">
         <IconButton
-          title={$t('expand_all')}
           onclick={() => expandAllPlacesGroups()}
           variant="ghost"
           color="secondary"
@@ -81,7 +46,6 @@
       <!-- Collapse Countries Groups -->
       <div class="block">
         <IconButton
-          title={$t('collapse_all')}
           onclick={() => collapseAllPlacesGroups(placesGroups)}
           variant="ghost"
           color="secondary"

web/src/routes/(user)/places/PlacesList.svelte

@@ -6,7 +6,7 @@
   import { groupBy } from 'lodash-es';
   import PlacesCardGroup from './PlacesCardGroup.svelte';
 
-  import { type PlacesGroup, getSelectedPlacesGroupOption } from '$lib/utils/places-utils';
+  import { type PlacesGroup } from '$lib/utils/places-utils';
   import { Icon } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
@@ -78,9 +78,8 @@
       : places;
   });
 
-  const placesGroupOption: string = $derived(getSelectedPlacesGroupOption(userSettings));
-  const groupingFunction = $derived(groupOptions[placesGroupOption] ?? groupOptions[PlacesGroupBy.None]);
-  const groupedPlaces: PlacesGroup[] = $derived(groupingFunction(filteredPlaces));
+  const groupingFunction = $derived(groupOptions[userSettings.groupBy] ?? groupOptions[PlacesGroupBy.None]);
+  const groupedPlaces = $derived(groupingFunction(filteredPlaces));
 
   $effect(() => {
     searchResultCount = filteredPlaces.length;
@@ -93,7 +92,7 @@
 
 {#if places.length > 0}
   <!-- Album Cards -->
-  {#if placesGroupOption === PlacesGroupBy.None}
+  {#if userSettings.groupBy === PlacesGroupBy.None}
     <PlacesCardGroup places={groupedPlaces[0].places} />
   {:else}
     {#each groupedPlaces as placeGroup (placeGroup.id)}