Skip to content

feat: add animation to like button #2082

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ghostdevv merged 7 commits into from
Mar 21, 2026
Merged

feat: add animation to like button #2082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7965e70
feat: add effect to like button
ShroXd Mar 15, 2026
02d0802
fix: fix +1 state issue
ShroXd Mar 15, 2026
7b79149
feat: respect the reduced motion perference
ShroXd Mar 15, 2026
fa99101
Merge remote-tracking branch 'origin/main' into feat/like-button-part…
ghostdevv Mar 21, 2026
6af5512
refactor: move to own component
ghostdevv Mar 21, 2026
896723f
fix: cleanup timeout
ghostdevv Mar 21, 2026
7151a96
[autofix.ci] apply automated fixes
autofix-ci[bot] Mar 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 1 addition & 102 deletions app/components/Package/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
<script setup lang="ts">
import type { RouteLocationRaw } from 'vue-router'
import { SCROLL_TO_TOP_THRESHOLD } from '~/composables/useScrollToTop'
import { useModal } from '~/composables/useModal'
import { useAtproto } from '~/composables/atproto/useAtproto'
import { togglePackageLike } from '~/utils/atproto/likes'
import { isEditableElement } from '~/utils/input'

const props = defineProps<{
Expand Down Expand Up @@ -64,7 +61,6 @@ const { y: scrollY } = useScroll(window)
const showScrollToTop = computed(() => scrollY.value > SCROLL_TO_TOP_THRESHOLD)

const packageName = computed(() => props.pkg?.name ?? '')
const compactNumberFormatter = useCompactNumberFormatter()

const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
source: packageName,
Expand Down Expand Up @@ -178,70 +174,6 @@ onKeyStroke(
{ dedupe: true },
)

//atproto
// TODO: Maybe set this where it's not loaded here every load?
const { user } = useAtproto()

const authModal = useModal('auth-modal')

const { data: likesData, status: likeStatus } = useFetch(
() => `/api/social/likes/${packageName.value}`,
{
default: () => ({ totalLikes: 0, userHasLiked: false }),
server: false,
},
)

const isLoadingLikeData = computed(
() => likeStatus.value === 'pending' || likeStatus.value === 'idle',
)

const isLikeActionPending = shallowRef(false)

const likeAction = async () => {
if (user.value?.handle == null) {
authModal.open()
return
}

if (isLikeActionPending.value) return

const currentlyLiked = likesData.value?.userHasLiked ?? false
const currentLikes = likesData.value?.totalLikes ?? 0

// Optimistic update
likesData.value = {
totalLikes: currentlyLiked ? currentLikes - 1 : currentLikes + 1,
userHasLiked: !currentlyLiked,
}

isLikeActionPending.value = true

try {
const result = await togglePackageLike(packageName.value, currentlyLiked, user.value?.handle)

isLikeActionPending.value = false

if (result.success) {
// Update with server response
likesData.value = result.data
} else {
// Revert on error
likesData.value = {
totalLikes: currentLikes,
userHasLiked: currentlyLiked,
}
}
} catch {
// Revert on error
likesData.value = {
totalLikes: currentLikes,
userHasLiked: currentlyLiked,
}
isLikeActionPending.value = false
}
}

const fundingUrl = computed(() => {
let funding = props.displayVersion?.funding
if (Array.isArray(funding)) funding = funding[0]
Expand Down Expand Up @@ -287,40 +219,7 @@ const fundingUrl = computed(() => {
>
<span class="max-sm:sr-only">{{ $t('package.links.compare_this_package') }}</span>
</LinkBase>
<!-- Package likes -->
<TooltipApp
:text="
isLoadingLikeData
? $t('common.loading')
: likesData?.userHasLiked
? $t('package.likes.unlike')
: $t('package.likes.like')
"
position="bottom"
class="items-center"
strategy="fixed"
>
<ButtonBase
@click="likeAction"
size="medium"
:aria-label="
likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
"
:aria-pressed="likesData?.userHasLiked"
:classicon="
likesData?.userHasLiked ? 'i-lucide:heart-minus text-red-500' : 'i-lucide:heart-plus'
"
>
<span
v-if="isLoadingLikeData"
class="i-svg-spinners:ring-resize w-3 h-3 my-0.5"
aria-hidden="true"
/>
<span v-else>
{{ compactNumberFormatter.format(likesData?.totalLikes ?? 0) }}
</span>
</ButtonBase>
</TooltipApp>
<PackageLikes :packageName />

<LinkBase
variant="button-secondary"
Expand Down
258 changes: 258 additions & 0 deletions app/components/Package/Likes.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,258 @@
<script lang="ts" setup>
import { useModal } from '~/composables/useModal'
import { useAtproto } from '~/composables/atproto/useAtproto'
import { togglePackageLike } from '~/utils/atproto/likes'

const props = defineProps<{
packageName: string
}>()

const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')

const likeAnimKey = shallowRef(0)
const showLikeFloat = shallowRef(false)
const likeFloatKey = shallowRef(0)
let likeFloatTimer: ReturnType<typeof setTimeout> | null = null

onUnmounted(() => {
if (likeFloatTimer !== null) {
clearTimeout(likeFloatTimer)
likeFloatTimer = null
}
})

const heartAnimStyle = computed(() => {
if (likeAnimKey.value === 0 || prefersReducedMotion.value) return {}
return {
animation: likesData.value?.userHasLiked
? 'heart-spring 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards'
: 'heart-unlike 0.3s ease forwards',
}
})

//atproto
// TODO: Maybe set this where it's not loaded here every load?
const { user } = useAtproto()

const authModal = useModal('auth-modal')
const compactNumberFormatter = useCompactNumberFormatter()

const { data: likesData, status: likeStatus } = useFetch(
() => `/api/social/likes/${props.packageName}`,
{
default: () => ({ totalLikes: 0, userHasLiked: false }),
server: false,
},
)

const isLoadingLikeData = computed(
() => likeStatus.value === 'pending' || likeStatus.value === 'idle',
)

const isLikeActionPending = shallowRef(false)

const likeAction = async () => {
if (user.value?.handle == null) {
authModal.open()
return
}

if (isLikeActionPending.value) return

const currentlyLiked = likesData.value?.userHasLiked ?? false
const currentLikes = likesData.value?.totalLikes ?? 0

likeAnimKey.value++

if (!currentlyLiked && !prefersReducedMotion.value) {
if (likeFloatTimer !== null) {
clearTimeout(likeFloatTimer)
likeFloatTimer = null
}
likeFloatKey.value++
showLikeFloat.value = true
likeFloatTimer = setTimeout(() => {
showLikeFloat.value = false
likeFloatTimer = null
}, 850)
}

// Optimistic update
likesData.value = {
totalLikes: currentlyLiked ? currentLikes - 1 : currentLikes + 1,
userHasLiked: !currentlyLiked,
}

isLikeActionPending.value = true

try {
const result = await togglePackageLike(props.packageName, currentlyLiked, user.value?.handle)

isLikeActionPending.value = false

if (result.success) {
// Update with server response
likesData.value = result.data
} else {
// Revert on error
likesData.value = {
totalLikes: currentLikes,
userHasLiked: currentlyLiked,
}
}
} catch {
// Revert on error
likesData.value = {
totalLikes: currentLikes,
userHasLiked: currentlyLiked,
}
isLikeActionPending.value = false
}
}
</script>

<template>
<TooltipApp
:text="
isLoadingLikeData
? $t('common.loading')
: likesData?.userHasLiked
? $t('package.likes.unlike')
: $t('package.likes.like')
"
position="bottom"
class="items-center"
strategy="fixed"
>
<div :class="$style.likeWrapper">
<span v-if="showLikeFloat" :key="likeFloatKey" aria-hidden="true" :class="$style.likeFloat"
>+1</span
>
<ButtonBase
@click="likeAction"
size="medium"
:aria-label="
likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
"
:aria-pressed="likesData?.userHasLiked"
>
<span
:key="likeAnimKey"
:class="
likesData?.userHasLiked
? 'i-lucide:heart-minus fill-red-500 text-red-500'
: 'i-lucide:heart-plus'
"
:style="heartAnimStyle"
aria-hidden="true"
class="inline-block w-4 h-4"
/>
<span
v-if="isLoadingLikeData"
class="i-svg-spinners:ring-resize w-3 h-3 my-0.5"
aria-hidden="true"
/>
<span v-else>
{{ compactNumberFormatter.format(likesData?.totalLikes ?? 0) }}
</span>
</ButtonBase>
</div>
</TooltipApp>
</template>

<style module>
.likeWrapper {
position: relative;
display: inline-flex;
}

.likeFloat {
position: absolute;
top: 0;
left: 50%;
font-size: 12px;
font-weight: 600;
color: var(--color-red-500, #ef4444);
pointer-events: none;
white-space: nowrap;
animation: float-up 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@media (prefers-reduced-motion: reduce) {
.likeFloat {
display: none;
}
}

@keyframes float-up {
0% {
opacity: 0;
transform: translateX(-50%) translateY(0);
}
15% {
opacity: 1;
transform: translateX(-50%) translateY(-4px);
}
80% {
opacity: 1;
transform: translateX(-50%) translateY(-20px);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(-28px);
}
}
</style>

<style>
@keyframes heart-spring {
0% {
transform: scale(1);
}
15% {
transform: scale(0.78);
}
45% {
transform: scale(1.55);
}
65% {
transform: scale(0.93);
}
80% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

@keyframes heart-unlike {
0% {
transform: scale(1);
}
30% {
transform: scale(0.85);
}
60% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}

@media (prefers-reduced-motion: reduce) {
@keyframes heart-spring {
from,
to {
transform: scale(1);
}
}
@keyframes heart-unlike {
from,
to {
transform: scale(1);
}
}
}
</style>
Loading
Loading