feat: add custom background images for user profiles - #645
Conversation
|
@Dev1822 is attempting to deploy a commit to the vishnukothakapu's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Review limit reached
Next review available in: 47 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThe change adds optional persisted profile background images. The dashboard can save or clear a background URL through a protected API route. Public profiles retrieve and render the configured image with overlay and blur layers. ChangesProfile background image
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels: Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant DashboardUser
participant AppearanceSection
participant BackgroundRoute
participant PrismaUser
DashboardUser->>AppearanceSection: Enter or clear background URL
AppearanceSection->>BackgroundRoute: PATCH backgroundImage with CSRF token
BackgroundRoute->>PrismaUser: Update user backgroundImage
PrismaUser-->>BackgroundRoute: Return updated value
BackgroundRoute-->>AppearanceSection: Return saved backgroundImage
AppearanceSection-->>DashboardUser: Show success or error toast
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 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: 4
🤖 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 `@app/api/user/background/route.ts`:
- Around line 20-25: After the successful Prisma update in the background-image
route, invalidate the affected public-profile cache entry used by
resolveUserByUsername so subsequent profile reads return updated backgroundImage
data; preserve the existing response flow and avoid leaving stale cached
profiles.
In `@app/dashboard/AppearanceSection.tsx`:
- Around line 207-223: Update the background URL input in the Background Image
Section to provide an accessible name, preferably by adding a visible label
associated with the input; otherwise add aria-label="Background image URL".
Preserve the existing input behavior and styling.
In `@prisma/schema.prisma`:
- Line 20: Add migration coverage for the nullable backgroundImage field on the
User, ProfileDraft, and ProfileVersion Prisma models. Create and apply a
migration that adds the corresponding columns before relying on the server
code’s User.backgroundImage reads and writes, preserving the existing schema
definitions.
- Line 218: Update upsertProfileDraft, publishProfileDraft, and
rollbackProfileVersion to include backgroundImage in ProfileSnapshot data and in
their user.update/profileVersion.create payloads, using the corresponding
profileDraft or profileVersion value so draft changes publish and rollback
restores the correct image.
🪄 Autofix
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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 6bef5855-b1a6-4500-9d13-a6f091e8ac3c
📒 Files selected for processing (7)
app/[username]/page.tsxapp/api/user/background/route.tsapp/dashboard/AppearanceSection.tsxapp/dashboard/DashboardClient.tsxapp/dashboard/page.tsxlib/userLookup.tsprisma/schema.prisma
| email String @unique | ||
| emailVerified DateTime? | ||
| image String? | ||
| backgroundImage String? |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Schema declarations:"
rg -n 'backgroundImage' prisma/schema.prisma
echo "Migration references:"
rg -n 'backgroundImage' prisma/migrations 2>/dev/null || trueRepository: vishnukothakapu/linkid
Length of output: 292
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Repository files relevant to Prisma/migrations:"
git ls-files | rg '(^|/)prisma(/|$)|schema\.prisma|migration\.)|migrations' | sed -n '1,200p'
echo
echo "schema.prisma around declarations:"
sed -n '1,40p;200,245p' prisma/schema.prisma
echo
echo "Changed files summary:"
git diff --statRepository: vishnukothakapu/linkid
Length of output: 381
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Repository files relevant to Prisma/migrations:"
git ls-files | rg '(^|/)prisma(/|$)|schema\.prisma|migration|index\.d\.prisma|migrations' | sed -n '1,220p' || true
echo
echo "schema.prisma around backgroundImage declarations:"
sed -n '1,40p;200,245p' prisma/schema.prisma
echo
echo "Changed files summary:"
git diff --statRepository: vishnukothakapu/linkid
Length of output: 3722
Add migration coverage for backgroundImage.
backgroundImage exists on User, ProfileDraft, and ProfileVersion, but no migration SQL adds these columns. Add and apply a migration that introduces the missing nullable columns before the new server code makes User.backgroundImage readable/writable.
🤖 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 `@prisma/schema.prisma` at line 20, Add migration coverage for the nullable
backgroundImage field on the User, ProfileDraft, and ProfileVersion Prisma
models. Create and apply a migration that adds the corresponding columns before
relying on the server code’s User.backgroundImage reads and writes, preserving
the existing schema definitions.
|
Hi @Dev1822 , Could you please address this CodeRabbit suggestion? We need to add a Prisma migration for the newly introduced backgroundImage field on User, ProfileDraft, and ProfileVersion so the database schema stays in sync with schema.prisma. Thanks! |
|
@vishnukothakapu I have already resolved that in the last commit. Also this pr is done for GSSoC and ELUSOC |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
2 participants
Description
Closes #644
This PR introduces the highly requested Custom Background Images feature. It takes customization a step further by allowing users to provide an external image URL to serve as a full-screen wallpaper for their public profile. This enables creative users to use photography, digital art, or other highly customized visuals instead of flat colors or standard gradient themes.
Changes Made
prisma/schema.prisma): Added thebackgroundImage(String, optional) field to theUser,ProfileDraft, andProfileVersionmodels.app/api/user/background/route.ts): Added a new PATCH endpoint at/api/user/backgroundto securely save the provided background image URL to the database.app/dashboard/AppearanceSection.tsx): Expanded the "Appearance" tab with a new input field and save button allowing users to define their custom background image URL.app/[username]/page.tsx): ThebackgroundImageis now passed to the public route. When present, the image covers the entire screen behind the user's links using a fixed background container. A slight dark/blur CSS backdrop filter (bg-black/40 backdrop-blur-[2px]) sits directly behind the content to ensure text and buttons remain perfectly legible regardless of the image's brightness.Acceptance Criteria Met
background-size: cover).How to Test
npm run dev.Summary by CodeRabbit