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>

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": {
-          "title": "Colors"
+        "appearance": {
+          "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();