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

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

@ -189,49 +189,49 @@ 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-7 px-1.5 text-muted-foreground hover:text-foreground" class="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50"
@click="onReplyToNote" @click="onReplyToNote"
> >
<Reply class="h-3.5 w-3.5 sm:mr-1" /> <Reply class="h-3 w-3 mr-1" />
<span class="hidden sm:inline">Reply</span> Reply
</Button> </Button>
<!-- Like Button -->
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
class="h-7 px-1.5 text-muted-foreground hover:text-foreground" 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 }" :class="{ 'text-red-500 hover:text-red-600': getEventReactions(post.id).userHasLiked }"
@click="onToggleLike" @click="onToggleLike"
> >
<Heart <Heart
class="h-3.5 w-3.5 sm:mr-1" class="h-3 w-3 mr-1"
:class="{ 'fill-current': getEventReactions(post.id).userHasLiked }" :class="{ 'fill-current': getEventReactions(post.id).userHasLiked }"
/> />
<span class="hidden sm:inline"> <span v-if="getEventReactions(post.id).likes > 0">
{{ getEventReactions(post.id).userHasLiked ? 'Liked' : 'Like' }}
</span>
<span v-if="getEventReactions(post.id).likes > 0" class="ml-1 text-xs">
{{ getEventReactions(post.id).likes }} {{ getEventReactions(post.id).likes }}
</span> </span>
<span v-else>Like</span>
</Button> </Button>
<!-- Share Button -->
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
class="h-7 px-1.5 text-muted-foreground hover:text-foreground" 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" /> <Share class="h-3 w-3 mr-1" />
<span class="hidden sm:inline">Share</span> Share
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Render replies recursively (hidden when collapsed) --> <!-- Render replies recursively (hidden when collapsed) -->
<div v-if="!isCollapsed && hasReplies"> <div v-if="!isCollapsed && hasReplies">