feat: add tile border radius (#2338)

* feat: add tile border radius

* fix: inconsistent mantine-core version

* fix: lockfile

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx

@@ -10,6 +10,7 @@ import {
   Group,
   InputWrapper,
   isLightColor,
+  Select,
   Slider,
   Stack,
   Text,
@@ -39,6 +40,7 @@ export const ColorSettingsContent = ({ board }: Props) => {
       primaryColor: board.primaryColor,
       secondaryColor: board.secondaryColor,
       opacity: board.opacity,
+      itemRadius: board.itemRadius,
     },
   });
   const [showPreview, { toggle }] = useDisclosure(false);
@@ -98,6 +100,20 @@ export const ColorSettingsContent = ({ board }: Props) => {
               />
             </InputWrapper>
           </Grid.Col>
+          <Grid.Col span={{ sm: 12, md: 6 }}>
+            <Select
+              label={t("board.field.itemRadius.label")}
+              description={t("board.field.itemRadius.description")}
+              data={[
+                { label: t("board.field.itemRadius.option.xs"), value: "xs" },
+                { label: t("board.field.itemRadius.option.sm"), value: "sm" },
+                { label: t("board.field.itemRadius.option.md"), value: "md" },
+                { label: t("board.field.itemRadius.option.lg"), value: "lg" },
+                { label: t("board.field.itemRadius.option.xl"), value: "xl" },
+              ]}
+              {...form.getInputProps("itemRadius")}
+            />
+          </Grid.Col>
         </Grid>
         <Group justify="end">
           <Button type="submit" loading={isPending} color="teal">

apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx

@@ -23,10 +23,10 @@ import type { TablerIcon } from "@homarr/ui";
 
 import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
 import { ActiveTabAccordion } from "../../../../../components/active-tab-accordion";
+import { ColorSettingsContent } from "./_appereance";
 import { BackgroundSettingsContent } from "./_background";
 import { BehaviorSettingsContent } from "./_behavior";
 import { BoardAccessSettings } from "./_board-access";
-import { ColorSettingsContent } from "./_colors";
 import { CustomCssSettingsContent } from "./_customCss";
 import { DangerZoneSettingsContent } from "./_danger";
 import { GeneralSettingsContent } from "./_general";
@@ -91,7 +91,7 @@ export default async function BoardSettingsPage(props: Props) {
           <AccordionItemFor value="background" icon={IconPhoto}>
             <BackgroundSettingsContent board={board} />
           </AccordionItemFor>
-          <AccordionItemFor value="color" icon={IconBrush}>
+          <AccordionItemFor value="appearance" icon={IconBrush}>
             <ColorSettingsContent board={board} />
           </AccordionItemFor>
           <AccordionItemFor value="customCss" icon={IconFileTypeCss}>

apps/nextjs/src/components/board/items/item-content.tsx

@@ -33,6 +33,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
         "grid-stack-item-content",
         item.advancedOptions.customCssClasses.join(" "),
       )}
+      radius={board.itemRadius}
       withBorder
       styles={{
         root: {

apps/nextjs/src/components/board/sections/category-section.tsx

@@ -27,7 +27,13 @@ export const BoardCategorySection = ({ section }: Props) => {
   });
 
   return (
-    <Card style={{ "--opacity": board.opacity / 100 }} withBorder p={0} className={classes.itemCard}>
+    <Card
+      style={{ "--opacity": board.opacity / 100 }}
+      radius={board.itemRadius}
+      withBorder
+      p={0}
+      className={classes.itemCard}
+    >
       <Stack>
         <Group wrap="nowrap" gap="sm">
           <UnstyledButton w="100%" p="sm" onClick={toggle}>

apps/nextjs/src/components/board/sections/dynamic-section.tsx

@@ -26,6 +26,7 @@ export const BoardDynamicSection = ({ section }: Props) => {
             overflow: "hidden",
           },
         }}
+        radius={board.itemRadius}
         p={0}
       >
         <GridStack section={section} className="min-row" />

packages/api/src/router/board.ts

@@ -517,6 +517,7 @@ export const boardRouter = createTRPCRouter({
 
           // layout settings
           columnCount: input.columnCount,
+          itemRadius: input.itemRadius,
 
           // Behavior settings
           disableStatus: input.disableStatus,

packages/db/migrations/mysql/0026_add-border-radius.sql

@@ -0,0 +1 @@
+ALTER TABLE `board` ADD `item_radius` text DEFAULT ('lg') NOT NULL;

packages/db/migrations/mysql/meta/_journal.json

@@ -183,6 +183,13 @@
       "when": 1739469710187,
       "tag": "0025_add-group-home-board-settings",
       "breakpoints": true
+    },
+    {
+      "idx": 26,
+      "version": "5",
+      "when": 1739907771355,
+      "tag": "0026_add-border-radius",
+      "breakpoints": true
     }
   ]
 }

