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

apps/nextjs/src/components/board/items/actions/test/mocks/dynamic-section-mock.ts

@@ -9,6 +9,9 @@ export class DynamicSectionMockBuilder {
     this.section = {
       id: createId(),
       kind: "dynamic",
+      options: {
+        borderColor: "",
+      },
       layouts: [],
       ...section,
     } satisfies DynamicSection;

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

@@ -14,6 +14,8 @@ interface Props {
 export const BoardDynamicSection = ({ section }: Props) => {
   const board = useRequiredBoard();
   const currentLayoutId = useCurrentLayout();
+  const options = section.options;
+
   return (
     <Box className="grid-stack-item-content">
       <Card
@@ -25,6 +27,7 @@ export const BoardDynamicSection = ({ section }: Props) => {
           root: {
             "--opacity": board.opacity / 100,
             overflow: "hidden",
+            "--border-color": options.borderColor !== "" ? options.borderColor : undefined,
           },
         }}
         radius={board.itemRadius}

apps/nextjs/src/components/board/sections/dynamic/actions/add-dynamic-section.ts

@@ -16,6 +16,9 @@ export const addDynamicSectionCallback = () => (board: Board) => {
   const newSection = {
     id: createId(),
     kind: "dynamic",
+    options: {
+      borderColor: "",
+    },
     layouts: createDynamicSectionLayouts(board, firstSection),
   } satisfies DynamicSection;
 

apps/nextjs/src/components/board/sections/dynamic/dynamic-actions.ts

@@ -1,11 +1,18 @@
 import { useCallback } from "react";
+import type { z } from "zod";
 
 import { useUpdateBoard } from "@homarr/boards/updater";
+import type { dynamicSectionOptionsSchema } from "@homarr/validation";
 
 import { addDynamicSectionCallback } from "./actions/add-dynamic-section";
 import type { RemoveDynamicSectionInput } from "./actions/remove-dynamic-section";
 import { removeDynamicSectionCallback } from "./actions/remove-dynamic-section";
 
+interface UpdateDynamicOptions {
+  itemId: string;
+  newOptions: z.infer<typeof dynamicSectionOptionsSchema>;
+}
+
 export const useDynamicSectionActions = () => {
   const { updateBoard } = useUpdateBoard();
 
@@ -13,6 +20,16 @@ export const useDynamicSectionActions = () => {
     updateBoard(addDynamicSectionCallback());
   }, [updateBoard]);
 
+  const updateDynamicSection = useCallback(
+    ({ itemId, newOptions }: UpdateDynamicOptions) => {
+      updateBoard((previous) => ({
+        ...previous,
+        sections: previous.sections.map((item) => (item.id !== itemId ? item : { ...item, options: newOptions })),
+      }));
+    },
+    [updateBoard],
+  );
+
   const removeDynamicSection = useCallback(
     (input: RemoveDynamicSectionInput) => {
       updateBoard(removeDynamicSectionCallback(input));
@@ -22,6 +39,7 @@ export const useDynamicSectionActions = () => {
 
   return {
     addDynamicSection,
+    updateDynamicSection,
     removeDynamicSection,
   };
 };

apps/nextjs/src/components/board/sections/dynamic/dynamic-edit-modal.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Button, CloseButton, ColorInput, Group, Stack, useMantineTheme } from "@mantine/core";
+import type { z } from "zod";
+
+import { useZodForm } from "@homarr/form";
+import { createModal } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+import { dynamicSectionOptionsSchema } from "@homarr/validation";
+
+interface ModalProps {
+  value: z.infer<typeof dynamicSectionOptionsSchema>;
+  onSuccessfulEdit: (value: z.infer<typeof dynamicSectionOptionsSchema>) => void;
+}
+
+export const DynamicSectionEditModal = createModal<ModalProps>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const theme = useMantineTheme();
+
+  const form = useZodForm(dynamicSectionOptionsSchema, {
+    mode: "controlled",
+    initialValues: { ...innerProps.value },
+  });
+
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        innerProps.onSuccessfulEdit(values);
+        actions.closeModal();
+      })}
+    >
+      <Stack>
+        <ColorInput
+          label={t("section.dynamic.option.borderColor.label")}
+          format="hex"
+          swatches={Object.values(theme.colors).map((color) => color[6])}
+          rightSection={
+            <CloseButton
+              onClick={() => form.setFieldValue("borderColor", "")}
+              style={{ display: form.getInputProps("borderColor").value ? undefined : "none" }}
+            />
+          }
+          {...form.getInputProps("borderColor")}
+        />
+        <Group justify="end">
+          <Group justify="end" w={{ base: "100%", xs: "auto" }}>
+            <Button onClick={actions.closeModal} variant="subtle" color="gray">
+              {t("common.action.cancel")}
+            </Button>
+            <Button type="submit" color="teal">
+              {t("common.action.saveChanges")}
+            </Button>
+          </Group>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle(t) {
+    return t("item.edit.title");
+  },
+  size: "lg",
+});

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")}