Redesign settings & presence UX: profile popover + modal overlay#238
Open
wesbillman wants to merge 4 commits intomainfrom
Open
Redesign settings & presence UX: profile popover + modal overlay#238wesbillman wants to merge 4 commits intomainfrom
wesbillman wants to merge 4 commits intomainfrom
Conversation
Redesign settings and presence UX inspired by Slack and Goose 2: Profile Popover (new): - Clicking sidebar footer avatar opens a lightweight popover - Shows user identity, current presence status - Single-click availability toggle (online/away/offline) - Quick access to Settings and Sign out - Platform-aware keyboard shortcut hint (⌘, / Ctrl+,) - Proper ARIA menu roles and semantic separators Settings as Modal Overlay (refactored): - Settings renders as a centered modal overlay instead of full-width takeover - Sidebar stays visible behind the backdrop blur - Entrance animations: scale+fade modal, slide-in sidebar nav, staggered nav items - Section transition micro-animation on panel switch - Focus trap via @radix-ui/react-focus-scope - role=dialog, aria-modal, aria-labelledby for accessibility - motion-safe: prefixed animations for prefers-reduced-motion - Escape, backdrop click, and X button to dismiss Cleanup: - Remove 'settings' from AppView type (no longer a view mode) - Remove dead lastNonSettingsViewRef - Clean stale 'settings' variant from ChatHeader mode type - Separate settingsOpen boolean from view routing
- Remove sign out from ProfilePopover (not functional) - Make popover menu items full-width for better click targets - Add proper header bar to settings modal (fixes close button overlap) - Remove presence section from settings (now in popover) - Clean up stale presence/signout props across AppShell and AppSidebar
Remove the isTransitioning fade-out/fade-in effect that fired backwards (after content swap instead of before), causing a double visual pop. Section changes are now instant. The entrance animation (isLoaded) is preserved.
Collaborator
Author
|
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.
Summary
Redesigns how users interact with settings and presence in the desktop app, inspired by Slack's lightweight profile popover and Goose 2's modal settings pattern.
Changes
Profile Popover (new)
<hr>separatorsSettings as Modal Overlay (refactored)
@radix-ui/react-focus-scope,role="dialog",aria-modal, Escape key dismissalmotion-safe:prefixes forprefers-reduced-motionsupportPresence removed from Settings
Cleanup
"settings"removed fromAppViewtype — settings is a separate boolean overlay, not a view modelastNonSettingsViewRefremoved"settings"variant removed fromChatHeader.modetypeFiles Changed
desktop/src/features/profile/ui/ProfilePopover.tsx(new)desktop/src/app/AppShell.tsxdesktop/src/features/settings/ui/SettingsView.tsxdesktop/src/features/settings/ui/SettingsPanels.tsxdesktop/src/features/sidebar/ui/AppSidebar.tsxdesktop/src/features/chat/ui/ChatHeader.tsxdesktop/package.json+pnpm-lock.yaml(@radix-ui/react-focus-scope)Testing
tsc --noEmit