padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance transaction display in WalletPage with tag badges

Browse source 
- 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.
This commit is contained in:
padreug 2025-09-15 00:32:30 +02:00
parent bff5a7cb37
commit c2208ab5d7
1 changed files with 8 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/modules/wallet/views/WalletPage.vue
View file

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