From c2208ab5d77964d5faa1619824b31668d775a5df Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 15 Sep 2025 00:32:30 +0200
Subject: [PATCH] Enhance transaction display in WalletPage with tag badges

- Added a tag badge to the top-left corner of each transaction item for improved visibility of transaction categorization.
- Removed redundant tag badges from the transaction details section to streamline the layout.
- Adjusted styling for transaction items to maintain a consistent and organized appearance.

These changes enhance the user experience by providing clearer transaction information and improving the overall layout of the WalletPage.
---
 src/modules/wallet/views/WalletPage.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/modules/wallet/views/WalletPage.vue b/src/modules/wallet/views/WalletPage.vue
index c6b0b72..939ee11 100644
--- a/src/modules/wallet/views/WalletPage.vue
+++ b/src/modules/wallet/views/WalletPage.vue
@@ -176,8 +176,12 @@ onMounted(() => {
                   <div
                     v-for="tx in txs"
                     :key="tx.id"
-                    class="p-3 rounded-lg border hover:bg-accent/50 transition-colors"
+                    class="relative p-3 rounded-lg border hover:bg-accent/50 transition-colors"
                   >
+                    <!-- Tag badge in top-left corner -->
+                    <Badge v-if="tx.tag" variant="outline" class="absolute -top-2.75 left-8 text-xs font-light z-10">
+                      {{ tx.tag }}
+                    </Badge>
                     <!-- Mobile Layout: Stack vertically -->
                     <div class="block sm:hidden">
                       <!-- Header Row: Icon, Amount, Type -->
@@ -231,9 +235,6 @@ onMounted(() => {
 
                       <!-- Badges Row -->
                       <div class="flex items-center gap-2 flex-wrap">
-                        <Badge v-if="tx.tag" variant="outline" class="text-xs">
-                          {{ tx.tag }}
-                        </Badge>
                         <span v-if="tx.fee" class="text-xs text-muted-foreground">
                           Fee: {{ tx.fee }} sats
                         </span>
@@ -276,13 +277,8 @@ onMounted(() => {
                       <!-- Description with flexible width -->
                       <div class="min-w-0 flex-1">
                         <p class="font-medium break-words leading-tight pr-2">{{ tx.description }}</p>
-                        <div class="flex items-center gap-2 text-xs text-muted-foreground mt-1">
-                          <Badge v-if="tx.tag" variant="outline" class="text-xs">
-                            {{ tx.tag }}
-                          </Badge>
-                          <span v-if="tx.fee" class="text-xs text-muted-foreground">
-                            Fee: {{ tx.fee }} sats
-                          </span>
+                        <div v-if="tx.fee" class="text-xs text-muted-foreground mt-1">
+                          Fee: {{ tx.fee }} sats
                         </div>
                       </div>
 
@@ -388,4 +384,4 @@ onMounted(() => {
       @update:open="showSendDialog = $event"
     />
   </div>
-</template>
\ No newline at end of file
+</template>