feat(cloud): offer "Open in Comfy Desktop" on cloud web#12808
Closed
deepme987 wants to merge 1 commit into
Closed
Conversation
Shows a slim dismissible banner on cloud.comfy.org (regular browser) that deep-links into the companion Comfy Desktop app via comfy://open?url=... Gated to render only when all hold: cloud build (isCloud), not already embedded in Desktop's cloud webview (window.__comfyDesktop2Remote falsy), and not previously dismissed (localStorage).
Contributor
📝 WalkthroughWalkthroughThis PR adds a banner prompt that encourages cloud users to open the application in Comfy Desktop via a deep link. The feature includes conditional visibility (cloud builds only, not embedded), dismissal persistence, a localized UI component, and integration into the main GraphView. ChangesOpen in Desktop Banner
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Suggested reviewers
Poem
Important Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional. ❌ Failed checks (1 inconclusive)
✅ Passed checks (6 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
🎨 Storybook: ✅ Built — View Storybook |
🎭 Playwright: ✅ 1666 passed, 0 failed · 3 flaky📊 Browser Reports
|
Contributor
Author
Companion PRs
This PR produces the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/platform/cloud/desktop/OpenInDesktopBanner.vue`:
- Around line 2-38: The banner is a single-row flex that can overflow on narrow
viewports; update the root container in OpenInDesktopBanner.vue to allow
wrapping and a stacked layout on small screens (e.g., change the root div
classes to include "flex-col sm:flex-row flex-wrap" while keeping items-center
and justify-center), and add "flex-shrink-0" to the primary action button and
the download link (DESKTOP_DOWNLOAD_URL) so they don't get truncated; ensure the
message span can wrap (remove any hard truncation) so the message, buttons
(openInDesktop, dismiss) and link reflow vertically on narrow viewports.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 3ec79f30-1998-43f2-b39e-ea34a4ba2a28
📒 Files selected for processing (5)
src/locales/en/main.jsonsrc/platform/cloud/desktop/OpenInDesktopBanner.vuesrc/platform/cloud/desktop/useOpenInDesktopBanner.test.tssrc/platform/cloud/desktop/useOpenInDesktopBanner.tssrc/views/GraphView.vue
Comment on lines
+2
to
+38
| <div | ||
| v-if="visible" | ||
| class="fixed inset-x-0 top-0 z-1100 flex items-center justify-center gap-3 bg-secondary-background px-4 py-2 text-base-foreground shadow-sm" | ||
| role="region" | ||
| :aria-label="t('openInDesktop.action')" | ||
| > | ||
| <i | ||
| class="icon-[lucide--monitor] size-4 text-text-secondary" | ||
| aria-hidden="true" | ||
| /> | ||
| <span class="font-inter text-[12px] leading-normal"> | ||
| {{ t('openInDesktop.message') }} | ||
| </span> | ||
| <button | ||
| type="button" | ||
| class="rounded-md bg-primary-background px-3 py-1 font-inter text-[12px] font-medium text-base-foreground transition-colors hover:bg-primary-background-hover" | ||
| @click="openInDesktop" | ||
| > | ||
| {{ t('openInDesktop.action') }} | ||
| </button> | ||
| <a | ||
| :href="DESKTOP_DOWNLOAD_URL" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| class="font-inter text-[12px] text-text-secondary underline-offset-2 hover:underline" | ||
| > | ||
| {{ t('openInDesktop.getApp') }} | ||
| </a> | ||
| <button | ||
| type="button" | ||
| class="ml-1 flex size-6 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-secondary-background-hover" | ||
| :aria-label="t('openInDesktop.dismiss')" | ||
| @click="dismiss" | ||
| > | ||
| <i class="icon-[lucide--x] size-4" aria-hidden="true" /> | ||
| </button> | ||
| </div> |
Contributor
There was a problem hiding this comment.
Add a wrapping fallback for narrow viewports.
This banner is forced into one horizontal flex row, so the message and actions can overflow or get clipped when the viewport is narrower than expected. A small wrap/stacking fallback would make the new top banner safer.
♻️ Suggested fix
- class="fixed inset-x-0 top-0 z-1100 flex items-center justify-center gap-3 bg-secondary-background px-4 py-2 text-base-foreground shadow-sm"
+ class="fixed inset-x-0 top-0 z-1100 flex flex-wrap items-center justify-center gap-3 bg-secondary-background px-4 py-2 text-base-foreground shadow-sm"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div | |
| v-if="visible" | |
| class="fixed inset-x-0 top-0 z-1100 flex items-center justify-center gap-3 bg-secondary-background px-4 py-2 text-base-foreground shadow-sm" | |
| role="region" | |
| :aria-label="t('openInDesktop.action')" | |
| > | |
| <i | |
| class="icon-[lucide--monitor] size-4 text-text-secondary" | |
| aria-hidden="true" | |
| /> | |
| <span class="font-inter text-[12px] leading-normal"> | |
| {{ t('openInDesktop.message') }} | |
| </span> | |
| <button | |
| type="button" | |
| class="rounded-md bg-primary-background px-3 py-1 font-inter text-[12px] font-medium text-base-foreground transition-colors hover:bg-primary-background-hover" | |
| @click="openInDesktop" | |
| > | |
| {{ t('openInDesktop.action') }} | |
| </button> | |
| <a | |
| :href="DESKTOP_DOWNLOAD_URL" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| class="font-inter text-[12px] text-text-secondary underline-offset-2 hover:underline" | |
| > | |
| {{ t('openInDesktop.getApp') }} | |
| </a> | |
| <button | |
| type="button" | |
| class="ml-1 flex size-6 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-secondary-background-hover" | |
| :aria-label="t('openInDesktop.dismiss')" | |
| @click="dismiss" | |
| > | |
| <i class="icon-[lucide--x] size-4" aria-hidden="true" /> | |
| </button> | |
| </div> | |
| <div | |
| v-if="visible" | |
| class="fixed inset-x-0 top-0 z-1100 flex flex-wrap items-center justify-center gap-3 bg-secondary-background px-4 py-2 text-base-foreground shadow-sm" | |
| role="region" | |
| :aria-label="t('openInDesktop.action')" | |
| > | |
| <i | |
| class="icon-[lucide--monitor] size-4 text-text-secondary" | |
| aria-hidden="true" | |
| /> | |
| <span class="font-inter text-[12px] leading-normal"> | |
| {{ t('openInDesktop.message') }} | |
| </span> | |
| <button | |
| type="button" | |
| class="rounded-md bg-primary-background px-3 py-1 font-inter text-[12px] font-medium text-base-foreground transition-colors hover:bg-primary-background-hover" | |
| `@click`="openInDesktop" | |
| > | |
| {{ t('openInDesktop.action') }} | |
| </button> | |
| <a | |
| :href="DESKTOP_DOWNLOAD_URL" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| class="font-inter text-[12px] text-text-secondary underline-offset-2 hover:underline" | |
| > | |
| {{ t('openInDesktop.getApp') }} | |
| </a> | |
| <button | |
| type="button" | |
| class="ml-1 flex size-6 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-secondary-background-hover" | |
| :aria-label="t('openInDesktop.dismiss')" | |
| `@click`="dismiss" | |
| > | |
| <i class="icon-[lucide--x] size-4" aria-hidden="true" /> | |
| </button> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/platform/cloud/desktop/OpenInDesktopBanner.vue` around lines 2 - 38, The
banner is a single-row flex that can overflow on narrow viewports; update the
root container in OpenInDesktopBanner.vue to allow wrapping and a stacked layout
on small screens (e.g., change the root div classes to include "flex-col
sm:flex-row flex-wrap" while keeping items-center and justify-center), and add
"flex-shrink-0" to the primary action button and the download link
(DESKTOP_DOWNLOAD_URL) so they don't get truncated; ensure the message span can
wrap (remove any hard truncation) so the message, buttons (openInDesktop,
dismiss) and link reflow vertically on narrow viewports.
Contributor
Author
|
closing - UX is terrible to work around. |
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
WIP PR: Needs product / UIUX decision
Summary
Adds a slim, dismissible "Open in Comfy Desktop" banner on cloud.comfy.org when viewed in a regular browser, deep-linking into the companion Comfy Desktop app.
Changes
What: New cloud-only banner (
OpenInDesktopBanner.vue) mounted in the app shell (GraphView.vue) alongside the other toast/notification controllers. AuseOpenInDesktopBannercomposable owns the show/hide gating, deep-link firing, and dismissal persistence; the component stays thin. The CTA fires:Comfy Desktop registers the
comfy://scheme and navigates its Cloud window to that URL. If the app is not installed the link silently no-ops, so the banner stays dismissible and includes a "Get the app" link to https://www.comfy.org/download. Companion to the Comfy-Desktop PR that handles thecomfy://openscheme.Review Focus
Banner renders only when all three gates hold:
isCloudcompile-time distribution flag (src/platform/distribution/types.ts). Never renders otherwise.window.__comfyDesktop2Remoteis truthy (the desktop app injects this into its cloud webview), so it never shows inside the app itself.localStorageundercomfy.openInDesktop.dismissed.Unit tests cover all three gates, the encoded deep-link contract, and dismissal persistence.
Screenshots (if applicable)