feat: added bordercolor option for dynamic section (#2334)

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

@@ -1,22 +1,37 @@
 import { ActionIcon, Menu } from "@mantine/core";
-import { IconDotsVertical, IconTrash } from "@tabler/icons-react";
+import { IconDotsVertical, IconPencil, IconTrash } from "@tabler/icons-react";
 
 import { useEditMode } from "@homarr/boards/edit-mode";
-import { useConfirmModal } from "@homarr/modals";
+import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import type { DynamicSectionItem } from "~/app/[locale]/boards/_types";
 import { useDynamicSectionActions } from "./dynamic-actions";
+import { DynamicSectionEditModal } from "./dynamic-edit-modal";
 
 export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSectionItem }) => {
   const t = useI18n();
   const tDynamic = useScopedI18n("section.dynamic");
-  const { removeDynamicSection } = useDynamicSectionActions();
+  const tItem = useScopedI18n("item");
+  const { openModal } = useModalAction(DynamicSectionEditModal);
+  const { updateDynamicSection, removeDynamicSection } = useDynamicSectionActions();
   const { openConfirmModal } = useConfirmModal();
   const [isEditMode] = useEditMode();
 
   if (!isEditMode) return null;
 
+  const openEditModal = () => {
+    openModal({
+      value: section.options,
+      onSuccessfulEdit: (options) => {
+        updateDynamicSection({
+          itemId: section.id,
+          newOptions: options,
+        });
+      },
+    });
+  };
+
   const openRemoveModal = () => {
     openConfirmModal({
       title: tDynamic("remove.title"),
@@ -35,6 +50,11 @@ export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSectionIt
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown miw={128}>
+        <Menu.Label>{tItem("menu.label.settings")}</Menu.Label>
+        <Menu.Item leftSection={<IconPencil size={16} />} onClick={openEditModal}>
+          {tItem("action.edit")}
+        </Menu.Item>
+        <Menu.Divider />
         <Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
         <Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>
           {tDynamic("action.remove")}