add state management and other stuff

src/app/parts/page.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams, useRouter } from 'next/navigation';
 import { Listbox, Transition } from '@headlessui/react';
-import { ChevronUpDownIcon, CheckIcon, XMarkIcon, TableCellsIcon, Squares2X2Icon } from '@heroicons/react/20/solid';
+import { ChevronUpDownIcon, CheckIcon, XMarkIcon, TableCellsIcon, Squares2X2Icon, MagnifyingGlassIcon } from '@heroicons/react/20/solid';
 import SearchInput from '@/components/SearchInput';
 import ProductCard from '@/components/ProductCard';
 import RestrictionAlert from '@/components/RestrictionAlert';
@@ -12,6 +12,8 @@ import Link from 'next/link';
 import { mockProducts } from '@/mock/product';
 import type { Product } from '@/mock/product';
 import Image from 'next/image';
+import { useBuildStore } from '@/store/useBuildStore';
+import { buildGroups } from '../build/page';
 
 // Extract unique values for dropdowns
 const categories = ['All', ...Array.from(new Set(mockProducts.map(part => part.category.name)))];
@@ -20,11 +22,11 @@ const vendors = ['All', ...Array.from(new Set(mockProducts.flatMap(part => part.
 
 // Restrictions for filter dropdown
 const restrictionOptions = [
-  '',
+  'All',
   'NFA',
   'SBR',
-  'SUPPRESSOR',
-  'STATE_RESTRICTIONS',
+  'Suppressor',
+  'State Restrictions',
 ];
 
 type SortField = 'name' | 'category' | 'price';
@@ -112,13 +114,13 @@ const Dropdown = ({
           <Listbox.Label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
             {label}
           </Listbox.Label>
-          <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-left shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm">
+          <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white dark:bg-neutral-800 py-1.5 pl-3 pr-10 text-left shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm">
             <span className="block truncate text-neutral-900 dark:text-white">
               {value || placeholder}
             </span>
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
               <ChevronUpDownIcon
-                className="h-5 w-5 text-neutral-400"
+                className="h-4 w-4 text-neutral-400"
                 aria-hidden="true"
               />
             </span>
@@ -128,7 +130,7 @@ const Dropdown = ({
             leave="transition ease-in duration-100"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
-            className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+            className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
           >
             <Listbox.Options>
               {options.map((option, optionIdx) => (
@@ -148,7 +150,7 @@ const Dropdown = ({
                       </span>
                       {selected ? (
                         <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600 dark:text-primary-400">
-                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          <CheckIcon className="h-4 w-4" aria-hidden="true" />
                         </span>
                       ) : null}
                     </>
@@ -163,8 +165,78 @@ const Dropdown = ({
   );
 };
 
+// Map product categories to checklist component categories
+const getComponentCategory = (productCategory: string): string => {
+  const categoryMap: Record<string, string> = {
+    // Upper components
+    'Upper Receiver': 'Upper',
+    'Barrel': 'Upper', 
+    'BCG': 'Upper',
+    'Bolt Carrier Group': 'Upper',
+    'Charging Handle': 'Upper',
+    'Gas Block': 'Upper',
+    'Gas Tube': 'Upper',
+    'Handguard': 'Upper',
+    'Muzzle Device': 'Upper',
+    'Suppressor': 'Upper',
+    
+    // Lower components
+    'Lower Receiver': 'Lower',
+    'Trigger': 'Lower',
+    'Trigger Guard': 'Lower',
+    'Pistol Grip': 'Lower',
+    'Buffer Tube': 'Lower',
+    'Buffer': 'Lower',
+    'Buffer Spring': 'Lower',
+    'Stock': 'Lower',
+    
+    // Accessories
+    'Magazine': 'Accessory',
+    'Sights': 'Accessory',
+    'Optic': 'Accessory',
+    'Scope': 'Accessory',
+    'Red Dot': 'Accessory',
+  };
+  
+  return categoryMap[productCategory] || 'Accessory'; // Default to Accessory if no match
+};
+
+// Map product categories to specific checklist component names
+const getMatchingComponentName = (productCategory: string): string => {
+  const componentMap: Record<string, string> = {
+    'Upper Receiver': 'Upper Receiver',
+    'Barrel': 'Barrel',
+    'BCG': 'Bolt Carrier Group (BCG)',
+    'Bolt Carrier Group': 'Bolt Carrier Group (BCG)',
+    'Charging Handle': 'Charging Handle',
+    'Gas Block': 'Gas Block',
+    'Gas Tube': 'Gas Tube',
+    'Handguard': 'Handguard',
+    'Muzzle Device': 'Muzzle Device',
+    'Suppressor': 'Muzzle Device', // Suppressors go to Muzzle Device component
+    
+    'Lower Receiver': 'Lower Receiver',
+    'Trigger': 'Trigger',
+    'Trigger Guard': 'Trigger Guard',
+    'Pistol Grip': 'Pistol Grip',
+    'Buffer Tube': 'Buffer Tube',
+    'Buffer': 'Buffer',
+    'Buffer Spring': 'Buffer Spring',
+    'Stock': 'Stock',
+    
+    'Magazine': 'Magazine',
+    'Sights': 'Sights',
+    'Optic': 'Sights',
+    'Scope': 'Sights',
+    'Red Dot': 'Sights',
+  };
+  
+  return componentMap[productCategory] || '';
+};
+
 export default function Home() {
   const searchParams = useSearchParams();
+  const router = useRouter();
   const [selectedCategory, setSelectedCategory] = useState('All');
   const [selectedBrand, setSelectedBrand] = useState('All');
   const [selectedVendor, setSelectedVendor] = useState('All');
@@ -174,6 +246,11 @@ export default function Home() {
   const [sortField, setSortField] = useState<SortField>('name');
   const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
   const [viewMode, setViewMode] = useState<'table' | 'cards'>('table');
+  const [addedPartIds, setAddedPartIds] = useState<string[]>([]);
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  const selectPartForComponent = useBuildStore((state) => state.selectPartForComponent);
+  const selectedParts = useBuildStore((state) => state.selectedParts);
+  const removePartForComponent = useBuildStore((state) => state.removePartForComponent);
 
   // Read category from URL parameter on page load
   useEffect(() => {
@@ -198,8 +275,8 @@ export default function Home() {
     if (selectedRestriction) {
       if (selectedRestriction === 'NFA') matchesRestriction = !!part.restrictions?.nfa;
       else if (selectedRestriction === 'SBR') matchesRestriction = !!part.restrictions?.sbr;
-      else if (selectedRestriction === 'SUPPRESSOR') matchesRestriction = !!part.restrictions?.suppressor;
-      else if (selectedRestriction === 'STATE_RESTRICTIONS') matchesRestriction = !!(part.restrictions?.stateRestrictions && part.restrictions.stateRestrictions.length > 0);
+      else if (selectedRestriction === 'Suppressor') matchesRestriction = !!part.restrictions?.suppressor;
+      else if (selectedRestriction === 'State Restrictions') matchesRestriction = !!(part.restrictions?.stateRestrictions && part.restrictions.stateRestrictions.length > 0);
       else matchesRestriction = false;
     }
 
@@ -280,11 +357,16 @@ export default function Home() {
     const flags: string[] = [];
     if (restrictions?.nfa) flags.push('NFA');
     if (restrictions?.sbr) flags.push('SBR');
-    if (restrictions?.suppressor) flags.push('SUPPRESSOR');
-    if (restrictions?.stateRestrictions && restrictions.stateRestrictions.length > 0) flags.push('STATE_RESTRICTIONS');
+    if (restrictions?.suppressor) flags.push('Suppressor');
+    if (restrictions?.stateRestrictions && restrictions.stateRestrictions.length > 0) flags.push('State Restrictions');
     return flags;
   };
 
+  const handleAdd = (part: Product) => {
+    setAddedPartIds((prev) => [...prev, part.id]);
+    setTimeout(() => setAddedPartIds((prev) => prev.filter((id) => id !== part.id)), 1500);
+  };
+
   return (
     <main className="min-h-screen bg-neutral-50 dark:bg-neutral-900">
       {/* Page Title */}
@@ -309,56 +391,86 @@ export default function Home() {
 
       {/* Search and Filters */}
       <div className="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
           {/* Search Row */}
-          <div className="mb-4 flex justify-end">
-            <div className="w-1/2">
-              <SearchInput
-                label="Search"
-                value={searchTerm}
-                onChange={setSearchTerm}
-                placeholder="Search parts..."
-              />
+          <div className="mb-3 flex justify-end">
+            <div className={`transition-all duration-300 ease-in-out flex justify-end ${isSearchExpanded ? 'w-1/2' : 'w-auto'}`}>
+              {isSearchExpanded ? (
+                <div className="flex items-center gap-2 w-full justify-end">
+                  <div className="flex-1 max-w-md">
+                    <SearchInput
+                      label=""
+                      value={searchTerm}
+                      onChange={setSearchTerm}
+                      placeholder="Search parts..."
+                    />
+                  </div>
+                  <button
+                    onClick={() => {
+                      setIsSearchExpanded(false);
+                      setSearchTerm('');
+                    }}
+                    className="p-2 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors flex-shrink-0"
+                    aria-label="Close search"
+                  >
+                    <XMarkIcon className="h-5 w-5" />
+                  </button>
+                </div>
+              ) : (
+                <button
+                  onClick={() => setIsSearchExpanded(true)}
+                  className="p-2 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700"
+                  aria-label="Open search"
+                >
+                  <MagnifyingGlassIcon className="h-5 w-5" />
+                </button>
+              )}
             </div>
           </div>
           
           {/* Filters Row */}
-          <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
+          <div className="grid grid-cols-2 md:grid-cols-6 lg:grid-cols-7 gap-3">
             {/* Category Dropdown */}
-            <Dropdown
-              label="Category"
-              value={selectedCategory}
-              onChange={setSelectedCategory}
-              options={categories}
-              placeholder="All categories"
-            />
+            <div className="col-span-1">
+              <Dropdown
+                label="Category"
+                value={selectedCategory}
+                onChange={setSelectedCategory}
+                options={categories}
+                placeholder="All categories"
+              />
+            </div>
             
             {/* Brand Dropdown */}
-            <Dropdown
-              label="Brand"
-              value={selectedBrand}
-              onChange={setSelectedBrand}
-              options={brands}
-              placeholder="All brands"
-            />
+            <div className="col-span-1">
+              <Dropdown
+                label="Brand"
+                value={selectedBrand}
+                onChange={setSelectedBrand}
+                options={brands}
+                placeholder="All brands"
+              />
+            </div>
             
             {/* Vendor Dropdown */}
-            <Dropdown
-              label="Vendor"
-              value={selectedVendor}
-              onChange={setSelectedVendor}
-              options={vendors}
-              placeholder="All vendors"
-            />
+            <div className="col-span-1">
+              <Dropdown
+                label="Vendor"
+                value={selectedVendor}
+                onChange={setSelectedVendor}
+                options={vendors}
+                placeholder="All vendors"
+              />
+            </div>
             
             {/* Price Range */}
-            <div className="relative">
+            <div className="col-span-1">
               <Listbox value={priceRange} onChange={setPriceRange}>
                 <div className="relative">
                   <Listbox.Label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
                     Price Range
                   </Listbox.Label>
-                  <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-left shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm">
+                  <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white dark:bg-neutral-800 py-1.5 pl-3 pr-10 text-left shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm">
                     <span className="block truncate text-neutral-900 dark:text-white">
                       {priceRange === '' ? 'Select price range' :
                        priceRange === 'under-100' ? 'Under $100' :
@@ -368,7 +480,7 @@ export default function Home() {
                     </span>
                     <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                       <ChevronUpDownIcon
-                        className="h-5 w-5 text-neutral-400"
+                        className="h-4 w-4 text-neutral-400"
                         aria-hidden="true"
                       />
                     </span>
@@ -378,7 +490,7 @@ export default function Home() {
                     leave="transition ease-in duration-100"
                     leaveFrom="opacity-100"
                     leaveTo="opacity-0"
-                    className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                    className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                   >
                     <Listbox.Options>
                       {[
@@ -404,7 +516,7 @@ export default function Home() {
                               </span>
                               {selected ? (
                                 <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600 dark:text-primary-400">
-                                  <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                  <CheckIcon className="h-4 w-4" aria-hidden="true" />
                                 </span>
                               ) : null}
                             </>
@@ -418,26 +530,28 @@ export default function Home() {
             </div>
             
             {/* Restriction Filter */}
-            <Dropdown
-              label="Restriction"
-              value={selectedRestriction}
-              onChange={setSelectedRestriction}
-              options={restrictionOptions}
-              placeholder="All restrictions"
-            />
+            <div className="col-span-1">
+              <Dropdown
+                label="Restriction"
+                value={selectedRestriction}
+                onChange={setSelectedRestriction}
+                options={restrictionOptions}
+                placeholder="All restrictions"
+              />
+            </div>
             
             {/* Clear Filters */}
-            <div className="flex items-end">
+            <div className="col-span-1 flex items-end">
               <button
                 onClick={clearFilters}
                 disabled={!hasActiveFilters}
-                className={`w-full px-4 py-2 rounded-lg transition-colors flex items-center justify-center gap-2 ${
+                className={`w-full px-3 py-1.5 rounded-lg transition-colors flex items-center justify-center gap-1.5 text-sm ${
                   hasActiveFilters
                     ? 'bg-accent-600 hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600 text-white'
                     : 'bg-neutral-200 dark:bg-neutral-700 text-neutral-400 dark:text-neutral-500 cursor-not-allowed'
                 }`}
               >
-                <XMarkIcon className="h-4 w-4" />
+                <XMarkIcon className="h-3.5 w-3.5" />
                 Clear All
               </button>
             </div>
@@ -480,24 +594,12 @@ export default function Home() {
           </div>
         </div>
 
-        {/* Restriction Alert Example */}
-        {sortedParts.some(part => part.restrictions?.nfa) && (
-          <div className="mb-6">
-            <RestrictionAlert
-              type="warning"
-              title="NFA Items Detected"
-              message="Some items in your search require National Firearms Act registration. Please ensure compliance with all federal and state regulations."
-              icon="🔒"
-            />
-          </div>
-        )}
-
         {/* Table View */}
         {viewMode === 'table' && (
           <div className="bg-white dark:bg-neutral-800 shadow-sm rounded-lg overflow-hidden border border-neutral-200 dark:border-neutral-700">
-            <div className="overflow-x-auto">
+            <div className="overflow-x-auto max-h-screen overflow-y-auto">
               <table className="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
-                <thead className="bg-neutral-50 dark:bg-neutral-700">
+                <thead className="bg-neutral-50 dark:bg-neutral-700 sticky top-0 z-10 shadow-sm">
                   <tr>
                     <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
                       Product
@@ -527,7 +629,9 @@ export default function Home() {
                           <Image src={Array.isArray(part.images) && (part.images as string[]).length > 0 ? (part.images as string[])[0] : '/window.svg'} alt={part.name} width={48} height={48} className="object-contain w-12 h-12" />
                         </div>
                         <div>
-                          <div className="text-sm font-semibold text-neutral-900 dark:text-white">{part.name}</div>
+                          <Link href={`/products/${part.id}`} className="text-sm font-semibold text-primary hover:underline dark:text-primary-400">
+                            {part.name}
+                          </Link>
                           <div className="text-xs text-neutral-500 dark:text-neutral-400">{part.brand.name}</div>
                         </div>
                       </td>
@@ -542,11 +646,50 @@ export default function Home() {
                         </div>
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                        <Link href={`/products/${part.id}`} legacyBehavior>
-                          <a className="btn btn-primary btn-sm">
-                            Add
-                          </a>
-                        </Link>
+                        {(() => {
+                          // Find if this part is already selected for any component
+                          const selectedComponentId = Object.entries(selectedParts).find(([_, selectedPart]) => selectedPart?.id === part.id)?.[0];
+                          
+                          // Find the appropriate component based on category match
+                          const matchingComponentName = getMatchingComponentName(part.category.name);
+                          const matchingComponent = (buildGroups as {components: any[]}[]).flatMap((group) => group.components).find((component: any) => 
+                            component.name === matchingComponentName && !selectedParts[component.id]
+                          );
+                          
+                          if (selectedComponentId) {
+                            return (
+                              <button
+                                className="btn btn-outline btn-sm"
+                                onClick={() => removePartForComponent(selectedComponentId)}
+                              >
+                                Remove
+                              </button>
+                            );
+                          } else if (matchingComponent && !selectedParts[matchingComponent.id]) {
+                            return (
+                              <button
+                                className="btn btn-primary btn-sm"
+                                onClick={() => {
+                                  selectPartForComponent(matchingComponent.id, {
+                                    id: part.id,
+                                    name: part.name,
+                                    image_url: part.image_url,
+                                    brand: part.brand,
+                                    category: part.category,
+                                    offers: part.offers,
+                                  });
+                                  router.push('/build');
+                                }}
+                              >
+                                Add
+                              </button>
+                            );
+                          } else {
+                            return (
+                              <span className="text-xs text-gray-400">Part Selected</span>
+                            );
+                          }
+                        })()}
                       </td>
                     </tr>
                   ))}
@@ -577,7 +720,7 @@ export default function Home() {
         {viewMode === 'cards' && (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
             {sortedParts.map((part) => (
-              <ProductCard key={part.id} product={part} />
+              <ProductCard key={part.id} product={part} onAdd={() => handleAdd(part)} added={addedPartIds.includes(part.id)} />
             ))}
           </div>
         )}