feat (server, web): Implement Archive (#2225)

* feat (server, web): add archive

* chore: generate api

* feat (web): add empty placeholder for archive page

* chore: remove title on favorites page

Duplicates sidebar selection. Two pages (Archive and Favorites)
are consistent now

* refactor (web): create EmptyPlaceholder component for empty pages

* fixed menu close button not close:

* fix (web): remove not necessary store call

* test (web): simplify asset tests code

* test (web): simplify asset tests code

* chore (server): remove isArchived while uploading

* chore (server): remove isArchived from typesense schema

* chore: generate api

* fix (web): delete asset from archive page

* chore: change archive asset count endpoint

old endpoint: /asset/archived-count-by-user-id
new endpoint: /asset/stat/archive

* chore: generate api

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -7,7 +7,7 @@
 	import type { PageData } from './$types';
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 	import { useAlbums } from './albums.bloc';
-	import empty1Url from '$lib/assets/empty-1.svg';
+	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 	import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
 
@@ -57,17 +57,11 @@
 
 	<!-- Empty Message -->
 	{#if $albums.length === 0}
-		<div
-			on:click={handleCreateAlbum}
-			on:keydown={handleCreateAlbum}
-			class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
-		>
-			<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
-
-			<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
-				Create an album to organize your photos and videos
-			</p>
-		</div>
+		<EmptyPlaceholder
+			text="Create an album to organize your photos and videos"
+			actionHandler={handleCreateAlbum}
+			alt="Empty albums"
+		/>
 	{/if}
 </UserPageLayout>
 

web/src/routes/(user)/archive/+page.server.ts

@@ -0,0 +1,16 @@
+import type { PageServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+import { AppRoute } from '$lib/constants';
+
+export const load = (async ({ locals: { user } }) => {
+	if (!user) {
+		throw redirect(302, AppRoute.AUTH_LOGIN);
+	}
+
+	return {
+		user,
+		meta: {
+			title: 'Archive'
+		}
+	};
+}) satisfies PageServerLoad;

web/src/routes/(user)/archive/+page.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+	import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import { addAssetsToAlbum, bulkDownload } from '$lib/utils/asset-utils';
+	import { AlbumResponseDto, api, AssetResponseDto, SharedLinkType } from '@api';
+	import Close from 'svelte-material-icons/Close.svelte';
+	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
+	import ArchiveArrowUpOutline from 'svelte-material-icons/ArchiveArrowUpOutline.svelte';
+	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import Plus from 'svelte-material-icons/Plus.svelte';
+	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
+	import { locale } from '$lib/stores/preferences.store';
+	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+	import type { PageData } from './$types';
+	import { onMount } from 'svelte';
+	import { handleError } from '$lib/utils/handle-error';
+	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+
+	export let data: PageData;
+
+	onMount(async () => {
+		try {
+			const { data: assets } = await api.assetApi.getAllAssets(undefined, true);
+			archived = assets;
+		} catch {
+			handleError(Error, 'Unable to load archived assets');
+		}
+	});
+
+	const clearMultiSelectAssetAssetHandler = () => {
+		selectedAssets = new Set();
+	};
+
+	const deleteSelectedAssetHandler = async () => {
+		try {
+			if (
+				window.confirm(
+					`Caution! Are you sure you want to delete ${selectedAssets.size} assets? This step also deletes assets in the album(s) to which they belong. You can not undo this action!`
+				)
+			) {
+				const { data: deletedAssets } = await api.assetApi.deleteAsset({
+					ids: Array.from(selectedAssets).map((a) => a.id)
+				});
+
+				for (const asset of deletedAssets) {
+					if (asset.status == 'SUCCESS') {
+						archived = archived.filter((a) => a.id != asset.id);
+					}
+				}
+
+				clearMultiSelectAssetAssetHandler();
+			}
+		} catch (e) {
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error deleting assets, check console for more details'
+			});
+			console.error('Error deleteSelectedAssetHandler', e);
+		}
+	};
+
+	$: isMultiSelectionMode = selectedAssets.size > 0;
+
+	let selectedAssets: Set<AssetResponseDto> = new Set();
+	let archived: AssetResponseDto[] = [];
+
+	let contextMenuPosition = { x: 0, y: 0 };
+	let isShowCreateSharedLinkModal = false;
+	let isShowAddMenu = false;
+	let isShowAlbumPicker = false;
+	let addToSharedAlbum = false;
+
+	const handleShowMenu = ({ x, y }: MouseEvent) => {
+		contextMenuPosition = { x, y };
+		isShowAddMenu = !isShowAddMenu;
+	};
+
+	const handleAddToFavorites = () => {
+		isShowAddMenu = false;
+
+		let cnt = 0;
+		for (const asset of selectedAssets) {
+			if (!asset.isFavorite) {
+				api.assetApi.updateAsset(asset.id, {
+					isFavorite: true
+				});
+				cnt = cnt + 1;
+			}
+		}
+
+		notificationController.show({
+			message: `Added ${cnt} to favorites`,
+			type: NotificationType.Info
+		});
+
+		clearMultiSelectAssetAssetHandler();
+	};
+
+	const handleShowAlbumPicker = (shared: boolean) => {
+		isShowAddMenu = false;
+		isShowAlbumPicker = true;
+		addToSharedAlbum = shared;
+	};
+
+	const handleAddToNewAlbum = (event: CustomEvent) => {
+		isShowAlbumPicker = false;
+
+		const { albumName }: { albumName: string } = event.detail;
+		const assetIds = Array.from(selectedAssets).map((asset) => asset.id);
+		api.albumApi.createAlbum({ albumName, assetIds }).then((response) => {
+			const { id, albumName } = response.data;
+
+			notificationController.show({
+				message: `Added ${assetIds.length} to ${albumName}`,
+				type: NotificationType.Info
+			});
+
+			clearMultiSelectAssetAssetHandler();
+
+			goto('/albums/' + id);
+		});
+	};
+
+	const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
+		isShowAlbumPicker = false;
+		const album = event.detail.album;
+
+		const assetIds = Array.from(selectedAssets).map((asset) => asset.id);
+
+		addAssetsToAlbum(album.id, assetIds).then(() => {
+			clearMultiSelectAssetAssetHandler();
+		});
+	};
+
+	const handleDownloadFiles = async () => {
+		await bulkDownload('immich', Array.from(selectedAssets), () => {
+			clearMultiSelectAssetAssetHandler();
+		});
+	};
+
+	const handleUnarchive = async () => {
+		let cnt = 0;
+		for (const asset of selectedAssets) {
+			if (asset.isArchived) {
+				api.assetApi.updateAsset(asset.id, {
+					isArchived: false
+				});
+				cnt = cnt + 1;
+
+				archived = archived.filter((a) => a.id != asset.id);
+			}
+		}
+
+		notificationController.show({
+			message: `Removed ${cnt} from archive`,
+			type: NotificationType.Info
+		});
+
+		clearMultiSelectAssetAssetHandler();
+	};
+
+	const handleCreateSharedLink = async () => {
+		isShowCreateSharedLinkModal = true;
+	};
+
+	const handleCloseSharedLinkModal = () => {
+		clearMultiSelectAssetAssetHandler();
+		isShowCreateSharedLinkModal = false;
+	};
+</script>
+
+<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode}>
+	<!-- Empty Message -->
+	{#if archived.length === 0}
+		<EmptyPlaceholder
+			text="Archive photos and videos to hide them from your Photos view"
+			alt="Empty archive"
+		/>
+	{/if}
+
+	<svelte:fragment slot="header">
+		{#if isMultiSelectionMode}
+			<ControlAppBar
+				on:close-button-click={clearMultiSelectAssetAssetHandler}
+				backIcon={Close}
+				tailwindClasses={'bg-white shadow-md'}
+			>
+				<svelte:fragment slot="leading">
+					<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
+						Selected {selectedAssets.size.toLocaleString($locale)}
+					</p>
+				</svelte:fragment>
+				<svelte:fragment slot="trailing">
+					<CircleIconButton
+						title="Share"
+						logo={ShareVariantOutline}
+						on:click={handleCreateSharedLink}
+					/>
+					<CircleIconButton
+						title="Unarchive"
+						logo={ArchiveArrowUpOutline}
+						on:click={handleUnarchive}
+					/>
+					<CircleIconButton
+						title="Download"
+						logo={CloudDownloadOutline}
+						on:click={handleDownloadFiles}
+					/>
+					<CircleIconButton title="Add" logo={Plus} on:click={handleShowMenu} />
+					<CircleIconButton
+						title="Delete"
+						logo={DeleteOutline}
+						on:click={deleteSelectedAssetHandler}
+					/>
+				</svelte:fragment>
+			</ControlAppBar>
+		{/if}
+
+		{#if isShowAddMenu}
+			<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAddMenu = false)}>
+				<div class="flex flex-col rounded-lg ">
+					<MenuOption on:click={handleAddToFavorites} text="Add to Favorites" />
+					<MenuOption on:click={() => handleShowAlbumPicker(false)} text="Add to Album" />
+					<MenuOption on:click={() => handleShowAlbumPicker(true)} text="Add to Shared Album" />
+				</div>
+			</ContextMenu>
+		{/if}
+
+		{#if isShowAlbumPicker}
+			<AlbumSelectionModal
+				shared={addToSharedAlbum}
+				on:newAlbum={handleAddToNewAlbum}
+				on:newSharedAlbum={handleAddToNewAlbum}
+				on:album={handleAddToAlbum}
+				on:close={() => (isShowAlbumPicker = false)}
+			/>
+		{/if}
+
+		{#if isShowCreateSharedLinkModal}
+			<CreateSharedLinkModal
+				sharedAssets={Array.from(selectedAssets)}
+				shareType={SharedLinkType.Individual}
+				on:close={handleCloseSharedLinkModal}
+			/>
+		{/if}
+	</svelte:fragment>
+
+	<GalleryViewer assets={archived} bind:selectedAssets />
+</UserPageLayout>

web/src/routes/(user)/favorites/+page.svelte

@@ -10,7 +10,7 @@
 	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
 	import StarMinusOutline from 'svelte-material-icons/StarMinusOutline.svelte';
 	import Error from '../../+error.svelte';
-	import empty1Url from '$lib/assets/empty-1.svg';
+	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 	import type { PageData } from './$types';
 
@@ -24,7 +24,7 @@
 
 	onMount(async () => {
 		try {
-			const { data: assets } = await api.assetApi.getAllAssets(true);
+			const { data: assets } = await api.assetApi.getAllAssets(true, undefined);
 			favorites = assets;
 		} catch {
 			handleError(Error, 'Unable to load favorites');
@@ -96,19 +96,14 @@
 	/>
 {/if}
 
-<UserPageLayout user={data.user} title={data.meta.title} hideNavbar={isMultiSelectionMode}>
+<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode}>
 	<section>
 		<!-- Empty Message -->
 		{#if favorites.length === 0}
-			<div
-				class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
-			>
-				<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
-
-				<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
-					Add favorites to quickly find your best pictures and videos
-				</p>
-			</div>
+			<EmptyPlaceholder
+				text="Add favorites to quickly find your best pictures and videos"
+				alt="Empty favorites"
+			/>
 		{/if}
 
 		<GalleryViewer assets={favorites} bind:selectedAssets />

web/src/routes/(user)/photos/+page.svelte

@@ -19,6 +19,7 @@
 	import { assetStore } from '$lib/stores/assets.store';
 	import { addAssetsToAlbum, bulkDownload } from '$lib/utils/asset-utils';
 	import { AlbumResponseDto, api, SharedLinkType } from '@api';
+	import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
 	import Close from 'svelte-material-icons/Close.svelte';
 	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
 	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
@@ -69,6 +70,27 @@
 		isShowAddMenu = !isShowAddMenu;
 	};
 
+	const handleArchive = async () => {
+		let cnt = 0;
+		for (const asset of $selectedAssets) {
+			if (!asset.isArchived) {
+				api.assetApi.updateAsset(asset.id, {
+					isArchived: true
+				});
+
+				assetStore.removeAsset(asset.id);
+				cnt = cnt + 1;
+			}
+		}
+
+		notificationController.show({
+			message: `Archived ${cnt}`,
+			type: NotificationType.Info
+		});
+
+		assetInteractionStore.clearMultiselect();
+	};
+
 	const handleAddToFavorites = () => {
 		isShowAddMenu = false;
 
@@ -162,6 +184,11 @@
 						logo={ShareVariantOutline}
 						on:click={handleCreateSharedLink}
 					/>
+					<CircleIconButton
+						title="Archive"
+						logo={ArchiveArrowDownOutline}
+						on:click={handleArchive}
+					/>
 					<CircleIconButton
 						title="Download"
 						logo={CloudDownloadOutline}

web/src/routes/(user)/search/+page.server.ts

@@ -24,6 +24,7 @@ export const load = (async ({ locals, parent, url }) => {
 		undefined,
 		undefined,
 		undefined,
+		undefined,
 		{ params: url.searchParams }
 	);