Skip to content

fix: add smooth scroll, focus-visible styles, and skeleton animation#700

Open
saurabhhhcodes wants to merge 3 commits into
knoxiboy:mainfrom
saurabhhhcodes:fix/css-improvements
Open

fix: add smooth scroll, focus-visible styles, and skeleton animation#700
saurabhhhcodes wants to merge 3 commits into
knoxiboy:mainfrom
saurabhhhcodes:fix/css-improvements

Conversation

@saurabhhhcodes

@saurabhhhcodes saurabhhhcodes commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

User description

CSS improvements:\n- Add smooth scroll behavior\n- Add visible focus-visible styles for keyboard accessibility\n- Add skeleton loading animation for async content

Summary by CodeRabbit

Release Notes

  • New Features

    • Added skeleton loading placeholders with a shimmer animation
    • Enabled smooth scrolling for improved navigation
  • Improvements

    • Enhanced keyboard accessibility with clearer visible focus indicators
  • Bug Fixes

    • Improved reliability of the invite-join process by enforcing invite usage limits more safely and preventing over-usage scenarios

CodeAnt-AI Description

Prevent invite link overuse and improve page interaction cues

What Changed

  • Joining a classroom invite now checks the usage limit and adds the member in one step, which prevents multiple people from using the last invite slot at the same time
  • If an invite is already full, expired, or revoked, users now get a clear failure message instead of being allowed through
  • Pages now scroll smoothly, keyboard focus is easier to spot, and loading placeholders use a shimmer effect

Impact

✅ Fewer invite link overuses
✅ Clearer invite limit errors
✅ Easier keyboard navigation

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

Saurabh Kumar Bajpai added 2 commits June 20, 2026 22:27
…iboy#681)

Check and increment of usedCount were non-atomic, allowing concurrent
requests to all pass the limit check. Replaced with a single UPDATE
that atomically increments usedCount WHERE maxUses is NULL or
usedCount < maxUses. Returns 410 if no row matched the guard.
@vercel

vercel Bot commented Jun 23, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the Karan Mani Tripathi 's projects Team on Vercel.

A member of the Team first needs to authorize it.

@codeant-ai

codeant-ai Bot commented Jun 23, 2026

Copy link
Copy Markdown

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

@github-actions github-actions Bot added gssoc'26 GSSoC program issue level:intermediate Intermediate level task type:bug Bug fix labels Jun 23, 2026
@coderabbitai

coderabbitai Bot commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

The PR changes invite joining to use an atomic conditional update for usedCount, and adds global stylesheet rules for smooth scrolling, focus visibility, and skeleton shimmer loading.

Changes

Atomic Invite Usage Limit Enforcement

Layer / File(s) Summary
Conditional atomic usedCount increment in join route
src/app/api/invites/[token]/join/route.ts
Adds or to the drizzle-orm import, replaces the invite capacity pre-check with a conditional update inside the join transaction, returns 410 when no row is updated, and inserts membership only after the update succeeds.

Global CSS UI Enhancements

Layer / File(s) Summary
Smooth scroll, focus ring, and skeleton shimmer styles
chat-system/styles/globals.css
Adds scroll-behavior: smooth on html, a :focus-visible outline rule, a .skeleton shimmer background, and the @keyframes shimmer animation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • knoxiboy/DoubtDesk#686: Adjusts the same invite join route to enforce maxUses with an atomic conditional update.

Suggested reviewers

  • knoxiboy
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the CSS/UI changes, though it omits the invite-join atomic update.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot added merge-conflict PR has merge conflicts that need resolution review-needed labels Jun 23, 2026
@github-actions github-actions Bot requested a review from knoxiboy June 23, 2026 21:24
@github-actions

Copy link
Copy Markdown

@coderabbitai review

@codeant-ai codeant-ai Bot added the size:S This PR changes 10-29 lines, ignoring generated files label Jun 23, 2026
@github-actions github-actions Bot removed the size:S This PR changes 10-29 lines, ignoring generated files label Jun 23, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/app/api/invites/[token]/join/route.ts (1)

81-131: 🗄️ Data Integrity & Integration | 🟠 Major

Fix the race condition in the invite join flow to prevent double-counted usedCount increments.

The unique constraint on (userEmail, classroomId) exists in the schema, but the concurrent race condition remains unresolved. Two simultaneous requests can both pass the membership check, both increment usedCount successfully, and then the second insert will fail due to the unique constraint—resulting in two usedCount increments for a single membership creation and an unhandled error for the second user.

Use onConflictDoNothing() on the insert (lines 127–130) and handle the possibility of insertion failure to provide graceful user feedback instead of a generic error:

const result = await db
  .insert(membershipsTable)
  .values({
    userEmail: email,
    classroomId: inviteData.classroomId,
    role: "student",
  })
  .onConflictDoNothing();

