bullitt/trackbox

Fork 0

Detail: Remove duplicate copy affordance on tracking number (code onClick + CopyButton) #32

New issue

Closed

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

bullitt commented

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

Owner

Problem

The tracking number in the Shipment Detail metadata grid has two overlapping copy triggers:

The <code> element has an onClick={copyTracking} handler with cursor-pointer
A separate <CopyTrackingButton> component renders next to it

This results in two separate copy state variables (copiedTracking from useState and the internal state of CopyTrackingButton), so clicking the code element shows "Copied!" from copiedTracking state but the button icon doesn't change, and vice versa. It's redundant and inconsistent.

Implementation

File: frontend/src/pages/ShipmentDetail.tsx — around line 410.

Remove the onClick and cursor-pointer from the <code> element, keep only the CopyTrackingButton:

<dd className="flex items-center gap-1 mt-0.5">
  <code className="text-sm font-mono select-all">
    {shipment.tracking_number}
  </code>
  <CopyTrackingButton text={shipment.tracking_number} />
</dd>

Remove copiedTracking state and setCopiedTracking entirely (lines ~174, ~281-286)
Remove copyTracking function (lines ~281-286)
Remove the {copiedTracking && <span>Copied!</span>} JSX
Add select-all to the code element so users can triple-click to select it

Acceptance criteria

Only one copy trigger exists (the button)
"Copied!" feedback shows in one place only (inside the button via its internal state)
copiedTracking state variable is removed

Brand identity alignment

Tracking IDs are technical identifiers and should be copy-friendly, selectable, and visibly distinct. The brand brief calls for monospace treatment and clear copy affordances without duplicate controls.

Brand-compliant implementation notes

Keep the tracking number in JetBrains Mono or the existing mono stack.
Use one explicit copy button with a line icon and accessible label.
Add select-all or equivalent behavior so the identifier remains user-owned and portable.
Avoid hover-only copy behavior; mobile users need the same affordance.

Additional acceptance criteria

There is one clear copy affordance for the tracking ID.
Tracking ID presentation remains quiet but unmistakably technical.
Copy feedback is concise and not duplicated in multiple places.

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

## Problem The tracking number in the Shipment Detail metadata grid has two overlapping copy triggers: 1. The `<code>` element has an `onClick={copyTracking}` handler with `cursor-pointer` 2. A separate `<CopyTrackingButton>` component renders next to it This results in two separate copy state variables (`copiedTracking` from `useState` and the internal state of `CopyTrackingButton`), so clicking the code element shows "Copied!" from `copiedTracking` state but the button icon doesn't change, and vice versa. It's redundant and inconsistent. ## Implementation File: `frontend/src/pages/ShipmentDetail.tsx` — around line 410. Remove the `onClick` and `cursor-pointer` from the `<code>` element, keep only the `CopyTrackingButton`: ```tsx <dd className="flex items-center gap-1 mt-0.5"> <code className="text-sm font-mono select-all"> {shipment.tracking_number} </code> <CopyTrackingButton text={shipment.tracking_number} /> </dd> ``` - Remove `copiedTracking` state and `setCopiedTracking` entirely (lines ~174, ~281-286) - Remove `copyTracking` function (lines ~281-286) - Remove the `{copiedTracking && <span>Copied!</span>}` JSX - Add `select-all` to the code element so users can triple-click to select it ## Acceptance criteria - Only one copy trigger exists (the button) - "Copied!" feedback shows in one place only (inside the button via its internal state) - `copiedTracking` state variable is removed ## Brand identity alignment Tracking IDs are technical identifiers and should be copy-friendly, selectable, and visibly distinct. The brand brief calls for monospace treatment and clear copy affordances without duplicate controls. ## Brand-compliant implementation notes - Keep the tracking number in JetBrains Mono or the existing mono stack. - Use one explicit copy button with a line icon and accessible label. - Add `select-all` or equivalent behavior so the identifier remains user-owned and portable. - Avoid hover-only copy behavior; mobile users need the same affordance. ## Additional acceptance criteria - There is one clear copy affordance for the tracking ID. - Tracking ID presentation remains quiet but unmistakably technical. - Copy feedback is concise and not duplicated in multiple places. --- Migrated from GitHub issue #11: https://github.com/bullitt186/trackbox/issues/11 Original author: @bullitt186 Original created: 2026-06-27T13:23:45Z Original labels: ux

bullitt added the

label

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

bullitt commented

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

Author

Owner

Implemented in commit bd6b0e7. Removed the onClick={copyTracking} handler and cursor-pointer class from the <code> element, removed the copiedTracking state variable and the copyTracking function. Added select-all class to the tracking number code element for easy text selection. The CopyTrackingButton remains as the single copy affordance with unified feedback.

Implemented in commit bd6b0e7. Removed the `onClick={copyTracking}` handler and `cursor-pointer` class from the `<code>` element, removed the `copiedTracking` state variable and the `copyTracking` function. Added `select-all` class to the tracking number code element for easy text selection. The CopyTrackingButton remains as the single copy affordance with unified feedback.

bullitt closed this issue

2026-06-27 16:02:36 +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#32

No description provided.

Rows
Columns