From 1dd7b1a6b97f75bca0d1a5c0dbb4254aa4bbd418 Mon Sep 17 00:00:00 2001
From: Jack Weller <github@jackweller.me>
Date: Tue, 25 Mar 2025 07:06:50 +1000
Subject: [PATCH] feat: add title to dynamic section (#2614)

* feat: add title to dynamic section

* fix: formatting

* feat: use badge rather than text

* fix: use board radius

* fix: use shared.ts validation

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
---
 .../test/mocks/dynamic-section-mock.ts        |  1 +
 .../board/sections/dynamic-section.tsx        | 27 ++++++++++++++++---
 .../dynamic/actions/add-dynamic-section.ts    |  1 +
 .../sections/dynamic/dynamic-edit-modal.tsx   |  3 ++-
 packages/translation/src/lang/en.json         |  3 +++
 packages/validation/src/shared.ts             |  1 +
 6 files changed, 31 insertions(+), 5 deletions(-)

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 7de8db63c..553deda9e 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
@@ -10,6 +10,7 @@ export class DynamicSectionMockBuilder {
       id: createId(),
       kind: "dynamic",
       options: {
+        title: "",
         borderColor: "",
       },
       layouts: [],
diff --git a/apps/nextjs/src/components/board/sections/dynamic-section.tsx b/apps/nextjs/src/components/board/sections/dynamic-section.tsx
index 90525715a..3b5493366 100644
--- a/apps/nextjs/src/components/board/sections/dynamic-section.tsx
+++ b/apps/nextjs/src/components/board/sections/dynamic-section.tsx
@@ -1,4 +1,4 @@
-import { Box, Card } from "@mantine/core";
+import { Badge, Box, Card } from "@mantine/core";
 
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 
@@ -17,7 +17,12 @@ export const BoardDynamicSection = ({ section }: Props) => {
   const options = section.options;
 
   return (
-    <Box className="grid-stack-item-content">
+    <Box
+      className="grid-stack-item-content"
+      style={{
+        overflow: "visible",
+      }}
+    >
       <Card
         className={classes.itemCard}
         w="100%"
@@ -25,14 +30,28 @@ export const BoardDynamicSection = ({ section }: Props) => {
         withBorder
         styles={{
           root: {
+            overflow: "visible",
             "--opacity": board.opacity / 100,
-            overflow: "hidden",
-            "--border-color": options.borderColor !== "" ? options.borderColor : undefined,
+            "--border-color": options.borderColor || undefined,
           },
         }}
         radius={board.itemRadius}
         p={0}
       >
+        {options.title && (
+          <Badge
+            pos="absolute"
+            top={-15}
+            left={10}
+            size="md"
+            radius={board.itemRadius}
+            color="var(--background-color)"
+            c="var(--mantine-color-text)"
+            bd="1px solid var(--border-color)"
+          >
+            {options.title}
+          </Badge>
+        )}
         {/* Use unique key by layout to reinitialize gridstack */}
         <GridStack key={`${currentLayoutId}-${section.id}`} section={section} className="min-row" />
       </Card>
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 415d80572..c33507a73 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
@@ -17,6 +17,7 @@ export const addDynamicSectionCallback = () => (board: Board) => {
     id: createId(),
     kind: "dynamic",
     options: {
+      title: "",
       borderColor: "",
     },
     layouts: createDynamicSectionLayouts(board, firstSection),
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 001af145a..85ffc7e79 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
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, CloseButton, ColorInput, Group, Stack, useMantineTheme } from "@mantine/core";
+import { Button, CloseButton, ColorInput, Group, Stack, TextInput, useMantineTheme } from "@mantine/core";
 import type { z } from "zod";
 
 import { useZodForm } from "@homarr/form";
@@ -30,6 +30,7 @@ export const DynamicSectionEditModal = createModal<ModalProps>(({ actions, inner
       })}
     >
       <Stack>
+        <TextInput label={t("section.dynamic.option.title.label")} {...form.getInputProps("title")} />
         <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 54307c005..966700f5e 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -980,6 +980,9 @@
         "remove": "Remove dynamic section"
       },
       "option": {
+        "title": {
+          "label": "Title"
+        },
         "borderColor": {
           "label": "Border color"
         }
diff --git a/packages/validation/src/shared.ts b/packages/validation/src/shared.ts
index 733d3edef..ddf7c30ea 100644
--- a/packages/validation/src/shared.ts
+++ b/packages/validation/src/shared.ts
@@ -60,6 +60,7 @@ const emptySectionSchema = z.object({
 });
 
 export const dynamicSectionOptionsSchema = z.object({
+  title: z.string().max(20).default(""),
   borderColor: z.string().default(""),
 });