github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Update AssetGrid to wrap new timeline

Browse Source 
- Update asset-grid.svelte to wrap Timeline component  
- Map old AssetGrid props to new Timeline props
- Convert onThumbnailClick to onAssetOpen callback
- Update change-date component to support icon and confirmText props

This allows existing code to continue using AssetGrid API while internally using the new Timeline implementation.
This commit is contained in:
midzelis
2025-09-16 12:04:03 +00:00
parent 6c9d506c74
commit 53aced666e
4 changed files with 70 additions and 952 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/shared-components/change-date.svelte
+20 -11
View File
@@ -1,15 +1,14 @@
<script lang="ts">
import { ConfirmModal } from '@immich/ui';
import { mdiCalendarEditOutline } from '@mdi/js';
import { locale } from '$lib/stores/preferences.store';
import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
import { ConfirmModal, Field, Switch } from '@immich/ui';
import { mdiCalendarEdit } from '@mdi/js';
import { DateTime, Duration } from 'luxon';
import { t } from 'svelte-i18n';
import DateInput from '../elements/date-input.svelte';
import Combobox, { type ComboBoxOption } from './combobox.svelte';
import DurationInput from '../elements/duration-input.svelte';
import { Field, Switch } from '@immich/ui';
import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
import { locale } from '$lib/stores/preferences.store';
import { get } from 'svelte/store';
import DateInput from '../elements/date-input.svelte';
import DurationInput from '../elements/duration-input.svelte';
import Combobox, { type ComboBoxOption } from './combobox.svelte';
interface Props {
title?: string;
@@ -18,6 +17,8 @@
timezoneInput?: boolean;
withDuration?: boolean;
currentInterval?: { start: DateTime; end: DateTime };
icon?: string;
confirmText?: string;
onCancel: () => void;
onConfirm: (result: AbsoluteResult | RelativeResult) => void;
}
@@ -29,6 +30,8 @@
timezoneInput = true,
withDuration = true,
currentInterval = undefined,
icon = mdiCalendarEdit,
confirmText,
onCancel,
onConfirm,
}: Props = $props();
@@ -36,6 +39,7 @@
export type AbsoluteResult = {
mode: 'absolute';
date: string;
dateTime: DateTime<true>;
};
export type RelativeResult = {
@@ -192,9 +196,13 @@
const fixedOffsetZone = `UTC${offsetMinutes >= 0 ? '+' : ''}${Duration.fromObject({ minutes: offsetMinutes }).toFormat('hh:mm')}`;
// Create a DateTime object in this fixed-offset zone, preserving the local time.
const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone });
const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone }) as DateTime<true>;
onConfirm({ mode: 'absolute', date: finalDateTime.toISO({ includeOffset: true })! });
onConfirm({
mode: 'absolute',
date: finalDateTime.toISO({ includeOffset: true }),
dateTime: finalDateTime,
});
}
if (showRelative && (selectedDuration || selectedRelativeOption)) {
@@ -238,7 +246,8 @@
<ConfirmModal
confirmColor="primary"
{title}
icon={mdiCalendarEditOutline}
{icon}
{confirmText}
prompt="Please select a new date:"
disabled={!date.isValid}
onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}