feat(web) Add search functionality to add photo to album modal (#1273)

web/src/lib/components/asset-viewer/album-list-item.svelte

@@ -6,11 +6,26 @@
 
 	export let album: AlbumResponseDto;
 	export let variant: 'simple' | 'full' = 'full';
+	export let searchQuery: string = '';
+	let albumNameArray: string[] = ['', '', ''];
+
+	// This part of the code is responsible for splitting album name into 3 parts where part 2 is the search query
+	// It is used to highlight the search query in the album name
+	$: {
+		let { albumName } = album;
+		let findIndex = albumName.toLowerCase().indexOf(searchQuery.toLowerCase());
+		let findLength = searchQuery.length;
+		albumNameArray = [
+			albumName.slice(0, findIndex),
+			albumName.slice(findIndex, findIndex + findLength),
+			albumName.slice(findIndex + findLength)
+		];
+	}
 </script>
 
 <button
 	on:click={() => dispatcher('album')}
-	class="flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+	class="w-full flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
 >
 	<div class="h-12 w-12">
 		<img
@@ -21,7 +36,7 @@
 		/>
 	</div>
 	<div class="h-12 flex flex-col items-start justify-center">
-		<span>{album.albumName}</span>
+		<span>{albumNameArray[0]}<b>{albumNameArray[1]}</b>{albumNameArray[2]}</span>
 		<span class="flex gap-1 text-sm">
 			{#if variant === 'simple'}
 				<span

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -210,9 +210,11 @@
 		addToSharedAlbum = shared;
 	};
 
-	const handleAddToNewAlbum = () => {
+	const handleAddToNewAlbum = (event: CustomEvent) => {
 		isShowAlbumPicker = false;
-		api.albumApi.createAlbum({ albumName: 'Untitled', assetIds: [asset.id] }).then((response) => {
+
+		const { albumName }: { albumName: string } = event.detail;
+		api.albumApi.createAlbum({ albumName, assetIds: [asset.id] }).then((response) => {
 			const album = response.data;
 			goto('/albums/' + album.id);
 		});

web/src/lib/components/shared-components/album-selection-modal.svelte

@@ -7,7 +7,9 @@
 
 	let albums: AlbumResponseDto[] = [];
 	let recentAlbums: AlbumResponseDto[] = [];
+	let filteredAlbums: AlbumResponseDto[] = [];
 	let loading = true;
+	let search = '';
 
 	const dispatch = createEventDispatcher();
 
@@ -32,15 +34,25 @@
 		loading = false;
 	});
 
+	$: {
+		if (search.length > 0 && albums.length > 0) {
+			filteredAlbums = albums.filter((album) => {
+				return album.albumName.toLowerCase().includes(search.toLowerCase());
+			});
+		} else {
+			filteredAlbums = albums;
+		}
+	}
+
 	const handleSelect = (album: AlbumResponseDto) => {
 		dispatch('album', { album });
 	};
 
 	const handleNew = () => {
 		if (shared) {
-			dispatch('newAlbum');
+			dispatch('newAlbum', { albumName: search.length > 0 ? search : 'Untitled' });
 		} else {
-			dispatch('newSharedAlbum');
+			dispatch('newSharedAlbum', { albumName: search.length > 0 ? search : 'Untitled' });
 		}
 	};
 </script>
@@ -54,35 +66,42 @@
 		</span>
 	</svelte:fragment>
 
-	<div class=" max-h-[400px] overflow-y-auto immich-scrollba pb-10">
-		<div class="flex flex-col mb-2">
-			{#if loading}
-				{#each { length: 3 } as _}
-					<div class="animate-pulse flex gap-4 px-6 py-2">
-						<div class="h-12 w-12 bg-slate-200 rounded-xl" />
-						<div class="flex flex-col items-start justify-center gap-2">
-							<span class="animate-pulse w-36 h-4 bg-slate-200" />
-							<div class="flex animate-pulse gap-1">
-								<span class="w-8 h-3 bg-slate-200" />
-								<span class="w-20 h-3 bg-slate-200" />
-							</div>
+	<div class="max-h-[400px] flex flex-col mb-2">
+		{#if loading}
+			{#each { length: 3 } as _}
+				<div class="animate-pulse flex gap-4 px-6 py-2">
+					<div class="h-12 w-12 bg-slate-200 rounded-xl" />
+					<div class="flex flex-col items-start justify-center gap-2">
+						<span class="animate-pulse w-36 h-4 bg-slate-200" />
+						<div class="flex animate-pulse gap-1">
+							<span class="w-8 h-3 bg-slate-200" />
+							<span class="w-20 h-3 bg-slate-200" />
 						</div>
 					</div>
-				{/each}
-			{:else}
+				</div>
+			{/each}
+		{:else}
+			<!-- svelte-ignore a11y-autofocus -->
+			<input
+				class="px-6 py-2 text-2xl border-b-4 bg-immich-bg border-immich-bg focus:border-immich-primary dark:bg-immich-dark-gray dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
+				placeholder="Search"
+				autofocus
+				bind:value={search}
+			/>
+			<div class="overflow-y-auto immich-scrollbar">
 				<button
 					on:click={handleNew}
-					class="flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors items-center"
+					class="w-full flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors items-center"
 				>
 					<div class="h-12 w-12 flex justify-center items-center">
 						<Plus size="30" />
 					</div>
 					<p class="">
-						New {#if shared}Shared {/if}Album
+						New {#if shared}Shared {/if}Album {#if search.length > 0}<b>{search}</b>{/if}
 					</p>
 				</button>
-				{#if albums.length > 0}
-					{#if !shared}
+				{#if filteredAlbums.length > 0}
+					{#if !shared && search.length === 0}
 						<p class="text-xs px-5 py-3">RECENT</p>
 						{#each recentAlbums as album (album.id)}
 							<AlbumListItem variant="simple" {album} on:album={() => handleSelect(album)} />
@@ -90,15 +109,21 @@
 					{/if}
 
 					{#if !shared}
-						<p class="text-xs px-5 py-3">ALL ALBUMS</p>
+						<p class="text-xs px-5 py-3">
+							{#if search.length === 0}ALL {/if}ALBUMS
+						</p>
 					{/if}
-					{#each albums as album (album.id)}
-						<AlbumListItem {album} on:album={() => handleSelect(album)} />
+					{#each filteredAlbums as album (album.id)}
+						<AlbumListItem {album} searchQuery={search} on:album={() => handleSelect(album)} />
 					{/each}
+				{:else if albums.length > 0}
+					<p class="text-sm px-5 py-1">
+						It looks like you do not have any albums with this name yet.
+					</p>
 				{:else}
 					<p class="text-sm px-5 py-1">It looks like you do not have any albums yet.</p>
 				{/if}
-			{/if}
-		</div>
+			</div>
+		{/if}
 	</div>
 </BaseModal>

web/src/routes/photos/+page.svelte

@@ -79,11 +79,12 @@
 		addToSharedAlbum = shared;
 	};
 
-	const handleAddToNewAlbum = () => {
+	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: 'Untitled', assetIds }).then((response) => {
+		api.albumApi.createAlbum({ albumName, assetIds }).then((response) => {
 			const { id, albumName } = response.data;
 
 			notificationController.show({