From c7ce34b301a035405293fb4a43a709e978e5eb4f Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 20 Sep 2025 12:12:20 +0200
Subject: [PATCH] Refactor post action buttons in ThreadedPost component

- 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.
---
 .../nostr-feed/components/ThreadedPost.vue    | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/modules/nostr-feed/components/ThreadedPost.vue b/src/modules/nostr-feed/components/ThreadedPost.vue
index 0f0d300..a998ee9 100644
--- a/src/modules/nostr-feed/components/ThreadedPost.vue
+++ b/src/modules/nostr-feed/components/ThreadedPost.vue
@@ -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>