feat: board settings (#137)

* refactor: improve user feedback for general board settings section

* wip: add board settings for background and colors, move danger zone to own file, refactor code

* feat: add shade selector

* feat: add slider for opacity

* fix: issue with invalid hex values for color preview

* refactor: add shared mutation hook for saving partial board settings with invalidate query

* fix: add cleanup for not applied changes to logo and page title

* feat: add layout settings

* feat: add empty custom css section to board settings

* refactor: improve layout of board logo on mobile

* feat: add theme provider for board colors

* refactor: add auto contrast for better contrast of buttons with low primary shade

* feat: add background for boards

* feat: add opacity for boards

* feat: add rename board

* feat: add visibility and delete of board settings

* fix: issue that wrong data is updated with update board method

* refactor: improve danger zone button placement for mobile

* fix: board not revalidated when already in boards layout

* refactor: improve board color preview

* refactor: change save button color to teal, add placeholders for general board settings

* chore: update initial migration

* refactor: remove unnecessary div

* chore: address pull request feedback

* fix: ci issues

* fix: deepsource issues

* chore: address pull request feedback

* fix: formatting issue

* chore: address pull request feedback

packages/db/migrations/0000_sloppy_bloodstorm.sql

@@ -26,13 +26,10 @@ CREATE TABLE `board` (
 	`background_image_attachment` text DEFAULT 'fixed' NOT NULL,
 	`background_image_repeat` text DEFAULT 'no-repeat' NOT NULL,
 	`background_image_size` text DEFAULT 'cover' NOT NULL,
-	`primary_color` text DEFAULT 'red' NOT NULL,
-	`secondary_color` text DEFAULT 'orange' NOT NULL,
-	`primary_shade` integer DEFAULT 6 NOT NULL,
-	`app_opacity` integer DEFAULT 100 NOT NULL,
+	`primary_color` text DEFAULT '#fa5252' NOT NULL,
+	`secondary_color` text DEFAULT '#fd7e14' NOT NULL,
+	`opacity` integer DEFAULT 100 NOT NULL,
 	`custom_css` text,
-	`show_right_sidebar` integer DEFAULT false NOT NULL,
-	`show_left_sidebar` integer DEFAULT false NOT NULL,
 	`column_count` integer DEFAULT 10 NOT NULL
 );
 --> statement-breakpoint
@@ -106,6 +103,7 @@ CREATE TABLE `verificationToken` (
 );
 --> statement-breakpoint
 CREATE INDEX `userId_idx` ON `account` (`userId`);--> statement-breakpoint
+CREATE UNIQUE INDEX `board_name_unique` ON `board` (`name`);--> statement-breakpoint
 CREATE INDEX `integration_secret__kind_idx` ON `integrationSecret` (`kind`);--> statement-breakpoint
 CREATE INDEX `integration_secret__updated_at_idx` ON `integrationSecret` (`updated_at`);--> statement-breakpoint
 CREATE INDEX `integration__kind_idx` ON `integration` (`kind`);--> statement-breakpoint

packages/db/migrations/meta/0000_snapshot.json

@@ -1,7 +1,7 @@
 {
   "version": "5",
   "dialect": "sqlite",
-  "id": "c9ea435a-5bbf-4439-84a1-55d3e2581b13",
+  "id": "7ba12cbf-d8eb-4469-b7c5-7f31acb7717d",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "tables": {
     "account": {
@@ -201,7 +201,7 @@
           "primaryKey": false,
           "notNull": true,
           "autoincrement": false,
-          "default": "'red'"
+          "default": "'#fa5252'"
         },
         "secondary_color": {
           "name": "secondary_color",
@@ -209,18 +209,10 @@
           "primaryKey": false,
           "notNull": true,
           "autoincrement": false,
-          "default": "'orange'"
+          "default": "'#fd7e14'"
         },
-        "primary_shade": {
-          "name": "primary_shade",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": 6
-        },
-        "app_opacity": {
-          "name": "app_opacity",
+        "opacity": {
+          "name": "opacity",
           "type": "integer",
           "primaryKey": false,
           "notNull": true,
@@ -234,22 +226,6 @@
           "notNull": false,
           "autoincrement": false
         },
-        "show_right_sidebar": {
-          "name": "show_right_sidebar",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": false
-        },
-        "show_left_sidebar": {
-          "name": "show_left_sidebar",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": false
-        },
         "column_count": {
           "name": "column_count",
           "type": "integer",
@@ -259,7 +235,13 @@
           "default": 10
         }
       },
-      "indexes": {},
+      "indexes": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"],
+          "isUnique": true
+        }
+      },
       "foreignKeys": {},
       "compositePrimaryKeys": {},
       "uniqueConstraints": {}

packages/db/migrations/meta/_journal.json

@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "5",
-      "when": 1707511343363,
-      "tag": "0000_true_red_wolf",
+      "when": 1709409142712,
+      "tag": "0000_sloppy_bloodstorm",
       "breakpoints": true
     }
   ]

packages/db/schema/sqlite.ts

@@ -1,5 +1,4 @@
 import type { AdapterAccount } from "@auth/core/adapters";
-import type { MantineColor } from "@mantine/core";
 import type { InferSelectModel } from "drizzle-orm";
 import { relations } from "drizzle-orm";
 import {
@@ -11,6 +10,11 @@ import {
   text,
 } from "drizzle-orm/sqlite-core";
 
+import {
+  backgroundImageAttachments,
+  backgroundImageRepeats,
+  backgroundImageSizes,
+} from "@homarr/definitions";
 import type {
   BackgroundImageAttachment,
   BackgroundImageRepeat,
@@ -125,37 +129,20 @@ export const boards = sqliteTable("board", {
   backgroundImageUrl: text("background_image_url"),
   backgroundImageAttachment: text("background_image_attachment")
     .$type<BackgroundImageAttachment>()
-    .default("fixed")
+    .default(backgroundImageAttachments.defaultValue)
     .notNull(),
   backgroundImageRepeat: text("background_image_repeat")
     .$type<BackgroundImageRepeat>()
-    .default("no-repeat")
+    .default(backgroundImageRepeats.defaultValue)
     .notNull(),
   backgroundImageSize: text("background_image_size")
     .$type<BackgroundImageSize>()
-    .default("cover")
+    .default(backgroundImageSizes.defaultValue)
     .notNull(),
-  primaryColor: text("primary_color")
-    .$type<MantineColor>()
-    .default("red")
-    .notNull(),
-  secondaryColor: text("secondary_color")
-    .$type<MantineColor>()
-    .default("orange")
-    .notNull(),
-  primaryShade: int("primary_shade").default(6).notNull(),
-  appOpacity: int("app_opacity").default(100).notNull(),
+  primaryColor: text("primary_color").default("#fa5252").notNull(),
+  secondaryColor: text("secondary_color").default("#fd7e14").notNull(),
+  opacity: int("opacity").default(100).notNull(),
   customCss: text("custom_css"),
-  showRightSidebar: int("show_right_sidebar", {
-    mode: "boolean",
-  })
-    .default(false)
-    .notNull(),
-  showLeftSidebar: int("show_left_sidebar", {
-    mode: "boolean",
-  })
-    .default(false)
-    .notNull(),
   columnCount: int("column_count").default(10).notNull(),
 });