Added sharing page to web (#355)

* Added shared album

* Added list tile

* Show info of shared album owner

web/src/routes/__layout.svelte

@@ -8,7 +8,7 @@
 		}
 
 		return {
-			props: { url },
+			props: { url }
 		};
 	};
 </script>
@@ -18,9 +18,9 @@
 
 	import { blur, fade, slide } from 'svelte/transition';
 
-	import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
-	import AnnouncementBox from '$lib/components/shared/announcement-box.svelte';
-	import UploadPanel from '$lib/components/shared/upload-panel.svelte';
+	import DownloadPanel from '$lib/components/asset-viewer-page/download-panel.svelte';
+	import AnnouncementBox from '$lib/components/shared-components/announcement-box.svelte';
+	import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
 	import { onMount } from 'svelte';
 	import { api } from '@api';
 
@@ -45,7 +45,11 @@
 			<DownloadPanel />
 			<UploadPanel />
 			{#if shouldShowAnnouncement}
-				<AnnouncementBox {localVersion} {remoteVersion} on:close={() => (shouldShowAnnouncement = false)} />
+				<AnnouncementBox
+					{localVersion}
+					{remoteVersion}
+					on:close={() => (shouldShowAnnouncement = false)}
+				/>
 			{/if}
 		</div>
 	{/key}

web/src/routes/admin/index.svelte

@@ -6,7 +6,7 @@
 		if (!session.user) {
 			return {
 				status: 302,
-				redirect: '/auth/login',
+				redirect: '/auth/login'
 			};
 		}
 
@@ -16,8 +16,8 @@
 			status: 200,
 			props: {
 				user: session.user,
-				allUsers: data,
-			},
+				allUsers: data
+			}
 		};
 	};
 </script>
@@ -27,13 +27,13 @@
 
 	import type { ImmichUser } from '$lib/models/immich-user';
 	import { AdminSideBarSelection } from '$lib/models/admin-sidebar-selection';
-	import SideBarButton from '$lib/components/shared/side-bar/side-bar-button.svelte';
+	import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
 	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
-	import NavigationBar from '$lib/components/shared/navigation-bar.svelte';
-	import UserManagement from '$lib/components/admin/user-management.svelte';
-	import FullScreenModal from '$lib/components/shared/full-screen-modal.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
+	import UserManagement from '$lib/components/admin-page/user-management.svelte';
+	import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
 	import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
-	import StatusBox from '$lib/components/shared/status-box.svelte';
+	import StatusBox from '$lib/components/shared-components/status-box.svelte';
 
 	let selectedAction: AdminSideBarSelection;
 

web/src/routes/albums/[albumId].svelte

@@ -37,7 +37,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 
-	import AlbumViewer from '$lib/components/album/album-viewer.svelte';
+	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
 
 	export let album: AlbumResponseDto;
 </script>

web/src/routes/albums/index.svelte

@@ -3,10 +3,10 @@
 
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 
-	import NavigationBar from '$lib/components/shared/navigation-bar.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
 	import { ImmichUser } from '$lib/models/immich-user';
 	import type { Load } from '@sveltejs/kit';
-	import SideBar from '$lib/components/shared/side-bar/side-bar.svelte';
+	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import { AlbumResponseDto, api } from '@api';
 
 	export const load: Load = async ({ session }) => {
@@ -36,7 +36,7 @@
 </script>
 
 <script lang="ts">
-	import AlbumCard from '$lib/components/album/album-card.svelte';
+	import AlbumCard from '$lib/components/album-page/album-card.svelte';
 	import { goto } from '$app/navigation';
 
 	export let user: ImmichUser;
@@ -64,7 +64,7 @@
 		<section id="album-content" class="relative pt-8 pl-4 mb-12 bg-immich-bg">
 			<div class="px-4 flex justify-between place-items-center">
 				<div>
-					<p>Albums</p>
+					<p class="font-medium">Albums</p>
 				</div>
 
 				<div>

web/src/routes/photos/index.svelte

@@ -12,7 +12,7 @@
 			};
 		}
 
-		await getAssetsInfo(session.user.accessToken);
+		await getAssetsInfo();
 
 		return {
 			status: 200,
@@ -26,17 +26,17 @@
 <script lang="ts">
 	import type { ImmichUser } from '$lib/models/immich-user';
 
-	import NavigationBar from '$lib/components/shared/navigation-bar.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
 	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
 	import { fly } from 'svelte/transition';
 	import { session } from '$app/stores';
 	import { assetsGroupByDate, flattenAssetGroupByDate } from '$lib/stores/assets';
-	import ImmichThumbnail from '$lib/components/shared/immich-thumbnail.svelte';
+	import ImmichThumbnail from '$lib/components/shared-components/immich-thumbnail.svelte';
 	import moment from 'moment';
-	import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
+	import AssetViewer from '$lib/components/asset-viewer-page/asset-viewer.svelte';
 	import { fileUploader } from '$lib/utils/file-uploader';
 	import { AssetResponseDto } from '@api';
-	import SideBar from '$lib/components/shared/side-bar/side-bar.svelte';
+	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 
 	export let user: ImmichUser;
 

web/src/routes/sharing/index.svelte

@@ -0,0 +1,89 @@
+<script context="module" lang="ts">
+	export const prerender = false;
+
+	import type { Load } from '@sveltejs/kit';
+	import { AlbumResponseDto, api, UserResponseDto } from '@api';
+
+	export const load: Load = async ({ session }) => {
+		if (!session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
+		let sharedAlbums: AlbumResponseDto[] = [];
+		try {
+			const { data } = await api.albumApi.getAllAlbums(true);
+			sharedAlbums = data;
+		} catch (e) {
+			console.log('Error [getAllAlbums] ', e);
+		}
+
+		return {
+			status: 200,
+			props: {
+				user: session.user,
+				sharedAlbums: sharedAlbums
+			}
+		};
+	};
+</script>
+
+<script lang="ts">
+	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
+	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
+	import AlbumCard from '$lib/components/album-page/album-card.svelte';
+	import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
+
+	export let user: UserResponseDto;
+	export let sharedAlbums: AlbumResponseDto[];
+</script>
+
+<svelte:head>
+	<title>Albums - Immich</title>
+</svelte:head>
+
+<section>
+	<NavigationBar {user} on:uploadClicked={() => {}} />
+</section>
+
+<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg">
+	<SideBar />
+
+	<section class="overflow-y-auto relative">
+		<section id="album-content" class="relative pt-8 pl-4 mb-12 bg-immich-bg">
+			<!-- Main Section -->
+			<div class="px-4 flex justify-between place-items-center">
+				<div>
+					<p class="font-medium">Sharing</p>
+				</div>
+
+				<div>
+					<button
+						class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700"
+					>
+						<span>
+							<PlusBoxOutline size="18" />
+						</span>
+						<p>Create shared album</p>
+					</button>
+				</div>
+			</div>
+
+			<div class="my-4">
+				<hr />
+			</div>
+
+			<!-- Share Album List -->
+			<div class="w-full flex flex-col place-items-center">
+				{#each sharedAlbums as album}
+					<a sveltekit:prefetch href={`albums/${album.id}`}>
+						<SharedAlbumListTile {album} {user} /></a
+					>
+				{/each}
+			</div>
+		</section>
+	</section>
+</section>