Update default shopify site design

components/shopify/cart-drawer.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
 import { Button } from '@/components/ui/button';
 import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from '@/components/ui/empty';
-import { Spinner } from '@/components/ui/spinner';
+import { Loader } from '@/components/ui/loader';
 import {
   Sheet,
   SheetContent,
@@ -58,7 +58,7 @@ const CartDrawer: React.FC = () => {
             <div className="flex-1 overflow-y-auto p-4">
               {loading && items.length === 0 ? (
                 <div className="flex items-center justify-center py-12">
-                  <Spinner size="lg" />
+                  <Loader size={32} />
                 </div>
               ) : items.length === 0 ? (
                 <Empty className="py-12">
@@ -79,7 +79,7 @@ const CartDrawer: React.FC = () => {
                     return (
                       <div key={item.id} className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0">
                         {/* Product Image */}
-                        <div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
+                        <div className="w-20 h-20 bg-gray-100 overflow-hidden flex-shrink-0">
                           {image ? (
                             <img
                               src={image}
@@ -95,13 +95,13 @@ const CartDrawer: React.FC = () => {
 
                         {/* Product Details */}
                         <div className="flex-1 min-w-0">
-                          <h4 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                          <h4 className="text-sm font-medium text-gray-900 mb-1 line-clamp-2">
                             {item.merchandise.product.title}
                           </h4>
 
                           {/* Variant Info */}
                           {selectedOptions.length > 0 && (
-                            <div className="text-sm text-gray-500 mb-2">
+                            <div className="text-xs text-gray-500 mb-2">
                               {selectedOptions.map((option, index) => (
                                 <span key={option.name}>
                                   {option.value}
@@ -113,7 +113,7 @@ const CartDrawer: React.FC = () => {
 
                           {/* Quantity Controls */}
                           <div className="flex items-center mt-3">
-                            <div className="flex items-center border border-gray-300 rounded-lg">
+                            <div className="flex items-center border border-gray-200 rounded-md">
                               <Button
                                 onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
                                 variant="ghost"
@@ -123,7 +123,7 @@ const CartDrawer: React.FC = () => {
                               >
                                 <RiSubtractLine size={14} />
                               </Button>
-                              <span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
+                              <span className="px-2 py-1 font-medium min-w-[30px] text-center text-sm">
                                 {item.quantity}
                               </span>
                               <Button
@@ -141,7 +141,7 @@ const CartDrawer: React.FC = () => {
 
                         {/* Price */}
                         <div className="flex-shrink-0">
-                          <span className="text-sm font-semibold text-gray-900">
+                          <span className="text-sm text-gray-500">
                             ${parseFloat(item.merchandise.price.amount).toFixed(2)}
                           </span>
                         </div>
@@ -153,7 +153,7 @@ const CartDrawer: React.FC = () => {
                             variant="ghost"
                             size="icon-sm"
                             disabled={loading}
-                            className="text-gray-400 hover:text-red-500"
+                            className="text-gray-400 hover:text-gray-900"
                           >
                             <RiCloseLine size={18} />
                           </Button>
@@ -169,14 +169,14 @@ const CartDrawer: React.FC = () => {
             {items.length > 0 && (
               <div className="border-t border-border p-6">
                 {/* Subtotal */}
-                <div className="flex items-center justify-between mb-4">
-                  <span className="text-base font-semibold">Subtotal</span>
-                  <span className="text-lg font-bold">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium text-gray-900">Subtotal</span>
+                  <span className="text-sm font-medium text-gray-900">
                     ${totalAmount.toFixed(2)}
                   </span>
                 </div>
 
-                <div className="text-sm text-gray-500 mb-4">
+                <div className="text-xs text-gray-500 mb-4">
                   Shipping and taxes calculated at checkout
                 </div>
 
@@ -185,12 +185,12 @@ const CartDrawer: React.FC = () => {
                   <Button
                     onClick={handleCheckout}
                     disabled={loading || !checkoutUrl}
-                    className="w-full"
+                    className="w-full h-14 rounded-full text-base"
                     size="lg"
                   >
                     {loading ? (
                       <span className="flex items-center justify-center space-x-2">
-                        <Spinner size="sm" />
+                        <Loader size={16} />
                         <span>Processing...</span>
                       </span>
                     ) : (

components/shopify/collection-card.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Link from 'next/link';
-import { Card, CardContent } from '@/components/ui/card';
 
 interface CollectionImage {
   url: string;
@@ -22,43 +21,29 @@ interface CollectionCardProps {
 const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
   return (
     <Link href={`/collections/${collection.handle}`} className="block group">
-      <Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden py-0 gap-0">
-        {/* Collection Image */}
-        <div className="aspect-video overflow-hidden bg-gray-100">
-          {collection.image ? (
-            <img
-              src={collection.image.url}
-              alt={collection.image.altText || collection.title}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-            />
-          ) : (
-            <div className="w-full h-full flex items-center justify-center text-gray-400">
-              <i className="ri-folder-line text-6xl"></i>
-            </div>
-          )}
-        </div>
-
-        {/* Collection Info */}
-        <CardContent className="p-6">
-          <h3 className="text-2xl font-bold text-gray-900 mb-3 group-hover:text-gray-600 transition-colors font-heading">
-            {collection.title}
-          </h3>
-
-          {collection.description && (
-            <p className="text-gray-600">
-              {collection.description.substring(0, 100)}
-              {collection.description.length > 100 ? '...' : ''}
-            </p>
-          )}
-
-          <div className="mt-4 text-black font-semibold group-hover:text-gray-600 transition-colors flex items-center">
-            <span>View Collection</span>
-            <i className="ri-arrow-right-s-line ml-2"></i>
+      {/* Collection Image */}
+      <div className="aspect-video overflow-hidden bg-gray-100">
+        {collection.image ? (
+          <img
+            src={collection.image.url}
+            alt={collection.image.altText || collection.title}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center text-gray-400">
+            <i className="ri-folder-line text-6xl"></i>
           </div>
-        </CardContent>
-      </Card>
+        )}
+      </div>
+
+      {/* Collection Info */}
+      <div className="mt-3">
+        <h3 className="text-base font-medium text-gray-900 font-heading">
+          {collection.title}
+        </h3>
+      </div>
     </Link>
   );
 };
 
-export default CollectionCard;
+export default CollectionCard;

components/shopify/collection-detail.tsx

@@ -20,21 +20,17 @@ const CollectionDetail: React.FC = () => {
     return (
       <div className="pt-4 pb-16">
         <div className="container mx-auto px-4">
-          <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+          <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
             {formattedTitle}
           </h2>
 
           {/* Loading Skeleton */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-            {Array.from({ length: 8 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div key={index} className="animate-pulse">
                 <div className="aspect-square bg-gray-200"></div>
-                <div className="p-6">
-                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-12 bg-gray-200 rounded"></div>
-                </div>
+                <div className="mt-3 h-4 w-2/3 bg-gray-200 rounded"></div>
+                <div className="mt-2 h-4 w-1/4 bg-gray-200 rounded"></div>
               </div>
             ))}
           </div>
@@ -47,13 +43,13 @@ const CollectionDetail: React.FC = () => {
     return (
       <div className="pt-4 pb-16">
         <div className="container mx-auto px-4 text-center">
-          <h2 className="text-5xl font-bold mb-8 font-heading">
+          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
             {formattedTitle}
           </h2>
 
-          <div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto">
+          <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
             <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
-            <h3 className="text-lg font-semibold text-red-800 mb-2">
+            <h3 className="text-lg font-medium text-red-800 mb-2">
               Failed to Load Collection
             </h3>
             <p className="text-red-600 mb-4">
@@ -61,7 +57,7 @@ const CollectionDetail: React.FC = () => {
             </p>
             <button
               onClick={() => refetch()}
-              className="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors"
+              className="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors"
             >
               Try Again
             </button>
@@ -77,15 +73,15 @@ const CollectionDetail: React.FC = () => {
   return (
     <div className="pt-4 pb-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
           {title}
         </h2>
 
         {products.length === 0 ? (
           <div className="text-center py-12">
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
+            <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
               <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-              <h3 className="text-lg font-semibold text-gray-600 mb-2">
+              <h3 className="text-lg font-medium text-gray-600 mb-2">
                 No Products in Collection
               </h3>
               <p className="text-gray-500">
@@ -94,7 +90,7 @@ const CollectionDetail: React.FC = () => {
             </div>
           </div>
         ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
             {products.map((product) => (
               <ProductCard key={product.id} product={product} />
             ))}

components/shopify/collections.tsx

@@ -11,20 +11,16 @@ const Collections: React.FC = () => {
     return (
       <div className="py-16">
         <div className="container mx-auto px-4">
-          <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+          <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
             Our Collections
           </h2>
 
           {/* Loading Skeleton */}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             {Array.from({ length: 6 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+              <div key={index} className="animate-pulse">
                 <div className="aspect-video bg-gray-200"></div>
-                <div className="p-6">
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                </div>
+                <div className="mt-3 h-4 w-1/3 bg-gray-200 rounded"></div>
               </div>
             ))}
           </div>
@@ -37,13 +33,13 @@ const Collections: React.FC = () => {
     return (
       <div className="py-16">
         <div className="container mx-auto px-4 text-center">
-          <h2 className="text-5xl font-bold mb-8 font-heading">
+          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
             Our Collections
           </h2>
 
-          <div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto">
+          <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
             <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
-            <h3 className="text-lg font-semibold text-red-800 mb-2">
+            <h3 className="text-lg font-medium text-red-800 mb-2">
               Failed to Load Collections
             </h3>
             <p className="text-red-600 mb-4">
@@ -51,7 +47,7 @@ const Collections: React.FC = () => {
             </p>
             <button
               onClick={() => refetch()}
-              className="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors"
+              className="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors"
             >
               Try Again
             </button>
@@ -65,13 +61,13 @@ const Collections: React.FC = () => {
     return (
       <div className="py-16">
         <div className="container mx-auto px-4 text-center">
-          <h2 className="text-5xl font-bold mb-8 font-heading">
+          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
             Our Collections
           </h2>
 
-          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
+          <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
             <i className="ri-folder-line text-4xl text-gray-400 mb-4"></i>
-            <h3 className="text-lg font-semibold text-gray-600 mb-2">
+            <h3 className="text-lg font-medium text-gray-600 mb-2">
               No Collections Found
             </h3>
             <p className="text-gray-500">
@@ -86,7 +82,7 @@ const Collections: React.FC = () => {
   return (
     <div className="py-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
           Our Collections
         </h2>
 

components/shopify/product-card.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import { useShopifyCart, addCartLines } from '@/hooks/use-shopify-cart';
 import { truncate } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Card, CardContent } from '@/components/ui/card';
 
 interface ProductImage {
   url: string;
@@ -27,6 +25,7 @@ interface Product {
   id: string;
   title: string;
   description?: string;
+  productType?: string;
   handle: string;
   images: {
     edges: Array<{
@@ -87,7 +86,7 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
   };
 
   return (
-    <Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden group py-0 gap-0">
+    <div className="group">
       {/* Product Image */}
       <div className="aspect-square overflow-hidden bg-gray-100 relative">
         {firstImage ? (
@@ -113,26 +112,17 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
       </div>
 
       {/* Product Info */}
-      <CardContent className="p-4">
-        <h3 className="text-base font-semibold text-gray-900 mb-2 line-clamp-2 font-heading">
-          {truncate(product.title, 50)}
-        </h3>
-
-        {/* Price Section */}
-        <div className="flex items-center justify-between mb-3">
-          <span className="text-lg font-bold text-gray-900">
-            ${parseFloat(price.amount).toFixed(2)}
-          </span>
-        </div>
-
-        {/* View Details Button */}
+      <div className="mt-3">
         <Link href={`/products/${product.handle}`}>
-          <Button className="w-full" size="sm">
-            View Details
-          </Button>
+          <h3 className="text-base font-medium text-gray-900 line-clamp-2 font-heading">
+            {truncate(product.title, 50)}
+          </h3>
         </Link>
-      </CardContent>
-    </Card>
+        <p className="text-base text-gray-500">
+          ${parseFloat(price.amount).toFixed(2)}
+        </p>
+      </div>
+    </div>
   );
 };
 

components/shopify/product-detail.tsx

@@ -1,3 +1,3 @@
-import ProductDetail from './product-detail/index.tsx';
+import ProductDetail from './product-detail/index';
 
 export default ProductDetail;

components/shopify/product-detail/index.tsx

@@ -7,7 +7,7 @@ import { useProduct, type Product } from '@/hooks/use-shopify-products';
 import { useShopifyCart } from '@/hooks/use-shopify-cart';
 import ProductDetailGallery from './product-detail-gallery';
 import ProductDetailInfo from './product-detail-info';
-import ProductRecommendations from './product-recommendations';
+import ProductRecommendations from '../product-recommendations';
 import { Button } from '@/components/ui/button';
 import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
 import { RiErrorWarningLine } from '@remixicon/react';
@@ -38,7 +38,7 @@ interface ProductVariant {
   };
 }
 
-export type { Product };
+export type { Product, ProductVariant };
 
 interface ProductDetailProps {
   handle?: string;
@@ -54,7 +54,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
   const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
   const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({});
   const [quantity, setQuantity] = useState(1);
-  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
   const [addingToCart, setAddingToCart] = useState(false);
 
   // Initialize variant when product loads
@@ -86,17 +85,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
 
     if (matchingVariant) {
       setSelectedVariant(matchingVariant.node);
-
-      // Update image if variant has an associated image
-      if (matchingVariant.node.image && product) {
-        const variantImageUrl = matchingVariant.node.image.url;
-        const imageIndex = product.images.edges.findIndex(
-          edge => edge.node.url === variantImageUrl
-        );
-        if (imageIndex !== -1) {
-          setSelectedImageIndex(imageIndex);
-        }
-      }
     }
   };
 
@@ -117,15 +105,12 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
   if (loading) {
     return (
       <div className="container mx-auto px-4 py-8">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
           {/* Image Gallery Skeleton */}
-          <div>
-            <div className="aspect-square bg-gray-200 rounded-lg animate-pulse mb-4"></div>
-            <div className="grid grid-cols-4 gap-2">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <div key={i} className="aspect-square bg-gray-200 rounded animate-pulse"></div>
-              ))}
-            </div>
+          <div className="lg:col-span-2 grid grid-cols-2 gap-4">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="aspect-square bg-gray-200 animate-pulse"></div>
+            ))}
           </div>
 
           {/* Product Info Skeleton */}
@@ -146,7 +131,7 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
       <div className="container mx-auto px-4 py-8 text-center">
         <Alert variant="destructive" className="max-w-md mx-auto p-8">
           <RiErrorWarningLine size={36} />
-          <AlertTitle className="text-lg font-semibold">
+          <AlertTitle className="text-lg font-medium">
             Product Not Found
           </AlertTitle>
           <AlertDescription className="mb-4">
@@ -174,33 +159,29 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
               </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link href="/shop">Shop</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
             <BreadcrumbItem>
               <BreadcrumbPage>{product.title}</BreadcrumbPage>
             </BreadcrumbItem>
           </BreadcrumbList>
         </Breadcrumb>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-          <ProductDetailGallery
-            images={product.images.edges.map(edge => edge.node)}
-            selectedImageIndex={selectedImageIndex}
-            onImageSelect={setSelectedImageIndex}
-          />
-          <ProductDetailInfo
-            product={product}
-            selectedVariant={selectedVariant}
-            selectedOptions={selectedOptions}
-            quantity={quantity}
-            setQuantity={setQuantity}
-            handleAddToCart={handleAddToCart}
-            onOptionChange={handleOptionChange}
-            loading={addingToCart}
-          />
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+          <div className="lg:col-span-2">
+            <ProductDetailGallery
+              images={product.images.edges.map(edge => edge.node)}
+            />
+          </div>
+          <div className="lg:sticky lg:top-20 lg:self-start">
+            <ProductDetailInfo
+              product={product}
+              selectedVariant={selectedVariant}
+              selectedOptions={selectedOptions}
+              quantity={quantity}
+              setQuantity={setQuantity}
+              handleAddToCart={handleAddToCart}
+              onOptionChange={handleOptionChange}
+              loading={addingToCart}
+            />
+          </div>
         </div>
       </div>
 

components/shopify/product-detail/product-detail-gallery.tsx

@@ -1,6 +1,9 @@
-import React from 'react';
-import { Button } from '@/components/ui/button';
+'use client';
+
+import React, { useState } from 'react';
 import { RiImageLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
 
 interface ProductImage {
   url: string;
@@ -9,59 +12,62 @@ interface ProductImage {
 
 interface ProductDetailGalleryProps {
   images: ProductImage[];
-  selectedImageIndex?: number;
-  onImageSelect?: (index: number) => void;
 }
 
-const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
-  images,
-  selectedImageIndex = 0,
-  onImageSelect
-}) => {
-  const selectedImage = selectedImageIndex;
-  const setSelectedImage = onImageSelect || (() => {});
+const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({ images }) => {
+  const [zoomedIndex, setZoomedIndex] = useState<number | null>(null);
+
+  if (images.length === 0) {
+    return (
+      <div className="aspect-square bg-gray-100 flex items-center justify-center text-gray-400">
+        <RiImageLine size={60} />
+      </div>
+    );
+  }
+
+  const zoomedImage = zoomedIndex !== null ? images[zoomedIndex] : null;
 
   return (
-    <div>
-      {/* Main Image */}
-      <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
-        {images.length > 0 ? (
-          <img
-            src={images[selectedImage].url}
-            alt={images[selectedImage].altText || 'Product image'}
-            className="w-full h-full object-cover"
-          />
-        ) : (
-          <div className="w-full h-full flex items-center justify-center text-gray-400">
-            <RiImageLine size={60} />
-          </div>
-        )}
+    <>
+      <div className="grid grid-cols-2 gap-4">
+        {images.map((image, index) => (
+          <button
+            key={index}
+            onClick={() => setZoomedIndex(index)}
+            className={cn(
+              'aspect-square bg-gray-100 overflow-hidden cursor-zoom-in group',
+              // A lone image (or the last of an odd count) spans both columns to avoid a gap
+              images.length % 2 === 1 && index === images.length - 1 && 'col-span-2'
+            )}
+            aria-label={`Zoom image ${index + 1}`}
+          >
+            <img
+              src={image.url}
+              alt={image.altText || `Product image ${index + 1}`}
+              className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          </button>
+        ))}
       </div>
 
-      {/* Image Thumbnails */}
-      {images.length > 1 && (
-        <div className="grid grid-cols-4 gap-2">
-          {images.map((image, index) => (
-            <button
-              key={index}
-              onClick={() => setSelectedImage(index)}
-              className={`aspect-square rounded-lg overflow-hidden border-2 transition-colors ${
-                selectedImage === index 
-                  ? 'border-black' 
-                  : 'border-gray-200 hover:border-gray-300'
-              }`}
-            >
-              <img
-                src={image.url}
-                alt={image.altText || 'Product thumbnail'}
-                className="w-full h-full object-cover"
-              />
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
+      {/* Zoom Lightbox */}
+      <Dialog
+        open={zoomedIndex !== null}
+        onOpenChange={(open) => !open && setZoomedIndex(null)}
+      >
+        <DialogContent className="max-w-4xl p-0 gap-0 overflow-hidden">
+          <DialogTitle className="sr-only">Product image</DialogTitle>
+          {zoomedImage && (
+            <img
+              src={zoomedImage.url}
+              alt={zoomedImage.altText || 'Product image'}
+              className="w-full h-auto max-h-[85vh] object-contain bg-gray-100"
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };
 
-export default ProductDetailGallery;
+export default ProductDetailGallery;

components/shopify/product-detail/product-detail-info.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Product, ProductVariant } from './index.tsx';
+import { Product, ProductVariant } from './index';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Spinner } from '@/components/ui/spinner';
+import { Loader } from '@/components/ui/loader';
 import {
   RiSubtractLine,
   RiAddLine,
@@ -45,18 +45,18 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
 
   return (
     <div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-4 font-heading">
+      <h1 className="text-4xl font-medium tracking-tight text-gray-900 mb-2 font-heading">
         {product.title}
       </h1>
 
       {/* Price */}
-      <div className="flex items-center space-x-4 mb-6">
-        <span className="text-2xl font-bold text-gray-900">
+      <div className="flex items-center space-x-3 mb-8">
+        <span className="text-lg text-gray-500">
           {formatPrice(price)}
         </span>
         {hasDiscount && compareAtPrice && (
           <>
-            <span className="text-xl text-gray-500 line-through">
+            <span className="text-lg text-gray-400 line-through">
               {formatPrice(compareAtPrice)}
             </span>
             <Badge variant="destructive">
@@ -77,10 +77,12 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
         </div>
       )}
 
-      {/* Product Options */}
-      {product.options.map(option => (
+      {/* Product Options (skip Shopify's placeholder "Title: Default Title" option) */}
+      {product.options
+        .filter(option => !(option.name === 'Title' && option.values.length === 1 && option.values[0] === 'Default Title'))
+        .map(option => (
         <div key={option.id} className="mb-6">
-          <label className="block text-sm font-semibold text-gray-700 mb-2">
+          <label className="block text-sm font-medium text-gray-900 mb-2">
             {option.name}
           </label>
           <div className="flex flex-wrap gap-2">
@@ -99,10 +101,10 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
 
       {/* Quantity Selector */}
       <div className="mb-8">
-        <label className="block text-sm font-semibold text-gray-700 mb-2">
+        <label className="block text-sm font-medium text-gray-900 mb-2">
           Quantity
         </label>
-        <div className="flex items-center border border-gray-300 rounded-lg w-fit">
+        <div className="flex items-center border border-gray-200 rounded-md w-fit">
           <Button
             onClick={() => setQuantity(Math.max(1, quantity - 1))}
             variant="ghost"
@@ -111,7 +113,7 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
           >
             <RiSubtractLine size={16} />
           </Button>
-          <span className="w-10 text-center font-semibold">{quantity}</span>
+          <span className="w-10 text-center text-sm font-medium">{quantity}</span>
           <Button
             onClick={() => setQuantity(quantity + 1)}
             variant="ghost"
@@ -122,20 +124,20 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
         </div>
       </div>
 
-      {/* Add to Cart Button */}
+      {/* Add to Bag Button */}
       <Button
         onClick={handleAddToCart}
         disabled={!selectedVariant?.availableForSale || loading}
         size="lg"
-        className="w-full text-lg"
+        className="w-full h-14 rounded-full text-base"
       >
         {loading ? (
           <span className="flex items-center justify-center gap-2">
-            <Spinner size="sm" />
+            <Loader size={16} />
             <span>Adding...</span>
           </span>
         ) : selectedVariant?.availableForSale ? (
-          'Add to Cart'
+          'Add to Bag'
         ) : (
           'Out of Stock'
         )}

components/shopify/product-recommendations.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { useProductRecommendations } from '@/hooks/use-shopify-products';
-import ProductCard from '../product-card';
+import ProductCard from './product-card';
 
 interface ProductRecommendationsProps {
   productId: string;
@@ -17,23 +17,19 @@ const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({ product
   }
 
   return (
-    <div className="bg-gray-50 py-16">
+    <div className="py-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-4xl font-bold text-center mb-12 text-gray-900 font-heading">
+        <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
           You Might Also Like
         </h2>
 
         {loading ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-            {Array.from({ length: 4 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <div key={index} className="animate-pulse">
                 <div className="aspect-square bg-gray-200"></div>
-                <div className="p-6">
-                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-12 bg-gray-200 rounded"></div>
-                </div>
+                <div className="mt-3 h-4 w-2/3 bg-gray-200 rounded"></div>
+                <div className="mt-2 h-4 w-1/4 bg-gray-200 rounded"></div>
               </div>
             ))}
           </div>
@@ -42,8 +38,8 @@ const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({ product
             <p className="text-gray-500">Recommendations could not be loaded</p>
           </div>
         ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-            {recommendations.slice(0, 4).map((recommendedProduct) => (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {recommendations.slice(0, 3).map((recommendedProduct) => (
               <ProductCard
                 key={recommendedProduct.id}
                 product={recommendedProduct}

components/shopify/products.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import ProductCard from './product-card';
 import { getProducts } from '@/hooks/use-shopify-products';
 import { Button } from '@/components/ui/button';
-import { Spinner } from '@/components/ui/spinner';
+import { Loader } from '@/components/ui/loader';
 
 interface ProductImage {
   url: string;
@@ -53,7 +53,7 @@ interface ProductsProps {
 }
 
 const Products: React.FC<ProductsProps> = ({ 
-  title = "Our Products", 
+  title = "Shop All", 
   limit = 12,
   showLoadMore = true 
 }) => {
@@ -120,21 +120,17 @@ const Products: React.FC<ProductsProps> = ({
     return (
       <div className="py-16">
         <div className="container mx-auto px-4">
-          <h2 className="text-4xl font-bold text-center mb-12 font-heading">
+          <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
             {title}
           </h2>
           
           {/* Loading Skeleton */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-            {Array.from({ length: 8 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div key={index} className="animate-pulse">
                 <div className="aspect-square bg-gray-200"></div>
-                <div className="p-6">
-                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-12 bg-gray-200 rounded"></div>
-                </div>
+                <div className="mt-3 h-4 w-2/3 bg-gray-200 rounded"></div>
+                <div className="mt-2 h-4 w-1/4 bg-gray-200 rounded"></div>
               </div>
             ))}
           </div>
@@ -147,13 +143,13 @@ const Products: React.FC<ProductsProps> = ({
     return (
       <div className="py-16">
         <div className="container mx-auto px-4 text-center">
-          <h2 className="text-4xl font-bold mb-8 font-heading">
+          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
             {title}
           </h2>
           
-          <div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto">
+          <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
             <i className="ri-error-warning-line text-4xl text-red-500 mb-4 block"></i>
-            <h3 className="text-lg font-semibold text-red-800 mb-2">
+            <h3 className="text-lg font-medium text-red-800 mb-2">
               Failed to Load Products
             </h3>
             <p className="text-red-600 mb-4">
@@ -175,13 +171,13 @@ const Products: React.FC<ProductsProps> = ({
     return (
       <div className="py-16">
         <div className="container mx-auto px-4 text-center">
-          <h2 className="text-4xl font-bold mb-8 font-heading">
+          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
             {title}
           </h2>
           
-          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
+          <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
             <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-            <h3 className="text-lg font-semibold text-gray-600 mb-2">
+            <h3 className="text-lg font-medium text-gray-600 mb-2">
               No Products Found
             </h3>
             <p className="text-gray-500">
@@ -196,12 +192,12 @@ const Products: React.FC<ProductsProps> = ({
   return (
     <div className="py-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
           {title}
         </h2>
 
         {/* Products Grid */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-12">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
           {products.map((product) => (
             <ProductCard
               key={product.id}
@@ -222,7 +218,7 @@ const Products: React.FC<ProductsProps> = ({
             >
               {loadingMore ? (
                 <span className="flex items-center space-x-2">
-                  <Spinner size="sm" />
+                  <Loader size={16} />
                   <span>Loading...</span>
                 </span>
               ) : (

components/shopify/promo-banner.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from '@/components/ui/carousel';
+
+const PROMOS = [
+  { text: 'Send a Gift Card', href: '/' },
+  { text: 'Free shipping on orders over $100', href: '/' },
+  { text: '30-day return policy', href: '/' },
+];
+
+const PromoBanner: React.FC = () => {
+  return (
+    <div className="bg-muted">
+      <Carousel opts={{ loop: true }} className="container mx-auto px-4">
+        <CarouselContent>
+          {PROMOS.map((promo) => (
+            <CarouselItem key={promo.text}>
+              <div className="h-10 flex items-center justify-center">
+                <Link
+                  href={promo.href}
+                  className="text-xs font-medium text-gray-900 underline underline-offset-2 hover:text-gray-600 transition-colors"
+                >
+                  {promo.text}
+                </Link>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious
+          variant="ghost"
+          className="left-0 size-7 text-gray-900 hover:text-gray-600"
+        >
+          <RiArrowLeftSLine size={16} />
+        </CarouselPrevious>
+        <CarouselNext
+          variant="ghost"
+          className="right-0 size-7 text-gray-900 hover:text-gray-600"
+        >
+          <RiArrowRightSLine size={16} />
+        </CarouselNext>
+      </Carousel>
+    </div>
+  );
+};
+
+export default PromoBanner;

components/shopify/search-dialog.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Command } from 'cmdk';
+import { RiSearchLine } from '@remixicon/react';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { Loader } from '@/components/ui/loader';
+import { getProducts, type Product } from '@/hooks/use-shopify-products';
+
+interface SearchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const SearchDialog: React.FC<SearchDialogProps> = ({ open, onOpenChange }) => {
+  const router = useRouter();
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [query, setQuery] = useState('');
+
+  // Load the catalog once per open; cmdk filters it as the user types
+  useEffect(() => {
+    if (!open) {
+      setQuery('');
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    getProducts({ first: 100, sortKey: 'TITLE' })
+      .then((data) => {
+        if (!cancelled) setProducts(data);
+      })
+      .catch((err) => {
+        console.error('Failed to load products for search:', err);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+
+  const handleSelect = (handle: string) => {
+    onOpenChange(false);
+    router.push(`/products/${handle}`);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl p-0 gap-0 overflow-hidden [&>button]:hidden">
+        <DialogTitle className="sr-only">Search products</DialogTitle>
+        <Command label="Search products">
+          <div className="flex items-center gap-2 border-b border-gray-200 px-4">
+            <RiSearchLine size={16} className="text-gray-400 shrink-0" />
+            <Command.Input
+              value={query}
+              onValueChange={setQuery}
+              placeholder="Search products..."
+              className="h-12 w-full bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400"
+            />
+          </div>
+          <Command.List className="max-h-80 overflow-y-auto p-2">
+            {loading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader size={20} />
+              </div>
+            ) : (
+              <>
+                <Command.Empty className="py-8 text-center text-sm text-gray-500">
+                  No products found.
+                </Command.Empty>
+                {products.map((product) => {
+                  const image = product.images.edges[0]?.node;
+                  const price = product.priceRange.minVariantPrice;
+
+                  return (
+                    <Command.Item
+                      key={product.id}
+                      value={product.title}
+                      onSelect={() => handleSelect(product.handle)}
+                      className="flex cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-sm data-[selected=true]:bg-gray-100"
+                    >
+                      <div className="w-10 h-10 bg-gray-100 overflow-hidden shrink-0">
+                        {image && (
+                          <img
+                            src={image.url}
+                            alt={image.altText || product.title}
+                            className="w-full h-full object-cover"
+                          />
+                        )}
+                      </div>
+                      <span className="flex-1 truncate font-medium text-gray-900">
+                        {product.title}
+                      </span>
+                      <span className="text-gray-500 shrink-0">
+                        ${parseFloat(price.amount).toFixed(2)}
+                      </span>
+                    </Command.Item>
+                  );
+                })}
+              </>
+            )}
+          </Command.List>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SearchDialog;

components/shopify/shop-footer.tsx

@@ -2,20 +2,12 @@ import React from 'react';
 
 const Footer: React.FC = () => {
   return (
-    <footer className="bg-black text-white py-12">
-      <div className="container mx-auto px-4 text-center">
-        <h3
-          className="text-2xl font-bold mb-4"
-          style={{fontFamily: 'Space Grotesk, sans-serif'}}
-        >
+    <footer className="bg-white border-t border-gray-200 py-6">
+      <div className="container mx-auto px-4 flex items-center justify-between text-sm text-gray-500">
+        <span className="font-medium text-gray-900 font-heading">
           Store
-        </h3>
-        <p className="text-gray-400 mb-6">
-          Your premium shopping destination
-        </p>
-        <div className="mt-8 pt-8 border-t border-gray-800 text-gray-400">
-          <p>&copy; 2025 Store. All rights reserved.</p>
-        </div>
+        </span>
+        <p>&copy; 2025 Store. All rights reserved.</p>
       </div>
     </footer>
   );

components/shopify/shop-header.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
 import { useShopifyCart } from '@/hooks/use-shopify-cart';
 import config from '@/lib/config.json';
-import { RiShoppingCartLine } from '@remixicon/react';
+import { RiSearchLine, RiShoppingBagLine } from '@remixicon/react';
+import SearchDialog from './search-dialog';
 
 const CartIcon: React.FC = () => {
   const { toggleCart, itemCount } = useShopifyCart();
@@ -14,9 +15,9 @@ const CartIcon: React.FC = () => {
       onClick={toggleCart}
       className="relative p-1 text-black hover:text-gray-600 transition-colors"
     >
-      <RiShoppingCartLine size={20} />
+      <RiShoppingBagLine size={20} />
       {itemCount > 0 && (
-        <span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-semibold">
+        <span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-medium">
           {itemCount > 99 ? '99+' : itemCount}
         </span>
       )}
@@ -25,12 +26,14 @@ const CartIcon: React.FC = () => {
 };
 
 const Header: React.FC = () => {
+  const [searchOpen, setSearchOpen] = useState(false);
+
   return (
-    <nav className="bg-white shadow-sm sticky top-0 z-30 h-14">
+    <nav className="bg-white/70 backdrop-blur-md border-b border-gray-200/60 sticky top-0 z-30 h-14">
       <div className="container mx-auto px-4 h-full">
         <div className="flex justify-between items-center h-full">
           {/* Logo */}
-          <Link href="/" className="text-lg font-bold text-black font-heading">
+          <Link href="/" className="text-lg font-medium text-black font-heading">
             {config.brand.logo.url ? (
               <img
                 src={config.brand.logo.url}
@@ -57,11 +60,22 @@ const Header: React.FC = () => {
               Collections
             </Link>
 
-            {/* Cart Icon */}
-            <CartIcon />
+            {/* Search + Cart Icons */}
+            <div className="flex items-center space-x-2">
+              <button
+                onClick={() => setSearchOpen(true)}
+                className="p-1 text-black hover:text-gray-600 transition-colors"
+                aria-label="Search products"
+              >
+                <RiSearchLine size={20} />
+              </button>
+              <CartIcon />
+            </div>
           </div>
         </div>
       </div>
+
+      <SearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
     </nav>
   );
 };

components/ui/carousel.tsx

@@ -175,6 +175,7 @@ function CarouselPrevious({
   className,
   variant = "outline",
   size = "icon",
+  children,
   ...props
 }: React.ComponentProps<typeof Button>) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
@@ -195,7 +196,7 @@ function CarouselPrevious({
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeft />
+      {children ?? <ArrowLeft />}
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -205,6 +206,7 @@ function CarouselNext({
   className,
   variant = "outline",
   size = "icon",
+  children,
   ...props
 }: React.ComponentProps<typeof Button>) {
   const { orientation, scrollNext, canScrollNext } = useCarousel()
@@ -225,7 +227,7 @@ function CarouselNext({
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRight />
+      {children ?? <ArrowRight />}
       <span className="sr-only">Next slide</span>
     </Button>
   )

components/ui/chart.tsx

@@ -1,357 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  ...props
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
-}) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
-  }) {
-  const { config } = useChart()
-
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null
-    }
-
-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
-    const value =
-      !labelKey && typeof label === "string"
-        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
-
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
-    }
-
-    if (!value) {
-      return null
-    }
-
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
-
-  if (!active || !payload?.length) {
-    return null
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot"
-
-  return (
-    <div
-      className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload
-          .filter((item) => item.type !== "none")
-          .map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-      </div>
-    </div>
-  )
-}
-
-const ChartLegend = RechartsPrimitive.Legend
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-}: React.ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean
-    nameKey?: string
-  }) {
-  const { config } = useChart()
-
-  if (!payload?.length) {
-    return null
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== "none")
-        .map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-    </div>
-  )
-}
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}

components/ui/combobox.tsx

@@ -1,310 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Combobox as ComboboxPrimitive } from "@base-ui/react"
-import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/components/ui/input-group"
-
-const Combobox = ComboboxPrimitive.Root
-
-function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
-}
-
-function ComboboxTrigger({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Trigger.Props) {
-  return (
-    <ComboboxPrimitive.Trigger
-      data-slot="combobox-trigger"
-      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
-      {...props}
-    >
-      {children}
-      <ChevronDownIcon
-        data-slot="combobox-trigger-icon"
-        className="text-muted-foreground pointer-events-none size-4"
-      />
-    </ComboboxPrimitive.Trigger>
-  )
-}
-
-function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
-  return (
-    <ComboboxPrimitive.Clear
-      data-slot="combobox-clear"
-      render={<InputGroupButton variant="ghost" size="icon-xs" />}
-      className={cn(className)}
-      {...props}
-    >
-      <XIcon className="pointer-events-none" />
-    </ComboboxPrimitive.Clear>
-  )
-}
-
-function ComboboxInput({
-  className,
-  children,
-  disabled = false,
-  showTrigger = true,
-  showClear = false,
-  ...props
-}: ComboboxPrimitive.Input.Props & {
-  showTrigger?: boolean
-  showClear?: boolean
-}) {
-  return (
-    <InputGroup className={cn("w-auto", className)}>
-      <ComboboxPrimitive.Input
-        render={<InputGroupInput disabled={disabled} />}
-        {...props}
-      />
-      <InputGroupAddon align="inline-end">
-        {showTrigger && (
-          <InputGroupButton
-            size="icon-xs"
-            variant="ghost"
-            asChild
-            data-slot="input-group-button"
-            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
-            disabled={disabled}
-          >
-            <ComboboxTrigger />
-          </InputGroupButton>
-        )}
-        {showClear && <ComboboxClear disabled={disabled} />}
-      </InputGroupAddon>
-      {children}
-    </InputGroup>
-  )
-}
-
-function ComboboxContent({
-  className,
-  side = "bottom",
-  sideOffset = 6,
-  align = "start",
-  alignOffset = 0,
-  anchor,
-  ...props
-}: ComboboxPrimitive.Popup.Props &
-  Pick<
-    ComboboxPrimitive.Positioner.Props,
-    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
-  >) {
-  return (
-    <ComboboxPrimitive.Portal>
-      <ComboboxPrimitive.Positioner
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        alignOffset={alignOffset}
-        anchor={anchor}
-        className="isolate z-50"
-      >
-        <ComboboxPrimitive.Popup
-          data-slot="combobox-content"
-          data-chips={!!anchor}
-          className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
-            className
-          )}
-          {...props}
-        />
-      </ComboboxPrimitive.Positioner>
-    </ComboboxPrimitive.Portal>
-  )
-}
-
-function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
-  return (
-    <ComboboxPrimitive.List
-      data-slot="combobox-list"
-      className={cn(
-        "max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ComboboxItem({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Item.Props) {
-  return (
-    <ComboboxPrimitive.Item
-      data-slot="combobox-item"
-      className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ComboboxPrimitive.ItemIndicator
-        data-slot="combobox-item-indicator"
-        render={
-          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-        }
-      >
-        <CheckIcon className="pointer-events-none size-4 pointer-coarse:size-5" />
-      </ComboboxPrimitive.ItemIndicator>
-    </ComboboxPrimitive.Item>
-  )
-}
-
-function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
-  return (
-    <ComboboxPrimitive.Group
-      data-slot="combobox-group"
-      className={cn(className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxLabel({
-  className,
-  ...props
-}: ComboboxPrimitive.GroupLabel.Props) {
-  return (
-    <ComboboxPrimitive.GroupLabel
-      data-slot="combobox-label"
-      className={cn(
-        "text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
-  return (
-    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  )
-}
-
-function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
-  return (
-    <ComboboxPrimitive.Empty
-      data-slot="combobox-empty"
-      className={cn(
-        "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ComboboxSeparator({
-  className,
-  ...props
-}: ComboboxPrimitive.Separator.Props) {
-  return (
-    <ComboboxPrimitive.Separator
-      data-slot="combobox-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxChips({
-  className,
-  ...props
-}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
-  ComboboxPrimitive.Chips.Props) {
-  return (
-    <ComboboxPrimitive.Chips
-      data-slot="combobox-chips"
-      className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ComboboxChip({
-  className,
-  children,
-  showRemove = true,
-  ...props
-}: ComboboxPrimitive.Chip.Props & {
-  showRemove?: boolean
-}) {
-  return (
-    <ComboboxPrimitive.Chip
-      data-slot="combobox-chip"
-      className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {showRemove && (
-        <ComboboxPrimitive.ChipRemove
-          render={<Button variant="ghost" size="icon-xs" />}
-          className="-ml-1 opacity-50 hover:opacity-100"
-          data-slot="combobox-chip-remove"
-        >
-          <XIcon className="pointer-events-none" />
-        </ComboboxPrimitive.ChipRemove>
-      )}
-    </ComboboxPrimitive.Chip>
-  )
-}
-
-function ComboboxChipsInput({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Input.Props) {
-  return (
-    <ComboboxPrimitive.Input
-      data-slot="combobox-chip-input"
-      className={cn("min-w-16 flex-1 outline-none", className)}
-      {...props}
-    />
-  )
-}
-
-function useComboboxAnchor() {
-  return React.useRef<HTMLDivElement | null>(null)
-}
-
-export {
-  Combobox,
-  ComboboxInput,
-  ComboboxContent,
-  ComboboxList,
-  ComboboxItem,
-  ComboboxGroup,
-  ComboboxLabel,
-  ComboboxCollection,
-  ComboboxEmpty,
-  ComboboxSeparator,
-  ComboboxChips,
-  ComboboxChip,
-  ComboboxChipsInput,
-  ComboboxTrigger,
-  ComboboxValue,
-  useComboboxAnchor,
-}

components/ui/command.tsx

@@ -1,184 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
-      >
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  )
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}

components/ui/direction.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Direction } from "radix-ui"
-
-function DirectionProvider({
-  dir,
-  direction,
-  children,
-}: React.ComponentProps<typeof Direction.DirectionProvider> & {
-  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
-}) {
-  return (
-    <Direction.DirectionProvider dir={direction ?? dir}>
-      {children}
-    </Direction.DirectionProvider>
-  )
-}
-
-const useDirection = Direction.useDirection
-
-export { DirectionProvider, useDirection }

components/ui/form.tsx

@@ -1,167 +0,0 @@
-"use client"
-
-import * as React from "react"
-import type * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  )
-}
-
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-}
-
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-}
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}

components/ui/loader.tsx

@@ -0,0 +1,96 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
+
+interface LoaderIconProps {
+  size?: number;
+}
+
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    style={{ color: "currentcolor" }}
+    viewBox="0 0 16 16"
+    width={size}
+  >
+    <title>Loader</title>
+    <g clipPath="url(#clip0_2393_1490)">
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M8 16V12"
+        opacity="0.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 1.52783L5.64887 4.7639"
+        opacity="0.9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 1.52783L10.3511 4.7639"
+        opacity="0.1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 14.472L10.3511 11.236"
+        opacity="0.4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 14.472L5.64887 11.236"
+        opacity="0.6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 5.52783L11.8043 6.7639"
+        opacity="0.2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 10.472L4.19583 9.23598"
+        opacity="0.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 10.4722L11.8043 9.2361"
+        opacity="0.3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 5.52783L4.19583 6.7639"
+        opacity="0.8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2393_1490">
+        <rect fill="white" height="16" width="16" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+  size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+  <div
+    className={cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    <LoaderIcon size={size} />
+  </div>
+);

components/ui/resizable.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
-  return (
-    <ResizablePrimitive.PanelGroup
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
-}
-
-function ResizableHandle({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
-}) {
-  return (
-    <ResizablePrimitive.PanelResizeHandle
-      data-slot="resizable-handle"
-      className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizablePrimitive.PanelResizeHandle>
-  )
-}
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

components/ui/sidebar.tsx

@@ -1,726 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
-  }
-
-  return context
-}
-
-function SidebarProvider({
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
-
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value
-      if (setOpenProp) {
-        setOpenProp(openState)
-      } else {
-        _setOpen(openState)
-      }
-
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-    },
-    [setOpenProp, open]
-  )
-
-  // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
-
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault()
-        toggleSidebar()
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [toggleSidebar])
-
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed"
-
-  const contextValue = React.useMemo<SidebarContextProps>(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
-
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-slot="sidebar-wrapper"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  )
-}
-
-function Sidebar({
-  side = "left",
-  variant = "sidebar",
-  collapsible = "offcanvas",
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
-}) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-
-  if (collapsible === "none") {
-    return (
-      <div
-        data-slot="sidebar"
-        className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-
-  if (isMobile) {
-    return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
-          data-sidebar="sidebar"
-          data-slot="sidebar"
-          data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}
-        >
-          <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-          </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
-    )
-  }
-
-  return (
-    <div
-      className="group peer text-sidebar-foreground hidden md:block"
-      data-state={state}
-      data-collapsible={state === "collapsed" ? collapsible : ""}
-      data-variant={variant}
-      data-side={side}
-      data-slot="sidebar"
-    >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot="sidebar-gap"
-        className={cn(
-          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-          "group-data-[collapsible=offcanvas]:w-0",
-          "group-data-[side=right]:rotate-180",
-          variant === "floating" || variant === "inset"
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-        )}
-      />
-      <div
-        data-slot="sidebar-container"
-        className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
-          variant === "floating" || variant === "inset"
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className
-        )}
-        {...props}
-      >
-        <div
-          data-sidebar="sidebar"
-          data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      data-sidebar="trigger"
-      data-slot="sidebar-trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("size-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeftIcon />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-}
-
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <button
-      data-sidebar="rail"
-      data-slot="sidebar-rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
-  return (
-    <main
-      data-slot="sidebar-inset"
-      className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
-  return (
-    <Input
-      data-slot="sidebar-input"
-      data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-header"
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-footer"
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="sidebar-separator"
-      data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-content"
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group"
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
-
-  return (
-    <Comp
-      data-slot="sidebar-group-label"
-      data-sidebar="group-label"
-      className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupAction({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="sidebar-group-action"
-      data-sidebar="group-action"
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group-content"
-      data-sidebar="group-content"
-      className={cn("w-full text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu"
-      data-sidebar="menu"
-      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-item"
-      data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
-      {...props}
-    />
-  )
-}
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function SidebarMenuButton({
-  asChild = false,
-  isActive = false,
-  variant = "default",
-  size = "default",
-  tooltip,
-  className,
-  ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button"
-  const { isMobile, state } = useSidebar()
-
-  const button = (
-    <Comp
-      data-slot="sidebar-menu-button"
-      data-sidebar="menu-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  )
-
-  if (!tooltip) {
-    return button
-  }
-
-  if (typeof tooltip === "string") {
-    tooltip = {
-      children: tooltip,
-    }
-  }
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side="right"
-        align="center"
-        hidden={state !== "collapsed" || isMobile}
-        {...tooltip}
-      />
-    </Tooltip>
-  )
-}
-
-function SidebarMenuAction({
-  className,
-  asChild = false,
-  showOnHover = false,
-  ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  showOnHover?: boolean
-}) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="sidebar-menu-action"
-      data-sidebar="menu-action"
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-menu-badge"
-      data-sidebar="menu-badge"
-      className={cn(
-        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSkeleton({
-  className,
-  showIcon = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  showIcon?: boolean
-}) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
-
-  return (
-    <div
-      data-slot="sidebar-menu-skeleton"
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  )
-}
-
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu-sub"
-      data-sidebar="menu-sub"
-      className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-sub-item"
-      data-sidebar="menu-sub-item"
-      className={cn("group/menu-sub-item relative", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSubButton({
-  asChild = false,
-  size = "md",
-  isActive = false,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean
-  size?: "sm" | "md"
-  isActive?: boolean
-}) {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      data-slot="sidebar-menu-sub-button"
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}

components/ui/sonner.tsx

@@ -1,40 +0,0 @@
-"use client"
-
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react"
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  )
-}
-
-export { Toaster }

components/ui/spinner.tsx

@@ -1,16 +0,0 @@
-import { Loader2Icon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <Loader2Icon
-      role="status"
-      aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
-      {...props}
-    />
-  )
-}
-
-export { Spinner }