bullitt/trackbox

Fork 0

Dashboard: Group sort-field select and sort-direction button visually #24

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 sort direction toggle button (↑/↓) sits to the right of the sort-field <Select> with no visual grouping. It reads as an unrelated action rather than a paired control. Users may not realize the button changes the direction of the sort they just selected.

Implementation

File: frontend/src/pages/Dashboard.tsx, filter/sort bar around line 338.

Wrap the sort-field select and the direction button in a single flex container with a border, giving the appearance of a segmented control:

<div className="flex h-9 rounded-md border border-input overflow-hidden">
  <Select value={sortField} onValueChange={v => setSortField(v as SortField)}>
    <SelectTrigger className="w-[120px] h-full border-0 rounded-none focus:ring-0">
      <SelectValue placeholder="Sort by" />
    </SelectTrigger>
    ...
  </Select>
  <div className="w-px bg-input" /> {/* divider */}
  <Button
    variant="ghost"
    size="icon"
    className="h-full w-9 rounded-none"
    onClick={() => setSortDir(d => d === "asc" ? "desc" : "asc")}
    title={sortDir === "asc" ? "Ascending" : "Descending"}
  >
    <SortDirIcon className="h-4 w-4" />
  </Button>
</div>

Acceptance criteria

Sort field select and direction toggle appear as one grouped control
Clicking the direction button still toggles asc/desc
All sort combinations still work correctly

Brand identity alignment

The sort field and direction button are operational controls. They should feel like one precise dashboard control, using shadcn-compatible neutral borders and the Trackbox blue accent only for focus/active states.

Brand-compliant implementation notes

Use a compact segmented-control treatment with border-border / border-input and no heavy shadow.
Keep the direction button icon-based with an accessible label; avoid text-heavy controls that add clutter to the filter bar.
Preserve visible focus states using Box Blue (#2563EB) or existing primary tokens.

Additional acceptance criteria

The grouped sort control reads as one filtering tool in a logistics dashboard.
Blue is reserved for focus/active state, not decorative fill.
The control remains compact on mobile and does not wrap awkwardly into shipment content.

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

## Problem The sort direction toggle button (↑/↓) sits to the right of the sort-field `<Select>` with no visual grouping. It reads as an unrelated action rather than a paired control. Users may not realize the button changes the direction of the sort they just selected. ## Implementation File: `frontend/src/pages/Dashboard.tsx`, filter/sort bar around line 338. Wrap the sort-field select and the direction button in a single flex container with a border, giving the appearance of a segmented control: ```tsx <div className="flex h-9 rounded-md border border-input overflow-hidden"> <Select value={sortField} onValueChange={v => setSortField(v as SortField)}> <SelectTrigger className="w-[120px] h-full border-0 rounded-none focus:ring-0"> <SelectValue placeholder="Sort by" /> </SelectTrigger> ... </Select> <div className="w-px bg-input" /> {/* divider */} <Button variant="ghost" size="icon" className="h-full w-9 rounded-none" onClick={() => setSortDir(d => d === "asc" ? "desc" : "asc")} title={sortDir === "asc" ? "Ascending" : "Descending"} > <SortDirIcon className="h-4 w-4" /> </Button> </div> ``` ## Acceptance criteria - Sort field select and direction toggle appear as one grouped control - Clicking the direction button still toggles asc/desc - All sort combinations still work correctly ## Brand identity alignment The sort field and direction button are operational controls. They should feel like one precise dashboard control, using shadcn-compatible neutral borders and the Trackbox blue accent only for focus/active states. ## Brand-compliant implementation notes - Use a compact segmented-control treatment with `border-border` / `border-input` and no heavy shadow. - Keep the direction button icon-based with an accessible label; avoid text-heavy controls that add clutter to the filter bar. - Preserve visible focus states using Box Blue (`#2563EB`) or existing `primary` tokens. ## Additional acceptance criteria - The grouped sort control reads as one filtering tool in a logistics dashboard. - Blue is reserved for focus/active state, not decorative fill. - The control remains compact on mobile and does not wrap awkwardly into shipment content. --- Migrated from GitHub issue #3: https://github.com/bullitt186/trackbox/issues/3 Original author: @bullitt186 Original created: 2026-06-27T13:22:25Z 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

Settings: Resolve scrape activity shipment names across active and archived records #45

bullitt commented

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

Author

Owner

Implemented in commit bd6b0e7. Wrapped the sort-field Select and sort-direction button in a single bordered container (flex rounded-md border border-input overflow-hidden) with an inner divider between them. They now read as one segmented control, making the relationship between field and direction obvious.

Implemented in commit bd6b0e7. Wrapped the sort-field Select and sort-direction button in a single bordered container (`flex rounded-md border border-input overflow-hidden`) with an inner divider between them. They now read as one segmented control, making the relationship between field and direction obvious.

bullitt closed this issue

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

No description provided.

Rows
Columns