feat(web): add RemoveFromAlbumAction to asset viewer nav bar

This commit is contained in:
timonrieger
2026-03-17 22:43:51 +01:00
parent 34caed3b2b
commit 6d4a7a7517
2 changed files with 14 additions and 7 deletions

View File

@@ -8,6 +8,7 @@
import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte';
import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
import RestoreAction from '$lib/components/asset-viewer/actions/restore-action.svelte';
import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/set-album-cover-action.svelte';
import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/set-person-featured-action.svelte';
@@ -15,8 +16,10 @@
import SetStackPrimaryAsset from '$lib/components/asset-viewer/actions/set-stack-primary-asset.svelte';
import SetVisibilityAction from '$lib/components/asset-viewer/actions/set-visibility-action.svelte';
import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
import LoadingDots from '$lib/components/LoadingDots.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 { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
import { languageManager } from '$lib/managers/language-manager.svelte';
import { Route } from '$lib/route';
@@ -35,8 +38,6 @@
type StackResponseDto,
} from '@immich/sdk';
import { ActionButton, CommandPaletteDefaultProvider, Tooltip, type ActionItem } from '@immich/ui';
import LoadingDots from '$lib/components/LoadingDots.svelte';
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import {
mdiArrowLeft,
mdiArrowRight,
@@ -79,6 +80,7 @@
}: Props = $props();
const isOwner = $derived($user && asset.ownerId === $user?.id);
const isAlbumOwner = $derived($user && album?.ownerId === $user?.id);
const isLocked = $derived(asset.visibility === AssetVisibility.Locked);
const smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
@@ -153,6 +155,9 @@
{/if}
<ActionMenuItem action={Actions.AddToAlbum} />
{#if album && (isOwner || isAlbumOwner)}
<RemoveFromAlbumAction {album} onRemove={undefined} assetIds={[asset.id]} menuItem />
{/if}
{#if isOwner}
<AddToStackAction {asset} {stack} {onAction} />

View File

@@ -10,16 +10,19 @@
interface Props {
album: AlbumResponseDto;
onRemove: ((assetIds: string[]) => void) | undefined;
assetIds?: string[];
menuItem?: boolean;
}
let { album = $bindable(), onRemove, menuItem = false }: Props = $props();
let { album = $bindable(), onRemove, assetIds, menuItem = false }: Props = $props();
const { getAssets, clearSelect } = getAssetControlContext();
const context = getAssetControlContext();
const removeFromAlbum = async () => {
const ids = assetIds ?? context?.getAssets().map(({ id }) => id) ?? [];
const isConfirmed = await modalManager.showDialog({
prompt: $t('remove_assets_album_confirmation', { values: { count: getAssets().length } }),
prompt: $t('remove_assets_album_confirmation', { values: { count: ids.length } }),
});
if (!isConfirmed) {
@@ -27,7 +30,6 @@
}
try {
const ids = [...getAssets()].map((a) => a.id);
const results = await removeAssetFromAlbum({
id: album.id,
bulkIdsDto: { ids },
@@ -40,7 +42,7 @@
const count = results.filter(({ success }) => success).length;
toastManager.success($t('assets_removed_count', { values: { count } }));
clearSelect();
context?.clearSelect();
} catch (error) {
handleError(error, $t('errors.error_removing_assets_from_album'));
}