Implement mobile bottom sheet UI for session log with SNR-colored chips

[Copilot]

Refactored session log to use a mobile-friendly bottom sheet with chip-based layout for heard repeats and SNR color coding. On mobile, log is collapsed by default; on desktop, traditional list view remains.

Changes

UI Components

• Collapsed summary bar (mobile only): Fixed bottom bar showing ping count, last event time, and last SNR. Tap to expand.
• Expandable bottom sheet: Slides up from bottom with 70vh max height, grab handle, and close button. Safe-area insets for iOS notch.
• Desktop compatibility: Traditional log list hidden on mobile (md:hidden), bottom sheet hidden on desktop.

Log Entry Layout

• Two-line structure: Time + coords on top; heard repeats as chips below.
• Chip design: Pills with monospace font, wrapping horizontally with gap spacing.
• SNR color coding: Red (≤-1), Orange (0-5), Green (≥6).

Data Architecture

// Parse log format: "timestamp | lat,lon | 4e(12),b7(0)"
const entry = {
  timestamp: "2025-12-21T17:43:47.305Z",
  lat: "45.27188",
  lon: "-75.77794",
  events: [
    { type: "4e", value: 12 },   // Green chip
    { type: "b7", value: 0 }     // Orange chip
  ]
};

Styling

• Reuses existing slate theme (slate-800/80 bg, slate-700 borders, rounded-xl).
• Bottom sheet uses transform: translateY() with 300ms ease-out transition.
• Chips: border-radius: 999px, SNR classes .snr-red/.snr-orange/.snr-green.

Screenshots

Mobile - Collapsed:

Mobile - Expanded with chips:

Desktop - Traditional view:

Original prompt

AI Agent Instructions: Improve Mobile Session Log UI (Bottom Sheet + “Heard” Chips + SNR Coloring)

Goal

Refactor the mobile “Session Log” display so it is:

• Mobile-friendly (doesn’t permanently consume vertical space)
• Readable at a glance
• Supports multiple “heard” repeats per entry without clutter
• Colors SNR values by threshold
• Follows the styling of the rest of the current UI

---

Critical Design Constraint

Follow existing app styling

• Reuse existing CSS variables/tokens (colors, spacing, radii, shadows, typography) already used by the app.
• Prefer existing component classes/patterns (buttons, inputs, panels) over introducing a new visual language.
• If the app has a dark/light theme toggle, the log UI must respect it.
• Only introduce new CSS where necessary, and make it consistent with the current design system.

---

Target UX / UI Behavior

1) Collapsed summary bar (always visible)

• A small bar fixed near the bottom of the screen.
• Displays a short summary (e.g., count of entries + last event time + last SNR).
• Tapping the bar expands the full log.

2) Expandable bottom sheet (log viewer)

• Opens as a bottom sheet overlay (like Google Maps).
• Default expanded height: ~70vh (with safe-area inset padding).
• Has a grab handle + header with a collapse button.
• Contains a scrollable list of log rows.

3) Log row layout (mobile-first)

Each log row must be structured as:

• Top line: time (short local time) on the left, lat,lon on the right (ellipsize if needed).
• Second line: all “heard repeats” displayed beside each other as chips in a wrapping container:
  • Example: [4e 12.00] [b7 0] [x1 -2.00] ...
• Chips must wrap to new lines naturally on small screens.

4) SNR coloring rules

The numeric SNR value must be color-coded:

• Red: -12 through -1 (and also anything less than -12, unless otherwise specified)
• Orange: 0 through 5
• Green: 6 through 13 (and optionally anything above 13 stays green unless a new bucket is added)

Assumption: SNR is the numeric value associated with a specific event type (currently 4e).
If the repository uses a different event key for SNR, detect and apply the same bucket logic to that key.

5) Optional (nice-to-have, not required)

• “Auto-scroll” toggle: when enabled, keep the log scrolled to the newest entry unless the user scrolls upward.
• Tap a row to copy coordinates to clipboard.
• Tap a chip to auto-fill a filter input with that event key (e.g., tapping b7 filters to b7).

---

Implementation Requirements

A) Data parsing

Input lines currently resemble:

• 2025-12-21T17:43:47.305Z | 45.27188,-75.77794 | 4e(12),b7(0)

Agent must:

1. Split by " | " into:
   • ISO timestamp
   • "lat,lon"
   • events string
2. Parse events:
   • Split by ","
   • Parse tokens like TYPE(NUM) into { type: "TYPE", value: Number(NUM) }
3. Store parsed entries as objects for rendering.

B) Rendering rules

• Render newest-first (recommended for mobile) OR keep existing order if required by current UX; choose and document the decision.
• Render each row with:
  • .logRowTop (time + coords)
  • .heardChips container that uses display:flex; flex-wrap:wrap; gap:6px;

C) SNR bucket helper

Add a helper like:

• if snr <= -1 → red
• else if snr <= 5 → orange
• else → green

Then apply that class to the chip representing the SNR event type.

---

CSS Requirements

Bottom sheet

• Fixed to bottom, rounded top corners, transforms in/out:
  • closed: transform: translateY(105%)
  • open: transform: translateY(0)
• Use padding-bottom: env(safe-area-inset-bottom) for iOS notch devices.
• Ensure list scroll uses -webkit-overflow-scrolling: touch.
• Visually match existing panels/cards in the app (border, background, shadow).

Chips

• Thumb-friendly size:
  • padding: ~6px 10px
  • border radius: 999px
  • font-size: ~12px
• Use existing pill/tag styles if they exist; otherwise create chips that match the current UI.
• Must support SNR severity classes:
  • .snr-red, .snr-orange, .snr-green
• Ensure contrast works with the app’s theme colors.

---

Acceptance Criteria (Must Pass)

1. On a mobile viewport, the log is collapsed by default and does not block primary app content.
2. Expanding the log shows a bottom sheet with a scrollable list of entries.
3. Each entry shows time + GPS, and below it the heard repeats appear side-by-side as wrapping chips.
4. SNR chips are color-coded exactly by thresholds:
   • red for -12..-1
   • orange for 0..5
   • green for 6..13
5. UI remains readable and usable with multiple heard repeats (chips wrap cleanly, no overflow off-screen).
6. The log UI matches the existing app styling (colors, typography, radii, spacing, button/input styles, theming).

---

Notes for the Agent

• Prefer minimal dependencies: implement with existing JS/CSS patterns already in the repo.
• Keep DOM updates efficient...

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.