packages/db/migrations/sqlite/0026_add-border-radius.sql

@@ -0,0 +1 @@
+ALTER TABLE `board` ADD `item_radius` text DEFAULT 'lg' NOT NULL;

packages/db/migrations/sqlite/meta/_journal.json

@@ -183,6 +183,13 @@
       "when": 1739468826756,
       "tag": "0025_add-group-home-board-settings",
       "breakpoints": true
+    },
+    {
+      "idx": 26,
+      "version": "6",
+      "when": 1739907755789,
+      "tag": "0026_add-border-radius",
+      "breakpoints": true
     }
   ]
 }

packages/db/package.json

@@ -42,6 +42,7 @@
     "@homarr/definitions": "workspace:^0.1.0",
     "@homarr/log": "workspace:^0.1.0",
     "@homarr/server-settings": "workspace:^0.1.0",
+    "@mantine/core": "^7.17.0",
     "@paralleldrive/cuid2": "^2.2.2",
     "@t3-oss/env-nextjs": "^0.12.0",
     "@testcontainers/mysql": "^10.18.0",

packages/db/schema/mysql.ts

@@ -1,4 +1,5 @@
 import type { AdapterAccount } from "@auth/core/adapters";
+import type { MantineSize } from "@mantine/core";
 import type { DayOfWeek } from "@mantine/dates";
 import { relations } from "drizzle-orm";
 import type { AnyMySqlColumn } from "drizzle-orm/mysql-core";
@@ -280,6 +281,7 @@ export const boards = mysqlTable("board", {
   opacity: int().default(100).notNull(),
   customCss: text(),
   columnCount: int().default(10).notNull(),
+  itemRadius: text().$type<MantineSize>().default("lg").notNull(),
   disableStatus: boolean().default(false).notNull(),
 });
 

packages/db/schema/sqlite.ts

@@ -1,4 +1,5 @@
 import type { AdapterAccount } from "@auth/core/adapters";
+import type { MantineSize } from "@mantine/core";
 import type { DayOfWeek } from "@mantine/dates";
 import { relations, sql } from "drizzle-orm";
 import type { AnySQLiteColumn } from "drizzle-orm/sqlite-core";
@@ -265,6 +266,7 @@ export const boards = sqliteTable("board", {
   opacity: int().default(100).notNull(),
   customCss: text(),
   columnCount: int().default(10).notNull(),
+  itemRadius: text().$type<MantineSize>().default("lg").notNull(),
   disableStatus: int({ mode: "boolean" }).default(false).notNull(),
 });
 

packages/translation/src/lang/en.json

@@ -2096,6 +2096,17 @@
       "columnCount": {
         "label": "Column count"
       },
+      "itemRadius": {
+        "label": "Item radius",
+        "description": "Changes the roundness of tiles on your board",
+        "option": {
+          "xs": "Very small",
+          "sm": "Small",
+          "md": "Medium",
+          "lg": "Large",
+          "xl": "Very large"
+        }
+      },
       "name": {
         "label": "Name"
       },
@@ -2120,8 +2131,8 @@
         "background": {
           "title": "Background"
         },
-        "color": {
+        "appearance": {
-          "title": "Colors"
+          "title": "Appearance"
         },
         "customCss": {
           "title": "Custom css"

packages/validation/src/board.ts

@@ -58,6 +58,7 @@ const savePartialSettingsSchema = z
     opacity: z.number().min(0).max(100),
     customCss: z.string().max(16384),
     columnCount: z.number().min(1).max(24),
+    itemRadius: z.union([z.literal("xs"), z.literal("sm"), z.literal("md"), z.literal("lg"), z.literal("xl")]),
     disableStatus: z.boolean(),
   })
   .partial();

pnpm-lock.yaml

@@ -1002,6 +1002,9 @@ importers:
       '@homarr/server-settings':
         specifier: workspace:^0.1.0
         version: link:../server-settings
+      '@mantine/core':
+        specifier: ^7.17.0
+        version: 7.17.0(@mantine/hooks@7.17.0(react@19.0.0))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@paralleldrive/cuid2':
         specifier: ^2.2.2
         version: 2.2.2