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

@@ -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">
+                        <div v-if="tx.fee" class="text-xs text-muted-foreground mt-1">
-                          <Badge v-if="tx.tag" variant="outline" class="text-xs">
+                          Fee: {{ tx.fee }} sats
-                            {{ tx.tag }}
-                          </Badge>
-                          <span v-if="tx.fee" class="text-xs text-muted-foreground">
-                            Fee: {{ tx.fee }} sats
-                          </span>
                         </div>
                       </div>