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>

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('-');
+};