diff --git a/apps/editor/components/ui/action-menu/furnish-tools.tsx b/apps/editor/components/ui/action-menu/furnish-tools.tsx new file mode 100644 index 00000000..23486e8b --- /dev/null +++ b/apps/editor/components/ui/action-menu/furnish-tools.tsx @@ -0,0 +1,107 @@ +"use client"; + +import NextImage from "next/image"; +import { Button } from "@/components/ui/primitives/button"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/primitives/tooltip"; + +import { cn } from "@/lib/utils"; +import useEditor, { CatalogCategory } from "@/store/use-editor"; + +export type FurnishToolConfig = { + id: "item"; + iconSrc: string; + label: string; + catalogCategory: CatalogCategory; +}; + +// Furnish mode tools: furniture, appliances, decoration (painting is now a control mode) +export const furnishTools: FurnishToolConfig[] = [ + { + id: "item", + iconSrc: "/icons/couch.png", + label: "Furniture", + catalogCategory: "furniture", + }, + { + id: "item", + iconSrc: "/icons/appliance.png", + label: "Appliance", + catalogCategory: "appliance", + }, + { + id: "item", + iconSrc: "/icons/kitchen.png", + label: "Kitchen", + catalogCategory: "kitchen", + }, + { + id: "item", + iconSrc: "/icons/bathroom.png", + label: "Bathroom", + catalogCategory: "bathroom", + }, + { + id: "item", + iconSrc: "/icons/tree.png", + label: "Outdoor", + catalogCategory: "outdoor", + }, +]; + +export function FurnishTools() { + const mode = useEditor((state) => state.mode); + const activeTool = useEditor((state) => state.tool); + const setActiveTool = useEditor((state) => state.setTool); + const catalogCategory = useEditor((state) => state.catalogCategory); + const setCatalogCategory = useEditor((state) => state.setCatalogCategory); + + return ( +
+ {furnishTools.map((tool, index) => { + // For item tools with catalog category, check both tool and category match + const isActive = + mode === "build" && + activeTool === "item" && + catalogCategory === tool.catalogCategory; + + return ( + + + + + +

+ {tool.label} + {isActive && " (Click to deselect)"} +

+
+
+ ); + })} +
+ ); +} diff --git a/apps/editor/components/ui/action-menu/index.tsx b/apps/editor/components/ui/action-menu/index.tsx index 87b1e104..461b86dc 100644 --- a/apps/editor/components/ui/action-menu/index.tsx +++ b/apps/editor/components/ui/action-menu/index.tsx @@ -9,6 +9,7 @@ import { StructureTools } from "./structure-tools"; import useEditor from "@/store/use-editor"; import { AnimatePresence, motion } from "motion/react"; import { ItemCatalog } from "../item-catalog/item-catalog"; +import { FurnishTools } from "./furnish-tools"; // import { ViewToggles } from "./view-toggles"; export function ActionMenu({ className }: { className?: string }) { @@ -61,6 +62,42 @@ export function ActionMenu({ className }: { className?: string }) { )} + + {phase === "furnish" && mode === "build" && ( + +
+ +
+
+ )} +
+ {/* Structure Tools Row - Animated */} {phase === "structure" && mode === "build" && (