Settings: Group configuration into Scrapers, Notifications, and Activity sections #41

New issue

Closed

opened 2026-06-27 15:41:15 +02:00 by bullitt · 2 comments

bullitt commented

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

Owner

Problem

The Settings page is one long scrollable page with no visual grouping. Three distinct concern areas are presented as an undifferentiated stack:

Scrapers — per-carrier enable/interval/retention config
Notifications — MQTT enable/topic/URL
System status — Recent Scrape Activity table

Users who only want to change MQTT settings must scroll past all scraper cards to reach the Notifications section.

Implementation

File: frontend/src/pages/Settings.tsx

Add section headers between the groups using a consistent pattern:

function SectionHeader({ title, description }: { title: string; description?: string }) {
  return (
    <div className="pt-2">
      <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{title}</h2>
      {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
    </div>
  )
}

Structure the page as:

<SectionHeader title="Scrapers" description="Configure per-carrier tracking schedules" />
{/* scraper cards */}

<SectionHeader title="Notifications" description="Publish shipment state to Home Assistant via MQTT" />
{/* MQTT card */}

{/* Save button */}

<SectionHeader title="Activity" />
{/* Recent Scrape Activity card */}

The <SectionHeader> component uses the same text-sm font-semibold uppercase tracking-wide style as the Dashboard section labels for visual consistency.

Acceptance criteria

Three section headers visually divide the page
"Scrapers", "Notifications", "Activity" labels appear before their respective content
Section header style matches Dashboard's "ACTIVE (10)" / "DELIVERED (6)" label style

Brand identity alignment

Settings should reinforce user control. Clear sectioning helps users understand which parts control carrier/source syncing, notifications, and system activity.

Brand-compliant implementation notes

Section labels should be compact, uppercase, and neutral, matching the operational dashboard style.
Suggested descriptions: Carrier source polling and retention, MQTT/webhook delivery signals, Recent source and sync activity.
Avoid turning sections into nested cards; use full-width headings and existing cards underneath.

Additional acceptance criteria

Settings feels like instance configuration, not a long generic form.
Users can quickly find sync, notification, and activity controls.
Section copy aligns with privacy/user-control positioning.

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

## Problem The Settings page is one long scrollable page with no visual grouping. Three distinct concern areas are presented as an undifferentiated stack: 1. **Scrapers** — per-carrier enable/interval/retention config 2. **Notifications** — MQTT enable/topic/URL 3. **System status** — Recent Scrape Activity table Users who only want to change MQTT settings must scroll past all scraper cards to reach the Notifications section. ## Implementation File: `frontend/src/pages/Settings.tsx` Add section headers between the groups using a consistent pattern: ```tsx function SectionHeader({ title, description }: { title: string; description?: string }) { return ( <div className="pt-2"> <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{title}</h2> {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>} </div> ) } ``` Structure the page as: ```tsx <SectionHeader title="Scrapers" description="Configure per-carrier tracking schedules" /> {/* scraper cards */} <SectionHeader title="Notifications" description="Publish shipment state to Home Assistant via MQTT" /> {/* MQTT card */} {/* Save button */} <SectionHeader title="Activity" /> {/* Recent Scrape Activity card */} ``` The `<SectionHeader>` component uses the same `text-sm font-semibold uppercase tracking-wide` style as the Dashboard section labels for visual consistency. ## Acceptance criteria - Three section headers visually divide the page - "Scrapers", "Notifications", "Activity" labels appear before their respective content - Section header style matches Dashboard's "ACTIVE (10)" / "DELIVERED (6)" label style ## Brand identity alignment Settings should reinforce user control. Clear sectioning helps users understand which parts control carrier/source syncing, notifications, and system activity. ## Brand-compliant implementation notes - Section labels should be compact, uppercase, and neutral, matching the operational dashboard style. - Suggested descriptions: `Carrier source polling and retention`, `MQTT/webhook delivery signals`, `Recent source and sync activity`. - Avoid turning sections into nested cards; use full-width headings and existing cards underneath. ## Additional acceptance criteria - Settings feels like instance configuration, not a long generic form. - Users can quickly find sync, notification, and activity controls. - Section copy aligns with privacy/user-control positioning. --- Migrated from GitHub issue #20: https://github.com/bullitt186/trackbox/issues/20 Original author: @bullitt186 Original created: 2026-06-27T13:25:10Z Original labels: ux

bullitt added the

label

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

bullitt changed title from ~~Settings: Add section headers and visual grouping (Scrapers / Notifications / Activity)~~ to Settings: Group configuration into Scrapers, Notifications, and Activity sections

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

bullitt commented

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

Author

Owner

Implemented in commit bd6b0e7. Added a SectionHeader component (xs, uppercase, tracking-wide, muted-foreground text + optional description line). Three sections divide the Settings page: Scrapers (carrier polling and retention), Notifications (MQTT delivery signals), and Activity (recent sync history). This matches the Dashboard's uppercase section label style and makes the page's three distinct concerns immediately scannable.

Implemented in commit bd6b0e7. Added a `SectionHeader` component (xs, uppercase, tracking-wide, muted-foreground text + optional description line). Three sections divide the Settings page: **Scrapers** (carrier polling and retention), **Notifications** (MQTT delivery signals), and **Activity** (recent sync history). This matches the Dashboard's uppercase section label style and makes the page's three distinct concerns immediately scannable.

bullitt closed this issue

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

bullitt commented

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

Author

Owner

Follow-up fix: Section header label was text-xs but the acceptance criteria and the issue specification both require text-sm font-semibold uppercase tracking-wide to match Dashboard label typography. Updated to text-sm font-semibold.

Follow-up fix: Section header label was `text-xs` but the acceptance criteria and the issue specification both require `text-sm font-semibold uppercase tracking-wide` to match Dashboard label typography. Updated to `text-sm font-semibold`.

bullitt referenced this issue from a commit

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

UX: follow-up fixes from issue-by-issue review

bullitt referenced this issue from a commit

2026-06-28 16:10:38 +02:00

UX: follow-up fixes from issue-by-issue review