feat: add multi-step download app dropdown with platform-specific options#27211
Merged
feat: add multi-step download app dropdown with platform-specific options#27211
Conversation
…ions - Add DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent components to UI library - Create useUserAgentData hook for detecting user's OS and browser - Replace single download link with multi-step dropdown showing: - iOS and Android (always shown) - Browser extensions (Chrome, Safari, Firefox, Edge) based on detected browser - Desktop apps (MacOS, Windows, Linux) based on detected OS - Add i18n translations for all new download options Co-Authored-By: peer@cal.com <peer@cal.com>
Contributor
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
Co-Authored-By: peer@cal.com <peer@cal.com>
…ata hook Co-Authored-By: peer@cal.com <peer@cal.com>
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
1 issue found across 6 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="apps/web/modules/shell/user-dropdown/UserDropdown.tsx">
<violation number="1" location="apps/web/modules/shell/user-dropdown/UserDropdown.tsx:154">
P3: Localize these UI strings via `t()`; avoid hardcoded text in the dropdown. Use the existing `loading` key for the loading state and add a new translation key for the “Nameless User” fallback so lingo.dev can propagate it.
(Based on your team's feedback about verifying localization keys with lingo.dev.) [FEEDBACK_USED]</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| <span className="w-24 shrink-0 text-sm leading-none"> | ||
| <span className="text-emphasis block truncate py-0.5 font-medium leading-normal"> | ||
| {isPending ? "Loading..." : user?.name ?? "Nameless User"} | ||
| {isPending ? "Loading..." : (user?.name ?? "Nameless User")} |
Contributor
There was a problem hiding this comment.
P3: Localize these UI strings via t(); avoid hardcoded text in the dropdown. Use the existing loading key for the loading state and add a new translation key for the “Nameless User” fallback so lingo.dev can propagate it.
(Based on your team's feedback about verifying localization keys with lingo.dev.)
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/modules/shell/user-dropdown/UserDropdown.tsx, line 154:
<comment>Localize these UI strings via `t()`; avoid hardcoded text in the dropdown. Use the existing `loading` key for the loading state and add a new translation key for the “Nameless User” fallback so lingo.dev can propagate it.
(Based on your team's feedback about verifying localization keys with lingo.dev.) </comment>
<file context>
@@ -135,7 +151,7 @@ export function UserDropdown({ small }: UserDropdownProps) {
<span className="w-24 shrink-0 text-sm leading-none">
<span className="text-emphasis block truncate py-0.5 font-medium leading-normal">
- {isPending ? "Loading..." : user?.name ?? "Nameless User"}
+ {isPending ? "Loading..." : (user?.name ?? "Nameless User")}
</span>
</span>
</file context>
Contributor
Devin AI is addressing Cubic AI's review feedbackA Devin session has been created to address the issues identified by Cubic AI. |
Co-Authored-By: peer@cal.com <peer@cal.com>
Contributor
There was a problem hiding this comment.
1 issue found across 2 files (changes from recent commits).
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="apps/web/modules/shell/user-dropdown/UserDropdown.tsx">
<violation number="1" location="apps/web/modules/shell/user-dropdown/UserDropdown.tsx:17">
P2: MenuSub/MenuSubTrigger/MenuSubPopup are Base UI menu primitives, but the dropdown root/content is still Radix. This context mismatch will prevent the submenu from opening. Use the Radix-based DropdownMenuSub* components or migrate the whole dropdown to the @coss/ui menu system.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
Contributor
Devin AI is addressing Cubic AI's review feedbackNew feedback has been sent to the existing Devin session. ✅ No changes pushed |
The coss-ui Menu components (MenuSub, MenuSubTrigger, MenuSubPopup) require a Base UI Menu.Root context, but they were being used inside a Radix UI Dropdown which caused a context mismatch and 500 error. Reverted to using the Radix-based DropdownMenuSub, DropdownMenuSubTrigger, and DropdownMenuSubContent components which work correctly within the existing Radix Dropdown context. Co-Authored-By: peer@cal.com <peer@cal.com>
…ttps://git-manager.devin.ai/proxy/github.com/calcom/cal.com into devin/1769278561-download-app-multi-step-dropdown
Replace Lucide icons with custom brand SVGs for each download option: - Apple icon for iOS and macOS - Play Store icon for Android - Chrome, Safari, Firefox, Edge icons for browser extensions - Windows and Linux icons for desktop apps Co-Authored-By: peer@cal.com <peer@cal.com>
Replace Radix UI dropdown components with coss-ui Menu components: - Menu, MenuTrigger, MenuPopup, MenuItem, MenuSeparator - MenuSub, MenuSubTrigger, MenuSubPopup for submenu - Use render prop pattern instead of asChild - Update test mocks to use coss-ui components Co-Authored-By: peer@cal.com <peer@cal.com>
Contributor
There was a problem hiding this comment.
2 issues found across 2 files (changes from recent commits).
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="apps/web/modules/shell/user-dropdown/UserDropdown.tsx">
<violation number="1" location="apps/web/modules/shell/user-dropdown/UserDropdown.tsx:155">
P2: Replace the inline “Loading...”/“Nameless User” strings with localized `t()` keys to keep user-facing text translatable.</violation>
<violation number="2" location="apps/web/modules/shell/user-dropdown/UserDropdown.tsx:289">
P2: Use the existing `t("platform")` key instead of the hard-coded “Platform” label so it remains localized.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
Contributor
Devin AI is addressing Cubic AI's review feedbackNew feedback has been sent to the existing Devin session. ✅ No changes pushed (confidence scores 8/10 are below the 9/10 threshold) |
Replace img tags with inline SVG for Apple icons (iOS and macOS downloads) to support dark/light mode color switching via Tailwind fill-foreground class. Co-Authored-By: peer@cal.com <peer@cal.com>
…ttps://github.com/calcom/cal.com into devin/1769278561-download-app-multi-step-dropdown
Co-Authored-By: peer@cal.com <peer@cal.com>
…lti-step-dropdown' into devin/1769278561-download-app-multi-step-dropdown Co-Authored-By: peer@cal.com <peer@cal.com>
Co-Authored-By: peer@cal.com <peer@cal.com>
Co-Authored-By: peer@cal.com <peer@cal.com>
…ttps://git-manager.devin.ai/proxy/github.com/calcom/cal.com into devin/1769278561-download-app-multi-step-dropdown
…droid for Android, etc.) Co-Authored-By: peer@cal.com <peer@cal.com>
Co-Authored-By: peer@cal.com <peer@cal.com>
…ttps://git-manager.devin.ai/proxy/github.com/calcom/cal.com into devin/1769278561-download-app-multi-step-dropdown
…desktop Co-Authored-By: peer@cal.com <peer@cal.com>
Co-Authored-By: peer@cal.com <peer@cal.com>
…ttps://git-manager.devin.ai/proxy/github.com/calcom/cal.com into devin/1769278561-download-app-multi-step-dropdown
pasqualevitiello
previously approved these changes
Jan 26, 2026
Co-Authored-By: peer@cal.com <peer@cal.com>
devin-ai-integration
bot
dismissed
pasqualevitiello’s stale review
via
609ecc1
sean-brydon
approved these changes
Jan 26, 2026
PeerRich
deleted the
devin/1769278561-download-app-multi-step-dropdown
branch
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
3 participants
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.
What does this PR do?
Replaces the single "Download desktop app" link in the user dropdown with a platform-aware download menu that shows relevant options based on the user's device.
Download behavior:
Changes:
useUserAgentDatahook inpackages/lib/hooks/for detecting user's OS, browser, and mobile statusUserDropdown.tsxfrom Radix UI dropdown to@coss/uiMenu componentsDropdownMenuSub,DropdownMenuSubTrigger,DropdownMenuSubContentcomponents to UI library (for backwards compatibility)DownloadIcons.tsxwith inline SVG components for all platform icons (Apple, Play Store, Chrome, Safari, Firefox, Edge, Windows, Linux)Updates since last revision
/icons/download/*.svgfiles (now inline in DownloadIcons.tsx)fill-foregroundTailwind class for dark/light mode adaptationuseUserAgentDatahook (17 tests covering OS detection, browser detection, and SSR handling)Visual Demo (For contributors especially)
Note: Visual testing was not performed locally. Please verify the dropdown behavior, icon rendering, and theme compatibility.
Mandatory Tasks (DO NOT REMOVE)
How should this be tested?
fill-foreground)Checklist for Human Review
fill-foregroundclassuseUserAgentDatahook - new hook created for this PR, verify regex patterns handle edge casesLink to Devin run: https://app.devin.ai/sessions/ff6f0652f3d84c53866902c820fef8c0
Requested by: @PeerRich