Dev2 by kishore28kumar · Pull Request #2 · kishore28kumar/pulss

kishore28kumar · 2026-01-06T17:44:44Z

No description provided.

…s, new cart drawer, and filter drawer components

Copilot

Pull request overview

This PR introduces significant UI/UX enhancements to the storefront application, including a new Zustand-based cart management system, search functionality with autocomplete suggestions, improved product filtering, and comprehensive responsive design updates. The changes modernize the user interface with better accessibility, enhanced mobile experience, and smoother interactions throughout the application.

Key Changes:

Implemented client-side cart management using Zustand with local storage persistence
Added search suggestions with debouncing and keyboard navigation
Enhanced product cards with ratings, quick-add functionality, and hover states
Improved responsive design and accessibility across all pages

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 20 comments.

Show a summary per file

File	Description
apps/storefront/src/stores/cartStore.ts	New Zustand store for cart state management with local persistence
apps/storefront/src/hooks/useSearchSuggestions.ts	Hook for fetching and managing search autocomplete suggestions
apps/storefront/src/hooks/useDebounce.ts	Utility hook for debouncing input values
apps/storefront/src/components/products/ProductCard.tsx	Enhanced product card with ratings, discount badges, and quick-add button
apps/storefront/src/components/products/FilterDrawer.tsx	New mobile-friendly filter drawer component
apps/storefront/src/components/layout/Header.tsx	Major header redesign with search bar, category filter, and cart integration
apps/storefront/src/components/cart/CartDrawer.tsx	New slide-out cart drawer for quick cart management
apps/storefront/src/app/products/page.tsx	Enhanced products page with improved filtering, pagination, and responsive grid
apps/storefront/src/app/products/[slug]/page.tsx	Enhanced product detail page with buy now button, delivery info, and reviews section
apps/storefront/src/app/page.tsx	Responsive improvements to home page with updated styling
apps/storefront/src/app/cart/page.tsx	Updated cart page with improved layout and currency formatting
apps/storefront/src/app/account/page.tsx	Enhanced account page with better navigation and responsive design
apps/storefront/src/app/globals.css	Added focus ring utility class for accessibility

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-06T17:50:16Z

+            <Image
+              src={product.thumbnail || product.images?.[0] || ''}
+              alt={product.name}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-200"
+              sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
+            />


The Image component is missing the 'alt' attribute value when there's no thumbnail or images. An empty string is being passed, which fails accessibility standards. Provide a meaningful alt text like "Product image placeholder" or "No image available".

Copilot · 2026-01-06T17:50:16Z

