feat(web): remove and delete from album (#3725)

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -9,8 +9,10 @@
   import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import { handleError } from '../../../utils/handle-error';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
 
   export let onAssetDelete: OnAssetDelete;
+  export let menuItem = false;
   const { getAssets, clearSelect } = getAssetControlContext();
 
   let isShowConfirmation = false;
@@ -46,7 +48,11 @@
   };
 </script>
 
-<CircleIconButton title="Delete" logo={DeleteOutline} on:click={() => (isShowConfirmation = true)} />
+{#if menuItem}
+  <MenuOption text="Delete" on:click={() => (isShowConfirmation = true)} />
+{:else}
+  <CircleIconButton title="Delete" logo={DeleteOutline} on:click={() => (isShowConfirmation = true)} />
+{/if}
 
 {#if isShowConfirmation}
   <ConfirmDialogue

web/src/lib/components/photos-page/actions/remove-from-album.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { AlbumResponseDto, api } from '@api';
   import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
 
   export let album: AlbumResponseDto;
   export let onRemove: ((assetIds: string[]) => void) | undefined = undefined;
+  export let menuItem = false;
 
   const { getAssets, clearSelect } = getAssetControlContext();
 
@@ -48,11 +50,15 @@
   };
 </script>
 
-<CircleIconButton title="Remove from album" on:click={() => (isShowConfirmation = true)} logo={DeleteOutline} />
+{#if menuItem}
+  <MenuOption text="Remove from album" on:click={() => (isShowConfirmation = true)} />
+{:else}
+  <CircleIconButton title="Remove from album" logo={DeleteOutline} on:click={() => (isShowConfirmation = true)} />
+{/if}
 
 {#if isShowConfirmation}
   <ConfirmDialogue
-    title="Remove Asset{getAssets().size > 1 ? 's' : ''}"
+    title="Remove from {album.albumName}"
     confirmText="Remove"
     on:confirm={removeFromAlbum}
     on:cancel={() => (isShowConfirmation = false)}

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -7,6 +7,7 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.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 DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
   import RemoveFromAlbum from '$lib/components/photos-page/actions/remove-from-album.svelte';
@@ -287,14 +288,17 @@
         <AddToAlbum />
         <AddToAlbum shared />
       </AssetSelectContextMenu>
-      {#if isOwned || isAllUserOwned}
-        <RemoveFromAlbum bind:album onRemove={(assetIds) => handleRemoveAssets(assetIds)} />
-      {/if}
       <AssetSelectContextMenu icon={DotsVertical} title="Menu">
         {#if isAllUserOwned}
           <FavoriteAction menuItem removeFavorite={isAllFavorite} />
         {/if}
         <DownloadAction menuItem filename="{album.albumName}.zip" />
+        {#if isOwned || isAllUserOwned}
+          <RemoveFromAlbum menuItem bind:album onRemove={(assetIds) => handleRemoveAssets(assetIds)} />
+        {/if}
+        {#if isAllUserOwned}
+          <DeleteAssets menuItem onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
+        {/if}
       </AssetSelectContextMenu>
     </AssetSelectControlBar>
   {:else}