Skip to content

recorder: bigger glass action badges on the preview card - #169

Merged
morepriyam merged 1 commit into
mainfrom
feat/preview-card-glass-badges
Aug 26, 2026
Merged

recorder: bigger glass action badges on the preview card#169
morepriyam merged 1 commit into
mainfrom
feat/preview-card-glass-badges

Conversation

@morepriyam

Copy link
Copy Markdown
Collaborator

Closes #164. Part of #168 (the preview-card items).

The three action badges on the floating preview card were 28×28pt circles with 14–16pt icons — small and easy to mis-tap, especially the destructive 🗑. They also used flat rgba scrims right next to the recorder's glass chrome.

Changes

Bigger tap targets (#164)

  • ✕ / ✂ / 🗑 badges grow 28→40pt with icons at 18/20pt (were 14/16pt)
  • Effective tap targets are 48pt with hitSlop — over the 44pt HIG minimum, while keeping the ✂ and 🗑 hit areas (8pt apart) from overlapping
  • Layout unchanged: ✕ top-left, ✂ + 🗑 top-right; the ✂ offset is derived from the badge size instead of a hardcoded 28

Liquid Glass (#168, preview card)

  • The badges, the time readout pill, and the paused ▶ overlay now render through GlassPill — native Liquid Glass on iOS 26+, the same dark scrim as before everywhere else
  • Structure follows the camera-controls pattern: Pressable owns placement + hit area, GlassPill owns the surface (no backgroundColor from callers)
  • The ▶ overlay also grows 56→64pt with a 28pt glyph

Testing

  • tsc --noEmit and ESLint clean
  • Verified on device: badge sizing, glass rendering on the preview card, and layout across all three badges + pill + play overlay

- grow the ✕ / ✂ / 🗑 badges 28→40pt (48pt effective targets with hitSlop,
  over the 44pt HIG minimum) and bump their icons 14/16→18/20pt
- convert the badges, the time readout pill, and the paused ▶ overlay to
  GlassPill — Liquid Glass on iOS 26+, the usual dark scrim elsewhere
- grow the ▶ overlay 56→64pt with a 28pt glyph
- badge shape and position split: Pressable owns placement + hit area,
  GlassPill owns the surface, matching camera-controls

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the recorder’s floating preview card controls to improve usability (larger tap targets) and visual consistency with the app’s “glass over live media” chrome by routing the overlay UI through GlassPill.

Changes:

  • Increased preview-card action badge sizes (✕ / ✂ / 🗑) and icon sizes, while keeping the existing layout.
  • Moved badge surfaces, time readout pill, and paused ▶ overlay surface rendering to GlassPill (Liquid Glass on iOS 26+, scrim fallback elsewhere).
  • Reworked positioning so Pressable owns placement + hit area while GlassPill owns surface styling.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

@SarkarShubhdeep

Copy link
Copy Markdown
Collaborator

Cosmetic changes. Single file updates. Looks good. 👍

@morepriyam
morepriyam added this pull request to the merge queue Aug 26, 2026
Merged via the queue into main with commit ab186d0 Aug 26, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

preview card: bigger ✕ / ✂ / 🗑 action buttons

3 participants