category selection items

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 (
+    <div className="flex items-center gap-1.5">
+      {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 (
+          <Tooltip key={`${tool.id}-${tool.catalogCategory ?? index}`}>
+            <TooltipTrigger asChild>
+              <Button
+                className={cn(
+                  "size-11 rounded-lg transition-all",
+                  isActive && "bg-primary shadow-md shadow-primary/20",
+                  !isActive && "hover:bg-white/10",
+                )}
+                onClick={() => {
+                  setCatalogCategory(tool.catalogCategory);
+                  setActiveTool("item");
+                }}
+                size="icon"
+                variant={isActive ? "default" : "ghost"}
+              >
+                <NextImage
+                  alt={tool.label}
+                  className="size-full object-contain"
+                  height={28}
+                  src={tool.iconSrc}
+                  width={28}
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                {tool.label}
+                {isActive && " (Click to deselect)"}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}

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 }) {
           )}
         </AnimatePresence>
 
+        <AnimatePresence>
+          {phase === "furnish" && mode === "build" && (
+            <motion.div
+              className={cn(
+                "overflow-hidden border-zinc-800",
+                "max-h-20 border-b px-2 py-2 opacity-100",
+              )}
+              initial={{
+                opacity: 0,
+                maxHeight: 0,
+                paddingTop: 0,
+                paddingBottom: 0,
+                borderBottomWidth: 0,
+              }}
+              animate={{
+                opacity: 1,
+                maxHeight: 80,
+                paddingTop: 8,
+                paddingBottom: 8,
+                borderBottomWidth: 1,
+              }}
+              exit={{
+                opacity: 0,
+                maxHeight: 0,
+                paddingTop: 0,
+                paddingBottom: 0,
+                borderBottomWidth: 0,
+              }}
+            >
+              <div className="mx-auto w-max">
+                <FurnishTools />
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
         {/* Structure Tools Row - Animated */}
         <AnimatePresence>
           {phase === "structure" && mode === "build" && (