Fix UI/UX findability: home page, command palette, settings consolidation, promoted controls - #121
Closed
alpha5611331 wants to merge 9 commits into
Closed
Fix UI/UX findability: home page, command palette, settings consolidation, promoted controls#121alpha5611331 wants to merge 9 commits into
alpha5611331 wants to merge 9 commits into
Conversation
Nothing in the repo currently says where a new setting or action should live, which is how core functionality ended up split across a 32px toolbar, disconnected menu items, and hotkeys with zero on-screen affordance. Establishes placement tiers, the control bar's space budget, and a mandatory design-principles checklist so future additions stay findable.
/ used to just redirect straight into /main with no page of its own, dropping users into the dense control console with zero orientation. Renders a real landing page instead: a primary Start Interview action, an account/credits summary, and Settings/Documentation entry points - the T1/T2 discovery surface the UX conventions doc calls for, applied to the first thing a user sees. Logged-out users still redirect to /auth/login unchanged.
|
|
4 tasks
…only status-panel.tsx's "Show Hotkeys" control only ever revealed the list on hover - nothing visible without pointing at it first, the exact antipattern the rest of the control bar has. Converts it to a proper dialog opened by click or a new '?' shortcut (local to this window, not a registered global hotkey - it only needs focus, not stealth-mode reach). Extracts the hotkey list itself into hotkey-cheatsheet.tsx so status-panel.tsx and documentation-dialog.tsx render the same data instead of two independently-drifting copies.
The centerpiece fix for capabilities that were T1 (occasional) or T3 (hotkey-only) with nothing to point at: a Cmd/Ctrl+K palette listing navigation, session toggles, and app actions (Settings, Documentation, Keyboard Shortcuts, theme, sign out), plus a visible titlebar button so the entry point isn't itself hotkey-only. The shortcut is a renderer-local keydown listener, not a registered global hotkey - Cmd/Ctrl+K is common enough elsewhere that grabbing it system-wide via Electron's globalShortcut would hijack it in every other running app. Inert during stealth mode for the same reason the control bar is: popping a dialog over a screen share defeats the point of stealth. Only wires actions that already have a real, renderer-callable handler (Zustand-store-backed toggles, existing IPC calls) - hotkeys with no renderer entry point (window placement/move/resize, capture) stay reference-only via the Keyboard Shortcuts entry rather than faking an action that doesn't exist. Adds cmdk + a shadcn command.tsx wrapper (new dependency).
Configuration, Change password, and Buy Credits were three separate, unrelated-looking rows in the titlebar menu, plus a fourth settings surface (control-bar toggles) with no relationship to any of them. Turns the settings dialog into a tabbed hub instead: - Account: existing profile fields, plus a Change Password action (folds change-password-dialog.tsx in as a nested dialog rather than a separate menu item) - Session: professional mode and transcript panel defaults - Shortcuts: the same hotkey-cheatsheet.tsx list used elsewhere - Billing: credits balance and a Buy Credits action Titlebar menu trims to one guessable "Settings" entry instead of three - the underlying actions haven't gone anywhere, just moved somewhere a person only has to learn once.
…buttons Capture Screenshot, Clear Captures, and Generate Suggestion were only reachable via their hotkeys (Ctrl+Shift+F9/F10/F11) - the service methods behind them (suggestion-action.service.ts) were fully implemented, but nothing on screen pointed at them: no button, no IPC handler for the renderer to call them through at all. Adds the three missing ipcMain handlers (thin wrappers around the existing service methods - no new business logic), exposes them via preload, and adds icon buttons to tools-group.tsx next to the other session tools. Window placement/move/resize/zoom/scroll stay hotkey+palette+cheat-sheet only, correctly: those are directional, not single-shot actions, and don't map to a one-click button the way capture/clear/trigger do.
Both existed only as forward references when the doc was first written; points at the real files now that command-palette.tsx and hotkey-cheatsheet.tsx exist, and states directly that directional hotkeys (window placement/move/resize/zoom/scroll) are correctly hotkey+cheat-sheet-only rather than a gap the palette should fill.
alpha5611331
changed the title
Both were modals stacked on top of whatever route the user opened
them from. Converts them to routed pages (/settings, /documentation)
following the pattern pages/payment/index.tsx already established -
sticky header with a back button, content below - since they're
destinations a user goes to do a batch of related things, not
transient in-context actions.
Removes configuration-dialog.tsx, documentation-dialog.tsx, and the
use-configuration-dialog.tsx context (openConfigurationDialog is now
just navigate('/settings')); updates every call site (titlebar menu,
command palette, home page, control panel's start-checks). The
hotkey cheat-sheet stays a dialog - it's a quick glance meant not to
lose your place mid-session, not a destination.
docs/ux-conventions.md gets a new "dialog vs. page" rule so the next
addition doesn't have to guess which one it should be.
Resolves conflicts between the mock-interview feature (merged via main)
and this branch's settings/documentation dialog-to-page refactor:
- control-panel/index.tsx and titlebar.tsx: keep both branches' additions
(command palette, mock-interview setup) and drop the dead
useConfigurationDialog/config-for-llmModel usages main's side no longer
needs.
- use-mock-interview-setup-form.ts (new on main) called the deleted
useConfigurationDialog hook; switched it to navigate('/settings') to
match this branch's dialog-to-page refactor.
- test/rtl-rendering.test.mjs still pointed at the removed
documentation-dialog.tsx; repointed at pages/documentation/index.tsx.
Verified with tsc -b and pnpm test:main.
5 tasks
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.
Why
A user reported that even developers can't find things in the client UI. Investigation confirmed this is an information-architecture problem, not a visual one:
/was a pure redirect straight into the dense/maincontrol console, with no orientation.console.logline.This PR resolves it in one pass. Not merging - for manual review.
What changed (8 commits, buildable/testable at every commit)
docs(ux)-docs/ux-conventions.md: a placement-tier rule (always-visible / discoverable-on-demand / configure-once / hotkey) plus a mandatory design-principles checklist.feat(home)-/now renders a real landing page (pages/home/index.tsx) instead of redirecting straight to/main. Logged-out users still redirect to/auth/loginunchanged.fix(hotkeys)- the hover-only hotkey list becomes a click-to-open dialog (plus a new local?shortcut). Extractedhotkey-cheatsheet.tsxso it isn't duplicated.feat(command-palette)- a searchableCmd/Ctrl+Kcommand palette (newcmdkdependency + shadcncommand.tsx) plus a visible titlebar button. Renderer-local shortcut, not a global OS hotkey. Inert during stealth mode.feat(settings)- consolidates Account/Session/Shortcuts/Billing into one tabbed surface, folding in Change Password and Buy Credits from separate menu rows.feat(control-bar)- Capture Screenshot / Clear Captures / Generate Suggestion get real icon buttons and the IPC handlers they never had (the service methods already existed - hotkey-only, zero UI).docs(ux)- updates the conventions doc's forward references now that the palette and cheat-sheet exist.refactor(settings)- converts Settings and Documentation from modals into routed pages (/settings,/documentation), following the patternpages/payment/index.tsxalready established (sticky header + back button). Removesconfiguration-dialog.tsx,documentation-dialog.tsx, and theuse-configuration-dialog.tsxcontext; updates every call site. Adds a "dialog vs. page" rule to the conventions doc: a transient in-context action (password change, a permission prompt) is a dialog, a destination you go to do a batch of related things is a page. The hotkey cheat-sheet stays a dialog under this rule - quick glance, not a destination.Notable judgment calls (made while implementing)
maindoesn't have the mock-interview feature yet (only on the unmergedfeat/mock-interview-clientbranch) - the home page's second launch card and the plan's mock-interview-URL phase don't apply here.?are renderer-localkeydownlisteners, not registered ElectronglobalShortcuts - grabbing Ctrl+K system-wide would hijack it in every other app while this one merely runs.ipcMain.handlewrappers - thin wrappers around already-implemented service methods, no new business logic.app-dialog.tsx/app-notice.tsxcomposition wrapper for the app's remaining dialogs (tracked in the conventions doc as explicit follow-up) - a consistency improvement, not a findability fix.Test plan
pnpm lintclean (full project)tsc -bclean (renderer) andtsc -p tsconfig.electron.jsonclean (main process)pnpm run buildsucceeds end-to-endvitedev server (transforms without error)/settingstabs (including Save and Change Password) →/documentation→ back-button behavior on both → Capture/Clear/Trigger buttons on/mainwhile a session is running →?and hover-free "Show Hotkeys" → stealth mode hides the palette/titlebar button as expected