KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): add Favorites page (#1397)

Browse Source 
* Duplicate photos page and rename to favorites

* Implement basic functionality to page

* Sort imports

* Add missing sharing code

* Remove unused import

* Fix formatting

* Use GalleryViewer and new api endpoint

* Merge useFavorites into page

* Run prettier

* Move favorites in side-bar

* Remove favorites when unfavorited

* Fix close shared link model

* Add favorite count to side-bar

* Add add to favorites option

* Fix formatting

* Add favorite icon to image thumbnails

* Change var to let
This commit is contained in:
James
2023-01-27 09:32:26 -05:00
committed by GitHub
parent d377cf0d02
commit de0e218440
10 changed files with 312 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/src/lib/components/shared-components/side-bar/side-bar.svelte
View File

@@ -1,18 +1,20 @@
<script lang="ts">
import { page } from '$app/stores';
import { api } from '@api';
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import SideBarButton from './side-bar-button.svelte';
import StatusBox from '../status-box.svelte';
import { api } from '@api';
import StarOutline from 'svelte-material-icons/StarOutline.svelte';
import { fade } from 'svelte/transition';
import LoadingSpinner from '../loading-spinner.svelte';
import { AppRoute } from '../../../constants';
import LoadingSpinner from '../loading-spinner.svelte';
import StatusBox from '../status-box.svelte';
import SideBarButton from './side-bar-button.svelte';
let showAssetCount = false;
let showSharingCount = false;
let showFavoritesCount = false;
let showAlbumsCount = false;
const getAssetCount = async () => {
@@ -24,6 +26,14 @@
};
};
const getFavoriteCount = async () => {
const { data: assets } = await api.assetApi.getAllAssets(true);
return {
favorites: assets.length
};
};
const getAlbumCount = async () => {
const { data: albumCount } = await api.albumApi.getAlbumCountByUserId();
return {
@@ -104,6 +114,42 @@
<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
<p>LIBRARY</p>
</div>
<a
data-sveltekit-preload-data="hover"
href={AppRoute.FAVORITES}
class="relative"
draggable="false"
>
<SideBarButton
title="Favorites"
logo={StarOutline}
isSelected={$page.route.id == AppRoute.FAVORITES}
/>
<div
id="favorite-count-info"
class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
on:mouseenter={() => (showFavoritesCount = true)}
on:mouseleave={() => (showFavoritesCount = false)}
>
<InformationOutline size={18} color="#989a9f" />
{#if showFavoritesCount}
<div
transition:fade={{ duration: 200 }}
id="asset-count-info-detail"
class="w-32 rounded-lg p-4 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
>
{#await getFavoriteCount()}
<LoadingSpinner />
{:then data}
<div>
<p>{data.favorites} Favorites</p>
</div>
{/await}
</div>
{/if}
</div>
</a>
<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} class="relative" draggable="false">
<SideBarButton
title="Albums"