feat(boards): add form logic and translations to board create modal

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>;

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

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>
 

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"
       },

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>

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

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