feat(web): add geolocation utility (#20758)

* feat(geolocation):  add geolocation utility

* feat(web): geolocation utility - fix code review - 1

* feat(web): geolocation utility - fix code review - 2

* chore: cleanup

* chore: feedback

* feat(web): add animation and text

animation on locations change and action text on thumbnail

* styling, messages and filtering

* selected color

* format i18n

* fix lint

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
Co-authored-by: Alex <alex.tran1502@gmail.com>

i18n/en.json

@@ -461,6 +461,7 @@
   "app_bar_signout_dialog_title": "Sign out",
   "app_settings": "App Settings",
   "appears_in": "Appears in",
+  "apply_count": "Apply ({count, number})",
   "archive": "Archive",
   "archive_action_prompt": "{count} added to Archive",
   "archive_or_unarchive_photo": "Archive or unarchive photo",
@@ -1073,12 +1074,18 @@
   "gcast_enabled": "Google Cast",
   "gcast_enabled_description": "This feature loads external resources from Google in order to work.",
   "general": "General",
+  "geolocation_instruction_all_have_location": "All assets for this date already have location data. Try showing all assets or select a different date",
+  "geolocation_instruction_location": "Click on an asset with GPS coordinates to use its location, or select a location directly from the map",
+  "geolocation_instruction_no_date": "Select a date to manage location data for photos and videos from that day",
+  "geolocation_instruction_no_photos": "No photos or videos found for this date. Select a different date to show them",
   "get_help": "Get Help",
   "get_wifiname_error": "Could not get Wi-Fi name. Make sure you have granted the necessary permissions and are connected to a Wi-Fi network",
   "getting_started": "Getting Started",
   "go_back": "Go back",
   "go_to_folder": "Go to folder",
   "go_to_search": "Go to search",
+  "gps": "GPS",
+  "gps_missing": "No GPS",
   "grant_permission": "Grant permission",
   "group_albums_by": "Group albums by...",
   "group_country": "Group by country",
@@ -1262,6 +1269,7 @@
   "main_branch_warning": "You're using a development version; we strongly recommend using a release version!",
   "main_menu": "Main menu",
   "make": "Make",
+  "manage_geolocation": "Manage location",
   "manage_shared_links": "Manage shared links",
   "manage_sharing_with_partners": "Manage sharing with partners",
   "manage_the_app_settings": "Manage the app settings",
@@ -1722,6 +1730,7 @@
   "select_user_for_sharing_page_err_album": "Failed to create album",
   "selected": "Selected",
   "selected_count": "{count, plural, other {# selected}}",
+  "selected_gps_coordinates": "selected gps coordinates",
   "send_message": "Send message",
   "send_welcome_email": "Send welcome email",
   "server_endpoint": "Server Endpoint",
@@ -1832,8 +1841,10 @@
   "shift_to_permanent_delete": "press ⇧ to permanently delete asset",
   "show_album_options": "Show album options",
   "show_albums": "Show albums",
+  "show_all_assets": "Show all assets",
   "show_all_people": "Show all people",
   "show_and_hide_people": "Show & hide people",
+  "show_assets_without_location": "Show assets without location",
   "show_file_location": "Show file location",
   "show_gallery": "Show gallery",
   "show_hidden_people": "Show hidden people",
@@ -1993,6 +2004,7 @@
   "unstacked_assets_count": "Un-stacked {count, plural, one {# asset} other {# assets}}",
   "untagged": "Untagged",
   "up_next": "Up next",
+  "update_location_action_prompt": "Update the location of {count} selected assets with:",
   "updated_at": "Updated",
   "updated_password": "Updated password",
   "upload": "Upload",
@@ -2017,6 +2029,7 @@
   "use_biometric": "Use biometric",
   "use_current_connection": "use current connection",
   "use_custom_date_range": "Use custom date range instead",
+  "use_this_location": "Click to use location",
   "user": "User",
   "user_has_been_deleted": "This user has been deleted.",
   "user_id": "User ID",

web/src/lib/assets/empty-5.svg

@@ -0,0 +1 @@
+<svg width="900" height="600" viewBox="0 0 900 600" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="transparent" d="M0 0h900v600H0z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M249.841 115.734v250.041c0 13.572 10.867 24.563 24.287 24.563h147.186l64.25-91.581c3.063-4.369 10.722-4.369 13.786 0l22.494 32.07.175.25.152-.221 48.243-70.046c3.336-4.85 11.695-4.85 15.031 0l63.892 92.779v12.215-250.07c0-13.572-10.897-24.562-24.288-24.562H274.128c-13.42 0-24.287 10.99-24.287 24.562z" fill="#9d9ea3"/><path d="M362.501 281.935c-34.737 0-62.896-28.16-62.896-62.897 0-34.736 28.159-62.896 62.896-62.896s62.897 28.16 62.897 62.896c0 34.737-28.16 62.897-62.897 62.897z" fill="#fff"/><path d="M449.176 445.963H259.725c-7.79 0-14.188-6.399-14.188-14.188 0-7.882 6.398-14.281 14.188-14.281h189.451c7.882 0 14.28 6.399 14.28 14.281 0 7.789-6.398 14.188-14.28 14.188zm189.543.002H501.662c-7.882 0-14.281-6.399-14.281-14.281 0-7.882 6.399-14.281 14.281-14.281h137.057c7.883 0 14.281 6.399 14.281 14.281 0 7.882-6.398 14.281-14.281 14.281zm-298.503 62.592h-80.491c-7.79 0-14.188-6.398-14.188-14.188 0-7.882 6.398-14.281 14.188-14.281h80.491c7.882 0 14.281 6.399 14.281 14.281 0 7.79-6.399 14.188-14.281 14.188zm298.503.002H388.065c-7.882 0-14.28-6.398-14.28-14.28s6.398-14.281 14.28-14.281h250.654c7.883 0 14.281 6.399 14.281 14.281 0 7.882-6.398 14.28-14.281 14.28z" fill="#E1E4E5"/></svg>

web/src/lib/components/asset-viewer/detail-panel-location.svelte

@@ -16,18 +16,22 @@
 
   let isShowChangeLocation = $state(false);
 
-  async function handleConfirmChangeLocation(gps: { lng: number; lat: number }) {
+  const onClose = async (point?: { lng: number; lat: number }) => {
     isShowChangeLocation = false;
 
+    if (!point) {
+      return;
+    }
+
     try {
       asset = await updateAsset({
         id: asset.id,
-        updateAssetDto: { latitude: gps.lat, longitude: gps.lng },
+        updateAssetDto: { latitude: point.lat, longitude: point.lng },
       });
     } catch (error) {
       handleError(error, $t('errors.unable_to_change_location'));
     }
-  }
+  };
 </script>
 
 {#if asset.exifInfo?.country}
@@ -85,6 +89,6 @@
 
 {#if isShowChangeLocation}
   <Portal>
-    <ChangeLocation {asset} onConfirm={handleConfirmChangeLocation} onCancel={() => (isShowChangeLocation = false)} />
+    <ChangeLocation {asset} {onClose} />
   </Portal>
 {/if}

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -197,7 +197,7 @@
 <div
   class={[
     'focus-visible:outline-none flex overflow-hidden',
-    disabled ? 'bg-gray-300' : 'bg-immich-primary/20 dark:bg-immich-dark-primary/20',
+    disabled ? 'bg-gray-300' : 'bg-primary/30 dark:bg-primary/70',
   ]}
   style:width="{width}px"
   style:height="{height}px"

web/src/lib/components/photos-page/actions/change-location-action.svelte

@@ -4,10 +4,10 @@
   import { getSelectedAssets } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
-  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { mdiMapMarkerMultipleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     menuItem?: boolean;
@@ -18,16 +18,21 @@
 
   let isShowChangeLocation = $state(false);
 
-  async function handleConfirm(point: { lng: number; lat: number }) {
+  async function handleConfirm(point?: { lng: number; lat: number }) {
     isShowChangeLocation = false;
+
+    if (!point) {
+      return;
+    }
+
     const ids = getSelectedAssets(getOwnedAssets(), $user);
 
     try {
       await updateAssets({ assetBulkUpdateDto: { ids, latitude: point.lat, longitude: point.lng } });
+      clearSelect();
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_location'));
     }
-    clearSelect();
   }
 </script>
 
@@ -39,5 +44,5 @@
   />
 {/if}
 {#if isShowChangeLocation}
-  <ChangeLocation onConfirm={handleConfirm} onCancel={() => (isShowChangeLocation = false)} />
+  <ChangeLocation onClose={handleConfirm} />
 {/if}

web/src/lib/components/shared-components/change-location.svelte

@@ -21,11 +21,11 @@
 
   interface Props {
     asset?: AssetResponseDto | undefined;
-    onCancel: () => void;
+    point?: Point;
-    onConfirm: (point: Point) => void;
+    onClose: (point?: Point) => void;
   }
 
-  let { asset = undefined, onCancel, onConfirm }: Props = $props();
+  let { asset = undefined, point: initialPoint, onClose }: Props = $props();
 
   let places: PlacesResponseDto[] = $state([]);
   let suggestedPlaces: PlacesResponseDto[] = $state([]);
@@ -38,14 +38,20 @@
 
   let previousLocation = get(lastChosenLocation);
 
-  let assetLat = $derived(asset?.exifInfo?.latitude ?? undefined);
+  let assetLat = $derived(initialPoint?.lat ?? asset?.exifInfo?.latitude ?? undefined);
-  let assetLng = $derived(asset?.exifInfo?.longitude ?? undefined);
+  let assetLng = $derived(initialPoint?.lng ?? asset?.exifInfo?.longitude ?? undefined);
 
   let mapLat = $derived(assetLat ?? previousLocation?.lat ?? undefined);
   let mapLng = $derived(assetLng ?? previousLocation?.lng ?? undefined);
 
   let zoom = $derived(mapLat !== undefined && mapLng !== undefined ? 12.5 : 1);
 
+  $effect(() => {
+    if (mapElement && initialPoint) {
+      mapElement.addClipMapMarker(initialPoint.lng, initialPoint.lat);
+    }
+  });
+
   $effect(() => {
     if (places) {
       suggestedPlaces = places.slice(0, 5);
@@ -55,14 +61,14 @@
     }
   });
 
-  let point: Point | null = $state(null);
+  let point: Point | null = $state(initialPoint ?? null);
 
-  const handleConfirm = () => {
+  const handleConfirm = (confirmed?: boolean) => {
-    if (point) {
+    if (point && confirmed) {
       lastChosenLocation.set(point);
-      onConfirm(point);
+      onClose(point);
     } else {
-      onCancel();
+      onClose();
     }
   };
 
@@ -109,6 +115,11 @@
     point = { lng: longitude, lat: latitude };
     mapElement?.addClipMapMarker(longitude, latitude);
   };
+
+  const onUpdate = (lat: number, lng: number) => {
+    point = { lat, lng };
+    mapElement?.addClipMapMarker(lng, lat);
+  };
 </script>
 
 <ConfirmModal
@@ -116,7 +127,7 @@
   title={$t('change_location')}
   icon={mdiMapMarkerMultipleOutline}
   size="medium"
-  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
+  onClose={handleConfirm}
 >
   {#snippet promptSnippet()}
     <div class="flex flex-col w-full h-full gap-2">
@@ -197,14 +208,7 @@
       </div>
 
       <div class="grid sm:grid-cols-2 gap-4 text-sm text-start mt-4">
-        <CoordinatesInput
+        <CoordinatesInput lat={point ? point.lat : assetLat} lng={point ? point.lng : assetLng} {onUpdate} />
-          lat={point ? point.lat : assetLat}
-          lng={point ? point.lng : assetLng}
-          onUpdate={(lat, lng) => {
-            point = { lat, lng };
-            mapElement?.addClipMapMarker(lng, lat);
-          }}
-        />
       </div>
     </div>
   {/snippet}

web/src/lib/components/shared-components/date-picker.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { Button } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    onDateChange: (year?: number, month?: number, day?: number) => Promise<void>;
+    onClearFilters?: () => void;
+    defaultDate?: string;
+  }
+
+  let { onDateChange, onClearFilters, defaultDate }: Props = $props();
+
+  let selectedYear = $state<number | undefined>(undefined);
+  let selectedMonth = $state<number | undefined>(undefined);
+  let selectedDay = $state<number | undefined>(undefined);
+
+  const currentYear = new Date().getFullYear();
+  const yearOptions = Array.from({ length: 30 }, (_, i) => currentYear - i);
+
+  const monthOptions = Array.from({ length: 12 }, (_, i) => ({
+    value: i + 1,
+    label: new Date(2000, i).toLocaleString('default', { month: 'long' }),
+  }));
+
+  const dayOptions = $derived.by(() => {
+    if (!selectedYear || !selectedMonth) {
+      return [];
+    }
+    const daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate();
+    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+  });
+
+  if (defaultDate) {
+    const [year, month, day] = defaultDate.split('-');
+    selectedYear = Number.parseInt(year);
+    selectedMonth = Number.parseInt(month);
+    selectedDay = Number.parseInt(day);
+  }
+
+  const filterAssetsByDate = async () => {
+    await onDateChange(selectedYear, selectedMonth, selectedDay);
+  };
+
+  const clearFilters = () => {
+    selectedYear = undefined;
+    selectedMonth = undefined;
+    selectedDay = undefined;
+    if (onClearFilters) {
+      onClearFilters();
+    }
+  };
+</script>
+
+<div class="mt-2 mb-2 p-2 rounded-lg">
+  <div class="flex flex-wrap gap-4 items-end w-136">
+    <div class="flex-1 min-w-20">
+      <label for="year-select" class="immich-form-label">
+        {$t('year')}
+      </label>
+      <select
+        id="year-select"
+        bind:value={selectedYear}
+        onchange={filterAssetsByDate}
+        class="text-sm w-full mt-1 px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+      >
+        <option value={undefined}>{$t('year')}</option>
+        {#each yearOptions as year (year)}
+          <option value={year}>{year}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div class="flex-2 min-w-24">
+      <label for="month-select" class="immich-form-label">
+        {$t('month')}
+      </label>
+      <select
+        id="month-select"
+        bind:value={selectedMonth}
+        onchange={filterAssetsByDate}
+        disabled={!selectedYear}
+        class="text-sm w-full mt-1 px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:opacity-50 disabled:bg-gray-400"
+      >
+        <option value={undefined}>{$t('month')}</option>
+        {#each monthOptions as month (month.value)}
+          <option value={month.value}>{month.label}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div class="flex-1 min-w-16">
+      <label for="day-select" class="immich-form-label">
+        {$t('day')}
+      </label>
+      <select
+        id="day-select"
+        bind:value={selectedDay}
+        onchange={filterAssetsByDate}
+        disabled={!selectedYear || !selectedMonth}
+        class="text-sm w-full mt-1 px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:opacity-50 disabled:bg-gray-400"
+      >
+        <option value={undefined}>{$t('day')}</option>
+        {#each dayOptions as day (day)}
+          <option value={day}>{day}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div class="flex">
+      <Button size="small" color="secondary" variant="ghost" onclick={clearFilters}>{$t('reset')}</Button>
+    </div>
+  </div>
+</div>

web/src/lib/components/utilities-page/geolocation/geolocation.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import { AppRoute } from '$lib/constants';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { type AssetResponseDto } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    asset: AssetResponseDto;
+    assetInteraction: AssetInteraction;
+    onSelectAsset: (asset: AssetResponseDto) => void;
+    onMouseEvent: (asset: AssetResponseDto) => void;
+    onLocation: (location: { latitude: number; longitude: number }) => void;
+  }
+
+  let { asset, assetInteraction, onSelectAsset, onMouseEvent, onLocation }: Props = $props();
+
+  let assetData = $derived(
+    JSON.stringify(
+      {
+        originalFileName: asset.originalFileName,
+        localDateTime: asset.localDateTime,
+        make: asset.exifInfo?.make,
+        model: asset.exifInfo?.model,
+        gps: {
+          latitude: asset.exifInfo?.latitude,
+          longitude: asset.exifInfo?.longitude,
+        },
+        location: asset.exifInfo?.city ? `${asset.exifInfo?.country} - ${asset.exifInfo?.city}` : undefined,
+      },
+      null,
+      2,
+    ),
+  );
+  let boxWidth = $state(300);
+  let timelineAsset = $derived(toTimelineAsset(asset));
+  const hasGps = $derived(!!asset.exifInfo?.latitude && !!asset.exifInfo?.longitude);
+</script>
+
+<div
+  class="w-full aspect-square rounded-xl border-3 transition-colors font-semibold text-xs dark:bg-black bg-gray-200 border-gray-200 dark:border-gray-800"
+  bind:clientWidth={boxWidth}
+  title={assetData}
+>
+  <div class="relative w-full h-full overflow-hidden rounded-lg">
+    <Thumbnail
+      asset={timelineAsset}
+      onClick={() => {
+        if (asset.exifInfo?.latitude && asset.exifInfo?.longitude) {
+          onLocation({ latitude: asset.exifInfo?.latitude, longitude: asset.exifInfo?.longitude });
+        } else {
+          onSelectAsset(asset);
+        }
+      }}
+      onSelect={() => onSelectAsset(asset)}
+      onMouseEvent={() => onMouseEvent(asset)}
+      selected={assetInteraction.hasSelectedAsset(asset.id)}
+      selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
+      thumbnailSize={boxWidth}
+      readonly={hasGps}
+    />
+
+    {#if hasGps}
+      <div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-success text-black">
+        {$t('gps')}
+      </div>
+    {:else}
+      <div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-danger text-light">
+        {$t('gps_missing')}
+      </div>
+    {/if}
+  </div>
+  <div class="text-center mt-4 px-4 text-sm font-semibold truncate" title={asset.originalFileName}>
+    <a href={`${AppRoute.PHOTOS}/${asset.id}`} target="_blank" rel="noopener noreferrer">
+      {asset.originalFileName}
+    </a>
+  </div>
+  <div class="text-center my-3">
+    <p class="px-4 text-xs font-normal truncate text-dark/75">
+      {new Date(asset.localDateTime).toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      })}
+    </p>
+    <p class="px-4 text-xs font-normal truncate text-dark/75">
+      {new Date(asset.localDateTime).toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        timeZone: 'UTC',
+      })}
+    </p>
+    {#if hasGps}
+      <p class="text-primary mt-2 text-xs font-normal px-4 text-center truncate">
+        {asset.exifInfo?.country}
+      </p>
+      <p class="text-primary text-xs font-normal px-4 text-center truncate">
+        {asset.exifInfo?.city}
+      </p>
+    {/if}
+  </div>
+</div>

web/src/lib/components/utilities-page/utilities-menu.svelte

@@ -1,29 +1,23 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
-  import { mdiContentDuplicate, mdiImageSizeSelectLarge } from '@mdi/js';
+  import { mdiContentDuplicate, mdiCrosshairsGps, mdiImageSizeSelectLarge } from '@mdi/js';
   import { t } from 'svelte-i18n';
+
+  const links = [
+    { href: AppRoute.DUPLICATES, icon: mdiContentDuplicate, label: $t('review_duplicates') },
+    { href: AppRoute.LARGE_FILES, icon: mdiImageSizeSelectLarge, label: $t('review_large_files') },
+    { href: AppRoute.GEOLOCATION, icon: mdiCrosshairsGps, label: $t('manage_geolocation') },
+  ];
 </script>
 
 <div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
   <p class="text-xs font-medium p-4">{$t('organize_your_library').toUpperCase()}</p>
 
-  <a
+  {#each links as link (link.href)}
-    href={AppRoute.DUPLICATES}
+    <a href={link.href} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4">
-    class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
+      <span><Icon path={link.icon} class="text-immich-primary dark:text-immich-dark-primary" size="24" /> </span>
-  >
+      {link.label}
-    <span
+    </a>
-      ><Icon path={mdiContentDuplicate} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
+  {/each}
-    </span>
-    {$t('review_duplicates')}
-  </a>
-  <a
-    href={AppRoute.LARGE_FILES}
-    class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
-  >
-    <span
-      ><Icon path={mdiImageSizeSelectLarge} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
-    </span>
-    {$t('review_large_files')}
-  </a>
 </div>

web/src/lib/constants.ts

@@ -52,6 +52,7 @@ export enum AppRoute {
   UTILITIES = '/utilities',
   DUPLICATES = '/utilities/duplicates',
   LARGE_FILES = '/utilities/large-files',
+  GEOLOCATION = '/utilities/geolocation',
 
   FOLDERS = '/folders',
   TAGS = '/tags',

web/src/lib/modals/GeolocationUpdateConfirmModal.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    location: { latitude: number | undefined; longitude: number | undefined };
+    assetCount: number;
+    onClose: (confirm?: true) => void;
+  }
+
+  let { location, assetCount, onClose }: Props = $props();
+</script>
+
+<Modal title={$t('confirm')} size="small" {onClose}>
+  <ModalBody>
+    <p>
+      {$t('update_location_action_prompt', {
+        values: {
+          count: assetCount,
+        },
+      })}
+    </p>
+
+    <p>- {$t('latitude')}: {location.latitude}</p>
+    <p>- {$t('longitude')}: {location.longitude}</p>
+  </ModalBody>
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
+      <Button shape="round" type="submit" fullWidth onclick={() => onClose(true)}>{$t('confirm')}</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

web/src/lib/utils/date-time.spec.ts

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import { getAlbumDateRange, timeToSeconds } from './date-time';
+import { buildDateRangeFromYearMonthAndDay, getAlbumDateRange, timeToSeconds } from './date-time';
 
 describe('converting time to seconds', () => {
   it('parses hh:mm:ss correctly', () => {
@@ -75,3 +75,24 @@ describe('getAlbumDate', () => {
     expect(getAlbumDateRange({ startDate: '2021-01-01T00:00:00+05:00' })).toEqual('Jan 1, 2021');
   });
 });
+
+describe('buildDateRangeFromYearMonthAndDay', () => {
+  it('should build correct date range for a specific day', () => {
+    const result = buildDateRangeFromYearMonthAndDay(2023, 1, 8);
+
+    expect(result.from).toContain('2023-01-08T00:00:00');
+    expect(result.to).toContain('2023-01-09T00:00:00');
+  });
+
+  it('should build correct date range for a month', () => {
+    const result = buildDateRangeFromYearMonthAndDay(2023, 2);
+    expect(result.from).toContain('2023-02-01T00:00:00');
+    expect(result.to).toContain('2023-03-01T00:00:00');
+  });
+
+  it('should build correct date range for a year', () => {
+    const result = buildDateRangeFromYearMonthAndDay(2023);
+    expect(result.from).toContain('2023-01-01T00:00:00');
+    expect(result.to).toContain('2024-01-01T00:00:00');
+  });
+});

web/src/lib/utils/date-time.ts

@@ -85,3 +85,33 @@ export const getAlbumDateRange = (album: { startDate?: string; endDate?: string
  */
 export const asLocalTimeISO = (date: DateTime<true>) =>
   (date.setZone('utc', { keepLocalTime: true }) as DateTime<true>).toISO();
+
+/**
+ * Creates a date range for filtering assets based on year, month, and day parameters
+ */
+export const buildDateRangeFromYearMonthAndDay = (year: number, month?: number, day?: number) => {
+  const baseDate = DateTime.fromObject({
+    year,
+    month: month || 1,
+    day: day || 1,
+  });
+
+  let from: DateTime;
+  let to: DateTime;
+
+  if (day) {
+    from = baseDate.startOf('day');
+    to = baseDate.plus({ days: 1 }).startOf('day');
+  } else if (month) {
+    from = baseDate.startOf('month');
+    to = baseDate.plus({ months: 1 }).startOf('month');
+  } else {
+    from = baseDate.startOf('year');
+    to = baseDate.plus({ years: 1 }).startOf('year');
+  }
+
+  return {
+    from: from.toISO() || undefined,
+    to: to.toISO() || undefined,
+  };
+};

web/src/lib/utils/navigation.ts

@@ -145,3 +145,16 @@ export const clearQueryParam = async (queryParam: string, url: URL) => {
     await goto(url, { keepFocus: true });
   }
 };
+
+export const getQueryValue = (queryKey: string) => {
+  const url = globalThis.location.href;
+  const urlObject = new URL(url);
+  return urlObject.searchParams.get(queryKey);
+};
+
+export const setQueryValue = async (queryKey: string, queryValue: string) => {
+  const url = globalThis.location.href;
+  const urlObject = new URL(url);
+  urlObject.searchParams.set(queryKey, queryValue);
+  await goto(urlObject, { keepFocus: true });
+};

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

@@ -5,3 +5,13 @@ export const removeAccents = (str: string) => {
 export const normalizeSearchString = (str: string) => {
   return removeAccents(str.toLocaleLowerCase());
 };
+
+export const buildDateString = (year: number, month?: number, day?: number) => {
+  return [
+    year.toString(),
+    month && !Number.isNaN(month) ? month.toString() : undefined,
+    day && !Number.isNaN(day) ? day.toString() : undefined,
+  ]
+    .filter((date) => date !== undefined)
+    .join('-');
+};

web/src/routes/(user)/utilities/geolocation/+page.svelte

@@ -0,0 +1,321 @@
+<script lang="ts">
+  import emptyUrl from '$lib/assets/empty-5.svg';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
+  import DatePicker from '$lib/components/shared-components/date-picker.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import Geolocation from '$lib/components/utilities-page/geolocation/geolocation.svelte';
+  import GeolocationUpdateConfirmModal from '$lib/modals/GeolocationUpdateConfirmModal.svelte';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { cancelMultiselect } from '$lib/utils/asset-utils';
+  import { buildDateRangeFromYearMonthAndDay } from '$lib/utils/date-time';
+  import { setQueryValue } from '$lib/utils/navigation';
+  import { buildDateString } from '$lib/utils/string-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { searchAssets, updateAssets, type AssetResponseDto } from '@immich/sdk';
+  import { Button, LoadingSpinner, modalManager, Text } from '@immich/ui';
+  import {
+    mdiMapMarkerMultipleOutline,
+    mdiMapMarkerOff,
+    mdiPencilOutline,
+    mdiSelectAll,
+    mdiSelectRemove,
+  } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+  let partialDate = $state<string | null>(data.partialDate);
+  let isLoading = $state(false);
+  let assets = $state<AssetResponseDto[]>([]);
+  let shiftKeyIsDown = $state(false);
+  let assetInteraction = new AssetInteraction();
+  let location = $state<{ latitude: number; longitude: number }>({ latitude: 0, longitude: 0 });
+  let assetsToDisplay = $state(500);
+  let takenRange = $state<{ takenAfter?: string; takenBefore?: string } | null>(null);
+  let locationUpdated = $state(false);
+  let showOnlyAssetsWithoutLocation = $state(false);
+
+  // Filtered assets based on location filter
+  let filteredAssets = $derived(
+    showOnlyAssetsWithoutLocation
+      ? assets.filter((asset) => !asset.exifInfo?.latitude || !asset.exifInfo?.longitude)
+      : assets,
+  );
+
+  void init();
+
+  async function init() {
+    if (partialDate) {
+      const [year, month, day] = partialDate.split('-');
+      const { from: takenAfter, to: takenBefore } = buildDateRangeFromYearMonthAndDay(
+        Number.parseInt(year),
+        Number.parseInt(month),
+        Number.parseInt(day),
+      );
+      takenRange = { takenAfter, takenBefore };
+      const dateString = buildDateString(Number.parseInt(year), Number.parseInt(month), Number.parseInt(day));
+      await setQueryValue('date', dateString);
+      await loadAssets();
+    }
+  }
+
+  const loadAssets = async () => {
+    if (takenRange) {
+      isLoading = true;
+
+      const searchResult = await searchAssets({
+        metadataSearchDto: {
+          withExif: true,
+          takenAfter: takenRange.takenAfter,
+          takenBefore: takenRange.takenBefore,
+          size: assetsToDisplay,
+        },
+      });
+
+      assets = searchResult.assets.items;
+      isLoading = false;
+    }
+  };
+
+  const handleDateChange = async (selectedYear?: number, selectedMonth?: number, selectedDay?: number) => {
+    partialDate = selectedYear ? buildDateString(selectedYear, selectedMonth, selectedDay) : null;
+    if (!selectedYear) {
+      assets = [];
+      return;
+    }
+    try {
+      const { from: takenAfter, to: takenBefore } = buildDateRangeFromYearMonthAndDay(
+        selectedYear,
+        selectedMonth,
+        selectedDay,
+      );
+      const dateString = buildDateString(selectedYear, selectedMonth, selectedDay);
+      takenRange = { takenAfter, takenBefore };
+      await setQueryValue('date', dateString);
+      await loadAssets();
+    } catch (error) {
+      console.error('Failed to filter assets by date:', error);
+    }
+  };
+
+  const handleClearFilters = async () => {
+    assets = [];
+    assetInteraction.clearMultiselect();
+    await setQueryValue('date', '');
+  };
+
+  const toggleLocationFilter = () => {
+    showOnlyAssetsWithoutLocation = !showOnlyAssetsWithoutLocation;
+  };
+
+  const handleUpdate = async () => {
+    const confirmed = await modalManager.show(GeolocationUpdateConfirmModal, {
+      location: location ?? { latitude: 0, longitude: 0 },
+      assetCount: assetInteraction.selectedAssets.length,
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    await updateAssets({
+      assetBulkUpdateDto: {
+        ids: assetInteraction.selectedAssets.map((asset) => asset.id),
+        latitude: location?.latitude ?? undefined,
+        longitude: location?.longitude ?? undefined,
+      },
+    });
+
+    void loadAssets();
+    handleDeselectAll();
+  };
+
+  // Assets selection handlers
+  // TODO: might be refactored to use the same logic as in asset-grid.svelte and gallery-viewer.svelte
+  const handleSelectAssets = (asset: AssetResponseDto) => {
+    const timelineAsset = toTimelineAsset(asset);
+    const deselect = assetInteraction.hasSelectedAsset(asset.id);
+
+    if (deselect) {
+      for (const candidate of assetInteraction.assetSelectionCandidates) {
+        assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
+      }
+      assetInteraction.removeAssetFromMultiselectGroup(asset.id);
+    } else {
+      for (const candidate of assetInteraction.assetSelectionCandidates) {
+        assetInteraction.selectAsset(candidate);
+      }
+      assetInteraction.selectAsset(timelineAsset);
+    }
+
+    assetInteraction.clearAssetSelectionCandidates();
+    assetInteraction.setAssetSelectionStart(deselect ? null : timelineAsset);
+  };
+
+  const selectAssetCandidates = (endAsset: AssetResponseDto) => {
+    if (!shiftKeyIsDown) {
+      return;
+    }
+
+    const startAsset = assetInteraction.assetSelectionStart;
+    if (!startAsset) {
+      return;
+    }
+
+    let start = assets.findIndex((a) => a.id === startAsset.id);
+    let end = assets.findIndex((a) => a.id === endAsset.id);
+
+    if (start > end) {
+      [start, end] = [end, start];
+    }
+
+    assetInteraction.setAssetSelectionCandidates(assets.slice(start, end + 1).map((a) => toTimelineAsset(a)));
+  };
+  const assetMouseEventHandler = (asset: AssetResponseDto) => {
+    if (assetInteraction.selectionActive) {
+      selectAssetCandidates(asset);
+    }
+  };
+  // Keyboard handlers
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = true;
+    }
+    if (event.key === 'Escape' && assetInteraction.selectionActive) {
+      cancelMultiselect(assetInteraction);
+    }
+  };
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = false;
+    }
+  };
+  const handleSelectAll = () => {
+    assetInteraction.selectAssets(filteredAssets.map((a) => toTimelineAsset(a)));
+  };
+  const handleDeselectAll = () => {
+    cancelMultiselect(assetInteraction);
+  };
+
+  const handlePickOnMap = async () => {
+    const point = await modalManager.show(ChangeLocation, {
+      point: {
+        lat: location.latitude,
+        lng: location.longitude,
+      },
+    });
+    if (!point) {
+      return;
+    }
+
+    location = { latitude: point.lat, longitude: point.lng };
+  };
+</script>
+
+<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
+
+<UserPageLayout title={data.meta.title} scrollbar={true}>
+  {#snippet buttons()}
+    <div class="flex gap-2 justify-end place-items-center">
+      {#if filteredAssets.length > 0}
+        <Text class="hidden md:block text-xs mr-4 text-dark/50">{$t('geolocation_instruction_location')}</Text>
+      {/if}
+      <div class="border flex place-items-center place-content-center px-2 py-1 bg-primary/10 rounded-2xl">
+        <p class="text-xs text-gray-500 font-mono mr-5 ml-2 uppercase">{$t('selected_gps_coordinates')}</p>
+        <Text
+          title="latitude, longitude"
+          class="rounded-3xl font-mono text-sm text-primary px-2 py-1 transition-all duration-100 ease-in-out {locationUpdated
+            ? 'bg-primary/90 text-light font-semibold scale-105'
+            : ''}">{location.latitude.toFixed(3)}, {location.longitude.toFixed(3)}</Text
+        >
+      </div>
+
+      <Button size="small" color="secondary" variant="ghost" leadingIcon={mdiPencilOutline} onclick={handlePickOnMap}
+        >{$t('location_picker_choose_on_map')}</Button
+      >
+      <Button
+        leadingIcon={mdiMapMarkerMultipleOutline}
+        size="small"
+        color="primary"
+        disabled={assetInteraction.selectedAssets.length === 0}
+        onclick={() => handleUpdate()}
+      >
+        {$t('apply_count', { values: { count: assetInteraction.selectedAssets.length } })}
+      </Button>
+    </div>
+  {/snippet}
+
+  <div class="bg-light flex items-center justify-between flex-wrap border-b">
+    <div class="flex gap-2 items-center">
+      <DatePicker
+        onDateChange={handleDateChange}
+        onClearFilters={handleClearFilters}
+        defaultDate={partialDate || undefined}
+      />
+    </div>
+
+    <div class="flex gap-2">
+      <Button
+        size="small"
+        leadingIcon={showOnlyAssetsWithoutLocation ? mdiMapMarkerMultipleOutline : mdiMapMarkerOff}
+        color={showOnlyAssetsWithoutLocation ? 'primary' : 'secondary'}
+        variant="ghost"
+        onclick={toggleLocationFilter}
+      >
+        {showOnlyAssetsWithoutLocation ? $t('show_all_assets') : $t('show_assets_without_location')}
+      </Button>
+      <Button
+        leadingIcon={assetInteraction.selectionActive ? mdiSelectRemove : mdiSelectAll}
+        size="small"
+        color="secondary"
+        variant="ghost"
+        onclick={assetInteraction.selectionActive ? handleDeselectAll : handleSelectAll}
+      >
+        {assetInteraction.selectionActive ? $t('unselect_all') : $t('select_all')}
+      </Button>
+    </div>
+  </div>
+
+  {#if isLoading}
+    <div class="h-full w-full flex items-center justify-center">
+      <LoadingSpinner size="giant" />
+    </div>
+  {/if}
+
+  {#if filteredAssets && filteredAssets.length > 0}
+    <div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 mt-4">
+      {#each filteredAssets as asset (asset.id)}
+        <Geolocation
+          {asset}
+          {assetInteraction}
+          onSelectAsset={(asset) => handleSelectAssets(asset)}
+          onMouseEvent={(asset) => assetMouseEventHandler(asset)}
+          onLocation={(selected) => {
+            location = selected;
+            locationUpdated = true;
+            setTimeout(() => {
+              locationUpdated = false;
+            }, 1000);
+          }}
+        />
+      {/each}
+    </div>
+  {:else}
+    <div class="w-full">
+      {#if partialDate == null}
+        <EmptyPlaceholder text={$t('geolocation_instruction_no_date')} src={emptyUrl} />
+      {:else if showOnlyAssetsWithoutLocation && filteredAssets.length === 0 && assets.length > 0}
+        <EmptyPlaceholder text={$t('geolocation_instruction_all_have_location')} src={emptyUrl} />
+      {:else}
+        <EmptyPlaceholder text={$t('geolocation_instruction_no_photos')} src={emptyUrl} />
+      {/if}
+    </div>
+  {/if}
+</UserPageLayout>

web/src/routes/(user)/utilities/geolocation/+page.ts

@@ -0,0 +1,17 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getQueryValue } from '$lib/utils/navigation';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url);
+  const partialDate = getQueryValue('date');
+  const $t = await getFormatter();
+
+  return {
+    partialDate,
+    meta: {
+      title: $t('manage_geolocation'),
+    },
+  };
+}) satisfies PageLoad;