items catalog + floorplan image update

packages/editor/src/components/ui/item-catalog/item-catalog.tsx

@@ -3,7 +3,7 @@
 import type { AssetInput } from '@pascal-app/core'
 import { resolveCdnUrl } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import {
   Tooltip,
   TooltipContent,
@@ -13,54 +13,19 @@ import { cn } from './../../../lib/utils'
 import useEditor, { type CatalogCategory } from './../../../store/use-editor'
 import { CATALOG_ITEMS } from './catalog-items'
 
-const PLACEMENT_TAGS = new Set(['floor', 'wall', 'ceiling', 'countertop'])
-
 export function ItemCatalog({ category }: { category: CatalogCategory }) {
   const selectedItem = useEditor((state) => state.selectedItem)
   const setSelectedItem = useEditor((state) => state.setSelectedItem)
-  const [activePlacementTag, setActivePlacementTag] = useState<string | null>(null)
-  const [activeFunctionalTag, setActiveFunctionalTag] = useState<string | null>(null)
 
   const categoryItems = CATALOG_ITEMS.filter((item) => item.category === category)
 
-  // Collect tags available in this category
+  // Auto-select first item if current selection is not in this category
-  const allTags = Array.from(new Set(categoryItems.flatMap((item) => item.tags ?? [])))
-  const placementTags = allTags.filter((t) => PLACEMENT_TAGS.has(t))
-  const functionalTags = allTags.filter((t) => !PLACEMENT_TAGS.has(t))
-  const hasFilters = allTags.length > 1
-
-  // Count items for a placement tag given the current functional filter
-  const placementCount = (tag: string | null) =>
-    categoryItems.filter((item) => {
-      const tags = item.tags ?? []
-      if (tag !== null && !tags.includes(tag)) return false
-      if (activeFunctionalTag && !tags.includes(activeFunctionalTag)) return false
-      return true
-    }).length
-
-  // Count items for a functional tag given the current placement filter
-  const functionalCount = (tag: string) =>
-    categoryItems.filter((item) => {
-      const tags = item.tags ?? []
-      if (!tags.includes(tag)) return false
-      if (activePlacementTag && !tags.includes(activePlacementTag)) return false
-      return true
-    }).length
-
-  const filteredItems = categoryItems.filter((item) => {
-    const tags = item.tags ?? []
-    if (activePlacementTag && !tags.includes(activePlacementTag)) return false
-    if (activeFunctionalTag && !tags.includes(activeFunctionalTag)) return false
-    return true
-  })
-
-  // Auto-select first item if current selection is not in the filtered list
   useEffect(() => {
-    const isCurrentItemInCategory = filteredItems.some((item) => item.src === selectedItem?.src)
+    const isCurrentItemInCategory = categoryItems.some((item) => item.src === selectedItem?.src)
-    if (!isCurrentItemInCategory && filteredItems.length > 0) {
+    if (!isCurrentItemInCategory && categoryItems.length > 0) {
-      setSelectedItem(filteredItems[0] as AssetInput)
+      setSelectedItem(categoryItems[0] as AssetInput)
     }
-  }, [filteredItems, selectedItem?.src, setSelectedItem])
+  }, [categoryItems, selectedItem?.src, setSelectedItem])
 
   // Get attachment icon based on attachTo type
   const getAttachmentIcon = (attachTo: AssetInput['attachTo']) => {
@@ -74,105 +39,8 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
   }
 
   return (
-    <div className="flex flex-col gap-2">
-      {/* Filter chips */}
-      {hasFilters && (
-        <div className="flex flex-col gap-1.5">
-          {/* Placement row */}
-          {placementTags.length > 0 && (
-            <div className="flex flex-wrap gap-1">
-              <button
-                className={cn(
-                  'cursor-pointer rounded-md px-2 py-0.5 font-medium text-xs transition-colors',
-                  activePlacementTag === null
-                    ? 'bg-blue-500 text-white'
-                    : 'bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200',
-                )}
-                onClick={() => setActivePlacementTag(null)}
-                type="button"
-              >
-                All
-              </button>
-              {placementTags.map((tag) => {
-                const count = placementCount(tag)
-                const isActive = activePlacementTag === tag
-                const isEmpty = count === 0 && !isActive
-                return (
-                  <button
-                    className={cn(
-                      'inline-flex cursor-pointer items-center gap-1 rounded-md py-0.5 pr-1.5 pl-2 font-medium text-xs capitalize transition-colors',
-                      isActive
-                        ? 'bg-blue-500 text-white'
-                        : isEmpty
-                          ? 'cursor-not-allowed bg-zinc-800 text-zinc-500'
-                          : 'bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200',
-                    )}
-                    disabled={isEmpty}
-                    key={tag}
-                    onClick={() => setActivePlacementTag(isActive ? null : tag)}
-                    type="button"
-                  >
-                    {tag}
-                    <span
-                      className={cn(
-                        'text-[10px]',
-                        isActive ? 'text-blue-200' : isEmpty ? 'text-zinc-600' : 'text-blue-500/70',
-                      )}
-                    >
-                      {count}
-                    </span>
-                  </button>
-                )
-              })}
-            </div>
-          )}
-
-          {/* Functional row */}
-          {functionalTags.length > 0 && (
-            <div className="flex flex-wrap gap-1">
-              {functionalTags.map((tag) => {
-                const count = functionalCount(tag)
-                const isActive = activeFunctionalTag === tag
-                const isEmpty = count === 0 && !isActive
-                return (
-                  <button
-                    className={cn(
-                      'inline-flex cursor-pointer items-center gap-1 rounded-md py-0.5 pr-1.5 pl-2 font-medium text-xs capitalize transition-colors',
-                      isActive
-                        ? 'bg-violet-500 text-white'
-                        : isEmpty
-                          ? 'cursor-not-allowed bg-zinc-800 text-zinc-500'
-                          : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground',
-                    )}
-                    disabled={isEmpty}
-                    key={tag}
-                    onClick={() => setActiveFunctionalTag(isActive ? null : tag)}
-                    type="button"
-                  >
-                    {tag}
-                    <span
-                      className={cn(
-                        'text-[10px]',
-                        isActive
-                          ? 'text-violet-200'
-                          : isEmpty
-                            ? 'text-zinc-600'
-                            : 'text-zinc-500/70',
-                      )}
-                    >
-                      {count}
-                    </span>
-                  </button>
-                )
-              })}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Items */}
     <div className="-mx-2 -my-2 flex max-w-xl gap-2 overflow-x-auto p-2">
-        {filteredItems.map((item, index) => {
+      {categoryItems.map((item, index) => {
         const isSelected = selectedItem?.src === item?.src
         const attachmentIcon = getAttachmentIcon(item?.attachTo)
         return (
@@ -214,6 +82,5 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
         )
       })}
     </div>
-    </div>
   )
 }