feat (server, web): Share with partner (#2388)

* feat(server, web): implement share with partner

* chore: regenerate api

* chore: regenerate api

* Pass userId to getAssetCountByTimeBucket and getAssetByTimeBucket

* chore: regenerate api

* Use AssetGrid to view partner's assets

* Remove disableNavBarActions flag

* Check access to buckets

* Apply suggestions from code review

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

* Remove exception rethrowing

* Simplify partner access check

* Create new PartnerController

* chore api:generate

* Use partnerApi

* Remove id from PartnerResponseDto

* Refactor PartnerEntity

* Rename args

* Remove duplicate code in getAll

* Create composite primary keys for partners table

* Move asset access check into PartnerCore

* Remove redundant getUserAssets call

* Remove unused getUserAssets method

* chore: regenerate api

* Simplify getAll

* Replace ?? with ||

* Simplify PartnerRepository.create

* Introduce PartnerIds interface

* Replace two database migrations with one

* Simplify getAll

* Change PartnerResponseDto to include UserResponseDto

* Move partner sharing endpoints to PartnerController

* Rename ShareController to SharedLinkController

* chore: regenerate api after rebase

* refactor: shared link remove return type

* refactor: return user response dto

* chore: regenerate open api

* refactor: partner getAll

* refactor: partner settings event typing

* chore: remove unused code

* refactor: add partners modal trigger

* refactor: update url for viewing partner photos

* feat: update partner sharing title

* refactor: rename service method names

* refactor: http exception logic to service, PartnerIds interface

* chore: regenerate open api

* test: coverage for domain code

* fix: addPartner => createPartner

* fix: missed rename

* refactor: more code cleanup

* chore: alphabetize settings order

* feat: stop sharing confirmation modal

* Enhance contrast of the email in dark mode

* Replace button with CircleIconButton

* Fix linter warning

* Fix date types for PartnerEntity

* Fix PartnerEntity creation

* Reset assetStore state

* Change layout of the partner's assets page

* Add bulk download action for partner's assets

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/routes/(user)/partners/[userId]/+page.server.ts

@@ -0,0 +1,21 @@
+import type { PageServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+import { AppRoute } from '$lib/constants';
+
+export const load: PageServerLoad = async ({ params, parent, locals: { api } }) => {
+	const { user } = await parent();
+
+	if (!user) {
+		throw redirect(302, AppRoute.AUTH_LOGIN);
+	}
+
+	const { data: partner } = await api.userApi.getUserById(params['userId']);
+
+	return {
+		user,
+		partner,
+		meta: {
+			title: 'Partner'
+		}
+	};
+};

web/src/routes/(user)/partners/[userId]/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { AppRoute } from '$lib/constants';
+	import { locale } from '$lib/stores/preferences.store';
+	import { goto } from '$app/navigation';
+	import { bulkDownload } from '$lib/utils/asset-utils';
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+	import Close from 'svelte-material-icons/Close.svelte';
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
+	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+	import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+	import {
+		assetInteractionStore,
+		isMultiSelectStoreState,
+		selectedAssets
+	} from '$lib/stores/asset-interaction.store';
+
+	export let data: PageData;
+
+	const handleDownloadFiles = async () => {
+		await bulkDownload('immich', Array.from($selectedAssets), () => {
+			assetInteractionStore.clearMultiselect();
+		});
+	};
+</script>
+
+<main class="grid h-screen pt-[4.25rem] bg-immich-bg dark:bg-immich-dark-bg">
+	{#if $isMultiSelectStoreState}
+		<ControlAppBar
+			showBackButton
+			backIcon={Close}
+			on:close-button-click={() => assetInteractionStore.clearMultiselect()}
+			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="Download"
+					logo={CloudDownloadOutline}
+					on:click={handleDownloadFiles}
+				/>
+			</svelte:fragment>
+		</ControlAppBar>
+	{:else}
+		<ControlAppBar
+			showBackButton
+			backIcon={ArrowLeft}
+			on:close-button-click={() => goto(AppRoute.SHARING)}
+		>
+			<svelte:fragment slot="leading">
+				<p class="text-immich-fg dark:text-immich-dark-fg">
+					{data.partner.firstName}
+					{data.partner.lastName}'s photos
+				</p>
+			</svelte:fragment>
+		</ControlAppBar>
+	{/if}
+	<AssetGrid user={data.partner} />
+</main>

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

@@ -9,15 +9,18 @@ export const load = (async ({ locals: { api, user } }) => {
 
 	try {
 		const { data: sharedAlbums } = await api.albumApi.getAllAlbums(true);
+		const { data: partners } = await api.partnerApi.getPartners('shared-with');
 
 		return {
 			user,
 			sharedAlbums,
+			partners,
 			meta: {
 				title: 'Sharing'
 			}
 		};
 	} catch (e) {
+		console.log(e);
 		throw redirect(302, AppRoute.AUTH_LOGIN);
 	}
 }) satisfies PageServerLoad;

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

@@ -13,6 +13,8 @@
 	import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
 	import { flip } from 'svelte/animate';
 	import AlbumCard from '$lib/components/album-page/album-card.svelte';
+	import CircleAvatar from '$lib/components/shared-components/circle-avatar.svelte';
+	import { AppRoute } from '$lib/constants';
 
 	export let data: PageData;
 
@@ -43,7 +45,7 @@
 			</div>
 		</LinkButton>
 
-		<LinkButton on:click={() => goto('/sharing/sharedlinks')}>
+		<LinkButton on:click={() => goto(AppRoute.SHARED_LINKS)}>
 			<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
 				<Link size="18" class="shrink-0" />
 				<span class="max-sm:text-xs leading-none">Shared links</span>
@@ -51,29 +53,69 @@
 		</LinkButton>
 	</div>
 
-	<section>
-		<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
-			{#each data.sharedAlbums as album (album.id)}
-				<a
-					data-sveltekit-preload-data="hover"
-					href={`albums/${album.id}`}
-					animate:flip={{ duration: 200 }}
-				>
-					<AlbumCard {album} user={data.user} isSharingView />
-				</a>
-			{/each}
-		</div>
+	<div class="mx-4 flex flex-col">
+		{#if data.partners.length > 0}
+			<div class="mb-6 mt-2">
+				<div>
+					<p class="mb-4 dark:text-immich-dark-fg font-medium">Partners</p>
+				</div>
 
-		<!-- Empty List -->
-		{#if data.sharedAlbums.length === 0}
-			<div
-				class="border dark:border-immich-dark-gray p-5 md:w-[500px] w-2/3 m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
-			>
-				<img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
-				<p class="text-center text-immich-text-gray-500">
-					Create a shared album to share photos and videos with people in your network
-				</p>
+				<div class="flex flex-row flex-wrap gap-4">
+					{#each data.partners as partner}
+						<button
+							on:click={() => goto(`/partners/${partner.id}`)}
+							class="flex rounded-lg gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
+						>
+							<CircleAvatar user={partner} />
+
+							<div class="text-left">
+								<p class="text-immich-fg dark:text-immich-dark-fg">
+									{partner.firstName}
+									{partner.lastName}
+								</p>
+								<p class="text-xs text-immich-fg/75 dark:text-immich-dark-fg/75">
+									{partner.email}
+								</p>
+							</div>
+						</button>
+					{/each}
+				</div>
 			</div>
+
+			<hr class="dark:border-immich-dark-gray mb-4" />
 		{/if}
-	</section>
+
+		<div class="mb-6 mt-2">
+			<div>
+				<p class="mb-4 dark:text-immich-dark-fg font-medium">Albums</p>
+			</div>
+
+			<div>
+				<!-- Share Album List -->
+				<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
+					{#each data.sharedAlbums as album (album.id)}
+						<a
+							data-sveltekit-preload-data="hover"
+							href={`albums/${album.id}`}
+							animate:flip={{ duration: 200 }}
+						>
+							<AlbumCard {album} user={data.user} isSharingView />
+						</a>
+					{/each}
+				</div>
+
+				<!-- Empty List -->
+				{#if data.sharedAlbums.length === 0}
+					<div
+						class="border dark:border-immich-dark-gray p-5 md:w-[500px] w-2/3 m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
+					>
+						<img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
+						<p class="text-center text-immich-text-gray-500">
+							Create a shared album to share photos and videos with people in your network
+						</p>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
 </UserPageLayout>