connections: mobile tune-up + unified Add menu, support chat in account menu#1794
Open
karinakharchenko wants to merge 5 commits into
Open
connections: mobile tune-up + unified Add menu, support chat in account menu#1794karinakharchenko wants to merge 5 commits into
karinakharchenko wants to merge 5 commits into
Conversation
… cards
Mobile-first refresh of the connections-list landing:
- Shrink the page heading and the empty-state H1 ("Add your first
connection" / demo-panels titles) down to ~20–22px so they don't dwarf
the rest of the screen, with proportional line-height + margin.
- Rename the empty-state CTA copy from "Create your first connection"
to "Add your first connection".
- Hosted-by-Rocketadmin card stays a single horizontal row on mobile:
smaller 30px icon-box (rocket properly centered), 13px title and
11.5px subtitle, blue "Quickstart" / "Upgrade" badge replaced with a
`chevron_right` icon in the accent color.
- "Connect your own" DB tiles change from square stacked cards to
horizontal rows on every breakpoint (icon left, name + sublabel
right), grid collapses to one column ≤ 600px.
- Existing connection cards drop the full-width dark banner: the DB
logo becomes a 48px primary-tinted square on the left, name and DB
type stack to its right, and on mobile shrinks further to a 30px icon
row with the Edit-schema affordance hidden.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Revert the previous commit's desktop tweaks to connection cards and "Connect your own" DB tiles — those should stay exactly as they were on desktop and only switch to the icon-left + text-right compact row layout on screens ≤ 600px. Also clean up the accidentally tracked /.yarn/cache artifacts and add them to .gitignore so future installs don't sweep them back in. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Switch the demo-panel cards from a fixed 3-column grid to 1 / 2 / 3 columns across mobile / tablet (601–1024px) / desktop, with each cell stretching to the row's tallest card. minmax(0, 1fr) and an ellipsis on the title prevent long names from pushing siblings around, so the cards stop visually jumping on intermediate widths. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…nt menu
On the connections list, fold the standalone "Create hosted PostgreSQL"
CTA into a single primary "Add connection" button. When clicked it opens
a polished menu (rounded panel, soft shadow, ~20px above the trigger)
with two rich rows: "Connect your own" (cable icon) and "Create hosted
PostgreSQL" (cloud icon), each with a short subtitle. The "Upgrade to
host more" variant takes the second slot once the hosting limit is hit.
Intercom: hide the default floating launcher (hide_default_launcher in
boot settings) and surface a "Chat with support" entry inside the
account dropdown (above "Help center") that triggers
window.Intercom('show').
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
📝 WalkthroughWalkthroughAdds a "Chat with support" Intercom trigger, hides Intercom's default launcher, converts the Add Connection FAB into a Material menu with conditional entries and chevrons, applies responsive CSS across connection views, and updates .gitignore to ignore Yarn Berry cache/state files. ChangesConnections UI and Support Improvements
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 `@frontend/src/app/app.component.ts`:
- Around line 347-351: The openSupportChat function should declare an explicit
return type (void) and wrap the external call to window.Intercom('show') in a
try/catch to surface initialization errors; update the openSupportChat method to
check for window and window.Intercom, call Intercom inside a try block and
handle/log any thrown error in the catch (e.g., via console.error or the app
logger) so failures don't fail silently while preserving the original behavior.
In
`@frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css`:
- Around line 121-125: The CSS rule targeting ".demoCard__info strong" uses
text-overflow: ellipsis but strong is inline by default so truncation won't work
reliably; change the display of the selector (e.g., set display: inline-block or
block) and ensure a width or max-width is applied to the ".demoCard__info
strong" rule so text-overflow can take effect, keeping the existing overflow and
white-space properties intact.
In
`@frontend/src/app/components/connections-list/own-connections/own-connections.component.css`:
- Line 201: Replace the deprecated CSS property "grid-gap" with the modern "gap"
in own-connections.component.css: locate the rule using "grid-gap: 8px;" (in
own-connections.component.css) and change it to "gap: 8px;"; after updating, run
stylelint/CI to confirm the standard-scss rule no longer flags the declaration.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0d24ccdd-1e86-4bda-b657-56b5a878e33f
📒 Files selected for processing (8)
.gitignorefrontend/src/app/app.component.htmlfrontend/src/app/app.component.tsfrontend/src/app/components/connections-list/connections-list.component.cssfrontend/src/app/components/connections-list/demo-connections/demo-connections.component.cssfrontend/src/app/components/connections-list/own-connections/own-connections.component.cssfrontend/src/app/components/connections-list/own-connections/own-connections.component.htmlfrontend/src/app/components/connections-list/own-connections/own-connections.component.ts
Comment on lines
+347
to
+351
| openSupportChat() { | ||
| if (typeof window.Intercom !== 'undefined') { | ||
| window.Intercom('show'); | ||
| } | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, verify the file exists and read the method in question
if [ -f "frontend/src/app/app.component.ts" ]; then
echo "File exists. Reading lines 345-355:"
sed -n '345,355p' "frontend/src/app/app.component.ts" | cat -n
else
echo "File not found at expected path"
# Search for the file
find . -name "app.component.ts" -type f 2>/dev/null | head -5
fiRepository: rocket-admin/rocketadmin
Length of output: 384
🏁 Script executed:
# Search for other uses of Intercom in the codebase to understand the pattern
rg "Intercom" --type ts --type tsx -B 2 -A 2Repository: rocket-admin/rocketadmin
Length of output: 96
🏁 Script executed:
# Check the full method to understand context better
sed -n '340,360p' "frontend/src/app/app.component.ts" | cat -nRepository: rocket-admin/rocketadmin
Length of output: 718
🏁 Script executed:
# Check if there are other methods in the same class to understand pattern consistency
rg "^\s*[a-zA-Z_].*\(\)" "frontend/src/app/app.component.ts" -A 1 | head -20Repository: rocket-admin/rocketadmin
Length of output: 667
🏁 Script executed:
# Check method signatures in the app.component.ts file to understand the pattern
rg "^\s*(private|protected|public)?\s*[a-zA-Z_][a-zA-Z0-9_]*\s*\(" "frontend/src/app/app.component.ts" -A 0 | head -30Repository: rocket-admin/rocketadmin
Length of output: 930
Add explicit return type and error handling to openSupportChat()
The method lacks an explicit return type annotation and the external window.Intercom('show') call is not wrapped in error handling. The Intercom widget may not be fully initialized, causing the call to fail silently.
Proposed fix
-openSupportChat() {
- if (typeof window.Intercom !== 'undefined') {
- window.Intercom('show');
- }
-}
+openSupportChat(): void {
+ try {
+ if (typeof window.Intercom !== 'undefined') {
+ window.Intercom('show');
+ }
+ } catch (error) {
+ console.error('Failed to open Intercom chat', error);
+ }
+}Per coding guidelines: "Always add type annotations to function parameters and return types in TypeScript" and "Ensure all error handling is explicit - use try/catch blocks appropriately".
🤖 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 `@frontend/src/app/app.component.ts` around lines 347 - 351, The
openSupportChat function should declare an explicit return type (void) and wrap
the external call to window.Intercom('show') in a try/catch to surface
initialization errors; update the openSupportChat method to check for window and
window.Intercom, call Intercom inside a try block and handle/log any thrown
error in the catch (e.g., via console.error or the app logger) so failures don't
fail silently while preserving the original behavior.
Comment on lines
+121
to
+125
| .demoCard__info strong { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } |
There was a problem hiding this comment.
text-overflow: ellipsis may not apply on inline strong
Line 121-125 likely won’t consistently truncate because strong is inline by default. Make it block-level so the ellipsis behavior is reliable.
Suggested fix
.demoCard__info strong {
+ display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}📝 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
| .demoCard__info strong { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .demoCard__info strong { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } |
🤖 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
`@frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css`
around lines 121 - 125, The CSS rule targeting ".demoCard__info strong" uses
text-overflow: ellipsis but strong is inline by default so truncation won't work
reliably; change the display of the selector (e.g., set display: inline-block or
block) and ensure a width or max-width is applied to the ".demoCard__info
strong" rule so text-overflow can take effect, keeping the existing overflow and
white-space properties intact.
| .dbGrid { | ||
| width: 100%; | ||
| grid-template-columns: 1fr; | ||
| grid-gap: 8px; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify deprecated grid-gap usage and lint rule presence
rg -n '\bgrid-gap\b'
fd -HI '.stylelintrc*' | xargs -I{} sh -c 'echo "--- {}"; cat "{}" | rg -n "property-no-deprecated|declaration-block-no-duplicate-properties"'Repository: rocket-admin/rocketadmin
Length of output: 1505
🏁 Script executed:
#!/bin/bash
# Check exact content around line 201
echo "=== Content around line 201 in own-connections.component.css ==="
sed -n '195,210p' frontend/src/app/components/connections-list/own-connections/own-connections.component.css
# Check stylelint configuration
echo ""
echo "=== Stylelint configuration ==="
if [ -f .stylelintrc.json ]; then
cat .stylelintrc.json | head -50
fi
# Check if other grid-gap instances exist in this file
echo ""
echo "=== All grid-gap instances in this file ==="
rg -n 'grid-gap' frontend/src/app/components/connections-list/own-connections/own-connections.component.cssRepository: rocket-admin/rocketadmin
Length of output: 1831
Replace deprecated grid-gap with gap.
Line 201 uses the deprecated grid-gap property, which stylelint enforces as an error via the standard-scss configuration. Modern CSS Grid uses gap instead.
Suggested fix
`@media` (width <= 600px) {
.dbGrid {
width: 100%;
grid-template-columns: 1fr;
- grid-gap: 8px;
+ gap: 8px;
}
}📝 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
| grid-gap: 8px; | |
| gap: 8px; |
🧰 Tools
🪛 Stylelint (17.11.1)
[error] 201-201: Expected "grid-gap" to be "gap" (property-no-deprecated)
(property-no-deprecated)
🤖 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
`@frontend/src/app/components/connections-list/own-connections/own-connections.component.css`
at line 201, Replace the deprecated CSS property "grid-gap" with the modern
"gap" in own-connections.component.css: locate the rule using "grid-gap: 8px;"
(in own-connections.component.css) and change it to "gap: 8px;"; after updating,
run stylelint/CI to confirm the standard-scss rule no longer flags the
declaration.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
2 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.
Summary
Mobile pass on the connections list
Unified "Add connection" menu
Support chat in account menu
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style
Copy