From 4c2e352acac62434c840e407887f8fddfc8c426a Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Fri, 10 Oct 2025 19:59:41 +0200
Subject: [PATCH] feat(dynamic-sections): add custom css classes option (#4256)

---
 .../board/items/actions/test/mocks/dynamic-section-mock.ts   | 1 +
 .../nextjs/src/components/board/sections/dynamic-section.tsx | 3 ++-
 .../board/sections/dynamic/actions/add-dynamic-section.ts    | 1 +
 .../components/board/sections/dynamic/dynamic-edit-modal.tsx | 5 +++++
 packages/translation/src/lang/en.json                        | 3 +++
 packages/validation/src/shared.ts                            | 1 +
 6 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/nextjs/src/components/board/items/actions/test/mocks/dynamic-section-mock.ts b/apps/nextjs/src/components/board/items/actions/test/mocks/dynamic-section-mock.ts
index 81ddc0443..dde39bcfb 100644
--- a/apps/nextjs/src/components/board/items/actions/test/mocks/dynamic-section-mock.ts
+++ b/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,
diff --git a/apps/nextjs/src/components/board/sections/dynamic-section.tsx b/apps/nextjs/src/components/board/sections/dynamic-section.tsx
index 3b5493366..39818c5de 100644
--- a/apps/nextjs/src/components/board/sections/dynamic-section.tsx
+++ b/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
diff --git a/apps/nextjs/src/components/board/sections/dynamic/actions/add-dynamic-section.ts b/apps/nextjs/src/components/board/sections/dynamic/actions/add-dynamic-section.ts
index 11102fb5b..ba85cecfb 100644
--- a/apps/nextjs/src/components/board/sections/dynamic/actions/add-dynamic-section.ts
+++ b/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;
diff --git a/apps/nextjs/src/components/board/sections/dynamic/dynamic-edit-modal.tsx b/apps/nextjs/src/components/board/sections/dynamic/dynamic-edit-modal.tsx
index b15c700a9..f80a833d6 100644
--- a/apps/nextjs/src/components/board/sections/dynamic/dynamic-edit-modal.tsx
+++ b/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"
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index ab8721032..5331e306a 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1163,6 +1163,9 @@
         "title": {
           "label": "Title"
         },
+        "customCssClasses": {
+          "label": "Custom css classes"
+        },
         "borderColor": {
           "label": "Border color"
         }
diff --git a/packages/validation/src/shared.ts b/packages/validation/src/shared.ts
index 87bb3b41f..620a0f2f4 100644
--- a/packages/validation/src/shared.ts
+++ b/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(""),
 });