Skip to content

feat: polished permissions onboarding inspired by Logi Options+#4

Open
nikolaykolibarov wants to merge 4 commits into
mainfrom
feat/polished-permissions-onboarding
Open

feat: polished permissions onboarding inspired by Logi Options+#4
nikolaykolibarov wants to merge 4 commits into
mainfrom
feat/polished-permissions-onboarding

Conversation

@nikolaykolibarov
Copy link
Copy Markdown
Member

Summary

Redesigns the permissions onboarding flow with a polished, sequential experience inspired by Logi Options+.

Changes

Backend (commit 1)

  • Add native CheckMicrophonePermission and RequestMicrophonePermission using AVFoundation on macOS
  • Add HasAccessibilityPermissions to check without prompting the user
  • Add ReregisterHotkey to re-register hotkey after permission grant
  • Change startup behavior to check (not request) accessibility permissions, letting onboarding handle the UX

Frontend (commit 2)

Replace the single permissions card screen with 4 dedicated screens:

  1. Microphone Request - Floating pixel-art mic icon, clear explanation, 'Allow Microphone' button
  2. Microphone Success - Celebration animation with confetti, 'Continue' button
  3. Accessibility Request - CSS-only mockup of macOS System Preferences, 'Open Accessibility Settings' button, auto-polls for permission
  4. Accessibility Success - Pixel-art celebrating character, 'All permissions granted!' message

Design Features

  • Pixel-art style matching Yap's aesthetic
  • Smooth animations (floating icons, confetti, pulse effects)
  • CSS-only System Preferences mockup (no external images needed)
  • Auto-polling for accessibility permission detection
  • Progressive flow with dedicated screen per permission

Screenshots

The new flow provides visual guidance similar to Logi Options+:

  • Shows a mockup of where to find the setting in System Preferences
  • Celebrates each permission grant with animations
  • Auto-detects when accessibility is enabled and advances

Testing

  1. Reset onboarding: rm -rf ~/Library/Application\ Support/yap/ && tccutil reset Microphone com.wails.Yap && tccutil reset Accessibility com.wails.Yap
  2. Run wails dev
  3. Walk through the full onboarding flow

Add local monitor for NSEventMaskFlagsChanged events to handle modifier
key hotkeys (like Right Option, Right Command) when the Yap window is
focused. Previously, only global monitoring was in place, which didn't
capture modifier key events when the app had focus.
- Add CheckMicrophonePermission and RequestMicrophonePermission using
  AVFoundation on macOS for proper permission status detection
- Add HasAccessibilityPermissions to check without prompting
- Add ReregisterHotkey to re-register hotkey after permission grant
- Change startup to check (not request) accessibility permissions,
  letting onboarding handle the explicit permission request UX
- Add microphone_darwin.go and microphone_other.go for platform-specific
  microphone permission handling
Replace the single permissions card screen with a polished sequential
flow inspired by Logi Options+:

New screens:
- Microphone Request: floating pixel-art mic icon, clear explanation,
  'Allow Microphone' button that triggers native macOS dialog
- Microphone Success: celebration animation with confetti particles,
  'Continue' button to proceed
- Accessibility Request: CSS-only mockup of macOS System Preferences
  showing Privacy & Security > Accessibility with Yap highlighted,
  'Open Accessibility Settings' button, polls for permission grant
- Accessibility Success: pixel-art celebrating character with confetti,
  'All permissions granted!' message

Design features:
- Pixel-art style to match Yap's aesthetic
- Smooth animations: floating icons, confetti fall, pulse effects
- CSS-only System Preferences mockup (no external images)
- Auto-polling for accessibility permission detection
- Progressive flow with dedicated screen per permission
- Change accessibility success screen to use same checkmark style as
  mic success (consistent design)
- Add transcript display on hotkey test success screen showing "You said: ..."
- Replace hotkey instructions on Ready screen with app navigation tour
  (Home, History, Settings) since user already learned hotkey by testing it
- Clean up unused CSS (pixel character, .big variants)
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.

1 participant