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