Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-11-04 16:09:59 +00:00
Code Issues Wiki Activity

feat: follow tags from trends page (#1391)

Browse source
This commit is contained in:
Shinigami 2023-01-23 17:36:28 +01:00 committed by GitHub
parent 677d6188b4
commit 1a7ae6f0ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
components/tag/TagActionButton.vue
View file

@ -12,12 +12,24 @@ const emit = defineEmits<{
const { client } = $(useMasto())
const toggleFollowTag = async () => {
if (tag.following)
await client.v1.tags.unfollow(tag.name)
else
await client.v1.tags.follow(tag.name)
// We save the state so be can do an optimistic UI update, but fallback to the previous state if the API call fails
const previousFollowingState = tag.following
emit('change')
// eslint-disable-next-line vue/no-mutating-props
tag.following = !tag.following
try {
if (tag.following)
await client.v1.tags.unfollow(tag.name)
else
await client.v1.tags.follow(tag.name)
emit('change')
}
catch (error) {
// eslint-disable-next-line vue/no-mutating-props
tag.following = previousFollowingState
}
}
</script>

28
components/tag/TagCard.vue
View file

@ -11,12 +11,34 @@ const to = $computed(() => {
const { hostname, pathname } = new URL(tag.url)
return `/${hostname}${pathname}`
})
const router = useRouter()
function onclick(evt: MouseEvent | KeyboardEvent) {
const path = evt.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON'].includes(el.tagName?.toUpperCase()))
const text = window.getSelection()?.toString()
if (!el && !text)
go(evt)
}
function go(evt: MouseEvent | KeyboardEvent) {
if (evt.metaKey || evt.ctrlKey)
window.open(to)
else
router.push(to)
}
</script>
<template>
<NuxtLink :to="to" block p4 hover:bg-active flex justify-between>
<div
block p4 hover:bg-active flex justify-between cursor-pointer
@click="onclick"
@keydown.enter="onclick"
>
<div>
<h4 text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
<h4 flex items-center text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
<TagActionButton :tag="tag" />
<span>#</span>
<span hover:underline>{{ tag.name }}</span>
</h4>
@ -25,5 +47,5 @@ const to = $computed(() => {
<div flex items-center>
<CommonTrendingCharts :history="tag.history" />
</div>
</NuxtLink>
</div>
</template>