mirror of
https://github.com/immich-app/immich.git
synced 2025-12-22 07:10:56 -08:00
a26d703335
* feat: display number of likes * fix: properly decrement like count on unlike Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com> * chore: pr feedback * chore: updated related test * chore: formatter run * chore: force numberOfLikes to null in album context to pass lint * chore: open-api updated * fix: use undefined, not null * styling tweaks * chore: updated sql --------- Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com> Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
37 lines
1.4 KiB
Svelte
37 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { locale } from '$lib/stores/preferences.store';
|
|
import type { ActivityResponseDto } from '@immich/sdk';
|
|
import { mdiCommentOutline, mdiHeart, mdiHeartOutline } from '@mdi/js';
|
|
import Icon from '../elements/icon.svelte';
|
|
|
|
interface Props {
|
|
isLiked: ActivityResponseDto | null;
|
|
numberOfComments: number | undefined;
|
|
numberOfLikes: number | undefined;
|
|
disabled: boolean;
|
|
onOpenActivityTab: () => void;
|
|
onFavorite: () => void;
|
|
}
|
|
|
|
let { isLiked, numberOfComments, numberOfLikes, disabled, onOpenActivityTab, onFavorite }: Props = $props();
|
|
</script>
|
|
|
|
<div class="w-full flex p-4 items-center justify-center rounded-full gap-5 bg-subtle border bg-opacity-60">
|
|
<button type="button" class={disabled ? 'cursor-not-allowed' : ''} onclick={onFavorite} {disabled}>
|
|
<div class="flex gap-2 items-center justify-center">
|
|
<Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} class={isLiked ? 'text-red-400' : 'text-fg'} />
|
|
{#if numberOfLikes}
|
|
<div class="text-l">{numberOfLikes.toLocaleString($locale)}</div>
|
|
{/if}
|
|
</div>
|
|
</button>
|
|
<button type="button" onclick={onOpenActivityTab}>
|
|
<div class="flex gap-2 items-center justify-center">
|
|
<Icon path={mdiCommentOutline} class="scale-x-[-1]" size={24} />
|
|
{#if numberOfComments}
|
|
<div class="text-l">{numberOfComments.toLocaleString($locale)}</div>
|
|
{/if}
|
|
</div>
|
|
</button>
|
|
</div>
|