polish catalog
This commit is contained in:
wass08
@@ -34,7 +34,7 @@ export function ActionMenu({ className }: { className?: string }) {
|
||||
{mode === "build" && tool === "item" && catalogCategory && (
|
||||
<motion.div
|
||||
className={cn(
|
||||
"overflow-hidden border-zinc-800 max-h-96 border-b px-2 py-2",
|
||||
"overflow-hidden border-zinc-800 border-b px-2 py-2",
|
||||
)}
|
||||
initial={{
|
||||
opacity: 0,
|
||||
@@ -45,7 +45,7 @@ export function ActionMenu({ className }: { className?: string }) {
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
maxHeight: 80,
|
||||
maxHeight: 160,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 8,
|
||||
borderBottomWidth: 1,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,27 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import { AssetInput } from "@pascal-app/core";
|
||||
import { resolveCdnUrl } from "@pascal-app/viewer";
|
||||
import Image from "next/image";
|
||||
import { useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/primitives/tooltip";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import useEditor, { CatalogCategory } from "@/store/use-editor";
|
||||
import { CATALOG_ITEMS } from "./catalog-items";
|
||||
import { AssetInput } from "@pascal-app/core";
|
||||
import { resolveCdnUrl } from "@pascal-app/viewer";
|
||||
|
||||
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 filteredItems = CATALOG_ITEMS.filter(
|
||||
// Reset tag filters when category changes
|
||||
useEffect(() => {
|
||||
setActivePlacementTag(null);
|
||||
setActiveFunctionalTag(null);
|
||||
}, [category]);
|
||||
|
||||
const categoryItems = CATALOG_ITEMS.filter(
|
||||
(item) => item.category === category,
|
||||
);
|
||||
|
||||
// Collect tags available 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(
|
||||
@@ -44,50 +86,134 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="-mx-2 -my-2 flex max-w-xl gap-2 overflow-x-auto p-2">
|
||||
{filteredItems.map((item, index) => {
|
||||
const isSelected = selectedItem?.src === item?.src;
|
||||
const attachmentIcon = getAttachmentIcon(item?.attachTo);
|
||||
return (
|
||||
<Tooltip key={index}>
|
||||
<TooltipTrigger asChild>
|
||||
<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(
|
||||
"relative aspect-square min-w-14 min-h-14 h-14 w-14 shrink-0 flex-col gap-px rounded-lg transition-all duration-200 ease-out hover:scale-105 hover:cursor-pointer",
|
||||
isSelected && "ring-2 ring-primary-foreground",
|
||||
)}
|
||||
onClick={() => setSelectedItem(item)}
|
||||
type="button"
|
||||
>
|
||||
<Image
|
||||
alt={item.name}
|
||||
className="rounded-lg object-cover"
|
||||
fill
|
||||
src={resolveCdnUrl(item.thumbnail) || ''}
|
||||
/>
|
||||
{attachmentIcon && (
|
||||
<div className="absolute right-0.5 bottom-0.5 flex h-4 w-4 items-center justify-center rounded bg-black/60">
|
||||
<Image
|
||||
alt={
|
||||
item.attachTo === "ceiling"
|
||||
? "Ceiling attachment"
|
||||
: "Wall attachment"
|
||||
}
|
||||
className="h-4 w-4"
|
||||
height={16}
|
||||
src={attachmentIcon}
|
||||
width={16}
|
||||
/>
|
||||
</div>
|
||||
onClick={() => setActivePlacementTag(null)}
|
||||
className={cn(
|
||||
"cursor-pointer rounded-md px-2 py-0.5 text-xs font-medium 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",
|
||||
)}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="text-xs" side="top">
|
||||
{item.name}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
{placementTags.map((tag) => {
|
||||
const count = placementCount(tag);
|
||||
const isActive = activePlacementTag === tag;
|
||||
const isEmpty = count === 0 && !isActive;
|
||||
return (
|
||||
<button
|
||||
key={tag}
|
||||
type="button"
|
||||
disabled={isEmpty}
|
||||
onClick={() => setActivePlacementTag(isActive ? null : tag)}
|
||||
className={cn(
|
||||
"inline-flex cursor-pointer items-center gap-1 rounded-md pl-2 pr-1.5 py-0.5 text-xs font-medium transition-colors capitalize",
|
||||
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",
|
||||
)}
|
||||
>
|
||||
{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
|
||||
key={tag}
|
||||
type="button"
|
||||
disabled={isEmpty}
|
||||
onClick={() => setActiveFunctionalTag(isActive ? null : tag)}
|
||||
className={cn(
|
||||
"inline-flex cursor-pointer items-center gap-1 rounded-md pl-2 pr-1.5 py-0.5 text-xs font-medium transition-colors capitalize",
|
||||
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",
|
||||
)}
|
||||
>
|
||||
{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) => {
|
||||
const isSelected = selectedItem?.src === item?.src;
|
||||
const attachmentIcon = getAttachmentIcon(item?.attachTo);
|
||||
return (
|
||||
<Tooltip key={index}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
"relative aspect-square min-w-14 min-h-14 h-14 w-14 shrink-0 flex-col gap-px rounded-lg transition-all duration-200 ease-out hover:scale-105 hover:cursor-pointer",
|
||||
isSelected && "ring-2 ring-primary-foreground",
|
||||
)}
|
||||
onClick={() => setSelectedItem(item)}
|
||||
type="button"
|
||||
>
|
||||
<Image
|
||||
alt={item.name}
|
||||
className="rounded-lg object-cover"
|
||||
fill
|
||||
src={resolveCdnUrl(item.thumbnail) || ""}
|
||||
/>
|
||||
{attachmentIcon && (
|
||||
<div className="absolute right-0.5 bottom-0.5 flex h-4 w-4 items-center justify-center rounded bg-black/60">
|
||||
<Image
|
||||
alt={
|
||||
item.attachTo === "ceiling"
|
||||
? "Ceiling attachment"
|
||||
: "Wall attachment"
|
||||
}
|
||||
className="h-4 w-4"
|
||||
height={16}
|
||||
src={attachmentIcon}
|
||||
width={16}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="text-xs" side="top">
|
||||
{item.name}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user