if (!result.rowsAffected) {
  return NextResponse.json({
    success: true,
    alreadyMember: true,
    classroom: { /* ... */ },
  });
}

Alternatively, move the membership check after the usedCount increment within a transaction to ensure atomicity, or use row-level locking to prevent the select and insert from interleaving across concurrent requests.

🤖 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/app/api/invites/`[token]/join/route.ts around lines 81 - 131, The insert
operation on membershipsTable (lines 127-130) does not handle the race condition
where two concurrent requests might both increment usedCount and then fail on
insert. Add onConflictDoNothing() to the db.insert call to gracefully handle
duplicate key violations. Then check the result's rowsAffected property—if it is
zero, the user was already a member (conflict detected), so return the same
success response with alreadyMember set to true that you return when an existing
membership is found. This prevents the unhandled error and double-counted
increments in concurrent scenarios.
🤖 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 `@chat-system/styles/globals.css`:
- Line 82: The `scroll-behavior: smooth` rule on the `html` selector does not
respect user preferences for reduced motion, which is an accessibility issue.
Wrap the `scroll-behavior: smooth` declaration inside a media query with `@media
(prefers-reduced-motion: no-preference)` so that smooth scrolling is only
applied to users who have not indicated a preference for reduced motion. This
ensures the rule respects accessibility settings while still providing smooth
scrolling to users who prefer it.
- Around line 84-85: The newly defined .skeleton CSS class with the shimmer
animation in globals.css is not connected to the actual Skeleton component. The
Skeleton component in src/components/ui/skeleton.tsx uses Tailwind classes
(animate-pulse, rounded-md, bg-primary/10) instead of the .skeleton class.
Update the Skeleton component to apply the .skeleton class name so that the
shimmer animation effect is actually rendered on Skeleton UI elements throughout
the application.

In `@src/app/api/invites/`[token]/join/route.ts:
- Around line 104-131: The current database configuration uses the neon-http
driver which does not support transactions, causing a race condition where the
increment of usedCount in classroomInvitesTable and the insert into
membershipsTable execute as separate statements. Switch the Drizzle driver
configuration in src/configs/db.tsx from neon-http to neon-serverless, then wrap
both the update and insert operations (the classroomInvitesTable update and the
membershipsTable insert) in a single db.transaction() block to ensure atomicity
and prevent concurrent requests from incrementing usedCount without creating a
corresponding membership record.

---

Outside diff comments:
In `@src/app/api/invites/`[token]/join/route.ts:
- Around line 81-131: The insert operation on membershipsTable (lines 127-130)
does not handle the race condition where two concurrent requests might both
increment usedCount and then fail on insert. Add onConflictDoNothing() to the
db.insert call to gracefully handle duplicate key violations. Then check the
result's rowsAffected property—if it is zero, the user was already a member
(conflict detected), so return the same success response with alreadyMember set
to true that you return when an existing membership is found. This prevents the
unhandled error and double-counted increments in concurrent scenarios.
🪄 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: e3312fe0-0c6f-4111-921b-d6767499aa79

📥 Commits

Reviewing files that changed from the base of the PR and between e4dfb94 and df8d4bd.

📒 Files selected for processing (2)
  • chat-system/styles/globals.css
  • src/app/api/invites/[token]/join/route.ts

Comment thread chat-system/styles/globals.css
Comment thread chat-system/styles/globals.css
Comment thread src/app/api/invites/[token]/join/route.ts Outdated
Comment thread chat-system/styles/globals.css
Comment thread chat-system/styles/globals.css
Comment thread src/app/api/invites/[token]/join/route.ts Outdated
Signed-off-by: saurabhhhcodes <157192462+saurabhhhcodes@users.noreply.github.com>
@codeant-ai

codeant-ai Bot commented Jun 29, 2026

Copy link
Copy Markdown

CodeAnt AI is running Incremental review

@codeant-ai

codeant-ai Bot commented Jun 29, 2026

Copy link
Copy Markdown

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

@github-actions github-actions Bot added size/m and removed size/s labels Jun 29, 2026
@codeant-ai codeant-ai Bot added the size:M This PR changes 30-99 lines, ignoring generated files label Jun 29, 2026
@github-actions github-actions Bot removed the size:M This PR changes 30-99 lines, ignoring generated files label Jun 29, 2026
@codeant-ai

codeant-ai Bot commented Jun 29, 2026

Copy link
Copy Markdown

CodeAnt AI Incremental review completed.

@knoxiboy

Copy link
Copy Markdown
Owner

@saurabhhhcodes Resolve merge conflicts and ask for review again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc'26 GSSoC program issue level:intermediate Intermediate level task merge-conflict PR has merge conflicts that need resolution review-needed size/m type:bug Bug fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants