bullitt/trackbox

Fork 0

Global: Apply collapsible pattern to Shipment Detail scrape/source sections #49

New issue

Closed

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

bullitt commented

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

Owner

Problem

Collapsible sections use two different UI patterns:

Pattern A — ChevronDown icon rotating (Dashboard: Delivered/Archived sections, Parsers: field map):

<ChevronDown className={cn("h-4 w-4 transition-transform", open && "rotate-180")} />

Pattern B — Plain text toggle (ShipmentDetail: Scrape Log):

<span className="text-xs text-muted-foreground">{scrapeLogOpen ? "Hide" : "Show"}</span>

Pattern B appears in ShipmentDetail.tsx line ~566 for the Scrape Log card header. It looks like a text link and is visually inconsistent with every other collapsible in the app.

Implementation

File: frontend/src/pages/ShipmentDetail.tsx — Scrape Log card header around line 565.

Change the Scrape Log card button from text toggle to chevron toggle:

<button
  onClick={() => setScrapeLogOpen(!scrapeLogOpen)}
  className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
>
  <ChevronDown className={cn("h-4 w-4 transition-transform", scrapeLogOpen && "rotate-180")} />
  Scrape Log
</button>

ChevronDown is already imported in ShipmentDetail.tsx line ~8.

Acceptance criteria

All collapsible toggles in the app use the ChevronDown rotating pattern
No collapsible uses "Show"/"Hide" text as the sole toggle affordance

Brand identity alignment

This issue overlaps with #48 but should cover the specific Shipment Detail scrape/source area, especially after the Source & sync merge from #30. The goal is consistent disclosure for raw operational data.

Brand-compliant implementation notes

In the merged Source & sync card, expose Scrape log or Raw source events with the standard chevron pattern.
Keep the raw log inside a muted, bordered technical section using monospace where appropriate.
Do not make raw/debug data the visual centerpiece; it supports transparency for users who need it.

Additional acceptance criteria

Shipment Detail uses the same collapsible control as Dashboard/Parsers.
The raw scrape/source section remains accessible, keyboard-operable, and secondary.
This issue can be closed together with #48 only if the detail-specific merged-card behavior is verified.

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

## Problem Collapsible sections use two different UI patterns: **Pattern A — ChevronDown icon rotating** (Dashboard: Delivered/Archived sections, Parsers: field map): ```tsx <ChevronDown className={cn("h-4 w-4 transition-transform", open && "rotate-180")} /> ``` **Pattern B — Plain text toggle** (ShipmentDetail: Scrape Log): ```tsx <span className="text-xs text-muted-foreground">{scrapeLogOpen ? "Hide" : "Show"}</span> ``` Pattern B appears in `ShipmentDetail.tsx` line ~566 for the Scrape Log card header. It looks like a text link and is visually inconsistent with every other collapsible in the app. ## Implementation File: `frontend/src/pages/ShipmentDetail.tsx` — Scrape Log card header around line 565. Change the Scrape Log card button from text toggle to chevron toggle: ```tsx <button onClick={() => setScrapeLogOpen(!scrapeLogOpen)} className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors" > <ChevronDown className={cn("h-4 w-4 transition-transform", scrapeLogOpen && "rotate-180")} /> Scrape Log </button> ``` `ChevronDown` is already imported in `ShipmentDetail.tsx` line ~8. ## Acceptance criteria - All collapsible toggles in the app use the ChevronDown rotating pattern - No collapsible uses "Show"/"Hide" text as the sole toggle affordance ## Brand identity alignment This issue overlaps with #48 but should cover the specific Shipment Detail scrape/source area, especially after the `Source & sync` merge from #30. The goal is consistent disclosure for raw operational data. ## Brand-compliant implementation notes - In the merged `Source & sync` card, expose `Scrape log` or `Raw source events` with the standard chevron pattern. - Keep the raw log inside a muted, bordered technical section using monospace where appropriate. - Do not make raw/debug data the visual centerpiece; it supports transparency for users who need it. ## Additional acceptance criteria - Shipment Detail uses the same collapsible control as Dashboard/Parsers. - The raw scrape/source section remains accessible, keyboard-operable, and secondary. - This issue can be closed together with #48 only if the detail-specific merged-card behavior is verified. --- Migrated from GitHub issue #28: https://github.com/bullitt186/trackbox/issues/28 Original author: @bullitt186 Original created: 2026-06-27T13:26:32Z Original labels: ux

bullitt added the

label

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

bullitt changed title from ~~Global: Standardize collapsible toggle pattern — some use ChevronDown, some use 'Show/Hide' text~~ to Global: Apply collapsible pattern to Shipment Detail scrape/source sections

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

bullitt referenced this issue

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

Detail: Merge scraper, stale-data reason, and raw scrape log into one Source card #30

bullitt referenced this issue

2026-06-27 16:03:31 +02:00

Global: Standardize collapsible controls with neutral chevrons #48

bullitt commented

2026-06-27 16:03:37 +02:00

Author

Owner

Implemented in commit bd6b0e7 as part of the Source & sync card merge (also resolves #30 and #48). The Scrape Log collapsible toggle in ShipmentDetail now uses the rotating ChevronDown pattern: <ChevronDown className={cn("h-4 w-4 transition-transform", scrapeLogOpen && "rotate-180")} />. This is consistent with Dashboard (Delivered/Archived sections), Parsers (field map), and the rest of the app. Text-only 'Show'/'Hide' toggles have been eliminated across the application.

Implemented in commit bd6b0e7 as part of the Source & sync card merge (also resolves #30 and #48). The Scrape Log collapsible toggle in ShipmentDetail now uses the rotating ChevronDown pattern: `<ChevronDown className={cn("h-4 w-4 transition-transform", scrapeLogOpen && "rotate-180")} />`. This is consistent with Dashboard (Delivered/Archived sections), Parsers (field map), and the rest of the app. Text-only 'Show'/'Hide' toggles have been eliminated across the application.

bullitt closed this issue

2026-06-27 16:03:37 +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#49

No description provided.

Rows
Columns