chore: remove unused files from web-ui#498
Conversation
WalkthroughAdded a new Vite + React + TypeScript landing-page project (sources, components, styles, configs) and removed several web-ui artifacts: Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant IndexHTML as index.html
participant Main as main.tsx
participant App as App
participant Theme as ThemeProvider
participant Router as React Router
participant Home as HomePage
participant UI as UI Components
Browser->>IndexHTML: request /
IndexHTML-->>Browser: serve index.html (loads /src/main.tsx)
Browser->>Main: load main.tsx
Main->>App: createRoot -> render(App)
App->>Theme: wrap with ThemeProvider
App->>Router: mount Routes
Router->>Home: render "/"
Home->>UI: compose sections (Navbar, Hero, Features, FAQ, Footer, etc.)
UI-->>Browser: interactive UI (animations, theme toggle, scroll progress)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
✨ Finishing Touches🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@Aditya30ag Could you please rename the "web-ui" folder to "landing-page" |
|
sure |
… which was use but not in the package.json
|
@rahulharpal1603 |
Also added the themed scroll bar and the missing framer package in the package.json file |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 16
🧹 Nitpick comments (27)
landing-page/src/lib/utils.ts (1)
4-6: Annotate return type for cnMinor: add explicit return type for clarity.
-export function cn(...inputs: ClassValue[]) { +export function cn(...inputs: ClassValue[]): string { return twMerge(clsx(inputs)) }landing-page/src/components/ui/ScrollProgress.tsx (1)
20-24: Make the bar non-interactive and decorativePrevents accidental pointer interception at the very top and clarifies a11y intent.
- <div className="fixed top-0 left-0 right-0 h-1 bg-gray-200 z-50"> + <div className="fixed top-0 left-0 right-0 h-1 bg-gray-200 z-50 pointer-events-none" aria-hidden="true">landing-page/src/App.css (1)
7-13: Move transition to the base selector (hover-only transition often won’t animate in)-/* Refined button styling */ -button:hover { - transition: background-color 0.3s ease, transform 0.2s ease; -} +/* Refined button styling */ +button { + transition: background-color 0.3s ease, transform 0.2s ease; +} button:active { transform: scale(0.98); }landing-page/tsconfig.app.json (1)
17-29: Enable bundler-mode best practices in landing-page/tsconfig.app.json"noEmit": true, "jsx": "react-jsx", + "verbatimModuleSyntax": true, + "types": ["vite/client"],landing-page/src/components/ui/SmoothScroll.tsx (2)
8-16: Avoid forced scroll-to-bottom when the user scrolls up; make it opt-in
Adds a guard so we only stick to bottom if close to it or when explicitly requested.-interface SmoothScrollProps { - children: React.ReactNode; -} +interface SmoothScrollProps { + children: React.ReactNode; + autoStick?: boolean; // default true +} -const SmoothScroll: React.FC<SmoothScrollProps> = ({ children }) => { +const SmoothScroll: React.FC<SmoothScrollProps> = ({ children, autoStick = true }) => { const scrollAreaRef = useRef<HTMLDivElement>(null); useEffect(() => { - if (scrollAreaRef.current) { - scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight; - } - }, [children]); // Triggered when children change (i.e., new messages) + const el = scrollAreaRef.current; + if (!el) return; + const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40; + if (autoStick || nearBottom) { + el.scrollTop = el.scrollHeight; + } + }, [children, autoStick]);
21-24: Avoid magic number; consider making maxHeight a prop or a Tailwind arbitrary value
Keeps layout intent configurable.landing-page/src/Pages/Footer/Footer.tsx (1)
6-6: Use theme tokens instead of hard-coded black/white.
Aligns with your Tailwind CSS variable tokens for consistent theming.- <footer className="relative bg-black text-white py-8 overflow-hidden"> + <footer className="relative bg-background text-foreground py-8 overflow-hidden"> @@ - <div className="mt-4 text-center border-t border-white pt-2"> + <div className="mt-4 text-center border-t border-border pt-2">Also applies to: 30-31
landing-page/src/Pages/Demo/marqu.tsx (2)
2-2: Respect prefers-reduced-motion.
Improve accessibility by disabling the marquee animation when users prefer reduced motion.-import { motion } from "framer-motion"; +import { motion, useReducedMotion } from "framer-motion"; @@ -export default function TechMarquee() { +export default function TechMarquee() { + const shouldReduceMotion = useReducedMotion(); @@ - animate={{ x: '-100%' }} - transition={{ - duration: 10, - ease: "linear", - repeat: Infinity, - repeatType: "loop" - }} + animate={shouldReduceMotion ? { x: 0 } : { x: '-100%' }} + transition={ + shouldReduceMotion + ? { duration: 0 } + : { duration: 10, ease: "linear", repeat: Infinity, repeatType: "loop" } + }Also applies to: 25-25, 35-41
45-46: Avoid index as key.
Use a stable key.- key={index} + key={`${tech.text}-${index}`}landing-page/src/components/ui/input.tsx (1)
9-12: Set a sensible default type.Default to type="text" to avoid rendering an undefined type.
Apply this diff:
- ({ className, type, ...props }, ref) => { + ({ className, type = "text", ...props }, ref) => {landing-page/src/Pages/HowItWorks/HowItWorks.tsx (1)
1-2: Enable exit animations with AnimatePresence.exit won’t run without AnimatePresence.
Apply this diff:
-import { motion } from "framer-motion"; +import { motion, AnimatePresence } from "framer-motion";And wrap the conditional details:
- {activeStep === index && ( - <motion.div + <AnimatePresence initial={false}> + {activeStep === index && ( + <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.3 }} className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4" > <p className="text-sm text-gray-500 dark:text-gray-400"> {step.details} </p> </motion.div> - )} + )} + </AnimatePresence>landing-page/src/components/ui/Features.tsx (3)
58-66: Avoid recreating size map on every render.Hoist sizeClasses outside the component.
Apply this diff:
- const sizeClasses = { - large: "md:col-span-2", - medium: "md:col-span-2", - small: "md:col-span-1", - }; - - // Use the feature's size or default to "small" if undefined - const sizeClass = sizeClasses[feature.size || "small"]; + // Use the feature's size or default to "small" if undefined + const sizeClass = sizeClasses[feature.size || "small"];Add near the top of the file (outside any component):
const sizeClasses = { large: "md:col-span-2", medium: "md:col-span-2", small: "md:col-span-1", } as const;
76-80: Prefer design tokens over hard-coded colors.Use bg-card/text-card-foreground to stay consistent with theming.
Apply this diff:
- <div - className="relative h-full rounded-2xl bg-white dark:bg-[#161717] + <div + className="relative h-full rounded-2xl bg-card text-card-foreground border-2 border-transparent p-6 transition-all duration-300 hover:border-blue-600 dark:hover:border-blue-600 hover:shadow-[0_0_15px_rgba(30,64,175,0.9)] dark:hover:shadow-[0_0_22px_rgba(30,64,179,1)]"
136-138: Improve image alt text or mark decorative.If decorative, use alt=""; otherwise describe the mockup.
Apply this diff:
- <img src={karnx} alt="karn" className="rounded-xl shadow-2xl" /> + <img src={karnx} alt="" className="rounded-xl shadow-2xl" />landing-page/src/components/ui/card.tsx (1)
3-14: Use cn(...) to avoid "undefined" class tokens and keep consistency.Interpolating possibly-undefined className yields a literal “undefined” class.
Apply this diff:
-import * as React from "react" +import * as React from "react" +import { cn } from "@/lib/utils" @@ - <div - ref={ref} - className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`} - {...props} - /> + <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} /> @@ - <div - ref={ref} - className={`flex flex-col space-y-1.5 p-6 ${className}`} - {...props} - /> + <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} /> @@ - <h3 - ref={ref} - className={`text-2xl font-semibold leading-none tracking-tight ${className}`} - {...props} - /> + <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} /> @@ - <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} /> + <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />Also applies to: 23-27, 36-40, 49-50
landing-page/src/main.tsx (1)
6-6: Non-null assertion on DOM element access.The non-null assertion (
!) ondocument.getElementById('root')assumes the root element always exists. While this is typically safe for React apps, consider adding error handling for better resilience.-createRoot(document.getElementById('root')!).render( +const rootElement = document.getElementById('root'); +if (!rootElement) throw new Error('Root element not found'); +createRoot(rootElement).render(landing-page/src/App.tsx (1)
1-14: Clean up unused imports.Several imports are not being used in the component logic:
-import { useContext, useEffect } from "react"; -import { ThemeProvider, ThemeContext, ThemeOptions } from "./context/theme-provider"; +import { ThemeProvider } from "./context/theme-provider";landing-page/src/components/ui/Bouncy Card Features.tsx (1)
1-10: Clean up import formatting.The lucide-react imports have inconsistent spacing and some empty lines.
-import { - Images, - - Scissors, - - Microscope, - Settings -} from "lucide-react"; +import { + Images, + Scissors, + Microscope, + Settings +} from "lucide-react";landing-page/src/Pages/Landing page/Home1.tsx (3)
170-170: Use proper TypeScript types for timeout reference.The timeout reference uses
anytype instead of the properNodeJS.Timeouttype.- const timeoutRef = useRef<any>(null); + const timeoutRef = useRef<NodeJS.Timeout | null>(null);
72-72: Use strict equality comparison.Use strict equality (
!==) instead of loose equality (!=) for better type safety.- while (currentIndex != 0) { + while (currentIndex !== 0) {
85-150: Consider using a more maintainable image data structure.The large hardcoded array of image URLs makes the component difficult to maintain. Consider moving this to a separate configuration file or using a more dynamic approach.
Create a separate file
landing-page/src/data/hero-images.ts:export const heroImages = [ { id: 1, src: "https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", }, // ... rest of the images ];Then import and use it in the component:
+import { heroImages } from "@/data/hero-images"; -const squareData = [ - // ... large array -]; +const squareData = heroImages;landing-page/src/context/theme-provider.tsx (1)
31-33: Minor TS nicety: return enum type explicitly.Cast to ThemeOptions for clarity.
- return themeCode; + return themeCode as ThemeOptions;landing-page/src/Pages/Landing page/Navbar.tsx (2)
102-108: Remove duplicate width classes to avoid tailwind override churn.You set w-[95%] unconditionally and then conditionally override it. Keep only the conditional.
- className={`fixed top-4 left-1/2 -translate-x-1/2 w-[95%] max-w-6xl z-50 + className={`fixed top-4 left-1/2 -translate-x-1/2 max-w-6xl z-50 transition-all duration-300 ease-in-out bg-white/70 dark:bg-black/50 backdrop-blur-md rounded-3xl overflow-hidden ${scrolled ? "shadow-lg shadow-gray-300/50 dark:shadow-black/40" : "shadow-none"} ${scrolled ? "w-[90%]" : "w-[95%]"}`}
172-181: Accessibility: add ARIA attributes and control linkage for the mobile menu.Expose expanded state and controls for screen readers.
- <button - onClick={() => setIsOpen(!isOpen)} + <button + aria-expanded={isOpen} + aria-controls="mobile-menu" + onClick={() => setIsOpen(!isOpen)} className="text-gray-800 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors duration-300" > @@ - <div + <div + id="mobile-menu" className={`md:hidden fixed inset-0 z-50 bg-white dark:bg-black transform transition-transform duration-300 ease-in-out ${isOpen ? "translate-x-0" : "-translate-x-full"}`} >Also applies to: 186-191
landing-page/src/components/ui/button.tsx (1)
43-54: Default to type="button" to avoid accidental form submissions.HTML buttons default to submit inside forms. Set a safe default while allowing overrides and asChild passthrough.
return ( <Comp - className={cn(buttonVariants({ variant, size, className }))} - ref={ref} - {...props} + className={cn(buttonVariants({ variant, size, className }))} + ref={ref} + type={asChild ? undefined : (props.type ?? "button")} + {...props} /> )landing-page/src/Pages/FaqPage/FAQ.tsx (2)
35-40: Consider extracting dark mode logic to a custom hook.The dark mode logic is duplicated across components. Consider extracting this to a reusable custom hook for better maintainability.
You could create a
useDarkModehook:// hooks/useDarkMode.ts export function useDarkMode() { const [darkMode, setDarkMode] = useState<boolean>(() => { return ( localStorage.getItem("darkMode") === "true" || (!("darkMode" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) ); }); useEffect(() => { document.documentElement.classList.toggle("dark", darkMode); localStorage.setItem("darkMode", darkMode.toString()); }, [darkMode]); return [darkMode, setDarkMode] as const; }Then use it in the component:
- const [darkMode, ] = useState<boolean>(() => { - return ( - localStorage.getItem("darkMode") === "true" || - (!("darkMode" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) - ); - }); - - useEffect(() => { - document.documentElement.classList.toggle("dark", darkMode); - localStorage.setItem("darkMode", darkMode.toString()); - }, [darkMode]); + const [darkMode] = useDarkMode();
131-131: Consider handling potential null value more explicitly.The fallback to "auto" might cause layout issues. Consider using a more explicit approach for the height calculation.
Apply this diff for more explicit height handling:
- animate={{ opacity: 1, height: contentRef.current?.scrollHeight || "auto" }} + animate={{ opacity: 1, height: contentRef.current?.scrollHeight || 0 }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (14)
landing-page/dist/assets/38881995-N4pCjCwb.pngis excluded by!**/dist/**,!**/*.pnglanding-page/dist/assets/PictoPy_Logo-C-hEhYQJ.pngis excluded by!**/dist/**,!**/*.pnglanding-page/dist/assets/index-BcAFA-6O.cssis excluded by!**/dist/**landing-page/dist/assets/index-Z8Me5Puq.jsis excluded by!**/dist/**landing-page/dist/index.htmlis excluded by!**/dist/**landing-page/dist/vite.svgis excluded by!**/dist/**,!**/*.svglanding-page/package-lock.jsonis excluded by!**/package-lock.jsonlanding-page/public/vite.svgis excluded by!**/*.svglanding-page/src/assets/38881995.pngis excluded by!**/*.pnglanding-page/src/assets/PictoPy_Logo.pngis excluded by!**/*.pnglanding-page/src/assets/linux-logo.pngis excluded by!**/*.pnglanding-page/src/assets/linux-logo.svgis excluded by!**/*.svglanding-page/src/assets/mac-logo.pngis excluded by!**/*.pnglanding-page/src/assets/windows-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (35)
landing-page/README.md(1 hunks)landing-page/components.json(1 hunks)landing-page/eslint.config.js(1 hunks)landing-page/index.html(1 hunks)landing-page/package.json(1 hunks)landing-page/postcss.config.js(1 hunks)landing-page/src/App.css(1 hunks)landing-page/src/App.tsx(1 hunks)landing-page/src/Pages/Demo/marqu.tsx(1 hunks)landing-page/src/Pages/FaqPage/FAQ.tsx(1 hunks)landing-page/src/Pages/Footer/Footer.tsx(1 hunks)landing-page/src/Pages/HowItWorks/HowItWorks.tsx(1 hunks)landing-page/src/Pages/Landing page/Home1.tsx(1 hunks)landing-page/src/Pages/Landing page/Navbar.tsx(1 hunks)landing-page/src/Pages/pictopy-landing.tsx(1 hunks)landing-page/src/components/ui/Bouncy Card Features.tsx(1 hunks)landing-page/src/components/ui/Features.tsx(1 hunks)landing-page/src/components/ui/ScrollProgress.tsx(1 hunks)landing-page/src/components/ui/SmoothScroll.tsx(1 hunks)landing-page/src/components/ui/button.tsx(1 hunks)landing-page/src/components/ui/card.tsx(1 hunks)landing-page/src/components/ui/input.tsx(1 hunks)landing-page/src/components/ui/label.tsx(1 hunks)landing-page/src/context/theme-provider.tsx(1 hunks)landing-page/src/index.css(1 hunks)landing-page/src/lib/utils.ts(1 hunks)landing-page/src/main.tsx(1 hunks)landing-page/src/vite-env.d.ts(1 hunks)landing-page/tailwind.config.js(1 hunks)landing-page/tsconfig.app.json(1 hunks)landing-page/tsconfig.app.tsbuildinfo(1 hunks)landing-page/tsconfig.json(1 hunks)landing-page/tsconfig.node.json(1 hunks)landing-page/tsconfig.node.tsbuildinfo(1 hunks)landing-page/vite.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (6)
- landing-page/README.md
- landing-page/tsconfig.node.tsbuildinfo
- landing-page/tsconfig.app.tsbuildinfo
- landing-page/package.json
- landing-page/src/vite-env.d.ts
- landing-page/index.html
🧰 Additional context used
🧬 Code graph analysis (11)
landing-page/src/components/ui/label.tsx (1)
landing-page/src/lib/utils.ts (1)
cn(4-6)
landing-page/src/components/ui/ScrollProgress.tsx (1)
web-ui/frontend/src/components/ui/ScrollProgress.tsx (1)
scrollPercentage(3-27)
landing-page/src/Pages/Landing page/Navbar.tsx (2)
landing-page/dist/assets/index-Z8Me5Puq.js (16)
e(40-40)e(58-58)e(58-58)e(58-58)e(58-58)e(177-177)e(177-177)e(182-182)e(212-212)e(212-212)e(212-212)e(212-212)e(224-224)e(229-229)e(229-229)e(235-235)frontend/src/components/Navigation/Navbar/Navbar.tsx (1)
Navbar(17-139)
landing-page/src/components/ui/button.tsx (1)
landing-page/src/lib/utils.ts (1)
cn(4-6)
landing-page/src/App.tsx (4)
landing-page/src/components/ui/ScrollProgress.tsx (1)
ScrollProgress(3-27)landing-page/src/components/ui/Bouncy Card Features.tsx (1)
BouncyCardsFeatures(12-89)landing-page/src/Pages/FaqPage/FAQ.tsx (1)
FAQ(33-83)landing-page/src/context/theme-provider.tsx (2)
ThemeContext(19-19)ThemeProvider(44-68)
landing-page/src/lib/utils.ts (2)
frontend/src/lib/utils.ts (1)
cn(5-7)web-ui/frontend/src/lib/utils.ts (1)
cn(4-6)
landing-page/src/Pages/Footer/Footer.tsx (1)
web-ui/frontend/src/Pages/Footer/Footer.tsx (1)
footer(4-36)
landing-page/vite.config.ts (1)
scripts/setup.js (1)
__dirname(8-8)
landing-page/src/components/ui/input.tsx (1)
landing-page/src/lib/utils.ts (1)
cn(4-6)
landing-page/src/Pages/Demo/marqu.tsx (1)
web-ui/frontend/src/Pages/Demo/marqu.tsx (2)
TechMarquee(5-74)tech(43-70)
landing-page/src/components/ui/Bouncy Card Features.tsx (2)
landing-page/src/components/ui/card.tsx (1)
CardTitle(53-53)web-ui/frontend/src/components/ui/Bouncy Card Features.tsx (1)
features(12-89)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Backend Tests
- GitHub Check: Tauri Tests
🔇 Additional comments (21)
landing-page/postcss.config.js (1)
1-6: No changes needed for PostCSS config exportlanding-page/package.json sets
"type": "module", sopostcss.config.jsis already treated as an ES module andexport defaultwill be loaded correctly. No rename or CommonJS conversion is required.Likely an incorrect or invalid review comment.
landing-page/tsconfig.node.json (1)
2-21: Add Node types to tsconfig.node.jsonTo let TypeScript recognize Node globals in
vite.config.ts, add"types": ["node"]undercompilerOptions.
Optional: bump thetargetto"ES2023"to match thelib."compilerOptions": { "target": "ES2022", // → "ES2023" (optional) "lib": ["ES2023"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, + "types": ["node"], /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true },landing-page/src/lib/utils.ts (1)
1-2: Incorrect clsx import formclsx’s function is typically the default export; named import clsx may fail type-checking. Switch to default import.
Proposed change:
-import { clsx, type ClassValue } from "clsx" +import clsx, { type ClassValue } from "clsx" import { twMerge } from "tailwind-merge"Likely an incorrect or invalid review comment.
landing-page/tsconfig.json (1)
1-14: All aliases and references verified
src/Pages directory exists; tsconfig.node.json is present; tsconfig.json and vite.config.ts mappings align; no leftover web-ui references.landing-page/tailwind.config.js (2)
1-8: Solid Tailwind setup (dark mode + content paths).
Config looks good and matches a tokenized theme approach.
9-39: Tokens and animate plugin verified
CSS variables (--background, --foreground, --ring, etc.) are defined in landing-page/src/index.css, andtailwindcss-animate(^1.0.7) is listed in landing-page/package.json.landing-page/src/components/ui/label.tsx (2)
7-21: LGTM: Radix Label wrapper with cva + cn.
ForwardRef, types, and class merging are correct.
5-5: No change needed for path alias. The “@” alias is configured in landing-page/vite.config.ts (resolve.alias) and landing-page/tsconfig.json (paths), so the import from "@/lib/utils" is valid.landing-page/src/Pages/Footer/Footer.tsx (1)
16-27: Good external link hygiene.
target="_blank" + rel="noopener noreferrer" is correct.landing-page/src/Pages/Demo/marqu.tsx (1)
26-33: LGTM: Smooth, lightweight marquee.
Clean framer-motion setup and responsive styling.landing-page/eslint.config.js (2)
20-26: Hooks + refresh rules look good.
Good baseline; consider adding a11y plugin later if needed.
1-5: ESLint flat config is correctly set up in ESM mode. landing-page/package.json specifies"type": "module", ESLint v9.9.0 is installed, and the plugins (typescript-eslint ^8.0.1, eslint-plugin-react-hooks ^5.1.0-rc.0, eslint-plugin-react-refresh ^0.4.9) meet the required versions—no changes needed.landing-page/src/components/ui/input.tsx (2)
8-22: Solid forwardRef input; API and class composition look good.
3-3: No changes needed: "@/lib/utils" alias correctly configuredBoth tsconfig (landing-page/tsconfig*.json) and vite.config.ts define “@” mapping to the local src directory, so
import { cn } from "@/lib/utils"will resolve to landing-page/src/lib/utils as expected.landing-page/src/index.css (1)
63-69: Confirm intent: disabling pointer events on all SVG children.This will block clicks/hover on inline SVG controls (e.g., toggles/icons used as buttons).
If unintentional, restrict selector to decorative SVGs or scope to specific classes.
landing-page/src/Pages/pictopy-landing.tsx (1)
3-6: All imported asset files exist.
Confirmed that PictoPy_Logo.png, mac-logo.png, windows-logo.svg, and linux-logo.svg are present in landing-page/src/assets.landing-page/src/components/ui/Bouncy Card Features.tsx (1)
66-83: Ignore CardTitle conflict concern. This file defines its ownCardTitlelocally and doesn’t import the external one, so there’s no naming collision.Likely an incorrect or invalid review comment.
landing-page/src/Pages/Landing page/Navbar.tsx (1)
1-1: Path hygiene: avoid spaces in directory names."Landing page" can cause brittle import paths and tooling edge cases. Prefer "landing-page" or "LandingPage".
landing-page/src/Pages/FaqPage/FAQ.tsx (3)
6-31: LGTM! Well-structured FAQ data.The FAQ data is comprehensive and well-organized with appropriate icons for each question type. The content effectively addresses key user concerns about the product.
94-144: LGTM! Excellent accordion implementation.The FAQItem component has great accessibility features with proper aria-expanded attributes and smooth animations. The responsive design and dark mode support are well implemented.
146-179: LGTM! Nice background animation effect.The BackgroundAnimation component provides a subtle and engaging visual effect that adapts well to both light and dark modes. The animation timing and opacity values are well-balanced.
| "aliases": { | ||
| "components": "@/components", | ||
| "utils": "@/lib/utils", | ||
| "ui": "@/components/ui", | ||
| "lib": "@/lib", | ||
| "hooks": "@/hooks" | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify alias consistency across Vite, TS, and ShadCN
Ensure these aliases match tsconfig.json paths and actual folders; otherwise ShadCN CLI and imports will drift.
Run:
After the folder rename to landing-page, review CI/CD, Docker, docs, and import paths for references to web-ui to avoid broken builds/deploys.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Confirm tsconfig path aliases
rg -n --glob 'landing-page/tsconfig.json' -e '"@/\\*":\\s*\\["src/\\*"\\]' -e '"@pages/\\*":\\s*\\["src/Pages/\\*"\\]' || echo "Check tsconfig.json for @ and @pages"
# Confirm Tailwind CSS entry exists
test -f landing-page/src/index.css && echo "index.css OK" || echo "index.css missing"
# Sanity-check that all web-ui references are gone after rename
rg -n "web-ui" || echo "No web-ui references found"Length of output: 371
Add missing tsconfig.json path aliases
landing-page/tsconfig.json’s compilerOptions.paths doesn’t include the same aliases defined in landing-page/components.json (e.g. "@/components": ["src/components"], "ui": ["src/components/ui"], etc.). Add the corresponding entries under paths so that Vite, TypeScript, and the ShadCN CLI resolve imports consistently.
Verify external configurations
No web-ui imports remain in code; still audit CI/CD pipelines, Docker configs, and documentation for any leftover web-ui references to avoid broken builds or deploys.
🤖 Prompt for AI Agents
In landing-page/components.json around lines 13 to 19, the project aliases
defined there (components, ui, utils, lib, hooks) are not mirrored in
landing-page/tsconfig.json compilerOptions.paths; update tsconfig.json to add
matching path mappings (e.g. "@/components": ["src/components"], "ui":
["src/components/ui"], etc.) so Vite, TypeScript and the ShadCN CLI resolve
imports consistently, then run a quick project-wide search to ensure no
remaining "web-ui" imports and audit CI/CD configs, Docker files, and docs for
stale "web-ui" references to update or remove them to prevent broken
builds/deploys.
| useEffect(() => { | ||
| if (theme === ThemeOptions.Dark) { | ||
| document.body.classList.add("dark"); | ||
| } else { | ||
| document.body.classList.remove("dark"); | ||
| } | ||
| }, [theme]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Duplicate theme synchronization logic.
The theme synchronization logic in AppContent duplicates similar functionality already present in ThemeProvider (lines 43-67 in landing-page/src/context/theme-provider.tsx). The ThemeProvider already handles adding/removing the "dark" class on document.body based on theme changes.
Remove the duplicate theme handling from AppContent:
- // Use the ThemeContext and explicitly type the theme
- const { theme } = useContext(ThemeContext);
-
- // Add or remove the "dark" class based on the theme
- useEffect(() => {
- if (theme === ThemeOptions.Dark) {
- document.body.classList.add("dark");
- } else {
- document.body.classList.remove("dark");
- }
- }, [theme]);📝 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.
| useEffect(() => { | |
| if (theme === ThemeOptions.Dark) { | |
| document.body.classList.add("dark"); | |
| } else { | |
| document.body.classList.remove("dark"); | |
| } | |
| }, [theme]); |
🤖 Prompt for AI Agents
In landing-page/src/App.tsx around lines 36 to 42, remove the duplicate
useEffect that adds/removes the "dark" class on document.body because
ThemeProvider already handles theme synchronization; delete the entire effect
block (useEffect(...) { ... }, [theme]) from AppContent so only ThemeProvider
manages the document.body class.
| const CardTitle = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLHeadingElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <h3 | ||
| ref={ref} | ||
| className={`text-2xl font-semibold leading-none tracking-tight ${className}`} | ||
| {...props} | ||
| /> | ||
| )) |
There was a problem hiding this comment.
Ref type mismatch for CardTitle.
Ref is typed as HTMLParagraphElement but you render an h3. Use HTMLHeadingElement to avoid TS issues.
Apply this diff:
-const CardTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
+const CardTitle = React.forwardRef<
+ HTMLHeadingElement,
+ React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (📝 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.
| const CardTitle = React.forwardRef< | |
| HTMLParagraphElement, | |
| React.HTMLAttributes<HTMLHeadingElement> | |
| >(({ className, ...props }, ref) => ( | |
| <h3 | |
| ref={ref} | |
| className={`text-2xl font-semibold leading-none tracking-tight ${className}`} | |
| {...props} | |
| /> | |
| )) | |
| const CardTitle = React.forwardRef< | |
| HTMLHeadingElement, | |
| React.HTMLAttributes<HTMLHeadingElement> | |
| >(({ className, ...props }, ref) => ( | |
| <h3 | |
| ref={ref} | |
| className={`text-2xl font-semibold leading-none tracking-tight ${className}`} | |
| {...props} | |
| /> | |
| )) |
🤖 Prompt for AI Agents
In landing-page/src/components/ui/card.tsx around lines 32 to 41, the forwardRef
ref generic is incorrectly set to HTMLParagraphElement while the component
renders an <h3>; update the first generic type to HTMLHeadingElement (and keep
React.HTMLAttributes<HTMLHeadingElement> for the props) so the ref type matches
the rendered heading element and TypeScript errors are resolved.
| // Define the features array | ||
| const features: Feature[] = [ | ||
| { | ||
| icon: <Brain className="w-10 h-10" />, | ||
| title: "AI-Powered Debates", | ||
| description: "Engage in thought-provoking debates with our advanced AI system.", | ||
| details: "Our AI uses state-of-the-art natural language processing to understand context and provide relevant counterarguments.", | ||
| size: "large", | ||
| }, | ||
| { | ||
| icon: <Lightbulb className="w-10 h-10" />, | ||
| title: "Improve Critical Thinking", | ||
| description: "Sharpen your analytical skills through challenging discussions.", | ||
| details: "Track your progress and receive personalized feedback on your critical thinking skills.", | ||
| size: "medium", | ||
| }, | ||
| { | ||
| icon: <Users className="w-10 h-10" />, | ||
| title: "Community Challenges", | ||
| description: "Participate in community-wide debate challenges and competitions.", | ||
| details: "Join tournaments and compete with users worldwide.", | ||
| size: "small", | ||
| }, | ||
| { | ||
| icon: <TrendingUp className="w-10 h-10" />, | ||
| title: "Track Your Progress", | ||
| description: "Monitor your improvement with detailed performance analytics.", | ||
| details: "View statistics on argument strength and logical consistency.", | ||
| size: "medium", | ||
| }, | ||
| { | ||
| icon: <Target className="w-10 h-10" />, | ||
| title: "Personalized Learning", | ||
| description: "Tailored debate topics based on your interests and skill level.", | ||
| details: "AI adapts to your learning pace and debate style.", | ||
| size: "small", | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
User-facing content mismatch with product domain.
Features describe “AI debates,” but the rest of the app/pages (e.g., HowItWorks) are photo gallery features. This will confuse users.
Please align copy and icons with the gallery domain (smart tagging, albums, offline, privacy, etc.) before shipping.
🤖 Prompt for AI Agents
landing-page/src/components/ui/Features.tsx lines 16-53: the feature items
currently describe "AI debates" and related copy/icons which conflict with the
rest of the app (photo gallery domain); replace each feature object so titles,
descriptions, details, and icons reflect gallery functionality (e.g., smart
tagging, albums/collections, offline access, privacy controls,
performance/analytics) and keep the size values consistent with the UI; update
icons to gallery-appropriate icons (camera, tag, folder/album, cloud/offline,
lock/privacy, chart) and ensure the new copy matches wording/style used across
HowItWorks and other pages for consistency before merging.
| <div className="flex flex-wrap gap-4 pt-4"> | ||
| <button className="flex items-center gap-2 bg-black text-white px-6 py-3 rounded-xl hover:bg-gray-800 transition-colors"> | ||
| <div className="text-left"> | ||
| <div className="text-xs">Get it on</div> | ||
| <div className="text-lg font-semibold">Google PlayStore</div> | ||
| </div> | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Make the store button an accessible link or add a real href.
Buttons without actions confuse users and screen readers.
Apply this diff:
- <button className="flex items-center gap-2 bg-black text-white px-6 py-3 rounded-xl hover:bg-gray-800 transition-colors">
+ <a
+ href="#"
+ aria-label="Get it on Google Play"
+ className="flex items-center gap-2 bg-black text-white px-6 py-3 rounded-xl hover:bg-gray-800 transition-colors"
+ >
<div className="text-left">
<div className="text-xs">Get it on</div>
<div className="text-lg font-semibold">Google PlayStore</div>
</div>
- </button>
+ </a>📝 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.
| <div className="flex flex-wrap gap-4 pt-4"> | |
| <button className="flex items-center gap-2 bg-black text-white px-6 py-3 rounded-xl hover:bg-gray-800 transition-colors"> | |
| <div className="text-left"> | |
| <div className="text-xs">Get it on</div> | |
| <div className="text-lg font-semibold">Google PlayStore</div> | |
| </div> | |
| </button> | |
| </div> | |
| <div className="flex flex-wrap gap-4 pt-4"> | |
| <a | |
| href="#" | |
| aria-label="Get it on Google Play" | |
| className="flex items-center gap-2 bg-black text-white px-6 py-3 rounded-xl hover:bg-gray-800 transition-colors" | |
| > | |
| <div className="text-left"> | |
| <div className="text-xs">Get it on</div> | |
| <div className="text-lg font-semibold">Google PlayStore</div> | |
| </div> | |
| </a> | |
| </div> |
🤖 Prompt for AI Agents
In landing-page/src/components/ui/Features.tsx around lines 125 to 132, the
"Google PlayStore" control is a button with no action which is inaccessible;
replace the button with a semantic anchor (<a>) that keeps the same classes but
includes a real href to the Play Store (or a configurable prop), add
target="_blank" and rel="noopener noreferrer" for external links, and include an
accessible label (aria-label or visually hidden text) so screen readers and
keyboard users can activate it; alternatively, if you must keep a button, add a
proper onClick handler, role="link", and aria-label, but prefer the anchor for
semantics.
| <motion.a | ||
| href="https://github.com/AOSSIE-Org/PictoPy" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| initial={{ scale: 0.9, opacity: 0 }} | ||
| animate={{ scale: 1, opacity: 1 }} | ||
| transition={{ duration: 0.5, delay: 0.7 }} | ||
| whileHover={{ scale: 1.03 }} | ||
| whileTap={{ scale: 0.98 }} | ||
| className="border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 font-medium py-2 px-6 rounded transition-all hover:border-teal-500 hover:text-teal-500" | ||
| > | ||
| View Docs | ||
| </motion.a> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Misleading link text.
The "View Docs" button links to the GitHub repository, but the text suggests it leads to documentation. This could confuse users expecting actual documentation.
Update the button text to match its destination:
- View Docs
+ View on GitHub📝 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.
| <motion.a | |
| href="https://github.com/AOSSIE-Org/PictoPy" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| initial={{ scale: 0.9, opacity: 0 }} | |
| animate={{ scale: 1, opacity: 1 }} | |
| transition={{ duration: 0.5, delay: 0.7 }} | |
| whileHover={{ scale: 1.03 }} | |
| whileTap={{ scale: 0.98 }} | |
| className="border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 font-medium py-2 px-6 rounded transition-all hover:border-teal-500 hover:text-teal-500" | |
| > | |
| View Docs | |
| </motion.a> | |
| <motion.a | |
| href="https://github.com/AOSSIE-Org/PictoPy" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| initial={{ scale: 0.9, opacity: 0 }} | |
| animate={{ scale: 1, opacity: 1 }} | |
| transition={{ duration: 0.5, delay: 0.7 }} | |
| whileHover={{ scale: 1.03 }} | |
| whileTap={{ scale: 0.98 }} | |
| className="border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 font-medium py-2 px-6 rounded transition-all hover:border-teal-500 hover:text-teal-500" | |
| > | |
| View on GitHub | |
| </motion.a> |
🤖 Prompt for AI Agents
In landing-page/src/Pages/Landing page/Home1.tsx around lines 48 to 60, the
anchor text "View Docs" incorrectly implies the link goes to documentation while
it actually points to the GitHub repo; update the visible text to match the
destination (for example "View on GitHub" or "GitHub Repo") and keep the href,
target, rel and motion props unchanged so only the copy is corrected.
| const [darkMode, setDarkMode] = useState<boolean>(false); | ||
|
|
||
| // Load dark mode setting from localStorage or fallback to system preference | ||
| useEffect(() => { | ||
| const savedDarkMode = localStorage.getItem("darkMode"); | ||
|
|
||
| if (savedDarkMode !== null) { | ||
| setDarkMode(savedDarkMode === "true"); | ||
| } else { | ||
| const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; | ||
| setDarkMode(prefersDarkMode); | ||
| } | ||
| }, []); | ||
|
|
||
| // Apply dark mode class to body when darkMode state changes | ||
| useEffect(() => { | ||
| if (darkMode) { | ||
| document.documentElement.classList.add("dark"); | ||
| localStorage.setItem("darkMode", "true"); | ||
| } else { | ||
| document.documentElement.classList.remove("dark"); | ||
| localStorage.setItem("darkMode", "false"); | ||
| } | ||
| }, [darkMode]); |
There was a problem hiding this comment.
Critical: Duplicate dark-mode logic conflicts with ThemeProvider. Use ThemeContext instead.
Navbar manages a separate darkMode state and localStorage key ("darkMode") while ThemeProvider uses enum + "Theme". This divergence will cause UI desync and class toggling races.
Apply:
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import { Link } from "react-router-dom";
import { Menu, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import YourLogo from "@/assets/38881995.png"; // Update this import path to your logo
+import { ThemeContext, ThemeOptions } from "@/context/theme-provider";
@@
- const [darkMode, setDarkMode] = useState<boolean>(false);
+ const { theme, toggleTheme } = useContext(ThemeContext);
+ const darkMode = theme === ThemeOptions.Dark;
@@
- // Load dark mode setting from localStorage or fallback to system preference
- useEffect(() => {
- const savedDarkMode = localStorage.getItem("darkMode");
-
- if (savedDarkMode !== null) {
- setDarkMode(savedDarkMode === "true");
- } else {
- const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
- setDarkMode(prefersDarkMode);
- }
- }, []);
-
- // Apply dark mode class to body when darkMode state changes
- useEffect(() => {
- if (darkMode) {
- document.documentElement.classList.add("dark");
- localStorage.setItem("darkMode", "true");
- } else {
- document.documentElement.classList.remove("dark");
- localStorage.setItem("darkMode", "false");
- }
- }, [darkMode]);
+ // ThemeProvider handles DOM class + persistence. Nothing to do here.
@@
- <button
- onClick={() => setDarkMode(!darkMode)}
+ <button
+ onClick={toggleTheme}
className="text-gray-800 dark:text-gray-300
hover:text-black dark:hover:text-white
transition-colors duration-300"
>
<span className="sr-only">Toggle dark mode</span>
{darkMode ? <span>🌙</span> : <span>🌞</span>}
</button>
@@
- <button
- onClick={() => setDarkMode(!darkMode)}
+ <button
+ onClick={toggleTheme}
className="text-gray-800 dark:text-gray-300
hover:text-black dark:hover:text-white
transition-colors duration-300"
>
<span className="sr-only">Toggle dark mode</span>
{darkMode ? <span>🌙</span> : <span>🌞</span>}
</button>Also applies to: 149-159, 162-171, 1-1
🤖 Prompt for AI Agents
In landing-page/src/Pages/Landing page/Navbar.tsx around lines 63 to 86 (and
also adjust similar logic at 149-159, 162-171 and top-of-file usage), the
component implements its own darkMode state and reads/writes localStorage key
"darkMode" and toggles document class directly which conflicts with the app
ThemeProvider that uses a Theme enum and "Theme" key; remove the local darkMode
state and all localStorage "darkMode" reads/writes and
document.documentElement.classList manipulations, and instead consume the
ThemeContext (or ThemeProvider hook) to read the current theme and call its
provided setter/toggle to change theme; ensure you read/write the single
canonical "Theme" key via the ThemeProvider (do not duplicate storage logic in
the Navbar), and update the other mentioned line ranges to the same pattern so
the Navbar only delegates theme state to ThemeContext and no longer manages or
persists theme itself.
| const handleDownloadClick = (platform: string) => { | ||
| setDownloadStarted(`Download for ${platform} started!`); | ||
| // Hide the notification after 3 seconds | ||
| setTimeout(() => { | ||
| setDownloadStarted(null); | ||
| }, 3000); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Potential memory leak with setTimeout.
The setTimeout call is not cleaned up if the component unmounts before the timeout completes, which could cause memory leaks or state updates on unmounted components.
Use useEffect to manage the timeout cleanup:
// Function to handle button click and show the notification
const handleDownloadClick = (platform: string) => {
setDownloadStarted(`Download for ${platform} started!`);
- // Hide the notification after 3 seconds
- setTimeout(() => {
- setDownloadStarted(null);
- }, 3000);
};
+
+ useEffect(() => {
+ if (downloadStarted) {
+ const timer = setTimeout(() => {
+ setDownloadStarted(null);
+ }, 3000);
+ return () => clearTimeout(timer);
+ }
+ }, [downloadStarted]);Add useEffect to the imports:
-import { FC, useState } from "react";
+import { FC, useState, useEffect } from "react";📝 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.
| const handleDownloadClick = (platform: string) => { | |
| setDownloadStarted(`Download for ${platform} started!`); | |
| // Hide the notification after 3 seconds | |
| setTimeout(() => { | |
| setDownloadStarted(null); | |
| }, 3000); | |
| }; | |
| // Function to handle button click and show the notification | |
| const handleDownloadClick = (platform: string) => { | |
| setDownloadStarted(`Download for ${platform} started!`); | |
| }; | |
| useEffect(() => { | |
| if (downloadStarted) { | |
| const timer = setTimeout(() => { | |
| setDownloadStarted(null); | |
| }, 3000); | |
| return () => clearTimeout(timer); | |
| } | |
| }, [downloadStarted]); |
| {/* Download Notification (Popup) */} | ||
| {downloadStarted && ( | ||
| <div | ||
| className="fixed top-16 right-4 md:right-8 bg-green-500 text-white py-3 px-6 rounded-lg shadow-xl text-lg z-50 opacity-0 animate-slideInRight" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Missing CSS animation class.
The notification uses animate-slideInRight class which is not a standard Tailwind class and likely not defined in the project's CSS.
🏁 Script executed:
#!/bin/bash
# Check if the animate-slideInRight class is defined in CSS files
rg -n "animate-slideInRight|slideInRight" --type=cssLength of output: 54
🏁 Script executed:
#!/bin/bash
# Locate any Tailwind configuration files
fd -HI --type f tailwind.config
# Search for slideInRight definitions in those config files
rg -n "slideInRight" -g '*tailwind.config.*'
# Re-check for the class across CSS and SCSS files
rg -n "animate-slideInRight|slideInRight" -tcss -tscssLength of output: 255
🏁 Script executed:
#!/bin/bash
# Display the first 200 lines of the landing-page Tailwind config
sed -n '1,200p' landing-page/tailwind.config.js
# Search for custom animation and keyframes definitions
rg -n "animation" -C3 landing-page/tailwind.config.js
rg -n "keyframes" -C3 landing-page/tailwind.config.jsLength of output: 1946
Invalid animation class – animate-slideInRight isn’t defined. Either replace it with the plugin’s utilities (e.g. animate-in slide-in-from-right) or add a matching slideInRight animation/keyframes in your Tailwind config.
🤖 Prompt for AI Agents
In landing-page/src/Pages/pictopy-landing.tsx around line 108, the element uses
a non-existent Tailwind class `animate-slideInRight`; replace it with the plugin
utilities such as `animate-in slide-in-from-right` (and ensure the Tailwind
Animation plugin is enabled/imported), or add a matching `slideInRight`
keyframes and animation entry to your Tailwind config under
theme.extend.keyframes and theme.extend.animation and rebuild so the class
becomes available.
| '@': path.resolve(__dirname, 'src'), // Maps `@` to `src` folder | ||
| '@pages': path.resolve(__dirname, 'src/Pages'), // Maps `@pages` to `src/Pages` folder | ||
| }, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
__dirname in ESM config can break; use URL-based resolution
Vite TS configs are ESM; __dirname isn’t defined under "type": "module". Use fileURLToPath + URL to resolve paths.
Proposed change:
-import path from 'path';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
@@
- alias: {
- '@': path.resolve(__dirname, 'src'), // Maps `@` to `src` folder
- '@pages': path.resolve(__dirname, 'src/Pages'), // Maps `@pages` to `src/Pages` folder
- },
+ alias: {
+ '@': path.resolve(fileURLToPath(new URL('.', import.meta.url)), 'src'),
+ '@pages': path.resolve(fileURLToPath(new URL('.', import.meta.url)), 'src/Pages'),
+ },Check case-sensitive path exists and matches alias:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
test -d landing-page/src || { echo "missing landing-page/src"; exit 1; }
if [ -d landing-page/src/Pages ]; then echo "Found src/Pages"; fi
if [ -d landing-page/src/pages ]; then echo "Found src/pages (case mismatch risk on Linux)"; fi
rg -n --glob 'landing-page/**' -e "from '@pages" -e "import\\s+.*'@pages"Length of output: 240
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Checking for ESM in package.json"
rg -nP '"type"\s*:\s*"module"' -g '**/package.json' || echo "no type module in package.json"
echo
echo "-------- vite.config.ts (first 50 lines) --------"
head -n 50 landing-page/vite.config.ts
echo
echo "-------- Searching for __dirname usage --------"
rg -n "__dirname" landing-page/vite.config.ts || echo "no __dirname usage found"Length of output: 1197
Use URL-based resolution instead of __dirname in ESM config
Vite’s TS config is an ESM module ("type": "module" in package.json), so __dirname is undefined. Replace with fileURLToPath(new URL('.', import.meta.url)). Case-sensitive paths (src/Pages) already match.
-import path from 'path';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
@@ resolve.alias
- '@': path.resolve(__dirname, 'src'),
- '@pages': path.resolve(__dirname, 'src/Pages'),
+ '@': path.resolve(fileURLToPath(new URL('.', import.meta.url)), 'src'),
+ '@pages': path.resolve(fileURLToPath(new URL('.', import.meta.url)), 'src/Pages'),📝 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.
| '@': path.resolve(__dirname, 'src'), // Maps `@` to `src` folder | |
| '@pages': path.resolve(__dirname, 'src/Pages'), // Maps `@pages` to `src/Pages` folder | |
| }, | |
| // At the top of landing-page/vite.config.ts | |
| import { fileURLToPath } from 'node:url'; | |
| import path from 'node:path'; | |
| export default defineConfig({ | |
| resolve: { | |
| alias: { | |
| - '@': path.resolve(__dirname, 'src'), // Maps `@` to `src` folder | |
| '@': path.resolve(fileURLToPath(new URL('.', import.meta.url)), 'src'), // Maps `@` to `src` folder | |
| '@pages': path.resolve(fileURLToPath(new URL('.', import.meta.url)), 'src/Pages'), // Maps `@pages` to `src/Pages` folder | |
| }, | |
| }, | |
| // ...rest of config | |
| }); |
🤖 Prompt for AI Agents
In landing-page/vite.config.ts around lines 10 to 12, the config currently uses
__dirname (which is undefined in ESM); replace it by deriving the directory with
fileURLToPath(new URL('.', import.meta.url)) and use that variable in
path.resolve calls (e.g., path.resolve(projectDir, 'src') and
path.resolve(projectDir, 'src/Pages')); also add the necessary import of
fileURLToPath from 'url' at the top of the file. Ensure the rest of the alias
entries remain unchanged and that path resolution uses the new projectDir
variable instead of __dirname.
|
@Aditya30ag Thanks! |
2 participants
Remove the unused files
Summary by CodeRabbit
Here are the updated release notes based on the provided summary:
New Features
Chores
Documentation