bullitt/trackbox

Fork 0

Dashboard: Move Last sync freshness next to Refresh control #25

New issue

Closed

opened 2026-06-27 15:41:14 +02:00 by bullitt · 1 comment

bullitt commented

2026-06-27 15:41:14 +02:00

Owner

Problem

The refresh timestamp ("refreshed just now", "refreshed 5m ago") is embedded in the subtitle text below the page title in low-contrast muted color. Users who want to check data freshness have to read a grey sentence on the opposite side of the screen from the refresh button. The timestamp and the action are spatially disconnected.

Implementation

File: frontend/src/pages/Dashboard.tsx, header section around line 282.

Remove the refresh timestamp from the subtitle paragraph.
Add a small muted label next to (or below) the refresh icon button:

<div className="flex flex-col items-end gap-0.5">
  <Button variant="ghost" size="icon" onClick={() => load(true)} disabled={refreshing} ...>
    <RefreshCw className={cn("h-4 w-4", refreshing && "animate-spin")} />
  </Button>
  <span className="text-[10px] text-muted-foreground tabular-nums">
    {refreshing ? "refreshing…" : relativeTime(lastRefresh.toISOString())}
  </span>
</div>

The subtitle should then just read: "10 active · 6 delivered · 4 archived" (no timestamp).

Acceptance criteria

Timestamp is visually attached to the refresh button, not inline in the subtitle
Subtitle is cleaner: just the counts
Timestamp updates reactively after refresh

Brand identity alignment

The brand brief emphasizes data transparency: users should always understand when Trackbox last synced carrier data. The timestamp should be framed as operational freshness, not casual copy.

Brand-compliant implementation notes

Label the chip Last sync or Sync rather than refreshed where space allows.
Keep the chip visually attached to the refresh action, using a neutral Mist/muted surface and tabular numerals.
Use the refresh icon as a secondary action; primary blue should be limited to active/focus feedback.

Additional acceptance criteria

The header separates shipment counts from sync freshness.
The timestamp reads as an auditable system signal: Last sync: 5m ago or Syncing....
Mobile layout keeps the freshness chip near the refresh button without overlapping the page title.

Migrated from GitHub issue #4: https://github.com/bullitt186/trackbox/issues/4
Original author: @bullitt186
Original created: 2026-06-27T13:22:27Z
Original labels: ux

## Problem The refresh timestamp ("refreshed just now", "refreshed 5m ago") is embedded in the subtitle text below the page title in low-contrast muted color. Users who want to check data freshness have to read a grey sentence on the opposite side of the screen from the refresh button. The timestamp and the action are spatially disconnected. ## Implementation File: `frontend/src/pages/Dashboard.tsx`, header section around line 282. 1. Remove the refresh timestamp from the subtitle paragraph. 2. Add a small muted label next to (or below) the refresh icon button: ```tsx <div className="flex flex-col items-end gap-0.5"> <Button variant="ghost" size="icon" onClick={() => load(true)} disabled={refreshing} ...> <RefreshCw className={cn("h-4 w-4", refreshing && "animate-spin")} /> </Button> <span className="text-[10px] text-muted-foreground tabular-nums"> {refreshing ? "refreshing…" : relativeTime(lastRefresh.toISOString())} </span> </div> ``` The subtitle should then just read: `"10 active · 6 delivered · 4 archived"` (no timestamp). ## Acceptance criteria - Timestamp is visually attached to the refresh button, not inline in the subtitle - Subtitle is cleaner: just the counts - Timestamp updates reactively after refresh ## Brand identity alignment The brand brief emphasizes data transparency: users should always understand when Trackbox last synced carrier data. The timestamp should be framed as operational freshness, not casual copy. ## Brand-compliant implementation notes - Label the chip `Last sync` or `Sync` rather than `refreshed` where space allows. - Keep the chip visually attached to the refresh action, using a neutral `Mist`/muted surface and tabular numerals. - Use the refresh icon as a secondary action; primary blue should be limited to active/focus feedback. ## Additional acceptance criteria - The header separates shipment counts from sync freshness. - The timestamp reads as an auditable system signal: `Last sync: 5m ago` or `Syncing...`. - Mobile layout keeps the freshness chip near the refresh button without overlapping the page title. --- Migrated from GitHub issue #4: https://github.com/bullitt186/trackbox/issues/4 Original author: @bullitt186 Original created: 2026-06-27T13:22:27Z Original labels: ux

bullitt added the

label

2026-06-27 15:41:14 +02:00

bullitt referenced this issue

2026-06-27 15:41:16 +02:00

Global: Standardize page heading hierarchy across Trackbox #46

bullitt changed title from ~~Dashboard: Move 'refreshed X ago' to a chip co-located with the refresh button~~ to Dashboard: Move Last sync freshness next to Refresh control

2026-06-27 15:46:21 +02:00

bullitt commented

2026-06-27 16:02:14 +02:00

Author

Owner

Implemented in commit bd6b0e7. Removed the 'refreshed X ago' text from the subtitle (which now shows only shipment counts). Added a small muted label directly below the refresh icon button showing 'Last sync: X' or 'Syncing…' when refreshing. The sync signal is now co-located with the action that triggers it.

Implemented in commit bd6b0e7. Removed the 'refreshed X ago' text from the subtitle (which now shows only shipment counts). Added a small muted label directly below the refresh icon button showing 'Last sync: X' or 'Syncing…' when refreshing. The sync signal is now co-located with the action that triggers it.

bullitt closed this issue

2026-06-27 16:02:14 +02:00

No labels

arch

harness

security

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

bullitt/trackbox#25

No description provided.

Rows
Columns