fix: stacked dynamic sections menu

apps/nextjs/src/components/board/sections/dynamic-section.tsx

@@ -2,6 +2,7 @@ import { Box, Card } from "@mantine/core";
 
 import type { DynamicSection } from "~/app/[locale]/boards/_types";
 import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
+import { DynamicSectionProvider } from "./dynamic/dynamic-context";
 import { BoardDynamicSectionMenu } from "./dynamic/dynamic-menu";
 import { GridStack } from "./gridstack/gridstack";
 import classes from "./item.module.css";
@@ -12,6 +13,7 @@ interface Props {
 
 export const BoardDynamicSection = ({ section }: Props) => {
   const board = useRequiredBoard();
+
   return (
     <Box className="grid-stack-item-content">
       <Card
@@ -27,7 +29,9 @@ export const BoardDynamicSection = ({ section }: Props) => {
         }}
         p={0}
       >
-        <GridStack section={section} className="min-row" />
+        <DynamicSectionProvider section={section}>
+          <GridStack section={section} className="min-row" />
+        </DynamicSectionProvider>
       </Card>
       <BoardDynamicSectionMenu section={section} />
     </Box>

apps/nextjs/src/components/board/sections/dynamic/dynamic-context.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext } from "react";
+
+import type { DynamicSection } from "~/app/[locale]/boards/_types";
+import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
+
+interface DynamicSectionContextProps {
+  sectionIds: string[];
+}
+
+const DynamicSectionContext = createContext<DynamicSectionContextProps>({
+  sectionIds: [],
+});
+
+interface DynamicSectionProviderProps {
+  section: DynamicSection;
+}
+
+export const DynamicSectionProvider = ({ section, children }: PropsWithChildren<DynamicSectionProviderProps>) => {
+  const aboveIds = useAboveDynamicSectionIds();
+  const resetPrevious = usePlacedTopRightAndInDynamicSection({ sectionOrItem: section, previousId: aboveIds.at(-1) });
+
+  return (
+    <DynamicSectionContext.Provider value={{ sectionIds: resetPrevious ? [section.id] : [...aboveIds, section.id] }}>
+      {children}
+    </DynamicSectionContext.Provider>
+  );
+};
+
+export const useAboveDynamicSectionIds = () => {
+  return useContext(DynamicSectionContext).sectionIds;
+};
+
+interface UsePlacedTopRightAndInDynamicSectionProps {
+  sectionOrItem: { width: number; xOffset: number; yOffset: number };
+  previousId: string | undefined;
+}
+
+export const usePlacedTopRightAndInDynamicSection = ({
+  sectionOrItem,
+  previousId,
+}: UsePlacedTopRightAndInDynamicSectionProps) => {
+  const board = useRequiredBoard();
+  const aboveSection = board.sections.find(
+    (section): section is DynamicSection => section.id === previousId && section.kind === "dynamic",
+  );
+
+  // When not on top, no above section or not reaching the end of the above section, we want to reset the previous sections
+  return (
+    sectionOrItem.yOffset >= 1 || !aboveSection || sectionOrItem.xOffset + sectionOrItem.width !== aboveSection.width
+  );
+};

apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx

@@ -1,39 +1,144 @@
-import { ActionIcon, Menu } from "@mantine/core";
+import type { PropsWithChildren } from "react";
+import { Fragment, useEffect, useRef } from "react";
+import { ActionIcon, Group, Indicator, Menu, Popover, Stack, UnstyledButton } from "@mantine/core";
+import { useHover } from "@mantine/hooks";
 import { IconDotsVertical, IconTrash } from "@tabler/icons-react";
 
 import { useConfirmModal } from "@homarr/modals";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import type { DynamicSection } from "~/app/[locale]/boards/_types";
-import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
+import { useEditMode, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { useDynamicSectionActions } from "./dynamic-actions";
+import { useAboveDynamicSectionIds } from "./dynamic-context";
 
 export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSection }) => {
-  const t = useI18n();
-  const tDynamic = useScopedI18n("section.dynamic");
-  const { removeDynamicSection } = useDynamicSectionActions();
-  const { openConfirmModal } = useConfirmModal();
+  const dropdownRef = useRef<HTMLDivElement>(null);
   const [isEditMode] = useEditMode();
+  const aboveIds = useAboveDynamicSectionIds();
+  const board = useRequiredBoard();
+  const hasItemInTopRightCorner =
+    section.items.some((item) => item.xOffset + item.width === section.width && item.yOffset === 0) ||
+    board.sections.some(
+      (innerSection) =>
+        innerSection.kind === "dynamic" &&
+        innerSection.parentSectionId === section.id &&
+        innerSection.xOffset + innerSection.width == section.width &&
+        innerSection.yOffset == 0,
+    );
 
   if (!isEditMode) return null;
 
+  if (aboveIds.length >= 1 && !hasItemInTopRightCorner) {
+    return (
+      <Popover width="auto" position="right" withArrow shadow="md" returnFocus>
+        <Popover.Target popupType="menu">
+          <UnstyledButton
+            pos="absolute"
+            top={4}
+            right={4}
+            style={{ zIndex: 10 }}
+            onKeyDown={(event) => {
+              if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                event.preventDefault();
+                document.querySelectorAll<HTMLButtonElement>("[data-section-item]")[0]?.focus();
+              }
+            }}
+          >
+            <Indicator label={aboveIds.length + 1} styles={{ indicator: { height: "1rem" } }} offset={4}>
+              <ActionIcon component="div" variant="default" radius={"xl"}>
+                <IconDotsVertical size={"1rem"} />
+              </ActionIcon>
+            </Indicator>
+          </UnstyledButton>
+        </Popover.Target>
+        <Popover.Dropdown
+          ref={dropdownRef}
+          role="menu"
+          aria-orientation="vertical"
+          tabIndex={-1}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+              event.preventDefault();
+              document.querySelectorAll<HTMLButtonElement>("[data-section-item]")[0]?.focus();
+            }
+          }}
+        >
+          <div tabIndex={-1} data-autofocus data-mantine-stop-propagation style={{ outline: 0 }} />
+          <Stack>
+            {[...aboveIds, section.id].map((id, index) => (
+              <Fragment key={id}>
+                <Group hiddenFrom="md"></Group>
+                <DesktopButton id={id} index={index} />
+              </Fragment>
+            ))}
+          </Stack>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (aboveIds.length >= 1 && !hasItemInTopRightCorner) {
+    return (
+      <InnerMenu id={section.id}>
+        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={4} right={4} style={{ zIndex: 10 }}>
+          <IconDotsVertical size={"1rem"} />
+        </ActionIcon>
+      </InnerMenu>
+    );
+  }
+
+  return null;
+};
+
+interface DesktopButtonProps {
+  index: number;
+  id: string;
+}
+
+const DesktopButton = ({ index, id }: DesktopButtonProps) => {
+  const { hovered, ref } = useHover<HTMLButtonElement>();
+  useEffect(() => {
+    const sectionRef = document.querySelector<HTMLDivElement>(`[data-section-id="${id}"]`);
+    if (!sectionRef) return;
+
+    if (hovered) {
+      const previousBackground = sectionRef.style.backgroundColor;
+      sectionRef.style.backgroundColor = "rgba(255, 0, 0, 0.1)";
+
+      return () => {
+        sectionRef.style.backgroundColor = previousBackground;
+      };
+    }
+  }, [hovered]);
+
+  return (
+    <InnerMenu id={id} trigger="hover">
+      <UnstyledButton data-section-item visibleFrom="md" ref={ref}>
+        Section {index + 1}
+      </UnstyledButton>
+    </InnerMenu>
+  );
+};
+
+const InnerMenu = ({ children, id, trigger }: PropsWithChildren<{ id: string; trigger?: "hover" }>) => {
+  const t = useI18n();
+  const tDynamic = useScopedI18n("section.dynamic");
+  const { removeDynamicSection } = useDynamicSectionActions();
+  const { openConfirmModal } = useConfirmModal();
   const openRemoveModal = () => {
     openConfirmModal({
       title: tDynamic("remove.title"),
       children: tDynamic("remove.message"),
       onConfirm: () => {
-        removeDynamicSection({ id: section.id });
+        removeDynamicSection({ id });
       },
     });
   };
 
   return (
-    <Menu withinPortal withArrow position="right-start" arrowPosition="center">
-      <Menu.Target>
-        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={4} right={4} style={{ zIndex: 10 }}>
-          <IconDotsVertical size={"1rem"} />
-        </ActionIcon>
-      </Menu.Target>
+    <Menu withinPortal withArrow position="right-start" arrowPosition="center" trigger={trigger}>
+      <Menu.Target>{children}</Menu.Target>
       <Menu.Dropdown miw={128}>
         <Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
         <Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>

apps/nextjs/src/components/board/sections/menu/section-menu-context.tsx

@@ -0,0 +1,27 @@
+import type { GetStylesApi } from "@mantine/core";
+import { createSafeContext } from "@mantine/core";
+
+import type { SectionMenuFactory } from "./section-menu";
+
+interface SectionMenuContext {
+  toggleDropdown: () => void;
+  closeDropdownImmediately: () => void;
+  closeDropdown: () => void;
+  openDropdown: () => void;
+  getItemIndex: (node: HTMLButtonElement) => number | null;
+  setHovered: (index: number | null) => void;
+  hovered: number | null;
+  closeOnItemClick: boolean | undefined;
+  loop: boolean | undefined;
+  trigger: "click" | "hover" | "click-hover" | undefined;
+  opened: boolean;
+  unstyled: boolean | undefined;
+  getStyles: GetStylesApi<SectionMenuFactory>;
+  menuItemTabIndex: -1 | 0 | undefined;
+  openedViaClick: boolean;
+  setOpenedViaClick: (value: boolean) => void;
+}
+
+export const [SectionMenuContextProvider, useSectionMenuContext] = createSafeContext<SectionMenuContext>(
+  "SectionMenu component was not found in the tree",
+);

apps/nextjs/src/components/board/sections/menu/section-menu-dropdown.tsx

@@ -0,0 +1,48 @@
+import { useRef } from "react";
+import type { Factory } from "@mantine/core";
+import { factory, Popover } from "@mantine/core";
+import { useMergedRef } from "@mantine/hooks";
+
+import { useSectionMenuContext } from "./section-menu-context";
+
+export type SectionMenuDropdownStylesNames = "dropdown";
+
+export interface SectionMenuDropdownProps {
+  childOpened: boolean;
+  children: React.ReactNode;
+}
+
+export type SectionMenuDropdownFactory = Factory<{
+  props: SectionMenuDropdownProps;
+  ref: HTMLDivElement;
+  stylesNames: SectionMenuDropdownStylesNames;
+  compound: true;
+}>;
+
+export const SectionMenuDropdown = factory<SectionMenuDropdownFactory>(({ childOpened, children }, ref) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const ctx = useSectionMenuContext();
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (childOpened) return;
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      wrapperRef.current?.querySelectorAll<HTMLButtonElement>("[data-section-menu-item]:not(:disabled)")[0]?.focus();
+    }
+  };
+
+  return (
+    <Popover.Dropdown
+      role="menu"
+      aria-orientation="vertical"
+      ref={useMergedRef(ref, wrapperRef)}
+      {...ctx.getStyles("dropdown")}
+      tabIndex={-1}
+      data-section-menu-dropdown
+      onKeyDown={handleKeyDown}
+    >
+      <div tabIndex={-1} data-autofocus data-mantine-stop-propagation style={{ outline: 0 }} />
+      {children}
+    </Popover.Dropdown>
+  );
+});