mirror of
https://github.com/immich-app/immich.git
synced 2025-11-29 08:30:03 +09:00
7134f93eb8
* Added album page * Refactor sidebar * Added album assets count info * Added album viewer page * Refactor album sorting * Fixed incorrectly showing selected asset in album selection * Improve fetching speed with prefetch * Refactor to use ImmichThubmnail component for all * Update to the latest version of Svelte * Implement fixed app bar in album viewer * Added shared user avatar * Correctly get all owned albums, including shared
66 lines
1.8 KiB
Svelte
66 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
|
|
import { AppSideBarSelection } from '$lib/models/admin-sidebar-selection';
|
|
import { onMount } from 'svelte';
|
|
import { page } from '$app/stores';
|
|
import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
|
|
import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
|
|
import SideBarButton from './side-bar-button.svelte';
|
|
import StatusBox from '../status-box.svelte';
|
|
|
|
let selectedAction: AppSideBarSelection;
|
|
|
|
const onSidebarButtonClicked = (buttonType: CustomEvent) => {
|
|
selectedAction = buttonType.detail['actionType'] as AppSideBarSelection;
|
|
|
|
if (selectedAction == AppSideBarSelection.PHOTOS) {
|
|
if ($page.routeId != 'photos') {
|
|
goto('/photos');
|
|
}
|
|
}
|
|
|
|
if (selectedAction == AppSideBarSelection.ALBUMS) {
|
|
if ($page.routeId != 'albums') {
|
|
goto('/albums');
|
|
}
|
|
}
|
|
};
|
|
|
|
onMount(async () => {
|
|
if ($page.routeId == 'albums') {
|
|
selectedAction = AppSideBarSelection.ALBUMS;
|
|
} else if ($page.routeId == 'photos') {
|
|
selectedAction = AppSideBarSelection.PHOTOS;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<section id="sidebar" class="flex flex-col gap-4 pt-8 pr-6">
|
|
<a sveltekit:prefetch href={$page.routeId != 'photos' ? `/photos` : null}>
|
|
<SideBarButton
|
|
title="Photos"
|
|
logo={ImageOutline}
|
|
actionType={AppSideBarSelection.PHOTOS}
|
|
isSelected={selectedAction === AppSideBarSelection.PHOTOS}
|
|
/></a
|
|
>
|
|
|
|
<div class="text-xs ml-5">
|
|
<p>LIBRARY</p>
|
|
</div>
|
|
<a sveltekit:prefetch href={$page.routeId != 'albums' ? `/albums` : null}>
|
|
<SideBarButton
|
|
title="Albums"
|
|
logo={ImageAlbum}
|
|
actionType={AppSideBarSelection.ALBUMS}
|
|
isSelected={selectedAction === AppSideBarSelection.ALBUMS}
|
|
/>
|
|
</a>
|
|
<!-- Status Box -->
|
|
|
|
<div class="mb-6 mt-auto">
|
|
<StatusBox />
|
|
</div>
|
|
</section>
|