Skip to content

Add preferred microphone selection with dropdown z-index and settings propagation fixes#6735

Closed
lpetrov wants to merge 1 commit intoblock:mainfrom
lpetrov:feature/preferred-microphone-selection
Closed

Add preferred microphone selection with dropdown z-index and settings propagation fixes#6735
lpetrov wants to merge 1 commit intoblock:mainfrom
lpetrov:feature/preferred-microphone-selection

Conversation

@lpetrov
Copy link
Copy Markdown

@lpetrov lpetrov commented Jan 27, 2026

Summary

Adds a microphone input source selector to the voice dictation settings panel, allowing users to choose their preferred audio input device (e.g., AirPods, MacBook microphone, external mic). Also fixes two bugs: a z-index conflict causing the dropdown to render behind the titlebar, and settings changes not propagating immediately to the active chat session.

Type of Change

  • Feature
  • Bug fix
  • Refactor / Code quality
  • Performance improvement
  • Documentation
  • Tests
  • Security fix
  • Build / Release
  • Other (specify below)

AI Assistance

  • This PR was created or reviewed with AI assistance

Testing

Manual testing performed:

  • Microphone selector dropdown opens and lists all available audio input devices
  • Selecting a different microphone persists the choice in localStorage
  • After changing the microphone in settings and returning to chat, dictation uses the newly selected device immediately
  • Dropdown renders above the titlebar drag region (z-index fix verified)
  • Dropdown properly portals to document.body and is not clipped by ScrollArea overflow
  • Voice dictation toggle still works correctly (enable/disable)
  • Settings panel animation (expand/collapse) does not interfere with dropdown positioning

Related Issues

N/A

Screenshots/Demos (for UX changes)

Before:
That section was not available.

After:

Screenshot 2026-01-27 at 11 56 39
Screenshot 2026-01-27 at 11 56 49

Detailed Changes

New Feature: Microphone Selector (MicrophoneSelector.tsx)

  • New component that enumerates audio input devices via navigator.mediaDevices.enumerateDevices()
  • Dropdown menu showing all available microphones with the current selection indicated by a checkmark
  • Persists selection to localStorage under the dictation settings key
  • Handles permission prompts and device enumeration errors gracefully

Bug Fix: Dropdown z-index (main.css)

  • Changed .titlebar-drag-region z-index from 50 to 40
  • Ensures portaled dropdown menus (z-50) render above the fixed titlebar
  • Maintains correct stacking: titlebar (z-40) < dropdowns/modals (z-50)

Bug Fix: Settings propagation (VoiceDictationToggle.tsx, useDictationSettings.ts)

  • Dispatches a dictation-settings-changed CustomEvent when settings are saved
  • The useDictationSettings hook listens for this event to immediately pick up changes
  • Fixes the issue where window.storage events only fire cross-tab, not within the same window

… propagation fixes

- Add MicrophoneSelector component for choosing audio input device
- Fix titlebar drag region z-index (50→40) so dropdown renders above it
- Dispatch custom event on settings save so chat view picks up new mic immediately
- Update useDictationSettings hook to listen for dictation-settings-changed event
- Refactor ProviderSelector to accept props for reuse

Signed-off-by: lpetrov <[email protected]>
@lpetrov lpetrov force-pushed the feature/preferred-microphone-selection branch from 60d7c80 to 38406cc Compare January 27, 2026 10:06
Copy link
Copy Markdown
Collaborator

@DOsinga DOsinga left a comment

Choose a reason for hiding this comment

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

thanks for doing this and sorry for the long delay. we rather refactored how this all works right now, so hopefully you can merge in main and get it to work again?

const parsed = JSON.parse(savedSettings);
loadedSettings = parsed;
// Ensure backward compatibility: add preferredDeviceId if missing
loadedSettings = { preferredDeviceId: null, ...parsed };
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

can we move this to the acutal settings of the app rather than adhoc localStorage? that never really seems to work

@michaelneale
Copy link
Copy Markdown
Collaborator

closing as needs updating - please re-open when time

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.

3 participants