feat: improve voice options ux #19

Merged

santiagon610 merged 1 commit from ns/fixVoiceOptions into main

2026-03-14 23:07:52 +00:00

santiagon610 commented

2026-03-14 22:52:35 +00:00

(Migrated from github.com)

Improve Voice Options UX when AWS session is invalid

Problem

When the app runs without a valid AWS session and language is set to System Locale (default), the Voice dropdown in Settings is empty because polly:DescribeVoices cannot be called. Users had no clear indication that voice options depend on a valid AWS session, and no way to refresh the list after signing in.

Solution

Disable Voice Options when there's no session. The Voice Options drawer is disabled when there is no valid AWS session. The header shows "(requires AWS session)" and a tooltip ("Sign in to AWS to access voice options") so it's clear that AWS is required for voice selection.
Refresh voices when a session is established. When the session becomes valid (e.g. after configuring credentials and using "Check credentials"), the app re-runs session checks and automatically refreshes the list of engines/voices so the Voice dropdown is populated without leaving the screen.
Refresh Voices control. A "Refresh voices" button was added inside the Voice Options drawer so users can manually reload the list (e.g. after changing region or profile). It shows a "Refreshing…" state while the request is in progress.

Changes

Settings drawer (Voice Options): Drawer header is disabled when sessionOk !== true; disabled state is styled (opacity, cursor). Subtitle "(requires AWS session)" and tooltip when disabled. New "Refresh voices" button below the Voice select; disabled when there's no session or while a refresh is running.
Session and voice loading: loadVoices() returns early if there's no valid session and uses a loadingVoices flag for the Refresh button state. Watcher on sessionOk: when it changes from false to true, loadVoices() is called so the list updates after sign-in. After a successful "Check credentials" in AWS settings, checkSession() is called so sessionOk (and thus the traffic light and voice list) stay in sync. On app load, checkSession() is awaited before loadVoices() so a valid session at startup populates voices immediately.
Styling: .drawer-header-disabled and :disabled styles for the Voice Options header; .drawer-title-hint for the "(requires AWS session)" text; hover background on drawer headers only when not disabled.

## Improve Voice Options UX when AWS session is invalid ### Problem When the app runs without a valid AWS session and language is set to System Locale (default), the Voice dropdown in Settings is empty because `polly:DescribeVoices` cannot be called. Users had no clear indication that voice options depend on a valid AWS session, and no way to refresh the list after signing in. ### Solution - **Disable Voice Options when there's no session.** The Voice Options drawer is disabled when there is no valid AWS session. The header shows "(requires AWS session)" and a tooltip ("Sign in to AWS to access voice options") so it's clear that AWS is required for voice selection. - **Refresh voices when a session is established.** When the session becomes valid (e.g. after configuring credentials and using "Check credentials"), the app re-runs session checks and automatically refreshes the list of engines/voices so the Voice dropdown is populated without leaving the screen. - **Refresh Voices control.** A "Refresh voices" button was added inside the Voice Options drawer so users can manually reload the list (e.g. after changing region or profile). It shows a "Refreshing…" state while the request is in progress. ### Changes - **Settings drawer (Voice Options):** Drawer header is disabled when `sessionOk !== true`; disabled state is styled (opacity, cursor). Subtitle "(requires AWS session)" and tooltip when disabled. New "Refresh voices" button below the Voice select; disabled when there's no session or while a refresh is running. - **Session and voice loading:** `loadVoices()` returns early if there's no valid session and uses a `loadingVoices` flag for the Refresh button state. Watcher on `sessionOk`: when it changes from `false` to `true`, `loadVoices()` is called so the list updates after sign-in. After a successful "Check credentials" in AWS settings, `checkSession()` is called so `sessionOk` (and thus the traffic light and voice list) stay in sync. On app load, `checkSession()` is awaited before `loadVoices()` so a valid session at startup populates voices immediately. - **Styling:** `.drawer-header-disabled` and `:disabled` styles for the Voice Options header; `.drawer-title-hint` for the "(requires AWS session)" text; hover background on drawer headers only when not disabled.