feat(web): improved action bar actions (#2553)

* feat(web): improved action bar actions * Update web/src/lib/components/photos-page/actions/delete-assets.svelte Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * update archive and favorite actions * feat: add un archive/favorite on associated pages * fix favorite action + use isAllArchived for photos * remove unneeded unarchive check --------- Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
2025-10-29 17:40:28 +00:00 · 2023-05-26 09:11:10 -04:00
parent 71ef7685c5
commit d6756f3d81
20 changed files with 253 additions and 276 deletions
--- a/web/src/routes/(user)/archive/+page.svelte
+++ b/web/src/routes/(user)/archive/+page.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.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 DownloadFiles from '$lib/components/photos-page/actions/download-files.svelte';
-	import RemoveFromArchive from '$lib/components/photos-page/actions/remove-from-archive.svelte';
+	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
 	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
 	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-	import OptionAddToAlbum from '$lib/components/photos-page/menu-options/option-add-to-album.svelte';
-	import OptionAddToFavorites from '$lib/components/photos-page/menu-options/option-add-to-favorites.svelte';
 	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
 	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
 	import { archivedAsset } from '$lib/stores/archived-asset.store';
 	import { handleError } from '$lib/utils/handle-error';
 	import { api, AssetResponseDto } from '@api';
 	import { onMount } from 'svelte';
+	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
 	import Plus from 'svelte-material-icons/Plus.svelte';
 	import type { PageData } from './$types';

@@ -21,6 +22,7 @@

 	let selectedAssets: Set<AssetResponseDto> = new Set();
 	$: isMultiSelectionMode = selectedAssets.size > 0;
+	$: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);

 	onMount(async () => {
 		try {
@@ -51,15 +53,17 @@
 				assets={selectedAssets}
 				clearSelect={() => (selectedAssets = new Set())}
 			>
+				<ArchiveAction unarchive onAssetArchive={(asset) => onAssetDelete(asset.id)} />
 				<CreateSharedLink />
-				<RemoveFromArchive onAssetArchive={(asset) => onAssetDelete(asset.id)} />
-				<DownloadFiles />
 				<AssetSelectContextMenu icon={Plus} title="Add">
-					<OptionAddToFavorites />
-					<OptionAddToAlbum />
-					<OptionAddToAlbum shared />
+					<AddToAlbum />
+					<AddToAlbum shared />
 				</AssetSelectContextMenu>
 				<DeleteAssets {onAssetDelete} />
+				<AssetSelectContextMenu icon={DotsVertical} title="Add">
+					<DownloadAction menuItem />
+					<FavoriteAction menuItem removeFavorite={isAllFavorite} />
+				</AssetSelectContextMenu>
 			</AssetSelectControlBar>
 		{/if}
 	</svelte:fragment>
--- a/web/src/routes/(user)/favorites/+page.svelte
+++ b/web/src/routes/(user)/favorites/+page.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
 	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-	import RemoveFavorite from '$lib/components/photos-page/actions/remove-favorite.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 AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
 	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
 	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
 	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
 	import { handleError } from '$lib/utils/handle-error';
 	import { api, AssetResponseDto } from '@api';
 	import { onMount } from 'svelte';
+	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+	import Plus from 'svelte-material-icons/Plus.svelte';
 	import Error from '../../+error.svelte';
 	import type { PageData } from './$types';

@@ -17,6 +24,7 @@
 	export let data: PageData;

 	$: isMultiSelectionMode = selectedAssets.size > 0;
+	$: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);

 	onMount(async () => {
 		try {
@@ -35,8 +43,17 @@
 <!-- Multiselection mode app bar -->
 {#if isMultiSelectionMode}
 	<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
+		<FavoriteAction removeFavorite onAssetFavorite={(asset) => onAssetDelete(asset.id)} />
 		<CreateSharedLink />
-		<RemoveFavorite onAssetFavorite={(asset) => onAssetDelete(asset.id)} />
+		<AssetSelectContextMenu icon={Plus} title="Add">
+			<AddToAlbum />
+			<AddToAlbum shared />
+		</AssetSelectContextMenu>
+		<DeleteAssets {onAssetDelete} />
+		<AssetSelectContextMenu icon={DotsVertical} title="Menu">
+			<DownloadAction menuItem />
+			<ArchiveAction menuItem unarchive={isAllArchive} />
+		</AssetSelectContextMenu>
 	</AssetSelectControlBar>
 {/if}

--- a/web/src/routes/(user)/partners/[userId]/+page.svelte
+++ b/web/src/routes/(user)/partners/[userId]/+page.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import DownloadFiles from '$lib/components/photos-page/actions/download-files.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 DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
 	import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
 	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
 	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
 	import { AppRoute } from '$lib/constants';
@@ -12,6 +15,7 @@
 	} from '$lib/stores/asset-interaction.store';
 	import { onDestroy } from 'svelte';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+	import Plus from 'svelte-material-icons/Plus.svelte';
 	import type { PageData } from './$types';

 	export let data: PageData;
@@ -27,7 +31,18 @@
 			assets={$selectedAssets}
 			clearSelect={assetInteractionStore.clearMultiselect}
 		>
-			<DownloadFiles />
+			<DownloadAction />
+		</AssetSelectControlBar>
+		<AssetSelectControlBar
+			assets={$selectedAssets}
+			clearSelect={assetInteractionStore.clearMultiselect}
+		>
+			<CreateSharedLink />
+			<AssetSelectContextMenu icon={Plus} title="Add">
+				<AddToAlbum />
+				<AddToAlbum shared />
+			</AssetSelectContextMenu>
+			<DownloadAction />
 		</AssetSelectControlBar>
 	{:else}
 		<ControlAppBar
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -3,29 +3,32 @@
 	import { page } from '$app/stores';
 	import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
 	import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
+	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.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 DownloadFiles from '$lib/components/photos-page/actions/download-files.svelte';
-	import MoveToArchive from '$lib/components/photos-page/actions/move-to-archive.svelte';
+	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
 	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
 	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-	import OptionAddToAlbum from '$lib/components/photos-page/menu-options/option-add-to-album.svelte';
-	import OptionAddToFavorites from '$lib/components/photos-page/menu-options/option-add-to-favorites.svelte';
 	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
 	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
 	import { AppRoute } from '$lib/constants';
 	import { handleError } from '$lib/utils/handle-error';
 	import { AssetResponseDto, api } from '@api';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
 	import Plus from 'svelte-material-icons/Plus.svelte';
 	import type { PageData } from './$types';

 	export let data: PageData;

 	let isEditName = false;
-	let multiSelectAsset: Set<AssetResponseDto> = new Set();
 	let previousRoute: string = AppRoute.EXPLORE;
-	$: isMultiSelectionMode = multiSelectAsset.size > 0;
+	let selectedAssets: Set<AssetResponseDto> = new Set();
+	$: isMultiSelectionMode = selectedAssets.size > 0;
+	$: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
+	$: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);

 	afterNavigate(({ from }) => {
 		// Prevent setting previousRoute to the current page.
@@ -44,25 +47,28 @@
 		}
 	};

-	const handleAssetDelete = (assetId: string) => {
+	const onAssetDelete = (assetId: string) => {
 		data.assets = data.assets.filter((asset: AssetResponseDto) => asset.id !== assetId);
 	};
 </script>

 {#if isMultiSelectionMode}
-	<AssetSelectControlBar
-		assets={multiSelectAsset}
-		clearSelect={() => (multiSelectAsset = new Set())}
-	>
+	<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
 		<CreateSharedLink />
-		<MoveToArchive />
-		<DownloadFiles filename={data.person.name} />
 		<AssetSelectContextMenu icon={Plus} title="Add">
-			<OptionAddToFavorites />
-			<OptionAddToAlbum />
-			<OptionAddToAlbum shared />
+			<AddToAlbum />
+			<AddToAlbum shared />
+		</AssetSelectContextMenu>
+		<DeleteAssets {onAssetDelete} />
+		<AssetSelectContextMenu icon={DotsVertical} title="Add">
+			<DownloadAction menuItem />
+			<FavoriteAction menuItem removeFavorite={isAllFavorite} />
+			<ArchiveAction
+				menuItem
+				unarchive={isAllArchive}
+				onAssetArchive={(asset) => onAssetDelete(asset.id)}
+			/>
 		</AssetSelectContextMenu>
-		<DeleteAssets onAssetDelete={handleAssetDelete} />
 	</AssetSelectControlBar>
 {:else}
 	<ControlAppBar
@@ -114,7 +120,7 @@
 				assets={data.assets}
 				viewFrom="search-page"
 				showArchiveIcon={true}
-				bind:selectedAssets={multiSelectAsset}
+				bind:selectedAssets
 			/>
 		</section>
 	</section>
--- a/web/src/routes/(user)/photos/+page.svelte
+++ b/web/src/routes/(user)/photos/+page.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.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 DownloadFiles from '$lib/components/photos-page/actions/download-files.svelte';
-	import MoveToArchive from '$lib/components/photos-page/actions/move-to-archive.svelte';
+	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
 	import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
 	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
 	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-	import OptionAddToAlbum from '$lib/components/photos-page/menu-options/option-add-to-album.svelte';
-	import OptionAddToFavorites from '$lib/components/photos-page/menu-options/option-add-to-favorites.svelte';
 	import {
 		assetInteractionStore,
 		isMultiSelectStoreState,
@@ -16,6 +16,7 @@
 	} from '$lib/stores/asset-interaction.store';
 	import { assetStore } from '$lib/stores/assets.store';
 	import { onDestroy } from 'svelte';
+	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
 	import Plus from 'svelte-material-icons/Plus.svelte';
 	import type { PageData } from './$types';

@@ -24,6 +25,8 @@
 	onDestroy(() => {
 		assetInteractionStore.clearMultiselect();
 	});
+
+	$: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
 </script>

 <UserPageLayout user={data.user} hideNavbar={$isMultiSelectStoreState} showUploadButton>
@@ -34,14 +37,16 @@
 				clearSelect={assetInteractionStore.clearMultiselect}
 			>
 				<CreateSharedLink />
-				<MoveToArchive onAssetArchive={(asset) => assetStore.removeAsset(asset.id)} />
-				<DownloadFiles />
 				<AssetSelectContextMenu icon={Plus} title="Add">
-					<OptionAddToFavorites />
-					<OptionAddToAlbum />
-					<OptionAddToAlbum shared />
+					<AddToAlbum />
+					<AddToAlbum shared />
 				</AssetSelectContextMenu>
 				<DeleteAssets onAssetDelete={assetStore.removeAsset} />
+				<AssetSelectContextMenu icon={DotsVertical} title="Menu">
+					<FavoriteAction menuItem removeFavorite={isAllFavorite} />
+					<DownloadAction menuItem />
+					<ArchiveAction menuItem onAssetArchive={(asset) => assetStore.removeAsset(asset.id)} />
+				</AssetSelectContextMenu>
 			</AssetSelectControlBar>
 		{/if}
 	</svelte:fragment>
--- a/web/src/routes/(user)/search/+page.svelte
+++ b/web/src/routes/(user)/search/+page.svelte
@@ -1,21 +1,20 @@
 <script lang="ts">
 	import { afterNavigate, goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.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 DownloadFiles from '$lib/components/photos-page/actions/download-files.svelte';
-	import MoveToArchive from '$lib/components/photos-page/actions/move-to-archive.svelte';
-	import RemoveFromArchive from '$lib/components/photos-page/actions/remove-from-archive.svelte';
+	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
 	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
 	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-	import OptionAddToAlbum from '$lib/components/photos-page/menu-options/option-add-to-album.svelte';
-	import OptionAddToFavorites from '$lib/components/photos-page/menu-options/option-add-to-favorites.svelte';
-	import OptionRemoveFromFavorites from '$lib/components/photos-page/menu-options/option-remove-from-favorites.svelte';
 	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
 	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
 	import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
 	import { AssetResponseDto } from '@api';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
 	import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte';
 	import Plus from 'svelte-material-icons/Plus.svelte';
 	import type { PageData } from './$types';
@@ -51,22 +50,17 @@
 	{#if isMultiSelectionMode}
 		<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
 			<CreateSharedLink />
-			{#if isAllArchived}
-				<RemoveFromArchive />
-			{:else}
-				<MoveToArchive />
-			{/if}
-			<DownloadFiles />
 			<AssetSelectContextMenu icon={Plus} title="Add">
-				{#if isAllFavorite}
-					<OptionRemoveFromFavorites />
-				{:else}
-					<OptionAddToFavorites />
-				{/if}
-				<OptionAddToAlbum />
-				<OptionAddToAlbum shared />
+				<AddToAlbum />
+				<AddToAlbum shared />
 			</AssetSelectContextMenu>
 			<DeleteAssets {onAssetDelete} />
+
+			<AssetSelectContextMenu icon={DotsVertical} title="Add">
+				<DownloadAction menuItem />
+				<FavoriteAction menuItem removeFavorite={isAllFavorite} />
+				<ArchiveAction menuItem unarchive={isAllArchived} />
+			</AssetSelectContextMenu>
 		</AssetSelectControlBar>
 	{:else}
 		<ControlAppBar on:close-button-click={() => goto(previousRoute)} backIcon={ArrowLeft}>