mirror of
https://github.com/immich-app/immich.git
synced 2024-11-24 08:52:28 +02:00
refactor(web): common layout for user pages (#1995)
* refactor(web): common layout for user pages * remove unused imports
This commit is contained in:
Michel Heusschen
GitHub
parent
dd02f1025f
commit
9a332074c7
47
web/src/lib/components/layouts/user-page-layout.svelte
Normal file
47
web/src/lib/components/layouts/user-page-layout.svelte
Normal file
@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { openFileUploadDialog } from '$lib/utils/file-uploader';
|
||||
import type { UserResponseDto } from '@api';
|
||||
import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
|
||||
import SideBar from '../shared-components/side-bar/side-bar.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
export let hideNavbar = false;
|
||||
export let showUploadButton = false;
|
||||
export let title: string | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<header>
|
||||
{#if !hideNavbar}
|
||||
<NavigationBar
|
||||
{user}
|
||||
shouldShowUploadButton={showUploadButton}
|
||||
on:uploadClicked={() => openFileUploadDialog()}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<slot name="header" />
|
||||
</header>
|
||||
|
||||
<main
|
||||
class="grid grid-cols-[250px_auto] relative pt-[4.25rem] h-screen bg-immich-bg dark:bg-immich-dark-bg immich-scrollbar"
|
||||
>
|
||||
<SideBar />
|
||||
|
||||
<slot name="content">
|
||||
<section class="my-8 mx-4 bg-immich-bg dark:bg-immich-dark-bg">
|
||||
{#if title}
|
||||
<div class="flex justify-between place-items-center dark:text-immich-dark-fg px-4 h-10">
|
||||
<p class="font-medium">{title}</p>
|
||||
|
||||
<slot name="buttons" />
|
||||
</div>
|
||||
|
||||
<div class="my-4">
|
||||
<hr class="dark:border-immich-dark-gray" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<slot />
|
||||
</section>
|
||||
</slot>
|
||||
</main>
|
||||
@ -40,14 +40,14 @@
|
||||
|
||||
<section
|
||||
id="dashboard-navbar"
|
||||
class="fixed w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
|
||||
class="fixed h-[4.25rem] w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
|
||||
>
|
||||
<div
|
||||
class="grid grid-cols-[250px_auto] border-b dark:border-b-immich-dark-gray items-center py-2"
|
||||
>
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
class="flex gap-2 px-6 place-items-center hover:cursor-pointer"
|
||||
class="flex gap-2 mx-6 place-items-center"
|
||||
href={AppRoute.PHOTOS}
|
||||
>
|
||||
<ImmichLogo height="35" width="35" />
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
|
||||
<form
|
||||
autocomplete="off"
|
||||
class="relative text-base"
|
||||
class="relative text-sm"
|
||||
action={AppRoute.SEARCH}
|
||||
on:reset={() => (value = '')}
|
||||
on:submit|preventDefault={onSearch}
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load = (async ({ parent, locals: { api } }) => {
|
||||
export const load = (async ({ locals: { api, user } }) => {
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
|
||||
try {
|
||||
const { user } = await parent();
|
||||
|
||||
if (!user) {
|
||||
throw Error('User is not logged in');
|
||||
}
|
||||
|
||||
const { data: albums } = await api.albumApi.getAllAlbums();
|
||||
|
||||
return {
|
||||
@ -19,6 +18,6 @@ export const load = (async ({ parent, locals: { api } }) => {
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, '/auth/login');
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
}) satisfies PageServerLoad;
|
||||
|
||||
@ -5,11 +5,10 @@
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
|
||||
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
|
||||
import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
|
||||
import { useAlbums } from './albums.bloc';
|
||||
import empty1Url from '$lib/assets/empty-1.svg';
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
@ -31,84 +30,57 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<NavigationBar user={data.user} shouldShowUploadButton={false} />
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<SideBar />
|
||||
|
||||
<!-- Main Section -->
|
||||
|
||||
<section class="overflow-y-auto relative immich-scrollbar">
|
||||
<section
|
||||
id="album-content"
|
||||
class="relative pt-8 pl-4 pr-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<div slot="buttons">
|
||||
<button
|
||||
on:click={handleCreateAlbum}
|
||||
class="immich-text-button text-sm dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
||||
>
|
||||
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
|
||||
<div>
|
||||
<p class="font-medium">Albums</p>
|
||||
</div>
|
||||
<span>
|
||||
<PlusBoxOutline size="18" />
|
||||
</span>
|
||||
<p>Create album</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
on:click={handleCreateAlbum}
|
||||
class="immich-text-button text-sm dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
||||
>
|
||||
<span>
|
||||
<PlusBoxOutline size="18" />
|
||||
</span>
|
||||
<p>Create album</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Album Card -->
|
||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-8">
|
||||
{#each $albums as album}
|
||||
{#key album.id}
|
||||
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
|
||||
<AlbumCard
|
||||
{album}
|
||||
on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
|
||||
/>
|
||||
</a>
|
||||
{/key}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="my-4">
|
||||
<hr class="dark:border-immich-dark-gray" />
|
||||
</div>
|
||||
<!-- Empty Message -->
|
||||
{#if $albums.length === 0}
|
||||
<div
|
||||
on:click={handleCreateAlbum}
|
||||
on:keydown={handleCreateAlbum}
|
||||
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
|
||||
>
|
||||
<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
|
||||
|
||||
<!-- Album Card -->
|
||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-8">
|
||||
{#each $albums as album}
|
||||
{#key album.id}
|
||||
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
|
||||
<AlbumCard
|
||||
{album}
|
||||
on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
|
||||
/>
|
||||
</a>
|
||||
{/key}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Empty Message -->
|
||||
{#if $albums.length === 0}
|
||||
<div
|
||||
on:click={handleCreateAlbum}
|
||||
on:keydown={handleCreateAlbum}
|
||||
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
|
||||
>
|
||||
<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
|
||||
|
||||
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
|
||||
Create an album to organize your photos and videos
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Context Menu -->
|
||||
{#if $isShowContextMenu}
|
||||
<ContextMenu {...$contextMenuPosition} on:clickoutside={closeAlbumContextMenu}>
|
||||
<MenuOption on:click={deleteSelectedContextAlbum}>
|
||||
<span class="flex place-items-center place-content-center gap-2">
|
||||
<DeleteOutline size="18" />
|
||||
<p>Delete album</p>
|
||||
</span>
|
||||
</MenuOption>
|
||||
</ContextMenu>
|
||||
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
|
||||
Create an album to organize your photos and videos
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</UserPageLayout>
|
||||
|
||||
<!-- Context Menu -->
|
||||
{#if $isShowContextMenu}
|
||||
<ContextMenu {...$contextMenuPosition} on:clickoutside={closeAlbumContextMenu}>
|
||||
<MenuOption on:click={deleteSelectedContextAlbum}>
|
||||
<span class="flex place-items-center place-content-center gap-2">
|
||||
<DeleteOutline size="18" />
|
||||
<p>Delete album</p>
|
||||
</span>
|
||||
</MenuOption>
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load = (async ({ parent, params, locals: { api } }) => {
|
||||
const { user } = await parent();
|
||||
|
||||
export const load = (async ({ params, locals: { api, user } }) => {
|
||||
if (!user) {
|
||||
throw redirect(302, '/auth/login');
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
|
||||
const albumId = params['albumId'];
|
||||
@ -19,6 +18,6 @@ export const load = (async ({ parent, params, locals: { api } }) => {
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, '/albums');
|
||||
throw redirect(302, AppRoute.ALBUMS);
|
||||
}
|
||||
}) satisfies PageServerLoad;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import ImmichThumbnail from '$lib/components/shared-components/immich-thumbnail.svelte';
|
||||
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
|
||||
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { AssetTypeEnum, SearchExploreItem } from '@api';
|
||||
import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
|
||||
@ -39,135 +38,109 @@
|
||||
places = places.slice(0, MAX_ITEMS);
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<NavigationBar user={data.user} shouldShowUploadButton={false} />
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<SideBar />
|
||||
|
||||
<section class="overflow-y-auto relative immich-scrollbar">
|
||||
<section
|
||||
id="album-content"
|
||||
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<!-- Main Section -->
|
||||
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<div class="mx-4 flex flex-col">
|
||||
{#if places.length > 0}
|
||||
<div class="mb-6 mt-2">
|
||||
<div>
|
||||
<p class="font-medium">Explore</p>
|
||||
<p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-4">
|
||||
<hr class="dark:border-immich-dark-gray" />
|
||||
</div>
|
||||
|
||||
<div class="mx-4 flex flex-col">
|
||||
{#if places.length > 0}
|
||||
<div class="mb-6 mt-2">
|
||||
<div>
|
||||
<p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap gap-4">
|
||||
{#each places as item}
|
||||
<a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
|
||||
<div class="filter brightness-75 rounded-xl overflow-hidden">
|
||||
<ImmichThumbnail
|
||||
isRoundedCorner={true}
|
||||
thumbnailSize={156}
|
||||
asset={item.data}
|
||||
readonly={true}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
|
||||
>
|
||||
{item.value}
|
||||
</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if things.length > 0}
|
||||
<div class="mb-6 mt-2">
|
||||
<div>
|
||||
<p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap gap-4">
|
||||
{#each things as item}
|
||||
<a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
|
||||
<div class="filter brightness-75 rounded-xl overflow-hidden">
|
||||
<ImmichThumbnail
|
||||
isRoundedCorner={true}
|
||||
thumbnailSize={156}
|
||||
asset={item.data}
|
||||
readonly={true}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
|
||||
>
|
||||
{item.value}
|
||||
</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<hr class="dark:border-immich-dark-gray mb-4" />
|
||||
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8"
|
||||
>
|
||||
<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
|
||||
<p class="text-sm">YOUR ACTIVITY</p>
|
||||
<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
|
||||
<a
|
||||
href={AppRoute.FAVORITES}
|
||||
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
|
||||
draggable="false"
|
||||
>
|
||||
<StarOutline size={24} />
|
||||
<span>Favorites</span>
|
||||
</a>
|
||||
<a
|
||||
href="/search?recent=true"
|
||||
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
|
||||
draggable="false"
|
||||
>
|
||||
<ClockOutline size={24} />
|
||||
<span>Recently added</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
|
||||
<p class="text-sm">CATEGORIES</p>
|
||||
<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
|
||||
<a
|
||||
href="/search?type={AssetTypeEnum.Video}"
|
||||
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
|
||||
>
|
||||
<PlayCircleOutline size={24} />
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
<div>
|
||||
<a
|
||||
href="/search?motion=true"
|
||||
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
|
||||
>
|
||||
<MotionPlayOutline size={24} />
|
||||
<span>Motion photos</span>
|
||||
</a>
|
||||
<div class="flex flex-row flex-wrap gap-4">
|
||||
{#each places as item}
|
||||
<a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
|
||||
<div class="filter brightness-75 rounded-xl overflow-hidden">
|
||||
<ImmichThumbnail
|
||||
isRoundedCorner={true}
|
||||
thumbnailSize={156}
|
||||
asset={item.data}
|
||||
readonly={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
|
||||
>
|
||||
{item.value}
|
||||
</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if things.length > 0}
|
||||
<div class="mb-6 mt-2">
|
||||
<div>
|
||||
<p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap gap-4">
|
||||
{#each things as item}
|
||||
<a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
|
||||
<div class="filter brightness-75 rounded-xl overflow-hidden">
|
||||
<ImmichThumbnail
|
||||
isRoundedCorner={true}
|
||||
thumbnailSize={156}
|
||||
asset={item.data}
|
||||
readonly={true}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
|
||||
>
|
||||
{item.value}
|
||||
</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<hr class="dark:border-immich-dark-gray mb-4" />
|
||||
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8"
|
||||
>
|
||||
<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
|
||||
<p class="text-sm">YOUR ACTIVITY</p>
|
||||
<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
|
||||
<a
|
||||
href={AppRoute.FAVORITES}
|
||||
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
|
||||
draggable="false"
|
||||
>
|
||||
<StarOutline size={24} />
|
||||
<span>Favorites</span>
|
||||
</a>
|
||||
<a
|
||||
href="/search?recent=true"
|
||||
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
|
||||
draggable="false"
|
||||
>
|
||||
<ClockOutline size={24} />
|
||||
<span>Recently added</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
|
||||
<p class="text-sm">CATEGORIES</p>
|
||||
<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
|
||||
<a
|
||||
href="/search?type={AssetTypeEnum.Video}"
|
||||
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
|
||||
>
|
||||
<PlayCircleOutline size={24} />
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
<div>
|
||||
<a
|
||||
href="/search?motion=true"
|
||||
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
|
||||
>
|
||||
<MotionPlayOutline size={24} />
|
||||
<span>Motion photos</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</UserPageLayout>
|
||||
|
||||
@ -1,21 +1,16 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { redirect, error } from '@sveltejs/kit';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
|
||||
export const load: PageServerLoad = async ({ parent }) => {
|
||||
try {
|
||||
const { user } = await parent();
|
||||
if (!user) {
|
||||
throw error(400, 'Not logged in');
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Favorites'
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
console.log('Photo page load error', e);
|
||||
throw redirect(302, '/auth/login');
|
||||
export const load = (async ({ locals: { user } }) => {
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Favorites'
|
||||
}
|
||||
};
|
||||
}) satisfies PageServerLoad;
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
|
||||
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
|
||||
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
|
||||
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { api, AssetResponseDto, SharedLinkType } from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
@ -12,15 +10,16 @@
|
||||
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
|
||||
import StarMinusOutline from 'svelte-material-icons/StarMinusOutline.svelte';
|
||||
import Error from '../../+error.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import empty1Url from '$lib/assets/empty-1.svg';
|
||||
|
||||
export let data: PageData;
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
let favorites: AssetResponseDto[] = [];
|
||||
let isShowCreateSharedLinkModal = false;
|
||||
let selectedAssets: Set<AssetResponseDto> = new Set();
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
$: isMultiSelectionMode = selectedAssets.size > 0;
|
||||
|
||||
onMount(async () => {
|
||||
@ -61,81 +60,57 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<NavigationBar user={data.user} shouldShowUploadButton={false} />
|
||||
</section>
|
||||
<!-- Multiselection mode app bar -->
|
||||
{#if isMultiSelectionMode}
|
||||
<ControlAppBar
|
||||
on:close-button-click={clearMultiSelectAssetAssetHandler}
|
||||
backIcon={Close}
|
||||
tailwindClasses={'bg-white shadow-md'}
|
||||
>
|
||||
<svelte:fragment slot="leading">
|
||||
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
Selected {selectedAssets.size}
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="trailing">
|
||||
<CircleIconButton
|
||||
title="Share"
|
||||
logo={ShareVariantOutline}
|
||||
on:click={handleCreateSharedLink}
|
||||
/>
|
||||
<CircleIconButton
|
||||
title="Remove Favorite"
|
||||
logo={StarMinusOutline}
|
||||
on:click={handleRemoveFavorite}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
{/if}
|
||||
|
||||
<section
|
||||
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<SideBar />
|
||||
<!-- Create shared link modal -->
|
||||
{#if isShowCreateSharedLinkModal}
|
||||
<CreateSharedLinkModal
|
||||
sharedAssets={Array.from(selectedAssets)}
|
||||
shareType={SharedLinkType.Individual}
|
||||
on:close={handleCloseSharedLinkModal}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Multiselection mode app bar -->
|
||||
{#if isMultiSelectionMode}
|
||||
<ControlAppBar
|
||||
on:close-button-click={clearMultiSelectAssetAssetHandler}
|
||||
backIcon={Close}
|
||||
tailwindClasses={'bg-white shadow-md'}
|
||||
>
|
||||
<svelte:fragment slot="leading">
|
||||
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
Selected {selectedAssets.size}
|
||||
<UserPageLayout user={data.user} title={data.meta.title} hideNavbar={isMultiSelectionMode}>
|
||||
<section>
|
||||
<!-- Empty Message -->
|
||||
{#if favorites.length === 0}
|
||||
<div
|
||||
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
|
||||
>
|
||||
<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
|
||||
|
||||
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
|
||||
Add favorites to quickly find your best pictures and videos
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="trailing">
|
||||
<CircleIconButton
|
||||
title="Share"
|
||||
logo={ShareVariantOutline}
|
||||
on:click={handleCreateSharedLink}
|
||||
/>
|
||||
<CircleIconButton
|
||||
title="Remove Favorite"
|
||||
logo={StarMinusOutline}
|
||||
on:click={handleRemoveFavorite}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
{/if}
|
||||
|
||||
<!-- Create shared link modal -->
|
||||
{#if isShowCreateSharedLinkModal}
|
||||
<CreateSharedLinkModal
|
||||
sharedAssets={Array.from(selectedAssets)}
|
||||
shareType={SharedLinkType.Individual}
|
||||
on:close={handleCloseSharedLinkModal}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Main Section -->
|
||||
<section class="overflow-y-auto relative immich-scrollbar">
|
||||
<section
|
||||
id="favorite-content"
|
||||
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
|
||||
<div>
|
||||
<p class="font-medium">Favorites</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="my-4">
|
||||
<hr class="dark:border-immich-dark-gray" />
|
||||
</div>
|
||||
|
||||
<!-- Empty Message -->
|
||||
{#if favorites.length === 0}
|
||||
<div
|
||||
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
|
||||
>
|
||||
<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
|
||||
|
||||
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
|
||||
Add favorites to quickly find your best pictures and videos
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<GalleryViewer assets={favorites} bind:selectedAssets />
|
||||
</section>
|
||||
<GalleryViewer assets={favorites} bind:selectedAssets />
|
||||
</section>
|
||||
</section>
|
||||
</UserPageLayout>
|
||||
|
||||
@ -1,21 +1,16 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { redirect, error } from '@sveltejs/kit';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
|
||||
export const load: PageServerLoad = async ({ parent }) => {
|
||||
try {
|
||||
const { user } = await parent();
|
||||
if (!user) {
|
||||
throw error(400, 'Not logged in');
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Photos'
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
console.log('Photo page load error', e);
|
||||
throw redirect(302, '/auth/login');
|
||||
export const load = (async ({ locals: { user } }) => {
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Photos'
|
||||
}
|
||||
};
|
||||
}) satisfies PageServerLoad;
|
||||
|
||||
@ -7,12 +7,10 @@
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
|
||||
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
|
||||
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
|
||||
import {
|
||||
assetInteractionStore,
|
||||
isMultiSelectStoreState,
|
||||
@ -20,17 +18,18 @@
|
||||
} from '$lib/stores/asset-interaction.store';
|
||||
import { assetStore } from '$lib/stores/assets.store';
|
||||
import { addAssetsToAlbum, bulkDownload } from '$lib/utils/asset-utils';
|
||||
import { openFileUploadDialog } from '$lib/utils/file-uploader';
|
||||
import { AlbumResponseDto, api, SharedLinkType } from '@api';
|
||||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
|
||||
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
|
||||
import Plus from 'svelte-material-icons/Plus.svelte';
|
||||
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
let isShowCreateSharedLinkModal = false;
|
||||
const deleteSelectedAssetHandler = async () => {
|
||||
try {
|
||||
@ -144,73 +143,68 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<section>
|
||||
{#if $isMultiSelectStoreState}
|
||||
<ControlAppBar
|
||||
on:close-button-click={() => assetInteractionStore.clearMultiselect()}
|
||||
backIcon={Close}
|
||||
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="Share"
|
||||
logo={ShareVariantOutline}
|
||||
on:click={handleCreateSharedLink}
|
||||
/>
|
||||
<CircleIconButton
|
||||
title="Download"
|
||||
logo={CloudDownloadOutline}
|
||||
on:click={handleDownloadFiles}
|
||||
/>
|
||||
<CircleIconButton title="Add" logo={Plus} on:click={handleShowMenu} />
|
||||
<CircleIconButton
|
||||
title="Delete"
|
||||
logo={DeleteOutline}
|
||||
on:click={deleteSelectedAssetHandler}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
{:else}
|
||||
<NavigationBar user={data.user} on:uploadClicked={() => openFileUploadDialog()} />
|
||||
{/if}
|
||||
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectStoreState} showUploadButton>
|
||||
<svelte:fragment slot="header">
|
||||
{#if $isMultiSelectStoreState}
|
||||
<ControlAppBar
|
||||
on:close-button-click={() => assetInteractionStore.clearMultiselect()}
|
||||
backIcon={Close}
|
||||
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="Share"
|
||||
logo={ShareVariantOutline}
|
||||
on:click={handleCreateSharedLink}
|
||||
/>
|
||||
<CircleIconButton
|
||||
title="Download"
|
||||
logo={CloudDownloadOutline}
|
||||
on:click={handleDownloadFiles}
|
||||
/>
|
||||
<CircleIconButton title="Add" logo={Plus} on:click={handleShowMenu} />
|
||||
<CircleIconButton
|
||||
title="Delete"
|
||||
logo={DeleteOutline}
|
||||
on:click={deleteSelectedAssetHandler}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
{/if}
|
||||
|
||||
{#if isShowAddMenu}
|
||||
<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAddMenu = false)}>
|
||||
<div class="flex flex-col rounded-lg ">
|
||||
<MenuOption on:click={handleAddToFavorites} text="Add to Favorites" />
|
||||
<MenuOption on:click={() => handleShowAlbumPicker(false)} text="Add to Album" />
|
||||
<MenuOption on:click={() => handleShowAlbumPicker(true)} text="Add to Shared Album" />
|
||||
</div>
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
{#if isShowAddMenu}
|
||||
<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAddMenu = false)}>
|
||||
<div class="flex flex-col rounded-lg ">
|
||||
<MenuOption on:click={handleAddToFavorites} text="Add to Favorites" />
|
||||
<MenuOption on:click={() => handleShowAlbumPicker(false)} text="Add to Album" />
|
||||
<MenuOption on:click={() => handleShowAlbumPicker(true)} text="Add to Shared Album" />
|
||||
</div>
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
|
||||
{#if isShowAlbumPicker}
|
||||
<AlbumSelectionModal
|
||||
shared={addToSharedAlbum}
|
||||
on:newAlbum={handleAddToNewAlbum}
|
||||
on:newSharedAlbum={handleAddToNewAlbum}
|
||||
on:album={handleAddToAlbum}
|
||||
on:close={() => (isShowAlbumPicker = false)}
|
||||
/>
|
||||
{/if}
|
||||
{#if isShowAlbumPicker}
|
||||
<AlbumSelectionModal
|
||||
shared={addToSharedAlbum}
|
||||
on:newAlbum={handleAddToNewAlbum}
|
||||
on:newSharedAlbum={handleAddToNewAlbum}
|
||||
on:album={handleAddToAlbum}
|
||||
on:close={() => (isShowAlbumPicker = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if isShowCreateSharedLinkModal}
|
||||
<CreateSharedLinkModal
|
||||
sharedAssets={Array.from($selectedAssets)}
|
||||
shareType={SharedLinkType.Individual}
|
||||
on:close={handleCloseSharedLinkModal}
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
{#if isShowCreateSharedLinkModal}
|
||||
<CreateSharedLinkModal
|
||||
sharedAssets={Array.from($selectedAssets)}
|
||||
shareType={SharedLinkType.Individual}
|
||||
on:close={handleCloseSharedLinkModal}
|
||||
/>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
|
||||
<section
|
||||
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<SideBar />
|
||||
<AssetGrid />
|
||||
</section>
|
||||
<AssetGrid slot="content" />
|
||||
</UserPageLayout>
|
||||
|
||||
@ -1,14 +1,10 @@
|
||||
export const prerender = false;
|
||||
import { error } from '@sveltejs/kit';
|
||||
|
||||
import { getThumbnailUrl } from '$lib/utils/asset-utils';
|
||||
import { ThumbnailFormat } from '@api';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import featurePanelUrl from '$lib/assets/feature-panel.png';
|
||||
|
||||
export const load: PageServerLoad = async ({ params, parent, locals: { api } }) => {
|
||||
const { user } = await parent();
|
||||
|
||||
export const load = (async ({ params, locals: { api } }) => {
|
||||
const { key } = params;
|
||||
|
||||
try {
|
||||
@ -25,12 +21,11 @@ export const load: PageServerLoad = async ({ params, parent, locals: { api } })
|
||||
imageUrl: assetId
|
||||
? getThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key)
|
||||
: featurePanelUrl
|
||||
},
|
||||
user
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
throw error(404, {
|
||||
message: 'Invalid shared link'
|
||||
});
|
||||
}
|
||||
};
|
||||
}) satisfies PageServerLoad;
|
||||
|
||||
@ -1,25 +1,23 @@
|
||||
export const prerender = false;
|
||||
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load = (async ({ parent, locals: { api } }) => {
|
||||
try {
|
||||
const { user } = await parent();
|
||||
if (!user) {
|
||||
throw redirect(302, '/auth/login');
|
||||
}
|
||||
export const load = (async ({ locals: { api, user } }) => {
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
|
||||
try {
|
||||
const { data: sharedAlbums } = await api.albumApi.getAllAlbums(true);
|
||||
|
||||
return {
|
||||
user: user,
|
||||
user,
|
||||
sharedAlbums,
|
||||
meta: {
|
||||
title: 'Albums'
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, '/auth/login');
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
}) satisfies PageServerLoad;
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
<script lang="ts">
|
||||
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
|
||||
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
|
||||
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';
|
||||
@ -13,6 +10,7 @@
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import empty2Url from '$lib/assets/empty-2.svg';
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
@ -34,73 +32,49 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<NavigationBar user={data.user} shouldShowUploadButton={false} />
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<SideBar />
|
||||
|
||||
<section class="overflow-y-auto relative">
|
||||
<section
|
||||
id="album-content"
|
||||
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<div class="flex" slot="buttons">
|
||||
<button
|
||||
on:click={createSharedAlbum}
|
||||
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
||||
>
|
||||
<!-- Main Section -->
|
||||
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
|
||||
<div>
|
||||
<p class="font-medium">Sharing</p>
|
||||
</div>
|
||||
<span>
|
||||
<PlusBoxOutline size="18" />
|
||||
</span>
|
||||
<p>Create shared album</p>
|
||||
</button>
|
||||
|
||||
<div class="flex">
|
||||
<button
|
||||
on:click={createSharedAlbum}
|
||||
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
||||
>
|
||||
<span>
|
||||
<PlusBoxOutline size="18" />
|
||||
</span>
|
||||
<p>Create shared album</p>
|
||||
</button>
|
||||
<button
|
||||
on:click={() => goto('/sharing/sharedlinks')}
|
||||
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
||||
>
|
||||
<span>
|
||||
<Link size="18" />
|
||||
</span>
|
||||
<p>Shared links</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
on:click={() => goto('/sharing/sharedlinks')}
|
||||
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
||||
>
|
||||
<span>
|
||||
<Link size="18" />
|
||||
</span>
|
||||
<p>Shared links</p>
|
||||
</button>
|
||||
</div>
|
||||
<section>
|
||||
<!-- Share Album List -->
|
||||
<div class="w-full flex flex-col place-items-center">
|
||||
{#each data.sharedAlbums as album}
|
||||
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
|
||||
<SharedAlbumListTile {album} user={data.user} />
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Empty List -->
|
||||
{#if data.sharedAlbums.length === 0}
|
||||
<div
|
||||
class="border dark:border-immich-dark-gray p-5 w-[50%] 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>
|
||||
|
||||
<div class="my-4">
|
||||
<hr class="dark:border-immich-dark-gray" />
|
||||
</div>
|
||||
|
||||
<!-- Share Album List -->
|
||||
<div class="w-full flex flex-col place-items-center">
|
||||
{#each data.sharedAlbums as album}
|
||||
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
|
||||
<SharedAlbumListTile {album} user={data.user} />
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Empty List -->
|
||||
{#if data.sharedAlbums.length === 0}
|
||||
<div
|
||||
class="border dark:border-immich-dark-gray p-5 w-[50%] 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}
|
||||
</section>
|
||||
{/if}
|
||||
</section>
|
||||
</section>
|
||||
</UserPageLayout>
|
||||
|
||||
@ -1,21 +1,16 @@
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
export const prerender = false;
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ parent }) => {
|
||||
try {
|
||||
const { user } = await parent();
|
||||
if (!user) {
|
||||
throw redirect(302, '/auth/login');
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Shared Links'
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, '/auth/login');
|
||||
export const load = (async ({ locals: { user } }) => {
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Shared Links'
|
||||
}
|
||||
};
|
||||
}) satisfies PageServerLoad;
|
||||
|
||||
@ -1,21 +1,16 @@
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ parent }) => {
|
||||
try {
|
||||
const { user } = await parent();
|
||||
|
||||
if (!user) {
|
||||
throw Error('User is not logged in');
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Settings'
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, '/auth/login');
|
||||
export const load = (async ({ locals: { user } }) => {
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
user,
|
||||
meta: {
|
||||
title: 'Settings'
|
||||
}
|
||||
};
|
||||
}) satisfies PageServerLoad;
|
||||
|
||||
@ -1,36 +1,15 @@
|
||||
<script lang="ts">
|
||||
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
|
||||
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<NavigationBar user={data.user} shouldShowUploadButton={false} />
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<SideBar />
|
||||
|
||||
<section class="overflow-y-auto ">
|
||||
<div
|
||||
id="user-setting-title"
|
||||
class="pt-10 fixed w-full z-10 bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
|
||||
User Settings
|
||||
</h1>
|
||||
<hr class="dark:border-immich-dark-gray" />
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<section class="flex place-content-center mx-4">
|
||||
<div class="w-full max-w-3xl">
|
||||
<UserSettingsList user={data.user} />
|
||||
</div>
|
||||
|
||||
<section id="user-setting-content" class="pt-[85px] flex place-content-center">
|
||||
<section class="w-[800px] pt-5">
|
||||
<UserSettingsList user={data.user} />
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</UserPageLayout>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user