+            className={`absolute top-3 right-3 p-2 rounded-md shadow-sm transition-all ${
+              isWishlisted 
+                ? 'bg-red-50 opacity-100' 
+                : 'bg-white opacity-0 group-hover:opacity-100'


The wishlist button's opacity-0 state means it's invisible but still in the accessibility tree, which could confuse screen reader users who can focus on an invisible element. Consider using aria-hidden="true" when not hovered, or ensure consistent visibility for keyboard navigation users.

Suggested change

: 'bg-white opacity-0 group-hover:opacity-100'

: 'bg-white opacity-100'

Copilot · 2026-01-06T17:50:16Z

+  const rating = product?.rating || 4.5;
+  const reviewCount = product?.reviewCount || 245;
+
+  // Estimated delivery date (3-5 business days)


The comment says "3-5 business days" but the code adds exactly 5 calendar days. This inconsistency between the comment and implementation could mislead developers. Either update the comment to match the implementation or implement actual business day calculation.

Suggested change

// Estimated delivery date (3-5 business days)

// Estimated delivery date (5 days from now)

Copilot · 2026-01-06T17:50:17Z

+                                {suggestion.thumbnail && (
+                                  <img
+                                    src={suggestion.thumbnail}
+                                    alt=""
+                                    className="w-12 h-12 object-cover rounded-md"
+                                  />


The search suggestions dropdown uses regular img tag instead of Next.js Image component. This misses out on Next.js automatic image optimization features. Consider using the Image component for better performance and automatic optimization.

Copilot · 2026-01-06T17:50:17Z

+  const handleCheckout = () => {
+    closeCart();
+    // Navigate to checkout
+    window.location.href = '/cart';


Using window.location.href for navigation is not recommended in Next.js applications as it causes a full page reload, losing the benefits of client-side navigation. Replace with router.push('/cart') to maintain SPA behavior.

Copilot · 2026-01-06T17:50:20Z

+        <div className="mx-auto">
+          {/* Top Bar */}
+          <div className="py-2 px-4 bg-blue-600 text-white text-sm text-center">
+            🎉 Free shipping on orders over ₹200!


The currency symbol is changed from "$" to "₹" in the top bar announcement, but this appears to be an inconsistent change. Verify that this is intentional and that the currency is properly set throughout the application. If the app should support multiple currencies, this should be configurable rather than hardcoded.

Suggested change

🎉 Free shipping on orders over ₹200!

🎉 Free shipping on orders over {formatCurrency(200)}!

Copilot · 2026-01-06T17:50:20Z

+  // Sync local cart to server when user is authenticated
+  useEffect(() => {
+    if (isAuthenticated && items.length > 0) {
+      // Sync each item to server
+      items.forEach(item => {
+        // This would ideally be done in a batch, but for now we'll sync on add/update
+      });
+    }
+  }, [isAuthenticated, items]);
+


The sync logic in this useEffect is incomplete and only contains a comment. Items are being synced to the server but the actual implementation is missing, which means local cart changes won't be persisted when the user is authenticated. Either complete the implementation or remove the placeholder code.

Suggested change

// Sync local cart to server when user is authenticated

useEffect(() => {

if (isAuthenticated && items.length > 0) {

// Sync each item to server

items.forEach(item => {

// This would ideally be done in a batch, but for now we'll sync on add/update

});

}

}, [isAuthenticated, items]);

Copilot · 2026-01-06T17:50:20Z

+import { useAuth } from '@/contexts/AuthContext';
+
+export default function CartDrawer() {
+  const { isOpen, closeCart, items, subtotal, itemCount, updateQuantity, removeItem, clearCart } = useCartStore();


Unused variable clearCart.

Suggested change

const { isOpen, closeCart, items, subtotal, itemCount, updateQuantity, removeItem, clearCart } = useCartStore();

const { isOpen, closeCart, items, subtotal, itemCount, updateQuantity, removeItem } = useCartStore();

Copilot · 2026-01-06T17:50:21Z

+export default function CartDrawer() {
+  const { isOpen, closeCart, items, subtotal, itemCount, updateQuantity, removeItem, clearCart } = useCartStore();
+  const { isAuthenticated } = useAuth();
+  const { addToCart: addToCartAPI, updateQuantity: updateQuantityAPI, removeFromCart: removeFromCartAPI } = useCart();


Unused variable addToCartAPI.

Suggested change

const { addToCart: addToCartAPI, updateQuantity: updateQuantityAPI, removeFromCart: removeFromCartAPI } = useCart();

const { removeFromCart: removeFromCartAPI } = useCart();

Copilot · 2026-01-06T17:50:21Z

+export default function CartDrawer() {
+  const { isOpen, closeCart, items, subtotal, itemCount, updateQuantity, removeItem, clearCart } = useCartStore();
+  const { isAuthenticated } = useAuth();
+  const { addToCart: addToCartAPI, updateQuantity: updateQuantityAPI, removeFromCart: removeFromCartAPI } = useCart();


Unused variable updateQuantityAPI.

Suggested change

const { addToCart: addToCartAPI, updateQuantity: updateQuantityAPI, removeFromCart: removeFromCartAPI } = useCart();

const { addToCart: addToCartAPI, removeFromCart: removeFromCartAPI } = useCart();

kishore28kumar added 2 commits November 15, 2025 19:40

refactor: enhance storefront UI and functionality with improved style…

34c55f5

…s, new cart drawer, and filter drawer components

refactor: remove unused X import from Header component for cleaner code

8ab91ef

Copilot AI review requested due to automatic review settings January 6, 2026 17:44

Copilot started reviewing on behalf of kishore28kumar January 6, 2026 17:45 View session

Copilot AI reviewed Jan 6, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dev2#2

Dev2#2
kishore28kumar wants to merge 2 commits intodevfrom
dev2

kishore28kumar commented Jan 6, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 6, 2026

Uh oh!

Copilot AI Jan 6, 2026

Uh oh!

Copilot AI Jan 6, 2026

Uh oh!

Copilot AI Jan 6, 2026

Uh oh!

Copilot AI Jan 6, 2026

Uh oh!

Copilot AI Jan 6, 2026

Uh oh!

Copilot AI Jan 6, 2026

Uh oh!

Copilot AI Jan 6, 2026

Uh oh!

Copilot AI Jan 6, 2026

Uh oh!

Copilot AI Jan 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	: 'bg-white opacity-0 group-hover:opacity-100'
	: 'bg-white opacity-100'

	// Estimated delivery date (3-5 business days)
	// Estimated delivery date (5 days from now)

	🎉 Free shipping on orders over ₹200!
	🎉 Free shipping on orders over {formatCurrency(200)}!

	const { isOpen, closeCart, items, subtotal, itemCount, updateQuantity, removeItem, clearCart } = useCartStore();
	const { isOpen, closeCart, items, subtotal, itemCount, updateQuantity, removeItem } = useCartStore();

	const { addToCart: addToCartAPI, updateQuantity: updateQuantityAPI, removeFromCart: removeFromCartAPI } = useCart();
	const { removeFromCart: removeFromCartAPI } = useCart();

	const { addToCart: addToCartAPI, updateQuantity: updateQuantityAPI, removeFromCart: removeFromCartAPI } = useCart();
	const { addToCart: addToCartAPI, removeFromCart: removeFromCartAPI } = useCart();

Conversation

kishore28kumar commented Jan 6, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants