hover seletion

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

@@ -254,11 +254,14 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
   const deleteNode = useScene((state) => state.deleteNode);
   const updateNode = useScene((state) => state.updateNode);
   const selectedZoneId = useViewer((state) => state.selection.zoneId);
+  const hoveredId = useViewer((state) => state.hoveredId);
   const setSelection = useViewer((state) => state.setSelection);
+  const setHoveredId = useViewer((state) => state.setHoveredId);
   const setPhase = useEditor((state) => state.setPhase);
   const setMode = useEditor((state) => state.setMode);
 
   const isSelected = selectedZoneId === zone.id;
+  const isHovered = hoveredId === zone.id;
 
   const handleClick = () => {
     setSelection({ zoneId: zone.id });
@@ -284,9 +287,13 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
         "flex items-center h-7 cursor-pointer group/row text-sm px-3",
         isSelected
           ? "text-primary-foreground bg-primary/80 hover:bg-primary/90"
-          : "text-muted-foreground hover:bg-accent/50"
+          : isHovered
+            ? "bg-accent/70 text-foreground"
+            : "text-muted-foreground hover:bg-accent/50"
       )}
       onClick={handleClick}
+      onMouseEnter={() => setHoveredId(zone.id)}
+      onMouseLeave={() => setHoveredId(null)}
     >
       <Popover>
         <PopoverTrigger asChild>

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

@@ -13,11 +13,20 @@ export function ItemTreeNode({ node, depth }: ItemTreeNodeProps) {
   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 handleClick = () => {
     setSelection({ selectedIds: [node.id] });
   };
 
+  const handleMouseEnter = () => {
+    setHoveredId(node.id);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredId(null);
+  };
+
   return (
     <TreeNodeWrapper
       icon={<Box className="w-3.5 h-3.5" />}
@@ -27,6 +36,8 @@ export function ItemTreeNode({ node, depth }: ItemTreeNodeProps) {
       expanded={false}
       onToggle={() => {}}
       onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
       isSelected={isSelected}
       isHovered={isHovered}
       actions={<TreeNodeActions node={node} />}

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

@@ -38,6 +38,8 @@ interface TreeNodeWrapperProps {
   expanded: boolean;
   onToggle: () => void;
   onClick: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
   actions?: React.ReactNode;
   children?: React.ReactNode;
   isSelected?: boolean;
@@ -52,6 +54,8 @@ export function TreeNodeWrapper({
   expanded,
   onToggle,
   onClick,
+  onMouseEnter,
+  onMouseLeave,
   actions,
   children,
   isSelected,
@@ -69,6 +73,8 @@ export function TreeNodeWrapper({
               : "text-muted-foreground hover:bg-accent/50"
         )}
         style={{ paddingLeft: depth * 12 + 4 }}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
       >
         <button
           className="w-4 h-4 flex items-center justify-center shrink-0"

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

@@ -15,11 +15,20 @@ export function WallTreeNode({ node, depth }: WallTreeNodeProps) {
   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 handleClick = () => {
     setSelection({ selectedIds: [node.id] });
   };
 
+  const handleMouseEnter = () => {
+    setHoveredId(node.id);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredId(null);
+  };
+
   const wallLength = Math.sqrt(
     Math.pow(node.end[0] - node.start[0], 2) +
       Math.pow(node.end[1] - node.start[1], 2),
@@ -34,6 +43,8 @@ export function WallTreeNode({ node, depth }: WallTreeNodeProps) {
       expanded={expanded}
       onToggle={() => setExpanded(!expanded)}
       onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
       isSelected={isSelected}
       isHovered={isHovered}
       actions={<TreeNodeActions node={node} />}