feat(web): lighter timeline buckets (#17719)

* feat(web): lighter timeline buckets * GalleryViewer * weird ssr * Remove generics from AssetInteraction * ensure keys on getAssetInfo, alt-text * empty - trigger ci * re-add alt-text * test fix * update tests * tests * missing import * fix: flappy e2e test * lint * revert settings * unneeded cast * fix after merge * missing import * lint * review * lint * avoid abbreviations * review comment - type safety in test * merge conflicts * lint * lint/abbreviations * fix: left-over migration --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
2025-05-17 22:57:08 -04:00
parent a65c905621
commit 0bbe70e6a3
53 changed files with 725 additions and 471 deletions
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -92,7 +92,7 @@

  let { data = $bindable() }: Props = $props();

-  let { isViewing: showAssetViewer, setAsset, gridScrollTarget } = assetViewingStore;
+  let { isViewing: showAssetViewer, setAssetId, gridScrollTarget } = assetViewingStore;
  let { slideshowState, slideshowNavigation } = slideshowStore;

  let oldAt: AssetGridRouteSearchParams | null | undefined = $state();
@@ -174,8 +174,7 @@
        ? await assetStore.getRandomAsset()
        : assetStore.buckets[0]?.dateGroups[0]?.intersetingAssets[0]?.asset;
    if (asset) {
-      setAsset(asset);
-      $slideshowState = SlideshowState.PlaySlideshow;
+      handlePromiseError(setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)));
    }
  };

--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -47,9 +47,9 @@
  >
    <ArchiveAction
      unarchive
