padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor post action buttons in ThreadedPost component

Browse source 
- Updated the layout and styling of action buttons (Reply, Like, Share) for improved usability and visual consistency.
- Adjusted button sizes, padding, and hover effects to enhance the user experience.

These changes contribute to a more streamlined and accessible interface within the NostrFeed module.
This commit is contained in:
padreug 2025-09-20 12:12:20 +02:00
parent dfcb354a5c
commit c7ce34b301
1 changed files with 40 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

80
src/modules/nostr-feed/components/ThreadedPost.vue
View file

@ -189,46 +189,46 @@ function getRideshareType(post: FeedPost): string {
</div> </div>
<!-- Post Actions (hidden when collapsed) --> <!-- Post Actions (hidden when collapsed) -->
<div v-if="!isCollapsed" class="mt-2 pt-2 border-t"> <div v-if="!isCollapsed" class="mt-2">
<div class="flex items-center justify-end"> <div class="flex items-center gap-1">
<!-- Action Buttons --> <!-- Reply Button -->
<div class="flex items-center gap-0.5"> <Button
<Button variant="ghost"
variant="ghost" size="sm"
size="sm" class="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50"
class="h-7 px-1.5 text-muted-foreground hover:text-foreground" @click="onReplyToNote"
@click="onReplyToNote" >
> <Reply class="h-3 w-3 mr-1" />
<Reply class="h-3.5 w-3.5 sm:mr-1" /> Reply
<span class="hidden sm:inline">Reply</span> </Button>
</Button>
<Button <!-- Like Button -->
variant="ghost" <Button
size="sm" variant="ghost"
class="h-7 px-1.5 text-muted-foreground hover:text-foreground" size="sm"
:class="{ 'text-red-500 hover:text-red-600': getEventReactions(post.id).userHasLiked }" class="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50"
@click="onToggleLike" :class="{ 'text-red-500 hover:text-red-600': getEventReactions(post.id).userHasLiked }"
> @click="onToggleLike"
<Heart >
class="h-3.5 w-3.5 sm:mr-1" <Heart
:class="{ 'fill-current': getEventReactions(post.id).userHasLiked }" class="h-3 w-3 mr-1"
/> :class="{ 'fill-current': getEventReactions(post.id).userHasLiked }"
<span class="hidden sm:inline"> />
{{ getEventReactions(post.id).userHasLiked ? 'Liked' : 'Like' }} <span v-if="getEventReactions(post.id).likes > 0">
</span> {{ getEventReactions(post.id).likes }}
<span v-if="getEventReactions(post.id).likes > 0" class="ml-1 text-xs"> </span>
{{ getEventReactions(post.id).likes }} <span v-else>Like</span>
</span> </Button>
</Button>
<Button <!-- Share Button -->
variant="ghost" <Button
size="sm" variant="ghost"
class="h-7 px-1.5 text-muted-foreground hover:text-foreground" size="sm"
> class="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50"
<Share class="h-3.5 w-3.5 sm:mr-1" /> >
<span class="hidden sm:inline">Share</span> <Share class="h-3 w-3 mr-1" />
</Button> Share
</div> </Button>
</div> </div>
</div> </div>
</div> </div>