wall tool draft

apps/editor/components/ui/action-menu/structure-tools.tsx

@@ -18,7 +18,7 @@ export const tools: ToolConfig[] = [
   { id: 'ceiling', iconSrc: '/icons/ceiling.png', label: 'Ceiling' },
   { id: 'roof', iconSrc: '/icons/roof.png', label: 'Gable Roof' },
   { id: 'item', iconSrc: '/icons/door.png', label: 'Door', catalogCategory: 'door' },
-  { id: 'item', iconSrc: '/icons/window.png', label: 'Window', catalogCategory: 'window' },
+  { id: 'window', iconSrc: '/icons/window.png', label: 'Window' },
   { id: 'zone', iconSrc: '/icons/zone.png', label: 'Zone' },
 ]
 

apps/editor/components/ui/sidebar/panels/site-panel/tree-node.tsx

@@ -9,6 +9,7 @@ import { LevelTreeNode } from "./level-tree-node";
 import { RoofTreeNode } from "./roof-tree-node";
 import { SlabTreeNode } from "./slab-tree-node";
 import { WallTreeNode } from "./wall-tree-node";
+import { WindowTreeNode } from "./window-tree-node";
 import { ZoneTreeNode } from "./zone-tree-node";
 
 interface TreeNodeProps {
@@ -36,6 +37,8 @@ export function TreeNode({ nodeId, depth = 0 }: TreeNodeProps) {
       return <RoofTreeNode node={node} depth={depth} />;
     case "item":
       return <ItemTreeNode node={node} depth={depth} />;
+    case "window":
+      return <WindowTreeNode node={node} depth={depth} />;
     case "zone":
       return <ZoneTreeNode node={node} depth={depth} />;
     default:

apps/editor/components/ui/sidebar/panels/site-panel/window-tree-node.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { WindowNode } from "@pascal-app/core"
+import { useViewer } from "@pascal-app/viewer"
+import Image from "next/image"
+import { useState } from "react"
+import { RenamePopover } from "./rename-popover"
+import { TreeNodeWrapper } from "./tree-node"
+import { TreeNodeActions } from "./tree-node-actions"
+
+interface WindowTreeNodeProps {
+  node: WindowNode
+  depth: number
+}
+
+export function WindowTreeNode({ node, depth }: WindowTreeNodeProps) {
+  const [renameOpen, setRenameOpen] = useState(false)
+  const isSelected = useViewer((state) => state.selection.selectedIds.includes(node.id))
+  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  const defaultName = `Window (${node.width}×${node.height}m)`
+
+  return (
+    <RenamePopover
+      node={node}
+      open={renameOpen}
+      onOpenChange={setRenameOpen}
+      defaultName={defaultName}
+    >
+      <TreeNodeWrapper
+        icon={<Image src="/icons/window.png" alt="" width={14} height={14} className="object-contain" />}
+        label={node.name || defaultName}
+        depth={depth}
+        hasChildren={false}
+        expanded={false}
+        onToggle={() => {}}
+        onClick={() => setSelection({ selectedIds: [node.id] })}
+        onDoubleClick={() => setRenameOpen(true)}
+        onMouseEnter={() => setHoveredId(node.id)}
+        onMouseLeave={() => setHoveredId(null)}
+        isSelected={isSelected}
+        isHovered={isHovered}
+        isVisible={node.visible !== false}
+        actions={<TreeNodeActions node={node} />}
+      />
+    </RenamePopover>
+  )
+}