-      onArchive={(ids, isArchived) =>
+      onArchive={(ids, visibility) =>
        assetStore.updateAssetOperation(ids, (asset) => {
-          asset.isArchived = isArchived;
+          asset.visibility = visibility;
          return { remove: false };
        })}
    />
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -31,7 +31,7 @@
  let { data }: Props = $props();

  const assetStore = new AssetStore();
-  void assetStore.updateOptions({ isFavorite: true });
+  void assetStore.updateOptions({ isFavorite: true, withStacked: true });
  onDestroy(() => assetStore.destroy());

  const assetInteraction = new AssetInteraction();
@@ -78,6 +78,7 @@
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
  <AssetGrid
    enableRouting={true}
+    withStacked={true}
    {assetStore}
    {assetInteraction}
    removeAction={AssetAction.UNFAVORITE}
--- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -28,6 +28,7 @@
  import { foldersStore } from '$lib/stores/folders.svelte';
  import { preferences } from '$lib/stores/user.store';
  import { cancelMultiselect } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
  import { mdiDotsVertical, mdiFolder, mdiFolderHome, mdiFolderOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
  import { onMount } from 'svelte';
@@ -49,15 +50,15 @@

  const assetInteraction = new AssetInteraction();

-  onMount(async () => {
+  onMount(async function initializeFolders() {
    await foldersStore.fetchUniquePaths();
  });

-  const handleNavigation = async (folderName: string) => {
+  const handleNavigateToFolder = async function handleNavigateToFolder(folderName: string) {
    await navigateToView(normalizeTreePath(`${data.path || ''}/${folderName}`));
  };

-  const getLink = (path: string) => {
+  const getLinkForPath = function getLinkForPath(path: string) {
    const url = new URL(AppRoute.FOLDERS, globalThis.location.href);
    if (path) {
      url.searchParams.set(QueryParameter.PATH, path);
@@ -65,25 +66,27 @@
    return url.href;
  };

-  afterNavigate(() => {
+  afterNavigate(function clearAssetSelection() {
    // Clear the asset selection when we navigate (like going to another folder)
    cancelMultiselect(assetInteraction);
  });

-  const navigateToView = (path: string) => goto(getLink(path));
+  const navigateToView = function navigateToView(path: string) {
+    return goto(getLinkForPath(path));
+  };

-  const triggerAssetUpdate = async () => {
+  const triggerAssetUpdate = async function updateAssets() {
    cancelMultiselect(assetInteraction);
    await foldersStore.refreshAssetsByPath(data.path);
    await invalidateAll();
  };

-  const handleSelectAll = () => {
+  const handleSelectAllAssets = function handleSelectAllAssets() {
    if (!data.pathAssets) {
      return;
    }

-    assetInteraction.selectAssets(data.pathAssets);
+    assetInteraction.selectAssets(data.pathAssets.map((asset) => toTimelineAsset(asset)));
  };
 </script>

@@ -94,14 +97,14 @@
      clearSelect={() => cancelMultiselect(assetInteraction)}
    >
      <CreateSharedLink />
-      <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
+      <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAllAssets} />
      <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
        <AddToAlbum onAddToAlbum={() => cancelMultiselect(assetInteraction)} />
        <AddToAlbum onAddToAlbum={() => cancelMultiselect(assetInteraction)} shared />
      </ButtonContextMenu>
      <FavoriteAction
        removeFavorite={assetInteraction.isAllFavorite}
-        onFavorite={(ids, isFavorite) => {
+        onFavorite={function handleFavoriteUpdate(ids, isFavorite) {
          if (data.pathAssets && data.pathAssets.length > 0) {
            for (const id of ids) {
              const asset = data.pathAssets.find((asset) => asset.id === id);
@@ -141,17 +144,17 @@
            icons={{ default: mdiFolderOutline, active: mdiFolder }}
            items={tree}
            active={currentPath}
-            {getLink}
+            getLink={getLinkForPath}
          />
        </div>
      </section>
    </Sidebar>
  {/snippet}

-  <Breadcrumbs {pathSegments} icon={mdiFolderHome} title={$t('folders')} {getLink} />
+  <Breadcrumbs {pathSegments} icon={mdiFolderHome} title={$t('folders')} getLink={getLinkForPath} />

  <section class="mt-2 h-[calc(100%-theme(spacing.20))] overflow-auto immich-scrollbar">
-    <TreeItemThumbnails items={currentTreeItems} icon={mdiFolder} onClick={handleNavigation} />
+    <TreeItemThumbnails items={currentTreeItems} icon={mdiFolder} onClick={handleNavigateToFolder} />

    <!-- Assets -->
    {#if data.pathAssets && data.pathAssets.length > 0}
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -35,7 +35,7 @@
  import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { AssetStore } from '$lib/stores/assets-store.svelte';
+  import { AssetStore, type TimelineAsset } from '$lib/stores/assets-store.svelte';
  import { locale } from '$lib/stores/preferences.store';
  import { preferences } from '$lib/stores/user.store';
  import { websocketEvents } from '$lib/stores/websocket';
@@ -47,7 +47,6 @@
    getPersonStatistics,
    searchPerson,
    updatePerson,
-    type AssetResponseDto,
    type PersonResponseDto,
  } from '@immich/sdk';
  import {
@@ -204,7 +203,7 @@
    data = { ...data, person };
  };

-  const handleSelectFeaturePhoto = async (asset: AssetResponseDto) => {
+  const handleSelectFeaturePhoto = async (asset: TimelineAsset) => {
    if (viewMode !== PersonPageViewMode.SELECT_PERSON) {
      return;
    }
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -34,7 +34,8 @@
    type OnUnlink,
  } from '$lib/utils/actions';
  import { openFileUploadDialog } from '$lib/utils/file-uploader';
-  import { AssetTypeEnum, AssetVisibility } from '@immich/sdk';
+  import { AssetVisibility } from '@immich/sdk';
+
  import { mdiDotsVertical, mdiPlus } from '@mdi/js';
  import { onDestroy } from 'svelte';
  import { t } from 'svelte-i18n';
@@ -52,8 +53,8 @@
    const isLivePhoto = selectedAssets.length === 1 && !!selectedAssets[0].livePhotoVideoId;
    const isLivePhotoCandidate =
      selectedAssets.length === 2 &&
-      selectedAssets.some((asset) => asset.type === AssetTypeEnum.Image) &&
-      selectedAssets.some((asset) => asset.type === AssetTypeEnum.Video);
+      selectedAssets.some((asset) => asset.isImage) &&
+      selectedAssets.some((asset) => asset.isVideo);

    return assetInteraction.isAllUserOwned && (isLivePhoto || isLivePhotoCandidate);
  });
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -25,7 +25,7 @@
  import { AppRoute, QueryParameter } from '$lib/constants';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import type { Viewport } from '$lib/stores/assets-store.svelte';
+  import type { TimelineAsset, Viewport } from '$lib/stores/assets-store.svelte';
  import { lang, locale } from '$lib/stores/preferences.store';
  import { featureFlags } from '$lib/stores/server-config.store';
  import { preferences } from '$lib/stores/user.store';
@@ -34,9 +34,9 @@
  import { parseUtcDate } from '$lib/utils/date-time';
  import { handleError } from '$lib/utils/handle-error';
  import { isAlbumsRoute, isPeopleRoute } from '$lib/utils/navigation';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import {
    type AlbumResponseDto,
-    type AssetResponseDto,
    getPerson,
    getTagById,
    type MetadataSearchDto,
@@ -59,7 +59,7 @@

  let nextPage = $state(1);
  let searchResultAlbums: AlbumResponseDto[] = $state([]);
-  let searchResultAssets: AssetResponseDto[] = $state([]);
+  let searchResultAssets: TimelineAsset[] = $state([]);
  let isLoading = $state(true);
  let scrollY = $state(0);
  let scrollYHistory = 0;
@@ -123,7 +123,7 @@

  const onAssetDelete = (assetIds: string[]) => {
    const assetIdSet = new Set(assetIds);
-    searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => !assetIdSet.has(a.id));
+    searchResultAssets = searchResultAssets.filter((asset: TimelineAsset) => !assetIdSet.has(asset.id));
  };
  const handleSelectAll = () => {
    assetInteraction.selectAssets(searchResultAssets);
@@ -161,7 +161,7 @@
          : await searchAssets({ metadataSearchDto: searchDto });

      searchResultAlbums.push(...albums.items);
-      searchResultAssets.push(...assets.items);
+      searchResultAssets.push(...assets.items.map((asset) => toTimelineAsset(asset)));

      nextPage = Number(assets.nextPage) || 0;
    } catch (error) {
@@ -239,7 +239,7 @@

    if (terms.isNotInAlbum.toString() == 'true') {
      const assetIdSet = new Set(assetIds);
-      searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => !assetIdSet.has(a.id));
+      searchResultAssets = searchResultAssets.filter((asset) => !assetIdSet.has(asset.id));
    }
  };

@@ -250,30 +250,81 @@

 <svelte:window use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onEscape }} bind:scrollY />

+<section>
+  {#if assetInteraction.selectionActive}
+    <div class="fixed top-0 start-0 w-full">
+      <AssetSelectControlBar
+        assets={assetInteraction.selectedAssets}
+        clearSelect={() => cancelMultiselect(assetInteraction)}
+      >
+        <CreateSharedLink />
+        <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
+        <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
+          <AddToAlbum {onAddToAlbum} />
+          <AddToAlbum shared {onAddToAlbum} />
+        </ButtonContextMenu>
+        <FavoriteAction
+          removeFavorite={assetInteraction.isAllFavorite}
+          onFavorite={(assetIds, isFavorite) => {
+            for (const assetId of assetIds) {
+              const asset = searchResultAssets.find((searchAsset) => searchAsset.id === assetId);
+              if (asset) {
+                asset.isFavorite = isFavorite;
+              }
+            }
+          }}
+        />
+
+        <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
+          <DownloadAction menuItem />
+          <ChangeDate menuItem />
+          <ChangeLocation menuItem />
+          <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
+          {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
+            <TagAction menuItem />
+          {/if}
+          <DeleteAssets menuItem {onAssetDelete} />
+          <hr />
+          <AssetJobActions />
+        </ButtonContextMenu>
+      </AssetSelectControlBar>
+    </div>
+  {:else}
+    <div class="fixed top-0 start-0 w-full">
+      <ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
+        <div class="absolute bg-light"></div>
+        <div class="w-full flex-1 ps-4">
+          <SearchBar grayTheme={false} value={terms?.query ?? ''} searchQuery={terms} />
+        </div>
+      </ControlAppBar>
+    </div>
+  {/if}
+</section>
+
 {#if terms}
  <section
    id="search-chips"
    class="mt-24 text-center w-full flex gap-5 place-content-center place-items-center flex-wrap px-24"
  >
-    {#each getObjectKeys(terms) as key (key)}
-      {@const value = terms[key]}
+    {#each getObjectKeys(terms) as searchKey (searchKey)}
+      {@const value = terms[searchKey]}
      <div class="flex place-content-center place-items-center text-xs">
        <div
          class="bg-immich-primary py-2 px-4 text-white dark:text-black dark:bg-immich-dark-primary
          {value === true ? 'rounded-full' : 'rounded-s-full'}"
        >
-          {getHumanReadableSearchKey(key as keyof SearchTerms)}
+          {getHumanReadableSearchKey(searchKey as keyof SearchTerms)}
        </div>

        {#if value !== true}
          <div class="bg-gray-300 py-2 px-4 dark:bg-gray-800 dark:text-white rounded-e-full">
-            {#if (key === 'takenAfter' || key === 'takenBefore') && typeof value === 'string'}
+            {#if (searchKey === 'takenAfter' || searchKey === 'takenBefore') && typeof value === 'string'}
              {getHumanReadableDate(value)}
-            {:else if key === 'personIds' && Array.isArray(value)}
+            {:else if searchKey === 'personIds' && Array.isArray(value)}
              {#await getPersonName(value) then personName}
                {personName}
              {/await}
-            {:else if key === 'tagIds' && Array.isArray(value)}
+            {:else if searchKey === 'tagIds' && Array.isArray(value)}
              {#await getTagNames(value) then tagNames}
                {tagNames}
              {/await}