feat(dynamic-sections): add custom css classes option (#4256)

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

@@ -12,6 +12,7 @@ export class DynamicSectionMockBuilder {
       options: {
         title: "",
         borderColor: "",
+        customCssClasses: [],
       },
       layouts: [],
       ...section,

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

@@ -1,4 +1,5 @@
 import { Badge, Box, Card } from "@mantine/core";
+import combineClasses from "clsx";
 
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 
@@ -24,7 +25,7 @@ export const BoardDynamicSection = ({ section }: Props) => {
       }}
     >
       <Card
-        className={classes.itemCard}
+        className={combineClasses(classes.itemCard, section.options.customCssClasses.join(" "))}
         w="100%"
         h="100%"
         withBorder

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

@@ -19,6 +19,7 @@ export const addDynamicSectionCallback = () => (board: Board) => {
     options: {
       title: "",
       borderColor: "",
+      customCssClasses: [],
     },
     layouts: createDynamicSectionLayouts(board, firstSection),
   } satisfies DynamicSection;

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

@@ -6,6 +6,7 @@ import type { z } from "zod/v4";
 import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
+import { TextMultiSelect } from "@homarr/ui";
 import { dynamicSectionOptionsSchema } from "@homarr/validation/shared";
 
 interface ModalProps {
@@ -31,6 +32,10 @@ export const DynamicSectionEditModal = createModal<ModalProps>(({ actions, inner
     >
       <Stack>
         <TextInput label={t("section.dynamic.option.title.label")} {...form.getInputProps("title")} />
+        <TextMultiSelect
+          label={t("section.dynamic.option.customCssClasses.label")}
+          {...form.getInputProps("customCssClasses")}
+        />
         <ColorInput
           label={t("section.dynamic.option.borderColor.label")}
           format="hex"

packages/translation/src/lang/en.json

@@ -1163,6 +1163,9 @@
         "title": {
           "label": "Title"
         },
+        "customCssClasses": {
+          "label": "Custom css classes"
+        },
         "borderColor": {
           "label": "Border color"
         }

packages/validation/src/shared.ts

@@ -62,6 +62,7 @@ const emptySectionSchema = z.object({
 
 export const dynamicSectionOptionsSchema = z.object({
   title: z.string().max(20).default(""),
+  customCssClasses: z.array(z.string()).default([]),
   borderColor: z.string().default(""),
 });