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

apps/nextjs/src/app/[locale]/boards/_client.tsx

@@ -8,8 +8,14 @@ import { Box, LoadingOverlay, Stack } from "@homarr/ui";
 
 import { BoardCategorySection } from "~/components/board/sections/category-section";
 import { BoardEmptySection } from "~/components/board/sections/empty-section";
+import { BoardBackgroundVideo } from "~/components/layout/background";
 import { useIsBoardReady, useRequiredBoard } from "./_context";
-import type { CategorySection, EmptySection } from "./_types";
+
+let boardName: string | null = null;
+
+export const updateBoardName = (name: string | null) => {
+  boardName = name;
+};
 
 type UpdateCallback = (
   prev: RouterOutputs["board"]["default"],
@@ -20,7 +26,10 @@ export const useUpdateBoard = () => {
 
   const updateBoard = useCallback(
     (updaterWithoutUndefined: UpdateCallback) => {
-      utils.board.default.setData(undefined, (previous) =>
+      if (!boardName) {
+        throw new Error("Board name is not set");
+      }
+      utils.board.byName.setData({ name: boardName }, (previous) =>
         previous ? updaterWithoutUndefined(previous) : previous,
       );
     },
@@ -36,21 +45,17 @@ export const ClientBoard = () => {
   const board = useRequiredBoard();
   const isReady = useIsBoardReady();
 
-  const sectionsWithoutSidebars = board.sections
-    .filter(
-      (section): section is CategorySection | EmptySection =>
-        section.kind !== "sidebar",
-    )
-    .sort((a, b) => a.position - b.position);
+  const sortedSections = board.sections.sort((a, b) => a.position - b.position);
 
   const ref = useRef<HTMLDivElement>(null);
 
   return (
     <Box h="100%" pos="relative">
+      <BoardBackgroundVideo />
       <LoadingOverlay
         visible={!isReady}
         transitionProps={{ duration: 500 }}
-        loaderProps={{ size: "lg", variant: "bars" }}
+        loaderProps={{ size: "lg" }}
         h="calc(100dvh - var(--app-shell-header-offset, 0px) - var(--app-shell-padding) - var(--app-shell-footer-offset, 0px) - var(--app-shell-padding))"
       />
       <Stack
@@ -58,7 +63,7 @@ export const ClientBoard = () => {
         h="100%"
         style={{ visibility: isReady ? "visible" : "hidden" }}
       >
-        {sectionsWithoutSidebars.map((section) =>
+        {sortedSections.map((section) =>
           section.kind === "empty" ? (
             <BoardEmptySection
               key={section.id}