fix: scroll-#371#377
Open
ayushchaudhari562 wants to merge 1 commit into
Open
Conversation
|
@ayushchaudhari562 is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
📝 WalkthroughWalkthroughThis PR updates the API database provider from PostgreSQL to SQLite with supporting build script and type annotation changes, while simultaneously optimizing web UI animations and pricing page styling through targeted canvas rendering and visibility-aware shine border effects. ChangesAPI Database Provider and Build Configuration
Web UI Animation and Styling Optimizations
Possibly Related PRs
Estimated Code Review Effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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}
Contributor
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 `@apps/api/src/prisma.ts`:
- Line 26: Replace all uses of the unsafe any in the Prisma extension callbacks
and map callbacks with proper types: import Prisma types from '`@prisma/client`'
and type the extension callback parameters (replace "{ args, query }: any" in
create/update/upsert/findUnique/findFirst/findMany) using
Prisma.MiddlewareParams (or the specific delegate arg types provided by your
Prisma version) and the Prisma client/query return types instead of any; replace
map callback parameters "account: any" / "user: any" with the generated model
types (import type { Account, User } from '`@prisma/client`') so map callbacks use
Account/User; and change encryptAccountTokens/decryptAccountTokens signatures
from (data: any) => any to explicit input/output types (e.g., (data:
AccountTokens) => EncryptedAccountTokens or a concrete Record shape) and
propagate those types to callers so no downstream any remains. Ensure you import
the required types and update all occurrences of these symbols
(create/update/upsert/findUnique/findFirst/findMany, account, user,
encryptAccountTokens, decryptAccountTokens) accordingly.
In `@apps/web/src/app/`(main)/(landing)/pricing/page.tsx:
- Around line 490-493: The inline radial-gradient with hardcoded rgba values in
the glow overlay div should be extracted into a reusable component or utility
(e.g., GlowOverlay) and the gradient must be implemented using Tailwind
design-token colors instead of literal hex/rgba; replace the style prop on the
element with a class (or component) that references a custom Tailwind
class/variant defined in your tailwind config or global css that composes a
radial-gradient using design tokens (token names from your color palette), then
replace both occurrences (the current div with className "absolute h-[250px]
w-[150%] left-1/2 -translate-x-1/2 -bottom-24 opacity-60 pointer-events-none"
and the duplicate overlay later) to use that reusable class/component.
- Around line 373-374: The div in page.tsx currently uses an inline style
"style={{ contain: 'layout paint' }}" which must be replaced with a
design-system/Tailwind-compatible utility; remove the inline style from the
element with class "relative border-b border-[`#252525`] lg:pb-10 isolate" and
instead add a named utility (e.g., .contain-layout-paint or a Tailwind
plugin/arbitrary utility) in the shared design-system CSS/Tailwind config that
emits "contain: layout paint", ensure the class is available to the app
(imported or safelisted), and then apply that utility class (e.g.,
"contain-layout-paint") to the same div so all styling uses Tailwind/design
tokens rather than inline styles.
In `@apps/web/src/components/ui/shine-borders.tsx`:
- Around line 55-62: The component currently injects the `@keyframes`
"shine-transform" and uses inline animation styles inside the JSX fragment (see
the style tag in shine-borders.tsx and the similar block around lines 84-88);
move that keyframes/animation definition into a shared stylesheet or add it to
the Tailwind config as a custom animation (e.g., extend
theme.animation/keyframes), remove the <style> tag and any inline style
animation properties in the component, and instead toggle the animation with
Tailwind utility classes or a custom class (referencing the "shine-transform"
name when you add it to Tailwind) so the component uses classes only for
styling.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7f8e3b70-f0a9-454f-8d0a-8bb922d1f2cf
⛔ Files ignored due to path filters (1)
apps/api/prisma/dev.dbis excluded by!**/*.db
📒 Files selected for processing (6)
apps/api/package.jsonapps/api/prisma/schema.prismaapps/api/src/prisma.tsapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/components/ui/flickering-grid.tsxapps/web/src/components/ui/shine-borders.tsx
| query: { | ||
| account: { | ||
| async create({ args, query }) { | ||
| async create({ args, query }: any) { |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the file
ls -la apps/api/src/prisma.ts
# Show the relevant sections around the referenced lines
nl -ba apps/api/src/prisma.ts | sed -n '1,140p'
# Find any ": any" occurrences in prisma.ts
rg -n ": any" apps/api/src/prisma.ts || true
# Show additional occurrences across apps/api/src if needed
rg -n ": any" apps/api/src/prisma.ts apps/api/src -S --glob='**/*.ts' | head -n 200Repository: apsinghdev/opensox
Length of output: 195
🏁 Script executed:
#!/bin/bash
set -euo pipefail
ls -la apps/api/src/prisma.ts
# Print first 140 lines with line numbers (avoid nl)
awk '{printf "%4d:%s\n", NR, $0}' apps/api/src/prisma.ts | sed -n '1,140p'
# Find any ": any" occurrences in prisma.ts
rg -n ": any" apps/api/src/prisma.ts || trueRepository: apsinghdev/opensox
Length of output: 4984
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# show encryption util
ls -la apps/api/src/utils/encryption.js apps/api/src/utils/encryption.ts 2>/dev/null || true
sed -n '1,200p' apps/api/src/utils/encryption.js 2>/dev/null || true
# also search for encrypt/decrypt function definitions/usages
rg -n "function (encryptAccountTokens|decryptAccountTokens)|const (encryptAccountTokens|decryptAccountTokens)" apps/api/src/utils -S || true
rg -n "encryptAccountTokens|decryptAccountTokens" apps/api/src -S --glob='**/*.ts' --glob='**/*.js' | head -n 200Repository: apsinghdev/opensox
Length of output: 1764
remove any in prisma extension callback types
apps/api/src/prisma.ts introduces : any on the prisma extension middleware signatures (create/update/upsert/findUnique/findFirst/findMany) and also uses account: any / user: any in .map(...) callbacks (lines 26, 31, 36, 42, 46, 50, 57, 68, 79). this bypasses type safety on critical db query paths.
apps/api/src/utils/encryption.ts also types encryptAccountTokens/decryptAccountTokens as (data: any) => any (lines 100, 144), which prevents fully eliminating any downstream.
proposed fix
- async create({ args, query }: any) {
+ async create({ args, query }) {
...
- async update({ args, query }: any) {
+ async update({ args, query }) {
...
- async upsert({ args, query }: any) {
+ async upsert({ args, query }) {
...
- async findUnique({ args, query }: any) {
+ async findUnique({ args, query }) {
...
- async findFirst({ args, query }: any) {
+ async findFirst({ args, query }) {
...
- async findMany({ args, query }: any) {
+ async findMany({ args, query }) {
...
- async findUnique({ args, query }: any) {
+ async findUnique({ args, query }) {
...
- async findFirst({ args, query }: any) {
+ async findFirst({ args, query }) {
...
- async findMany({ args, query }: any) {
+ async findMany({ args, query }) {🤖 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 `@apps/api/src/prisma.ts` at line 26, Replace all uses of the unsafe any in the
Prisma extension callbacks and map callbacks with proper types: import Prisma
types from '`@prisma/client`' and type the extension callback parameters (replace
"{ args, query }: any" in create/update/upsert/findUnique/findFirst/findMany)
using Prisma.MiddlewareParams (or the specific delegate arg types provided by
your Prisma version) and the Prisma client/query return types instead of any;
replace map callback parameters "account: any" / "user: any" with the generated
model types (import type { Account, User } from '`@prisma/client`') so map
callbacks use Account/User; and change encryptAccountTokens/decryptAccountTokens
signatures from (data: any) => any to explicit input/output types (e.g., (data:
AccountTokens) => EncryptedAccountTokens or a concrete Record shape) and
propagate those types to callers so no downstream any remains. Ensure you import
the required types and update all occurrences of these symbols
(create/update/upsert/findUnique/findFirst/findMany, account, user,
encryptAccountTokens, decryptAccountTokens) accordingly.
Comment on lines
+373
to
+374
| <div className="relative border-b border-[#252525] lg:pb-10 isolate" style={{ contain: 'layout paint' }}> | ||
| <div className="flex flex-col gap-5 lg:gap-10 py-4 bg-[#151515]/20 h-full relative w-full overflow-hidden px-4 lg:px-10"> |
Contributor
There was a problem hiding this comment.
replace inline contain style with design-system-compatible utility usage
this adds inline style on a web component, which conflicts with the styling rule for this path. please move this to tailwind/design-token-based styling.
as per coding guidelines "always use tailwind classes for styling html elements; avoid using css or style tags".
🤖 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 `@apps/web/src/app/`(main)/(landing)/pricing/page.tsx around lines 373 - 374,
The div in page.tsx currently uses an inline style "style={{ contain: 'layout
paint' }}" which must be replaced with a design-system/Tailwind-compatible
utility; remove the inline style from the element with class "relative border-b
border-[`#252525`] lg:pb-10 isolate" and instead add a named utility (e.g.,
.contain-layout-paint or a Tailwind plugin/arbitrary utility) in the shared
design-system CSS/Tailwind config that emits "contain: layout paint", ensure the
class is available to the app (imported or safelisted), and then apply that
utility class (e.g., "contain-layout-paint") to the same div so all styling uses
Tailwind/design tokens rather than inline styles.
Comment on lines
+490
to
+493
| <div | ||
| className="absolute h-[250px] w-[150%] left-1/2 -translate-x-1/2 -bottom-24 opacity-60 pointer-events-none" | ||
| style={{ background: 'radial-gradient(ellipse at center, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 60%)' }} | ||
| ></div> |
Contributor
There was a problem hiding this comment.
avoid duplicated inline radial gradients with hardcoded color values
both glow overlays use duplicated inline gradient strings and hardcoded color values. extract a reusable class/component and use semantic design-token colors via tailwind utilities.
as per coding guidelines "never use hardcoded hex values directly in components; always reference colors from the design token system using tailwind classes".
Also applies to: 647-650
🤖 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 `@apps/web/src/app/`(main)/(landing)/pricing/page.tsx around lines 490 - 493,
The inline radial-gradient with hardcoded rgba values in the glow overlay div
should be extracted into a reusable component or utility (e.g., GlowOverlay) and
the gradient must be implemented using Tailwind design-token colors instead of
literal hex/rgba; replace the style prop on the element with a class (or
component) that references a custom Tailwind class/variant defined in your
tailwind config or global css that composes a radial-gradient using design
tokens (token names from your color palette), then replace both occurrences (the
current div with className "absolute h-[250px] w-[150%] left-1/2
-translate-x-1/2 -bottom-24 opacity-60 pointer-events-none" and the duplicate
overlay later) to use that reusable class/component.
Comment on lines
+55
to
+62
| <> | ||
| <style>{` | ||
| @keyframes shine-transform { | ||
| 0% { transform: translate(-33.33%, -33.33%); } | ||
| 50% { transform: translate(33.33%, 33.33%); } | ||
| 100% { transform: translate(-33.33%, -33.33%); } | ||
| } | ||
| `}</style> |
Contributor
There was a problem hiding this comment.
move keyframes/animation styling out of component-local style tag
injecting @keyframes inside each component instance and driving animation via inline style is not aligned with the web styling rules here. define the animation in tailwind/config or shared stylesheet and toggle with classes.
as per coding guidelines "always use tailwind classes for styling html elements; avoid using css or style tags".
Also applies to: 84-88
🤖 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 `@apps/web/src/components/ui/shine-borders.tsx` around lines 55 - 62, The
component currently injects the `@keyframes` "shine-transform" and uses inline
animation styles inside the JSX fragment (see the style tag in shine-borders.tsx
and the similar block around lines 84-88); move that keyframes/animation
definition into a shared stylesheet or add it to the Tailwind config as a custom
animation (e.g., extend theme.animation/keyframes), remove the <style> tag and
any inline style animation properties in the component, and instead toggle the
animation with Tailwind utility classes or a custom class (referencing the
"shine-transform" name when you add it to Tailwind) so the component uses
classes only for styling.
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
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.
Summary by CodeRabbit
Style
Refactor