Refactor imports and improve component structure for consistency

Author: ev-sc

src/app/map/[id]/components/LayerTypeIcon.tsx

@@ -1,4 +1,9 @@
-import { UsersIcon, MapPinIcon, SquareIcon, LayoutDashboardIcon } from "lucide-react";
+import {
+  LayoutDashboardIcon,
+  MapPinIcon,
+  SquareIcon,
+  UsersIcon,
+} from "lucide-react";
 import { cn } from "@/shadcn/utils";
 import { LayerType } from "@/types";
 

src/app/map/[id]/components/controls/ControlHoverMenu.tsx

@@ -1,11 +1,11 @@
-import { useState, useRef } from "react";
+import { PencilIcon, TrashIcon } from "lucide-react";
+import { useRef, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/shadcn/ui/dropdown-menu";
-import { PencilIcon, TrashIcon } from "lucide-react";
 
 export default function ControlHoverMenu({
   children,
@@ -28,10 +28,9 @@ export default function ControlHoverMenu({
   };
 
   const handleMouseLeave = () => {
-    // Add a small delay before closing to allow moving to menu
     timeoutRef.current = setTimeout(() => {
       setOpen(false);
-    }, 150);
+    }, 200);
   };
 
   return (
@@ -40,14 +39,15 @@ export default function ControlHoverMenu({
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenu open={open} modal={false}>
         <DropdownMenuTrigger asChild>
           <div className="w-full">{children}</div>
         </DropdownMenuTrigger>
-        <DropdownMenuContent 
-          align="end" 
-          side="right" 
-          sideOffset={8}
+        <DropdownMenuContent
+          align="start"
+          side="right"
+          sideOffset={38}
+          alignOffset={-4}
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
         >

src/app/map/[id]/components/controls/LayerControlWrapper.tsx

@@ -5,5 +5,9 @@ export default function LayerControlWrapper({
 }: {
   children: ReactNode;
 }) {
-  return <div className="border-b border-neutral-200 last:border-b-0">{children}</div>;
+  return (
+    <div className="border-b border-neutral-200 last:border-b-0">
+      {children}
+    </div>
+  );
 }

src/app/map/[id]/components/controls/MarkersControl/MarkersControl.tsx

@@ -154,7 +154,11 @@ export default function MarkersControl() {
           <PlusIcon size={16} />
         </IconButtonWithTooltip>
       </LayerHeader>
-      {expanded && <div className="px-4 pb-3"><MarkersList /></div>}
+      {expanded && (
+        <div className="px-4 pb-3">
+          <MarkersList />
+        </div>
+      )}
     </LayerControlWrapper>
   );
 }

src/app/map/[id]/components/controls/MarkersControl/SortableFolderItem.tsx

@@ -18,8 +18,8 @@ import { LayerType } from "@/types";
 import { useFolderMutations } from "../../../hooks/useFolders";
 import { usePlacedMarkerState } from "../../../hooks/usePlacedMarkers";
 import ControlEditForm from "../ControlEditForm";
-import ControlWrapper from "../ControlWrapper";
 import ControlHoverMenu from "../ControlHoverMenu";
+import ControlWrapper from "../ControlWrapper";
 import SortableMarkerItem from "./SortableMarkerItem";
 import type { Folder } from "@/server/models/Folder";
 import type { PlacedMarker } from "@/server/models/PlacedMarker";
@@ -138,10 +138,7 @@ export default function SortableFolderItem({
             onSubmit={onSubmit}
           />
         ) : (
-          <ControlHoverMenu
-            onDelete={() => onDelete()}
-            onEdit={() => onEdit()}
-          >
+          <ControlHoverMenu onDelete={() => onDelete()} onEdit={() => onEdit()}>
             <button
               ref={isDraggingMarker ? setHeaderNodeRef : null}
               onClick={() => onClickFolder()}

src/app/map/[id]/components/controls/MarkersControl/SortableMarkerItem.tsx

@@ -8,8 +8,8 @@ import {
   usePlacedMarkerState,
 } from "../../../hooks/usePlacedMarkers";
 import ControlEditForm from "../ControlEditForm";
-import ControlWrapper from "../ControlWrapper";
 import ControlHoverMenu from "../ControlHoverMenu";
+import ControlWrapper from "../ControlWrapper";
 import type { PlacedMarker } from "@/server/models/PlacedMarker";
 
 export default function SortableMarkerItem({

src/app/map/[id]/components/controls/TurfsControl/TurfItem.tsx

@@ -7,8 +7,8 @@ import { useTurfMutations } from "../../../hooks/useTurfMutations";
 import { useTurfState } from "../../../hooks/useTurfState";
 import { CONTROL_PANEL_WIDTH } from "../../../styles";
 import ControlEditForm from "../ControlEditForm";
-import ControlWrapper from "../ControlWrapper";
 import ControlHoverMenu from "../ControlHoverMenu";
+import ControlWrapper from "../ControlWrapper";
 import type { Turf } from "@/server/models/Turf";
 
 export default function TurfItem({ turf }: { turf: Turf }) {