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>

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: [],

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>

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),

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"

packages/translation/src/lang/en.json

@@ -980,6 +980,9 @@
         "remove": "Remove dynamic section"
       },
       "option": {
+        "title": {
+          "label": "Title"
+        },
         "borderColor": {
           "label": "Border color"
         }

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(""),
 });