feat: welcome modal, demo navbar pill, segmented Settings, reset app#53
Merged
Conversation
End-to-end UX pass for first-run + demo-mode flows, plus a Settings
reshuffle that lets all of this breathe.
Welcome modal (replaces FirstRunModal):
- Two-step: Welcome (BarChart3 icon + 3 bold-led bullets) → Folder
(option cards for Default vs Choose-another). 400px wide, fixed
392px shell height so the modal never resizes between steps.
- "Start with demo data" link bottom-left, "Choose folder" → "Get
started" primary on the right.
- Default card surfaces the Recommended badge when the path is
detected, or "Not found on this Mac" disabled state when it's not.
- Clicking the custom card opens the native picker directly.
Demo-mode navbar pill (new):
- Orange split-pill that lives in the navbar's centre slot whenever
demoMode is on. Left half is the persistent "Demo mode" label
(routes to Settings). Right half is a contextual action chip —
"Set folder" opens the picker, "Exit" flips demo off in one click.
- Centered via MainHeader switching to a grid-cols-[1fr_auto_1fr]
layout; left/right slots balance around it.
Settings reorganised:
- Segmented tabs at the top (General / Data / About). Range pill
hides on /settings so the tab strip owns the chrome.
- General: Recordings folder, Appearance, Transcripts, Demo data.
- Data: Indexing, Filler-phrase dictionary.
- About: tagline+disclaimer combined, version table, updater. Reset
app moved to its own card so the action sits separately.
- Drop the auto-hide-sidebar toggle row (behaviour stays default-on
in config; the row was UI overkill).
Reset app (new):
- IPC channel writes config.json back to defaults.
- Renderer's resetApp flips a transient welcomeForceShow flag so the
welcome modal re-appears even when SuperWhisper is installed at the
default location (which would otherwise be auto-adopted on hydrate).
- Two-step confirm with accent-orange "Confirm reset" (not red —
recordings on disk are untouched).
Plumbing:
- main/cache.ts demo fallback: when no folder is configured, serve
the synthetic dataset so the welcome modal renders against
populated screens instead of a blank shell.
- main/config.ts resolveRecordingsPath: a picked SuperWhisper parent
folder auto-promotes to its `recordings/` subdirectory if the
parent itself isn't a valid recordings dir.
- Settings → Recordings folder choose() and WelcomeModal done() set
the path FIRST, then disable demo — the reverse order leaves the
renderer briefly in (!path && !demoMode) which fires the welcome
trigger and flashes the modal.
- App.tsx hydrate-on-no-path (instead of clearData) so the demo
fallback reaches the renderer behind the welcome.
- LoadingOverlay gated on configValid so the welcome doesn't peek
through a "Loading recordings…" curtain on fresh installs.
Cosmetic:
- New accent-orange token (light + dark) for the demo pill and reset
confirm. Strong orange that doesn't compete with chart greys or
accent-blue identity cues.
- Reusable SegmentedTabs primitive (same lifted-pill aesthetic as
RangePill). Keyboard focus uses a subtle bg tint, not a ring, so
tabbing through doesn't leave a stuck-selection look.
- middleTruncate util for paths that need to keep their leaf visible
(e.g. ~/Library/.../recordings).
- OptionCard detailMono prop: mono font only when displaying actual
paths, sans-serif for prose ("Pick a folder anywhere on your Mac").
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
End-to-end UX pass for the first-run + demo-mode flows, plus a Settings reshuffle so all of it has room to breathe.
Summary
FirstRunModal). Two-step: Welcome with three bold-led bullets and a chart icon → Folder picker with Default-vs-Custom option cards. 400px wide, fixed 392px shell height so the modal never resizes between steps. "Start with demo data" link bottom-left, "Choose folder" → "Get started" primary on the right.MainHeader. Orange split-pill: persistent "Demo mode" label on the left, contextual action chip on the right ("Set folder" opens the picker, "Exit" flips demo off).SegmentedTabsprimitive. Range pill hides on/settings.config.jsonback to defaults and re-triggers the welcome flow even when SuperWhisper is auto-detected at the default location.Test plan