Merge pull request #267 from commonknowledge/copilot/update-layers-panel-headings

Update layers panel to match design: full opacity, lucide icons, hover interactions

Author: joaquimds

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

@@ -1,33 +1,16 @@
-import { Grid3x3Icon } from "lucide-react";
-import { mapColors } from "@/app/map/[id]/styles";
+import {
+  LayoutDashboardIcon,
+  MapPinIcon,
+  SquareIcon,
+  UsersIcon,
+} from "lucide-react";
 import { cn } from "@/shadcn/utils";
 import { LayerType } from "@/types";
 
-function DotIcon({ color, size }: { color: string; size: number }) {
-  return (
-    <div
-      className={` w-${size} h-${size} rounded-full`}
-      style={{ backgroundColor: color }}
-    ></div>
-  );
-}
-
-function TurfIcon({ size }: { size: number }) {
-  return (
-    <div
-      className={` w-${size} h-${size} rounded-xs border-2`}
-      style={{
-        backgroundColor: mapColors.areas.color + "50",
-        borderColor: mapColors.areas.color,
-      }}
-    ></div>
-  );
-}
-
 export default function LayerTypeIcon({
   type,
   className = "",
-  size = 3,
+  size = 16,
 }: {
   type: LayerType | undefined;
   className?: string;
@@ -36,13 +19,13 @@ export default function LayerTypeIcon({
   const getIcon = () => {
     switch (type) {
       case LayerType.Member:
-        return <DotIcon color={mapColors.member.color} size={size} />;
+        return <UsersIcon size={size} />;
       case LayerType.Marker:
-        return <DotIcon color={mapColors.markers.color} size={size} />;
+        return <MapPinIcon size={size} />;
       case LayerType.Turf:
-        return <TurfIcon size={size} />;
+        return <SquareIcon size={size} />;
       case LayerType.Boundary:
-        return <Grid3x3Icon size={size * 4} />;
+        return <LayoutDashboardIcon size={size} />;
       default:
         return <></>;
     }

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

@@ -32,7 +32,7 @@ export default function BoundariesControl() {
       </LayerHeader>
 
       {expanded && (
-        <div className="space-y-2 py-2">
+        <div className="px-4 pt-2 pb-3 space-y-2">
           {/* Controls removed from here 2025-12-08. */}
           {/* Potentially could be restored. Remove if still not restored by 2025-03-01 */}
           {/* <ShapeSelector />

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

@@ -12,7 +12,7 @@ export default function ControlContextMenuContent({
     <ContextMenuContent>
       <ContextMenuItem onClick={onEdit}>
         <PencilIcon size={12} />
-        Edit
+        Rename
       </ContextMenuItem>
       <ContextMenuItem onClick={onDelete}>
         <TrashIcon size={12} />

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

@@ -0,0 +1,66 @@
+import { PencilIcon, TrashIcon } from "lucide-react";
+import { useRef, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shadcn/ui/dropdown-menu";
+
+export default function ControlHoverMenu({
+  children,
+  onEdit,
+  onDelete,
+}: {
+  children: React.ReactNode;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setOpen(false);
+    }, 200);
+  };
+
+  return (
+    <div
+      className="relative w-full"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <DropdownMenu open={open} modal={false}>
+        <DropdownMenuTrigger asChild>
+          <div className="w-full">{children}</div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="start"
+          side="right"
+          sideOffset={38}
+          alignOffset={-4}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          <DropdownMenuItem onClick={onEdit}>
+            <PencilIcon size={12} />
+            Rename
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={onDelete} variant="destructive">
+            <TrashIcon size={12} />
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

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

@@ -33,24 +33,24 @@ export default function ControlWrapper({
   return (
     <div
       className={cn(
-        "relative flex gap-1 text-sm",
+        "group relative flex gap-1 text-sm",
         isVisible ? "opacity-100" : "opacity-70",
       )}
     >
+      <div
+        className="absolute top-0 left-0 h-full w-1 shrink-0 rounded-xs"
+        style={{ background: getLayerColor() }}
+      ></div>
+
+      <div className="grow pl-3">{children}</div>
+
       <button
-        className="shrink-0 bg-neutral-100 hover:bg-neutral-200 text-neutral-500 rounded px-0.5 py-2 flex items-center justify-center self-stretch w-8 mr-2 cursor-pointer"
+        className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity bg-neutral-100 hover:bg-neutral-200 text-neutral-500 rounded p-1.5 flex items-center justify-center cursor-pointer"
         aria-label={`Toggle ${name} visibility`}
         onClick={onVisibilityToggle}
       >
         {isVisible ? <EyeIcon size={16} /> : <EyeOffIcon size={16} />}
       </button>
-
-      <div
-        className="absolute top-0 left-9 h-full w-1 shrink-0 rounded-xs"
-        style={{ background: getLayerColor() }}
-      ></div>
-
-      <div className="grow">{children}</div>
     </div>
   );
 }

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

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

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

@@ -37,7 +37,7 @@ export default function LayerHeader({
   };
 
   return (
-    <div className="flex items-center justify-between relative">
+    <div className="flex items-center justify-between relative px-4 py-3">
       <div className="group flex items-center gap-1">
         <button
           onClick={() => setExpanded(!expanded)}

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

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

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

@@ -5,7 +5,6 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { ContextMenuTrigger } from "@radix-ui/react-context-menu";
 import {
   CornerDownRightIcon,
   Folder as FolderClosed,
@@ -14,13 +13,12 @@ import {
 import { useMemo, useState } from "react";
 
 import { sortByPositionAndId } from "@/app/map/[id]/utils";
-import { ContextMenu } from "@/shadcn/ui/context-menu";
 import { cn } from "@/shadcn/utils";
 import { LayerType } from "@/types";
 import { useFolderMutations } from "../../../hooks/useFolders";
 import { usePlacedMarkerState } from "../../../hooks/usePlacedMarkers";
-import ControlContextMenuContent from "../ControlContextMenuContent";
 import ControlEditForm from "../ControlEditForm";
+import ControlHoverMenu from "../ControlHoverMenu";
 import ControlWrapper from "../ControlWrapper";
 import SortableMarkerItem from "./SortableMarkerItem";
 import type { Folder } from "@/server/models/Folder";
@@ -140,32 +138,26 @@ export default function SortableFolderItem({
             onSubmit={onSubmit}
           />
         ) : (
-          <ContextMenu>
-            <ContextMenuTrigger asChild>
-              <button
-                ref={isDraggingMarker ? setHeaderNodeRef : null}
-                onClick={() => onClickFolder()}
-                className={cn(
-                  "flex items-center gap-1 / w-full min-h-full p-1 rounded / transition-colors hover:bg-neutral-100 / text-left cursor-pointer",
-                  isHeaderOver ? "bg-blue-50" : "",
-                )}
-              >
-                {isExpanded ? (
-                  <FolderOpen className="w-4 h-4 text-muted-foreground shrink-0" />
-                ) : (
-                  <FolderClosed className="w-4 h-4 text-muted-foreground shrink-0" />
-                )}
-                <span className="text-xs text-muted-foreground transition-transform duration-30 rounded-full bg-neutral-50 px-1">
-                  {sortedMarkers.length}
-                </span>
-                {folder.name}
-              </button>
-            </ContextMenuTrigger>
-            <ControlContextMenuContent
-              onDelete={() => onDelete()}
-              onEdit={() => onEdit()}
-            />
-          </ContextMenu>
+          <ControlHoverMenu onDelete={() => onDelete()} onEdit={() => onEdit()}>
+            <button
+              ref={isDraggingMarker ? setHeaderNodeRef : null}
+              onClick={() => onClickFolder()}
+              className={cn(
+                "flex items-center gap-1 / w-full min-h-full p-1 rounded / transition-colors hover:bg-neutral-100 / text-left cursor-pointer",
+                isHeaderOver ? "bg-blue-50" : "",
+              )}
+            >
+              {isExpanded ? (
+                <FolderOpen className="w-4 h-4 text-muted-foreground shrink-0" />
+              ) : (
+                <FolderClosed className="w-4 h-4 text-muted-foreground shrink-0" />
+              )}
+              <span className="text-xs text-muted-foreground transition-transform duration-30 rounded-full bg-neutral-50 px-1">
+                {sortedMarkers.length}
+              </span>
+              {folder.name}
+            </button>
+          </ControlHoverMenu>
         )}
       </ControlWrapper>
 

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

@@ -1,15 +1,14 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { useState } from "react";
-import { ContextMenu, ContextMenuTrigger } from "@/shadcn/ui/context-menu";
 import { LayerType } from "@/types";
 import { useMapRef } from "../../../hooks/useMapCore";
 import {
   usePlacedMarkerMutations,
   usePlacedMarkerState,
 } from "../../../hooks/usePlacedMarkers";
-import ControlContextMenuContent from "../ControlContextMenuContent";
 import ControlEditForm from "../ControlEditForm";
+import ControlHoverMenu from "../ControlHoverMenu";
 import ControlWrapper from "../ControlWrapper";
 import type { PlacedMarker } from "@/server/models/PlacedMarker";
 
@@ -103,20 +102,17 @@ export default function SortableMarkerItem({
             onSubmit={onSubmit}
           />
         ) : (
-          <ContextMenu>
-            <ContextMenuTrigger asChild>
-              <button
-                className="flex items-center gap-2 / w-full min-h-full p-1 rounded / transition-colors hover:bg-neutral-100 / text-left cursor-pointer"
-                onClick={() => flyToMarker()}
-              >
-                {marker.label}
-              </button>
-            </ContextMenuTrigger>
-            <ControlContextMenuContent
-              onEdit={() => onEdit()}
-              onDelete={() => deletePlacedMarker(marker.id)}
-            />
-          </ContextMenu>
+          <ControlHoverMenu
+            onEdit={() => onEdit()}
+            onDelete={() => deletePlacedMarker(marker.id)}
+          >
+            <button
+              className="flex items-center gap-2 / w-full min-h-full p-1 rounded / transition-colors hover:bg-neutral-100 / text-left cursor-pointer"
+              onClick={() => flyToMarker()}
+            >
+              {marker.label}
+            </button>
+          </ControlHoverMenu>
         )}
       </ControlWrapper>
     </div>