Show also time in transacion list

[PanderMusubi]

In the view of Transactions, each transaction shows only the name of the month, the day number and the year. This is confusing with multiple transactions of the same date. There is space to also show the time. This is common in transaction overviews like this and saves the user looking in the details of the transaction to see the time while not having the total overview anymore.

[codeman-crypto]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Add the transaction time to each row in src/components/tx_list.vue, addressing the ticket's core need (distinguishing same-day transactions without opening details).
• Replace the brittle inline date construction with a single formatDateTime method that reuses Quasar's date utility, consistent with tx_details.vue.
• Preserve the existing month-name date presentation while appending the time, and confirm the row layout handles the longer string with minimal or no styling changes.

Design Choices

Design Choice 1: What format should the combined date + time use in the list rows?

Options Considered:

1. Keep the existing month-name style and append a time portion (e.g., "January 5, 2024 3:45 pm"), formatting the time via Quasar's date utility or native Date methods.
2. Fully replace the inline construction with Quasar's date.formatDate using the same pattern as tx_details.vue ("YYYY-MM-DD hh:mm a").

Chosen Option: 1

Rationale: It satisfies the ticket (adds time) while preserving the list's current readable month-name presentation, minimizing visual disruption; time formatting still leverages the existing Quasar date utility for consistency.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Add Time to Transaction List Rows

This phase updates the transaction list so each row shows both the date and the time. The objective is to replace the fragile inline date construction with a single, clear formatting routine that includes the time, reusing the date-formatting approach already established elsewhere in the app, and ensuring the existing layout accommodates the longer string.

Task 1: Task 1.1: Introduce a date-and-time formatting method in the list component

Provide a single, reusable method that converts a transaction's Unix-seconds timestamp into a human-readable string containing the month name, day, year, and the time of day.

• Update src/components/tx_list.vue to add a methods entry (e.g., formatDateTime(timestamp)) that takes the raw tx.timestamp, converts seconds to milliseconds, and returns a combined date + time string.
• Reuse Quasar's date utility (import { date } from "quasar", matching the pattern in tx_details.vue and master_node_details.vue) to format the time portion (e.g., hh:mm a), keeping the month-name/day/year portion consistent with the current display.
• Keep the method self-contained so the template no longer constructs the date inline.

Task 2: Task 1.2: Update the list row template to render date + time

Replace the inline template-literal date expression with a call to the new formatting method so each row shows the time next to the date.

• In src/components/tx_list.vue, within the <q-item-section class="meta"> → <q-item-label class="ft-small"> block, swap the inline ${monthNames[...]} ... expression for the new formatDateTime(tx.timestamp) call.
• Remove the now-unused monthNames array from data() if no longer referenced (and the leftover commented-out <timeago> block can remain or be cleaned up as a minor tidy).

Task 3: Task 1.3: Verify layout accommodates the longer string

Ensure the added time does not break the row layout or cause unwanted wrapping/overflow.

• Confirm the meta section (which has no explicit width and fills remaining space after the 45px icon column and 60% main column) comfortably displays the longer date+time string at typical window widths.
• If wrapping/overflow appears, apply a minimal styling adjustment (e.g., nowrap or ellipsis) in the component's SCSS, consistent with the existing .main overflow handling; otherwise no styling change is needed.

🤖 Prompt for AI agents

This phase updates `src/components/tx_list.vue` to display both date and time in
each transaction list row, replacing the fragile inline date construction with a
clean, reusable formatting method.

**Task 1.1 – Add `formatDateTime` method:**
- In `src/components/tx_list.vue`, import Quasar's `date` utility: `import {
date } from "quasar"` (following the same pattern used in `tx_details.vue` and
`master_node_details.vue`).
- Add a `methods` entry called `formatDateTime(timestamp)` that:
  - Converts the Unix-seconds `timestamp` to milliseconds (multiply by 1000).
- Builds and returns a combined string with the month name, day, year, and time
of day (e.g., "January 5, 2024 3:45 pm"), using Quasar's `date` utility to
format the time portion (e.g., `hh:mm a`) while preserving the current
month-name/day/year style.
- Is fully self-contained — no inline date construction should remain in the
template.

**Task 1.2 – Update the template:**
- In the `<q-item-section class="meta">` → `<q-item-label class="ft-small">`
block, replace the existing inline `${monthNames[...]} ...` expression with a
call to `formatDateTime(tx.timestamp)`.
- Remove the now-unused `monthNames` array from `data()` if it is no longer
referenced elsewhere.
- The leftover commented-out `<timeago>` block can remain or be cleaned up as a
minor tidy.

**Task 1.3 – Verify and adjust layout if needed:**
- Check that the `meta` section (which fills remaining space after the 45px icon
column and 60% main column) can display the longer date+time string without
unwanted wrapping or overflow at typical window widths.
- If wrapping or overflow is observed, apply a minimal SCSS adjustment (e.g.,
`white-space: nowrap` or text-overflow ellipsis) in the component's SCSS block,
consistent with the existing `.main` overflow handling. If no issues are
observed, no styling change is needed.

Research

The transaction view consists of src/pages/wallet/txhistory.vue (container), src/components/tx_list.vue (scrollable list of rows), and src/components/tx_details.vue (detail panel). In the list, each row's rightmost <q-item-section class="meta"> renders a date string built inline in the template using a local monthNames array and repeated new Date(tx.timestamp * 1000) calls, producing strings like "January 5,2024" with no time component. Timestamps are stored as Unix epoch seconds. The detail view already formats time using Quasar's date.formatDate(timestamp, "YYYY-MM-DD hh:mm a") utility, providing an established in-codebase pattern for time-inclusive formatting.

---

🚀 Next Steps

🤖 All AI agent prompts combined

This phase updates `src/components/tx_list.vue` to display both date and time in
each transaction list row, replacing the fragile inline date construction with a
clean, reusable formatting method.

**Task 1.1 – Add `formatDateTime` method:**
- In `src/components/tx_list.vue`, import Quasar's `date` utility: `import {
date } from "quasar"` (following the same pattern used in `tx_details.vue` and
`master_node_details.vue`).
- Add a `methods` entry called `formatDateTime(timestamp)` that:
  - Converts the Unix-seconds `timestamp` to milliseconds (multiply by 1000).
- Builds and returns a combined string with the month name, day, year, and time
of day (e.g., "January 5, 2024 3:45 pm"), using Quasar's `date` utility to
format the time portion (e.g., `hh:mm a`) while preserving the current
month-name/day/year style.
- Is fully self-contained — no inline date construction should remain in the
template.

**Task 1.2 – Update the template:**
- In the `<q-item-section class="meta">` → `<q-item-label class="ft-small">`
block, replace the existing inline `${monthNames[...]} ...` expression with a
call to `formatDateTime(tx.timestamp)`.
- Remove the now-unused `monthNames` array from `data()` if it is no longer
referenced elsewhere.
- The leftover commented-out `<timeago>` block can remain or be cleaned up as a
minor tidy.

**Task 1.3 – Verify and adjust layout if needed:**
- Check that the `meta` section (which fills remaining space after the 45px icon
column and 60% main column) can display the longer date+time string without
unwanted wrapping or overflow at typical window widths.
- If wrapping or overflow is observed, apply a minimal SCSS adjustment (e.g.,
`white-space: nowrap` or text-overflow ellipsis) in the component's SCSS block,
consistent with the existing `.main` overflow handling. If no issues are
observed, no styling change is needed.

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!