From 0843ccda99cefb2cc8ea599be13085679fd2225a Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Wed, 26 Nov 2025 18:38:32 +0100
Subject: [PATCH] feat(boards): add form logic and translations to board create
 modal

---
 packages/definitions/src/board.ts             |  2 ++
 packages/modals-collection/package.json       |  1 +
 .../src/boards/add-board-modal.tsx            | 23 ++++++++++---------
 packages/translation/src/lang/en.json         | 13 +++++++++++
 packages/ui/src/components/radio.tsx          |  4 ++--
 packages/validation/src/board.ts              |  2 ++
 pnpm-lock.yaml                                |  3 +++
 7 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/definitions/src/board.ts b/packages/definitions/src/board.ts
index 302008550..fe03a25fa 100644
--- a/packages/definitions/src/board.ts
+++ b/packages/definitions/src/board.ts
@@ -8,7 +8,9 @@ export const backgroundImageRepeats = createDefinition(["repeat", "repeat-x", "r
 export const backgroundImageSizes = createDefinition(["cover", "contain"], {
   defaultValue: "cover",
 });
+export const boardLayoutModes = createDefinition(["auto", "custom"], { defaultValue: "auto" });
 
 export type BackgroundImageAttachment = inferDefinitionType<typeof backgroundImageAttachments>;
 export type BackgroundImageRepeat = inferDefinitionType<typeof backgroundImageRepeats>;
 export type BackgroundImageSize = inferDefinitionType<typeof backgroundImageSizes>;
+export type BoardLayoutMode = inferDefinitionType<typeof boardLayoutModes>;
diff --git a/packages/modals-collection/package.json b/packages/modals-collection/package.json
index 5e18c7d2b..55c518ff5 100644
--- a/packages/modals-collection/package.json
+++ b/packages/modals-collection/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@homarr/api": "workspace:^0.1.0",
     "@homarr/common": "workspace:^0.1.0",
+    "@homarr/definitions": "workspace:^0.1.0",
     "@homarr/form": "workspace:^0.1.0",
     "@homarr/forms-collection": "workspace:^0.1.0",
     "@homarr/modals": "workspace:^0.1.0",
diff --git a/packages/modals-collection/src/boards/add-board-modal.tsx b/packages/modals-collection/src/boards/add-board-modal.tsx
index 5d3ca21a5..9e48a10d4 100644
--- a/packages/modals-collection/src/boards/add-board-modal.tsx
+++ b/packages/modals-collection/src/boards/add-board-modal.tsx
@@ -15,6 +15,7 @@ import { IconAlertTriangle, IconCircleCheck } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
+import { boardLayoutModes } from "@homarr/definitions";
 import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
@@ -30,6 +31,7 @@ export const AddBoardModal = createModal(({ actions }) => {
       name: "",
       columnCount: 10,
       isPublic: false,
+      layoutMode: boardLayoutModes.defaultValue,
     },
   });
   const { mutate, isPending } = clientApi.board.createBoard.useMutation({
@@ -77,19 +79,18 @@ export const AddBoardModal = createModal(({ actions }) => {
           }
         />
 
-        <Fieldset legend="Layout">
+        <Fieldset legend={t("board.setting.section.layout.title")}>
           <Stack gap="sm">
-            <RadioGroup>
+            <RadioGroup {...form.getInputProps("layoutMode")}>
               <SimpleGrid cols={{ sm: 2, xs: 1 }} spacing="md">
-                <CustomRadioCard
-                  name="Auto"
-                  description="Position and size of all layouts are calculated from the base layout."
-                  checked
-                />
-                <CustomRadioCard
-                  name="Custom"
-                  description="Position and size must be configured for all layouts separately."
-                />
+                {boardLayoutModes.values.map((mode) => (
+                  <CustomRadioCard
+                    key={mode}
+                    value={mode}
+                    label={t(`board.field.layoutMode.option.${mode}.label`)}
+                    description={t(`board.field.layoutMode.option.${mode}.description`)}
+                  />
+                ))}
               </SimpleGrid>
             </RadioGroup>
 
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 82c3bdcfd..6017069db 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -2793,6 +2793,19 @@
         "label": "Disable app status",
         "description": "Disables the status check for all apps on this board"
       },
+      "layoutMode": {
+        "label": "Layout mode",
+        "option": {
+          "auto": {
+            "label": "Auto",
+            "description": "Position and size of all layouts are calculated from the base layout."
+          },
+          "custom": {
+            "label": "Custom",
+            "description": "Position and size must be configured for all layouts separately."
+          }
+        }
+      },
       "columnCount": {
         "label": "Column count"
       },
diff --git a/packages/ui/src/components/radio.tsx b/packages/ui/src/components/radio.tsx
index ac7beeba2..9ca50095f 100644
--- a/packages/ui/src/components/radio.tsx
+++ b/packages/ui/src/components/radio.tsx
@@ -5,7 +5,7 @@ import clsx from "clsx";
 import classes from "./radio.module.css";
 
 interface CustomRadioCardProps extends RadioCardProps {
-  name: string;
+  label: string;
   description: string;
 }
 
@@ -15,7 +15,7 @@ export const CustomRadioCard = (props: CustomRadioCardProps) => {
       <Group wrap="nowrap" align="flex-start">
         <RadioIndicator />
         <div>
-          <Text className={classes.label}>{props.name}</Text>
+          <Text className={classes.label}>{props.label}</Text>
           <Text className={classes.description}>{props.description}</Text>
         </div>
       </Group>
diff --git a/packages/validation/src/board.ts b/packages/validation/src/board.ts
index 2ce53a1eb..14efa3e64 100644
--- a/packages/validation/src/board.ts
+++ b/packages/validation/src/board.ts
@@ -4,6 +4,7 @@ import {
   backgroundImageAttachments,
   backgroundImageRepeats,
   backgroundImageSizes,
+  boardLayoutModes,
   boardPermissions,
 } from "@homarr/definitions";
 
@@ -90,6 +91,7 @@ export const boardSaveSchema = z.object({
 export const boardCreateSchema = z.object({
   name: boardNameSchema,
   columnCount: boardColumnCountSchema,
+  layoutMode: z.enum(boardLayoutModes.values).default(boardLayoutModes.defaultValue),
   isPublic: z.boolean(),
 });
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0cd23f3f..97e25caaa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1613,6 +1613,9 @@ importers:
       '@homarr/common':
         specifier: workspace:^0.1.0
         version: link:../common
+      '@homarr/definitions':
+        specifier: workspace:^0.1.0
+        version: link:../definitions
       '@homarr/form':
         specifier: workspace:^0.1.0
         version: link:../form