feature-notification: animated Edit Schema with AI popup#1782
Open
karinakharchenko wants to merge 6 commits into
Open
feature-notification: animated Edit Schema with AI popup#1782karinakharchenko wants to merge 6 commits into
karinakharchenko wants to merge 6 commits into
Conversation
Replace the saved-filters GIF with an inline animated SVG that shows the AI prompt bubble, three tables appearing in sequence, animated relationship arrows, and pulsing sparkles. Updates the feature ID so users see the new notification, and refreshes the title/description for the schema editor. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…one scene Combine the two acts into a single 5.2s scene: a slim connection card (my_database / PostgreSQL) appears at the top, the cursor moves to the pulsing schema icon, and a wavy three-table diagram unfolds below with curved relationship lines. Reshape the schema glyph to match the actual Material "schema" icon and rotate it 90° CCW. Update the copy to mention creating *and* editing tables. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe PR switches the feature notification id to "edit-schema", replaces the notification template with a new SVG-based illustration titled "Design schemas with AI", and adds a multi-act CSS animation system with reduced-motion support. ChangesFeature Notification Update
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 6✅ Passed checks (6 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 |
|
|
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Updates the in-app feature notification to announce the new AI schema editing feature, replacing the previous “Fast Filters” asset with an animated inline SVG and switching the active feature-notification identifier.
Changes:
- Replace the static GIF with an inline animated SVG illustration for the notification.
- Update notification copy to “Create & Edit Schema with AI”.
- Switch the active
currentFeatureNotificationIdto the new feature.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| frontend/src/app/components/feature-notification/feature-notification.component.html | Replaces the old image + copy with a new inline SVG animation and updated messaging. |
| frontend/src/app/components/feature-notification/feature-notification.component.css | Adds styling and keyframe animations for the new inline SVG, including reduced-motion and dark-mode tweaks. |
| frontend/src/app/app.component.ts | Changes the feature notification ID to display the new notification by default. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .fn-bg { fill: #2a2540; } | ||
| .fn-table rect:first-child, | ||
| .fn-connection-card rect:first-child { fill: #1f1e2c; stroke: #3a3b58; } | ||
| .fn-table text { fill: #d8dcff; } |
| <img class="feature-notification__image" src="assets/feture-images/saved-filters.gif" alt="Feature Notification Icon"> | ||
| <h1 class="feature-notification__title">New: Fast Filters</h1> | ||
| <div class="feature-notification__animation" aria-hidden="true"> | ||
| <svg viewBox="0 0 360 180" xmlns="http://www.w3.org/2000/svg" class="fn-svg"> |
Comment on lines
+3
to
+8
| <div class="feature-notification__animation" aria-hidden="true"> | ||
| <svg viewBox="0 0 360 180" xmlns="http://www.w3.org/2000/svg" class="fn-svg"> | ||
| <defs> | ||
| <pattern id="fn-grid" x="0" y="0" width="18" height="18" patternUnits="userSpaceOnUse"> | ||
| <circle cx="1" cy="1" r="1" fill="currentColor" opacity="0.12"></circle> | ||
| </pattern> |
Update the popup animation to match the new connections-list design: the slim connection card keeps its db icon + name on the left, and the top-right corner (where the schema icon button used to sit) now shows a pseudo-button "✨ Edit schema →" with pulse rings, a fade-in trailing arrow, and the cursor traveling to and clicking it. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… story
Replace the single-card animation with a three-act 10s sequence:
Act 1 — empty area + a centered black "+ Create" pill, cursor moves
in, ripple-clicks it.
Act 2 — a chat surface fades in titled "New database"; the prompt
"Bookings for climbing gym" types out character-by-character with a
blinking caret, the send button pulses, and the title swaps to
"Bookings for climbing gym" when typing finishes.
Act 3 — the AI sparkle avatar lifts above the canvas, three larger
tables (members / bookings / sessions, lavender / blue / pink)
stagger in with right-aligned PK and FK badges, two curved
relationship lines draw via stroke-dashoffset, and a green
"Schema ready ✓" lands at the bottom.
Refreshes the popup copy to "Design schemas with AI" and rewrites the
description around the new narrative.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
frontend/src/app/components/feature-notification/feature-notification.component.css (2)
58-65: 💤 Low valueComment states 7s cycle but animations use 10s.
The comment documents a 7-second cycle, but all
animationdeclarations use10sduration. Update the comment to match the actual implementation./* ──────────────────────────────────────────── */ /* Three-act animation */ -/* Cycle: 7s */ -/* Act 1 (0–1.5s / 0–21%): empty + Add db */ -/* Act 2 (1.5–3.5s / 21–50%): chat + typing */ -/* Act 3 (3.5–5.5s / 50–79%): AI + diagram */ -/* Hold (5.5–7s / 79–100%): linger & loop */ +/* Cycle: 10s */ +/* Act 1 (0–2.2s / 0–22%): empty + Add db */ +/* Act 2 (2.2–5s / 22–50%): chat + typing */ +/* Act 3 (5–9.3s / 50–93%): AI + diagram */ +/* Hold (9.3–10s / 93–100%): linger & loop */ /* ──────────────────────────────────────────── */🤖 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/feature-notification/feature-notification.component.css` around lines 58 - 65, The block comment labeled "Three-act animation" incorrectly documents a 7s cycle while the animations use 10s; update that comment to state a 10s cycle and adjust the per-act timing labels (Act 1/Act 2/Act 3/Hold percentages and seconds) to reflect a 10s total so the comment matches the actual animation durations referenced by the CSS animation declarations in this file and the "Three-act animation" header.
67-83: 💤 Low valueUnused CSS selectors:
.fn-placeholderand.fn-user-message.These classes have animation rules defined but no corresponding elements exist in the HTML template. Consider removing if they're leftover from an earlier iteration.
Also applies to: 188-190
🤖 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/feature-notification/feature-notification.component.css` around lines 67 - 83, Remove the unused CSS selectors .fn-placeholder and .fn-user-message (and any duplicate rule blocks for those same selectors elsewhere in this stylesheet) if no template elements use them; alternatively, if they are intended to remain, add the corresponding elements/markup in the component template that reference .fn-placeholder and .fn-user-message so the animation rules are applied. Update the selector lists in feature-notification.component.css (e.g., the large group that contains .fn-placeholder, .fn-user-message, .fn-add-button, etc.) to omit those two classes when removing them.
🤖 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/components/feature-notification/feature-notification.component.css`:
- Around line 318-344: The reduced-motion rule currently forces .fn-input to be
visible (opacity:1) causing it to overlap the Act 3 content; update the media
query so the Act 2 input is hidden in reduced-motion—either remove .fn-input
from the visible selector list and add it to the hidden selectors (e.g., include
.fn-input with display:none !important or the same hidden set as
.fn-chat-title--initial/.fn-act--1), or hide the whole Act 2 group by adding its
container (e.g., .fn-act--2) to the hidden selectors inside the `@media`
(prefers-reduced-motion: reduce) block so the final schema-ready frame is shown
without the typing input overlapping.
---
Nitpick comments:
In
`@frontend/src/app/components/feature-notification/feature-notification.component.css`:
- Around line 58-65: The block comment labeled "Three-act animation" incorrectly
documents a 7s cycle while the animations use 10s; update that comment to state
a 10s cycle and adjust the per-act timing labels (Act 1/Act 2/Act 3/Hold
percentages and seconds) to reflect a 10s total so the comment matches the
actual animation durations referenced by the CSS animation declarations in this
file and the "Three-act animation" header.
- Around line 67-83: Remove the unused CSS selectors .fn-placeholder and
.fn-user-message (and any duplicate rule blocks for those same selectors
elsewhere in this stylesheet) if no template elements use them; alternatively,
if they are intended to remain, add the corresponding elements/markup in the
component template that reference .fn-placeholder and .fn-user-message so the
animation rules are applied. Update the selector lists in
feature-notification.component.css (e.g., the large group that contains
.fn-placeholder, .fn-user-message, .fn-add-button, etc.) to omit those two
classes when removing them.
🪄 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: 5feb8304-72ae-4f79-9e88-b0c7cab92914
📒 Files selected for processing (2)
frontend/src/app/components/feature-notification/feature-notification.component.cssfrontend/src/app/components/feature-notification/feature-notification.component.html
Comment on lines
+318
to
+344
| @media (prefers-reduced-motion: reduce) { | ||
| .fn-placeholder, | ||
| .fn-add-button, | ||
| .fn-pointer-1, | ||
| .fn-click-ripple, | ||
| .fn-chat-title--final, | ||
| .fn-chat-divider, | ||
| .fn-input, | ||
| .fn-caret, | ||
| .fn-send-button, | ||
| .fn-user-message, | ||
| .fn-ai-avatar, | ||
| .fn-table, | ||
| .fn-link, | ||
| .fn-schema-ready { | ||
| animation: none !important; | ||
| opacity: 1 !important; | ||
| transform: none !important; | ||
| stroke-dashoffset: 0 !important; | ||
| } | ||
| .fn-typing-clip { | ||
| animation: none !important; | ||
| width: 180px !important; | ||
| } | ||
| .fn-chat-title--initial { display: none !important; } | ||
| .fn-act--1 { display: none !important; } | ||
| } |
There was a problem hiding this comment.
Reduced-motion shows Act 2 input field overlapping Act 3 content.
With prefers-reduced-motion: reduce, .fn-input is set to opacity: 1 (line 325), but the input field's y-position (136–166) overlaps with the "Schema ready" text (y=162). Since the final frame should show the completed schema state, the input field from the typing phase should be hidden.
🛠️ Proposed fix
Either remove .fn-input from the visible list and add it to the hidden elements, or hide the entire Act 2 group:
`@media` (prefers-reduced-motion: reduce) {
.fn-placeholder,
.fn-add-button,
.fn-pointer-1,
.fn-click-ripple,
.fn-chat-title--final,
.fn-chat-divider,
- .fn-input,
- .fn-caret,
- .fn-send-button,
- .fn-user-message,
.fn-ai-avatar,
.fn-table,
.fn-link,
.fn-schema-ready {
animation: none !important;
opacity: 1 !important;
transform: none !important;
stroke-dashoffset: 0 !important;
}
+ .fn-input,
+ .fn-caret,
+ .fn-send-button {
+ display: none !important;
+ }
.fn-typing-clip {
animation: none !important;
width: 180px !important;
}
.fn-chat-title--initial { display: none !important; }
.fn-act--1 { display: none !important; }
}🤖 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/feature-notification/feature-notification.component.css`
around lines 318 - 344, The reduced-motion rule currently forces .fn-input to be
visible (opacity:1) causing it to overlap the Act 3 content; update the media
query so the Act 2 input is hidden in reduced-motion—either remove .fn-input
from the visible selector list and add it to the hidden selectors (e.g., include
.fn-input with display:none !important or the same hidden set as
.fn-chat-title--initial/.fn-act--1), or hide the whole Act 2 group by adding its
container (e.g., .fn-act--2) to the hidden selectors inside the `@media`
(prefers-reduced-motion: reduce) block so the final schema-ready frame is shown
without the typing input overlapping.
Enlarge the typed prompt to 16px so "Bookings for climbing gym" stretches almost across the full input row and the caret follows it; resize the typing clip and caret-track keyframes to match. Reword the popup description to spell out the dual use: "Generate a new database from scratch or edit your existing one — just describe what you need." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/app/components/feature-notification/feature-notification.component.html (1)
24-63:⚠️ Potential issue | 🟠 Major | 🏗️ Heavy liftThis still implements the older notification story, not the new Edit Schema experience.
The PR objective calls for the connection-card → pulsing
schemaicon → schema diagram sequence, plus the titleNew: Create & Edit Schema with AI. This template still renders the+ Create/typed-prompt flow and theDesign schemas with AI/databasecopy, so the popup won't match the announced experience or test plan.Also applies to: 75-120
🤖 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/feature-notification/feature-notification.component.html` around lines 24 - 63, The template currently renders the old "+ Create"/typed-prompt flow (see elements with classes fn-act--1, fn-act--2, text "+ Create", "Bookings for climbing gym" and chat-related nodes); replace those acts with the new Edit Schema experience: implement the connection-card -> pulsing schema icon -> schema diagram sequence, change the header/title text to "New: Create & Edit Schema with AI" (update any occurrences of "Design schemas with AI" / "New database" / "Bookings for climbing gym"), and remove/replace the fn-input/fn-chat elements and fn-send-button/fn-caret so the popup matches the new flow; apply the same changes to the other occurrence block around lines indicated (the second instance at ~75-120) so both templates render the new schema experience.
🤖 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.
Outside diff comments:
In
`@frontend/src/app/components/feature-notification/feature-notification.component.html`:
- Around line 24-63: The template currently renders the old "+
Create"/typed-prompt flow (see elements with classes fn-act--1, fn-act--2, text
"+ Create", "Bookings for climbing gym" and chat-related nodes); replace those
acts with the new Edit Schema experience: implement the connection-card ->
pulsing schema icon -> schema diagram sequence, change the header/title text to
"New: Create & Edit Schema with AI" (update any occurrences of "Design schemas
with AI" / "New database" / "Bookings for climbing gym"), and remove/replace the
fn-input/fn-chat elements and fn-send-button/fn-caret so the popup matches the
new flow; apply the same changes to the other occurrence block around lines
indicated (the second instance at ~75-120) so both templates render the new
schema experience.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: eb414b21-a43d-4d8f-b95c-15f5789fb4a8
📒 Files selected for processing (2)
frontend/src/app/components/feature-notification/feature-notification.component.cssfrontend/src/app/components/feature-notification/feature-notification.component.html
On screens up to 640px the popup hugs the bottom of the viewport with 12px gutters, becomes auto-width (capped at 480px for tablets), gains a 14px corner radius and a softer layered shadow so it reads as a proper toast card instead of a tiny corner widget. 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
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
my_database/PostgreSQLlabels) appears, cursor moves to a pulsingschemaicon, then a three-table diagram unfolds below with curved relationship lines and a sparkleTest plan
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style
Bug Fixes