Feature - Delete asset on the web (#436)

* Added selection mechanism to photos page

* Added control app bar

* Refactor AlbumAppBar into ControlAppBar

* Added addtional micro interactions when in multi selection mode

* Implemented delete selected asset and rerender

web/src/lib/components/album-page/album-viewer.svelte

@@ -12,7 +12,6 @@
 	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
 	import AssetSelection from './asset-selection.svelte';
 	import _ from 'lodash-es';
-	import AlbumAppBar from './album-app-bar.svelte';
 	import UserSelectionModal from './user-selection-modal.svelte';
 	import ShareInfoModal from './share-info-modal.svelte';
 	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
@@ -22,6 +21,7 @@
 	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
 	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
 	import ThumbnailSelection from './thumbnail-selection.svelte';
+	import ControlAppBar from '../shared-components/control-app-bar.svelte';
 
 	export let album: AlbumResponseDto;
 
@@ -272,7 +272,7 @@
 <section class="bg-immich-bg">
 	<!-- Multiselection mode app bar -->
 	{#if isMultiSelectionMode}
-		<AlbumAppBar
+		<ControlAppBar
 			on:close-button-click={clearMultiSelectAssetAssetHandler}
 			backIcon={Close}
 			tailwindClasses={'bg-white shadow-md'}
@@ -289,12 +289,12 @@
 					/>
 				{/if}
 			</svelte:fragment>
-		</AlbumAppBar>
+		</ControlAppBar>
 	{/if}
 
 	<!-- Default app bar -->
 	{#if !isMultiSelectionMode}
-		<AlbumAppBar on:close-button-click={() => goto(backUrl)} backIcon={ArrowLeft}>
+		<ControlAppBar on:close-button-click={() => goto(backUrl)} backIcon={ArrowLeft}>
 			<svelte:fragment slot="trailing">
 				{#if album.assets.length > 0}
 					<CircleIconButton
@@ -329,7 +329,7 @@
 					>
 				{/if}
 			</svelte:fragment>
-		</AlbumAppBar>
+		</ControlAppBar>
 	{/if}
 
 	<section class="m-auto my-[160px] w-[60%]">

web/src/lib/components/album-page/asset-selection.svelte

@@ -8,9 +8,9 @@
 	import moment from 'moment';
 	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
 	import { AssetResponseDto } from '@api';
-	import AlbumAppBar from './album-app-bar.svelte';
 	import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
 	import { albumUploadAssetStore } from '$lib/stores/album-upload-asset';
+	import ControlAppBar from '../shared-components/control-app-bar.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -172,7 +172,7 @@
 	transition:fly={{ y: 500, duration: 100, easing: quintOut }}
 	class="absolute top-0 left-0 w-full h-full py-[160px]  bg-immich-bg z-[9999]"
 >
-	<AlbumAppBar on:close-button-click={() => dispatch('go-back')}>
+	<ControlAppBar on:close-button-click={() => dispatch('go-back')}>
 		<svelte:fragment slot="leading">
 			{#if selectedAsset.size == 0}
 				<p class="text-lg">Add to album</p>
@@ -195,7 +195,7 @@
 				><span class="px-2">Done</span></button
 			>
 		</svelte:fragment>
-	</AlbumAppBar>
+	</ControlAppBar>
 
 	<section class="flex flex-wrap gap-14  px-20 overflow-y-auto">
 		{#each $assetsGroupByDate as assetsInDateGroup, groupIndex}

web/src/lib/components/album-page/thumbnail-selection.svelte

@@ -3,8 +3,8 @@
 	import { createEventDispatcher } from 'svelte';
 	import { quintOut } from 'svelte/easing';
 	import { fly } from 'svelte/transition';
+	import ControlAppBar from '../shared-components/control-app-bar.svelte';
 	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
-	import AlbumAppBar from './album-app-bar.svelte';
 
 	export let album: AlbumResponseDto;
 
@@ -24,7 +24,7 @@
 	transition:fly={{ y: 500, duration: 100, easing: quintOut }}
 	class="absolute top-0 left-0 w-full h-full py-[160px]  bg-immich-bg z-[9999]"
 >
-	<AlbumAppBar on:close-button-click={() => dispatch('close')}>
+	<ControlAppBar on:close-button-click={() => dispatch('close')}>
 		<svelte:fragment slot="leading">
 			<p class="text-lg">Select album cover</p>
 		</svelte:fragment>
@@ -37,7 +37,7 @@
 				><span class="px-2">Done</span></button
 			>
 		</svelte:fragment>
-	</AlbumAppBar>
+	</ControlAppBar>
 
 	<section class="flex flex-wrap gap-14  px-20 overflow-y-auto">
 		<!-- Image grid -->