helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: rename asset-grid to timeline (#22084)

Browse source
This commit is contained in:
Jason Rasmussen 2025-09-16 13:05:09 -04:00 • committed by GitHub
parent b9e2590752
commit 31e098517d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 40 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

2
mise.toml
View file

@ -300,7 +300,7 @@ run = "tsc --noEmit"
depends = "web:svelte-kit-sync" depends = "web:svelte-kit-sync"
env._.path = "web/node_modules/.bin" env._.path = "web/node_modules/.bin"
dir = "web" dir = "web"
run = "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/photos-page/asset-grid.svelte" run = "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/timeline/Timeline.svelte"
[tasks."web:checklist"] [tasks."web:checklist"]
run = [ run = [

2
web/package.json
View file

@ -9,7 +9,7 @@
"build:stats": "BUILD_STATS=true vite build", "build:stats": "BUILD_STATS=true vite build",
"package": "svelte-kit package", "package": "svelte-kit package",
"preview": "vite preview", "preview": "vite preview",
"check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/photos-page/asset-grid.svelte", "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/timeline/Timeline.svelte",
"check:typescript": "tsc --noEmit", "check:typescript": "tsc --noEmit",
"check:watch": "npm run check:svelte -- --watch", "check:watch": "npm run check:svelte -- --watch",
"check:code": "npm run format && npm run lint:p && npm run check:svelte && npm run check:typescript", "check:code": "npm run format && npm run lint:p && npm run check:svelte && npm run check:typescript",

6
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -4,6 +4,7 @@
import AlbumMap from '$lib/components/album-page/album-map.svelte'; import AlbumMap from '$lib/components/album-page/album-map.svelte';
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte'; import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte'; import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte'; import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store'; import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@ -18,7 +19,6 @@
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import DownloadAction from '../photos-page/actions/download-action.svelte'; import DownloadAction from '../photos-page/actions/download-action.svelte';
import AssetGrid from '../photos-page/asset-grid.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte'; import ControlAppBar from '../shared-components/control-app-bar.svelte';
import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte'; import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
import ThemeButton from '../shared-components/theme-button.svelte'; import ThemeButton from '../shared-components/theme-button.svelte';
@ -61,7 +61,7 @@
/> />
<main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)"> <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
<AssetGrid enableRouting={true} {album} {timelineManager} {assetInteraction}> <Timeline enableRouting={true} {album} {timelineManager} {assetInteraction}>
<section class="pt-8 md:pt-24 px-2 md:px-0"> <section class="pt-8 md:pt-24 px-2 md:px-0">
<!-- ALBUM TITLE --> <!-- ALBUM TITLE -->
<h1 <h1
@ -83,7 +83,7 @@
</p> </p>
{/if} {/if}
</section> </section>
</AssetGrid> </Timeline>
</main> </main>
<header> <header>

12
web/src/lib/components/photos-page/asset-grid.svelte → web/src/lib/components/timeline/Timeline.svelte
View file

@ -37,16 +37,16 @@
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import { onMount, type Snippet } from 'svelte'; import { onMount, type Snippet } from 'svelte';
import type { UpdatePayload } from 'vite'; import type { UpdatePayload } from 'vite';
import AssetDateGroup from '../photos-page/asset-date-group.svelte';
import DeleteAssetDialog from '../photos-page/delete-asset-dialog.svelte';
import Portal from '../shared-components/portal/portal.svelte'; import Portal from '../shared-components/portal/portal.svelte';
import AssetDateGroup from './asset-date-group.svelte';
import DeleteAssetDialog from './delete-asset-dialog.svelte';
interface Props { interface Props {
isSelectionMode?: boolean; isSelectionMode?: boolean;
singleSelect?: boolean; singleSelect?: boolean;
/** `true` if this asset grid is responds to navigation events; if `true`, then look at the /** `true` if this asset grid is responds to navigation events; if `true`, then look at the
`AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
additionally, update the page location/url with the asset as the asset-grid is scrolled */ additionally, update the page location/url with the asset as the timeline is scrolled */
enableRouting: boolean; enableRouting: boolean;
timelineManager: TimelineManager; timelineManager: TimelineManager;
assetInteraction: AssetInteraction; assetInteraction: AssetInteraction;
@ -225,14 +225,14 @@
const hmrSupport = () => { const hmrSupport = () => {
// when hmr happens, skeleton is initialized to true by default // when hmr happens, skeleton is initialized to true by default
// normally, loading asset-grid is part of a navigation event, and the completion of // normally, loading timeline is part of a navigation event, and the completion of
// that event triggers a scroll-to-asset, if necessary, when then clears the skeleton. // that event triggers a scroll-to-asset, if necessary, when then clears the skeleton.
// this handler will run the navigation/scroll-to-asset handler when hmr is performed, // this handler will run the navigation/scroll-to-asset handler when hmr is performed,
// preventing skeleton from showing after hmr // preventing skeleton from showing after hmr
if (import.meta && import.meta.hot) { if (import.meta && import.meta.hot) {
const afterApdate = (payload: UpdatePayload) => { const afterApdate = (payload: UpdatePayload) => {
const assetGridUpdate = payload.updates.some( const assetGridUpdate = payload.updates.some(
(update) => update.path.endsWith('asset-grid.svelte') || update.path.endsWith('assets-store.ts'), (update) => update.path.endsWith('Timeline.svelte') || update.path.endsWith('assets-store.ts'),
); );
if (assetGridUpdate) { if (assetGridUpdate) {
@ -253,7 +253,7 @@
}; };
import.meta.hot?.on('vite:afterUpdate', afterApdate); import.meta.hot?.on('vite:afterUpdate', afterApdate);
import.meta.hot?.on('vite:beforeUpdate', (payload) => { import.meta.hot?.on('vite:beforeUpdate', (payload) => {
const assetGridUpdate = payload.updates.some((update) => update.path.endsWith('asset-grid.svelte')); const assetGridUpdate = payload.updates.some((update) => update.path.endsWith('Timeline.svelte'));
if (assetGridUpdate) { if (assetGridUpdate) {
timelineManager.destroy(); timelineManager.destroy();
} }

6
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -22,7 +22,6 @@
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte'; import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte'; import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
import TagAction from '$lib/components/photos-page/actions/tag-action.svelte'; import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte'; import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte'; import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
@ -32,6 +31,7 @@
notificationController, notificationController,
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte'; import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AlbumPageViewMode, AppRoute } from '$lib/constants'; import { AlbumPageViewMode, AppRoute } from '$lib/constants';
import { activityManager } from '$lib/managers/activity-manager.svelte'; import { activityManager } from '$lib/managers/activity-manager.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte'; import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
@ -443,7 +443,7 @@
<div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}> <div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
<div class="relative w-full shrink"> <div class="relative w-full shrink">
<main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)"> <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
<AssetGrid <Timeline
enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true} enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
{album} {album}
{timelineManager} {timelineManager}
@ -544,7 +544,7 @@
</section> </section>
{/if} {/if}
{/if} {/if}
</AssetGrid> </Timeline>
{#if showActivityStatus && !activityManager.isLoading} {#if showActivityStatus && !activityManager.isLoading}
<div class="absolute z-2 bottom-0 end-0 mb-6 me-6 justify-self-end"> <div class="absolute z-2 bottom-0 end-0 mb-6 me-6 justify-self-end">

6
web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -7,10 +7,10 @@
import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte'; import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte'; import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte'; import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte'; import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte'; import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AssetAction } from '$lib/constants'; import { AssetAction } from '$lib/constants';
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte'; import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
@ -47,7 +47,7 @@
</script> </script>
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}> <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
<AssetGrid <Timeline
enableRouting={true} enableRouting={true}
{timelineManager} {timelineManager}
{assetInteraction} {assetInteraction}
@ -57,7 +57,7 @@
{#snippet empty()} {#snippet empty()}
<EmptyPlaceholder text={$t('no_archived_assets_message')} /> <EmptyPlaceholder text={$t('no_archived_assets_message')} />
{/snippet} {/snippet}
</AssetGrid> </Timeline>
</UserPageLayout> </UserPageLayout>
{#if assetInteraction.selectionActive} {#if assetInteraction.selectionActive}

6
web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -12,10 +12,10 @@
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte'; import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte'; import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
import TagAction from '$lib/components/photos-page/actions/tag-action.svelte'; import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte'; import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte'; import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AssetAction } from '$lib/constants'; import { AssetAction } from '$lib/constants';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte'; import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte'; import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@ -51,7 +51,7 @@
</script> </script>
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}> <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
<AssetGrid <Timeline
enableRouting={true} enableRouting={true}
withStacked={true} withStacked={true}
{timelineManager} {timelineManager}
@ -62,7 +62,7 @@
{#snippet empty()} {#snippet empty()}
<EmptyPlaceholder text={$t('no_favorites_message')} /> <EmptyPlaceholder text={$t('no_favorites_message')} />
{/snippet} {/snippet}
</AssetGrid> </Timeline>
</UserPageLayout> </UserPageLayout>
<!-- Multiselection mode app bar --> <!-- Multiselection mode app bar -->

6
web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -7,10 +7,10 @@
import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte'; import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte'; import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte'; import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte'; import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte'; import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AppRoute, AssetAction } from '$lib/constants'; import { AppRoute, AssetAction } from '$lib/constants';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte'; import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte'; import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@ -58,7 +58,7 @@
</Button> </Button>
{/snippet} {/snippet}
<AssetGrid <Timeline
enableRouting={true} enableRouting={true}
{timelineManager} {timelineManager}
{assetInteraction} {assetInteraction}
@ -68,7 +68,7 @@
{#snippet empty()} {#snippet empty()}
<EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} /> <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} />
{/snippet} {/snippet}
</AssetGrid> </Timeline>
</UserPageLayout> </UserPageLayout>
<!-- Multi-selection mode app bar --> <!-- Multi-selection mode app bar -->

4
web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -3,10 +3,10 @@
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte'; import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte'; import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte'; import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte'; import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte'; import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AppRoute } from '$lib/constants'; import { AppRoute } from '$lib/constants';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte'; import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte'; import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@ -43,7 +43,7 @@
</script> </script>
<main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)"> <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
<AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} /> <Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
</main> </main>
{#if assetInteraction.selectionActive} {#if assetInteraction.selectionActive}

6
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -20,7 +20,6 @@
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte'; import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte'; import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
import TagAction from '$lib/components/photos-page/actions/tag-action.svelte'; import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte'; import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte'; import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
@ -30,6 +29,7 @@
NotificationType, NotificationType,
notificationController, notificationController,
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AppRoute, PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants'; import { AppRoute, PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte'; import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types'; import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@ -386,7 +386,7 @@
}} }}
> >
{#key person.id} {#key person.id}
<AssetGrid <Timeline
enableRouting={true} enableRouting={true}
{person} {person}
{timelineManager} {timelineManager}
@ -498,7 +498,7 @@
{/if} {/if}
</div> </div>
{/if} {/if}
</AssetGrid> </Timeline>
{/key} {/key}
</main> </main>

6
web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
View file

@ -16,11 +16,11 @@
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte'; import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
import StackAction from '$lib/components/photos-page/actions/stack-action.svelte'; import StackAction from '$lib/components/photos-page/actions/stack-action.svelte';
import TagAction from '$lib/components/photos-page/actions/tag-action.svelte'; import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import MemoryLane from '$lib/components/photos-page/memory-lane.svelte'; import MemoryLane from '$lib/components/photos-page/memory-lane.svelte';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte'; import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte'; import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AssetAction } from '$lib/constants'; import { AssetAction } from '$lib/constants';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte'; import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte'; import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@ -89,7 +89,7 @@
</script> </script>
<UserPageLayout hideNavbar={assetInteraction.selectionActive} showUploadButton scrollbar={false}> <UserPageLayout hideNavbar={assetInteraction.selectionActive} showUploadButton scrollbar={false}>
<AssetGrid <Timeline
enableRouting={true} enableRouting={true}
{timelineManager} {timelineManager}
{assetInteraction} {assetInteraction}
@ -103,7 +103,7 @@
{#snippet empty()} {#snippet empty()}
<EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} /> <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} />
{/snippet} {/snippet}
</AssetGrid> </Timeline>
</UserPageLayout> </UserPageLayout>
{#if assetInteraction.selectionActive} {#if assetInteraction.selectionActive}

6
web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -2,11 +2,11 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte'; import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte'; import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte'; import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte'; import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte'; import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
import Sidebar from '$lib/components/sidebar/sidebar.svelte'; import Sidebar from '$lib/components/sidebar/sidebar.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AppRoute, AssetAction, QueryParameter } from '$lib/constants'; import { AppRoute, AssetAction, QueryParameter } from '$lib/constants';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte'; import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import TagCreateModal from '$lib/modals/TagCreateModal.svelte'; import TagCreateModal from '$lib/modals/TagCreateModal.svelte';
@ -117,11 +117,11 @@
<section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar"> <section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
{#if tag.hasAssets} {#if tag.hasAssets}
<AssetGrid enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}> <Timeline enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
{#snippet empty()} {#snippet empty()}
<TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} /> <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
{/snippet} {/snippet}
</AssetGrid> </Timeline>
{:else} {:else}
<TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} /> <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
{/if} {/if}

6
web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -5,13 +5,13 @@
import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte'; import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
import RestoreAssets from '$lib/components/photos-page/actions/restore-assets.svelte'; import RestoreAssets from '$lib/components/photos-page/actions/restore-assets.svelte';
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte'; import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte'; import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import { import {
notificationController, notificationController,
NotificationType, NotificationType,
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AppRoute } from '$lib/constants'; import { AppRoute } from '$lib/constants';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte'; import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte'; import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@ -116,14 +116,14 @@
</HStack> </HStack>
{/snippet} {/snippet}
<AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}> <Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
<p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4"> <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
{$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })} {$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}
</p> </p>
{#snippet empty()} {#snippet empty()}
<EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} /> <EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} />
{/snippet} {/snippet}
</AssetGrid> </Timeline>
</UserPageLayout> </UserPageLayout>
{/if} {/if}

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

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte'; import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import ChangeLocation from '$lib/components/shared-components/change-location.svelte'; import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte'; import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import Timeline from '$lib/components/timeline/Timeline.svelte';
import { AssetAction } from '$lib/constants'; import { AssetAction } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte'; import { authManager } from '$lib/managers/auth-manager.svelte';
import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte'; import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
@ -185,7 +185,7 @@
</div> </div>
{/if} {/if}
<AssetGrid <Timeline
isSelectionMode={true} isSelectionMode={true}
enableRouting={true} enableRouting={true}
{timelineManager} {timelineManager}
@ -209,5 +209,5 @@
{#snippet empty()} {#snippet empty()}
<EmptyPlaceholder text={$t('no_assets_message')} onClick={() => {}} /> <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => {}} />
{/snippet} {/snippet}
</AssetGrid> </Timeline>
</UserPageLayout> </UserPageLayout>