feat(web): improve feedback for favorite and archive actions (#7232)

2024-12-29 15:11:58 +00:00 · 2024-02-20 17:01:52 +01:00 · 2024-02-20 17:01:52 +01:00 · b896d45ee7
commit b896d45ee7
parent b3c7bebbd4
11 changed files with 24 additions and 12 deletions
--- a/web/src/lib/components/photos-page/actions/archive-action.svelte
+++ b/web/src/lib/components/photos-page/actions/archive-action.svelte
@ -11,7 +11,7 @@
  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
  import { getAssetControlContext } from '../asset-select-control-bar.svelte';

-  export let onArchive: OnArchive | undefined = undefined;
+  export let onArchive: OnArchive;

  export let menuItem = false;
  export let unarchive = false;
@ -39,7 +39,7 @@
        asset.isArchived = isArchived;
      }

-      onArchive?.(ids, isArchived);
+      onArchive(ids, isArchived);

      notificationController.show({
        message: `${isArchived ? 'Archived' : 'Unarchived'} ${ids.length}`,
--- a/web/src/lib/components/photos-page/actions/favorite-action.svelte
+++ b/web/src/lib/components/photos-page/actions/favorite-action.svelte
@ -11,7 +11,7 @@
  import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
  import { getAssetControlContext } from '../asset-select-control-bar.svelte';

-  export let onFavorite: OnFavorite | undefined = undefined;
+  export let onFavorite: OnFavorite;

  export let menuItem = false;
  export let removeFavorite: boolean;
@ -40,7 +40,7 @@
        asset.isFavorite = isFavorite;
      }

-      onFavorite?.(ids, isFavorite);
+      onFavorite(ids, isFavorite);

      notificationController.show({
        message: isFavorite ? `Added ${ids.length} to favorites` : `Removed ${ids.length} from favorites`,
--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ b/web/src/lib/components/photos-page/asset-date-group.svelte
@ -25,6 +25,7 @@
  export let viewport: Viewport;
  export let singleSelect = false;
  export let withStacked = false;
+  export let showArchiveIcon = false;

  export let assetStore: AssetStore;
  export let assetInteractionStore: AssetInteractionStore;
@ -170,6 +171,7 @@
          >
            <Thumbnail
              showStackedIcon={withStacked}
+              {showArchiveIcon}
              {asset}
              {groupIndex}
              on:click={() => assetClickHandler(asset, groupAssets, groupTitle)}
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@ -28,6 +28,7 @@
  export let assetInteractionStore: AssetInteractionStore;
  export let removeAction: AssetAction | null = null;
  export let withStacked = false;
+  export let showArchiveIcon = false;
  export let isShared = false;
  export let album: AlbumResponseDto | null = null;
  export let isShowDeleteConfirmation = false;
@ -425,6 +426,7 @@
            {#if intersecting}
              <AssetDateGroup
                {withStacked}
+                {showArchiveIcon}
                {assetStore}
                {assetInteractionStore}
                {isSelectionMode}
--- a/web/src/lib/stores/assets.store.ts
+++ b/web/src/lib/stores/assets.store.ts
@ -416,6 +416,10 @@ export class AssetStore {
    return nextBucket.assets[0]?.id || null;
  }

+  triggerUpdate() {
+    this.emit(false);
+  }
+
  private emit(recalculate: boolean) {
    if (recalculate) {
      this.assets = this.buckets.flatMap(({ assets }) => assets);
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@ -127,6 +127,7 @@
  $: isOwned = $user.id == album.ownerId;
  $: isAllUserOwned = [...$selectedAssets].every((asset) => asset.ownerId === $user.id);
  $: isAllFavorite = [...$selectedAssets].every((asset) => asset.isFavorite);
+  $: isAllArchived = [...$selectedAssets].every((asset) => asset.isArchived);
  $: {
    assetGridWidth = isShowActivity ? globalWidth - (globalWidth < 768 ? 360 : 460) : globalWidth;
  }
@ -473,9 +474,9 @@
        </AssetSelectContextMenu>
        <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
          {#if isAllUserOwned}
-            <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+            <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
+            <ArchiveAction menuItem unarchive={isAllArchived} onArchive={() => assetStore.triggerUpdate()} />
          {/if}
-          <ArchiveAction menuItem />
          <DownloadAction menuItem filename="{album.albumName}.zip" />
          {#if isOwned || isAllUserOwned}
            <RemoveFromAlbum menuItem bind:album onRemove={(assetIds) => handleRemoveAssets(assetIds)} />
@ -591,6 +592,7 @@
          isShared={album.sharedUsers.length > 0}
          isSelectionMode={viewMode === ViewMode.SELECT_THUMBNAIL}
          singleSelect={viewMode === ViewMode.SELECT_THUMBNAIL}
+          showArchiveIcon
          on:select={({ detail: asset }) => handleUpdateThumbnail(asset.id)}
          on:escape={handleEscape}
        >
--- a/web/src/routes/(user)/archive/+page.svelte
+++ b/web/src/routes/(user)/archive/+page.svelte
@ -39,7 +39,7 @@
    <DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
    <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
      <DownloadAction menuItem />
-      <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+      <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
    </AssetSelectContextMenu>
  </AssetSelectControlBar>
 {/if}
--- a/web/src/routes/(user)/favorites/+page.svelte
+++ b/web/src/routes/(user)/favorites/+page.svelte
@ -42,7 +42,7 @@
    <DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
    <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
      <DownloadAction menuItem />
-      <ArchiveAction menuItem unarchive={isAllArchive} />
+      <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => assetStore.removeAssets(ids)} />
      <ChangeDate menuItem />
      <ChangeLocation menuItem />
    </AssetSelectContextMenu>
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@ -446,7 +446,7 @@
      <DeleteAssets onAssetDelete={(assetId) => $assetStore.removeAsset(assetId)} />
      <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
        <DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
-        <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+        <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
        <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => $assetStore.removeAssets(ids)} />
        <MenuOption text="Fix incorrect match" on:click={handleReassignAssets} />
        <ChangeDate menuItem />
--- a/web/src/routes/(user)/photos/+page.svelte
+++ b/web/src/routes/(user)/photos/+page.svelte
@ -65,7 +65,7 @@
      onAssetDelete={(assetId) => assetStore.removeAsset(assetId)}
    />
    <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
-      <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+      <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
      <DownloadAction menuItem />
      <ArchiveAction menuItem onArchive={(ids) => assetStore.removeAssets(ids)} />
      {#if $selectedAssets.size > 1}
--- a/web/src/routes/(user)/search/+page.svelte
+++ b/web/src/routes/(user)/search/+page.svelte
@ -223,6 +223,8 @@

    return personNames.join(', ');
  }
+
+  const triggerAssetUpdate = () => (searchResultAssets = searchResultAssets);
 </script>

 <section>
@ -239,8 +241,8 @@

        <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
          <DownloadAction menuItem />
-          <FavoriteAction menuItem removeFavorite={isAllFavorite} />
-          <ArchiveAction menuItem unarchive={isAllArchived} />
+          <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
+          <ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
          <ChangeDate menuItem />
          <ChangeLocation menuItem />
        </AssetSelectContextMenu>