feat(web): Replicate albums view for sharing view (#2433)

* replicate album view for sharing view

* Remove unused file

* fix test

* correct title

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

@@ -69,7 +69,11 @@
 				href={`albums/${album.id}`}
 				animate:flip={{ duration: 200 }}
 			>
-				<AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)} />
+				<AlbumCard
+					{album}
+					on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
+					user={data.user}
+				/>
 			</a>
 		{/each}
 	</div>

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

@@ -14,7 +14,7 @@ export const load = (async ({ locals: { api, user } }) => {
 			user,
 			sharedAlbums,
 			meta: {
-				title: 'Albums'
+				title: 'Sharing'
 			}
 		};
 	} catch (e) {

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 	import Link from 'svelte-material-icons/Link.svelte';
-	import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
 	import { goto } from '$app/navigation';
 	import { api } from '@api';
 	import type { PageData } from './$types';
@@ -12,6 +11,8 @@
 	import empty2Url from '$lib/assets/empty-2.svg';
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 	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';
 
 	export let data: PageData;
 
@@ -51,11 +52,14 @@
 	</div>
 
 	<section>
-		<!-- Share Album List -->
-		<div class="md:w-full flex flex-col place-items-center">
-			{#each data.sharedAlbums as album}
-				<a class="max-md:w-full" data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
-					<SharedAlbumListTile {album} user={data.user} />
+		<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>