bullitt/trackbox

Watch

Fork 0

Detail: Back action should return to Dashboard predictably #29

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 "Back" button in ShipmentDetail uses navigate(-1) (browser history back). If a user opens a shipment link directly, refreshes the page, or arrives via Home Assistant MQTT link, navigate(-1) either goes to an external page or does nothing useful.

Implementation

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

Change:

<button
  onClick={() => navigate(-1)}
  className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
>
  <ArrowLeft className="h-4 w-4" />
  Back
</button>

To use React Router <Link> with a fallback:

import { Link } from "react-router-dom"

// Replace the button with:
<Link
  to="/"
  className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
>
  <ArrowLeft className="h-4 w-4" />
  Back
</Link>

Remove the navigate import if it's no longer used elsewhere, or keep it for the handleDelete redirect.

Acceptance criteria

"Back" always goes to / (Dashboard)
Works correctly when arriving via direct link or after page refresh
navigate is still used for post-delete redirect to /

Brand identity alignment

Trackbox should feel dependable and operational. Navigation should be predictable even when users arrive from automation links, notification messages, or direct URLs.

Brand-compliant implementation notes

Prefer a stable route target (/) over browser-history back behavior.
The button/link copy can remain Back, but the accessible label should clarify Back to Dashboard.
Keep it as a quiet secondary navigation control with a line icon; do not style it as a primary action.

Additional acceptance criteria

Direct-link and refresh scenarios always return users to the shipment overview.
The back control is keyboard accessible and has visible focus treatment.
Navigation behavior supports the app's role as a self-hosted operational dashboard.

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

## Problem The "Back" button in `ShipmentDetail` uses `navigate(-1)` (browser history back). If a user opens a shipment link directly, refreshes the page, or arrives via Home Assistant MQTT link, `navigate(-1)` either goes to an external page or does nothing useful. ## Implementation File: `frontend/src/pages/ShipmentDetail.tsx` — around line 309. Change: ```tsx <button onClick={() => navigate(-1)} className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors" > <ArrowLeft className="h-4 w-4" /> Back </button> ``` To use React Router `<Link>` with a fallback: ```tsx import { Link } from "react-router-dom" // Replace the button with: <Link to="/" className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors" > <ArrowLeft className="h-4 w-4" /> Back </Link> ``` Remove the `navigate` import if it's no longer used elsewhere, or keep it for the `handleDelete` redirect. ## Acceptance criteria - "Back" always goes to `/` (Dashboard) - Works correctly when arriving via direct link or after page refresh - `navigate` is still used for post-delete redirect to `/` ## Brand identity alignment Trackbox should feel dependable and operational. Navigation should be predictable even when users arrive from automation links, notification messages, or direct URLs. ## Brand-compliant implementation notes - Prefer a stable route target (`/`) over browser-history back behavior. - The button/link copy can remain `Back`, but the accessible label should clarify `Back to Dashboard`. - Keep it as a quiet secondary navigation control with a line icon; do not style it as a primary action. ## Additional acceptance criteria - Direct-link and refresh scenarios always return users to the shipment overview. - The back control is keyboard accessible and has visible focus treatment. - Navigation behavior supports the app's role as a self-hosted operational dashboard. --- Migrated from GitHub issue #8: https://github.com/bullitt186/trackbox/issues/8 Original author: @bullitt186 Original created: 2026-06-27T13:23:04Z Original labels: ux

bullitt added the

label

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

bullitt changed title from ~~Detail: 'Back' button should link to Dashboard, not rely on browser history~~ to Detail: Back action should return to Dashboard predictably

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

bullitt commented

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

Author

Owner

Implemented in commit bd6b0e7. Replaced <button onClick={() => navigate(-1)}> with <Link to="/"> so the Back button always navigates to the Dashboard regardless of how the user arrived (direct link, page refresh, automation notification). The navigate hook is retained for the post-delete redirect.

Implemented in commit bd6b0e7. Replaced `<button onClick={() => navigate(-1)}>` with `<Link to="/">` so the Back button always navigates to the Dashboard regardless of how the user arrived (direct link, page refresh, automation notification). The `navigate` hook is retained for the post-delete redirect.

bullitt closed this issue

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

No description provided.

Rows
Columns