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/components/board/sections/content.tsx

@@ -2,6 +2,7 @@
 // Ignored because of gridstack attributes
 
 import type { RefObject } from "react";
+import cx from "clsx";
 import { useAtomValue } from "jotai";
 
 import { useScopedI18n } from "@homarr/translation/client";
@@ -20,11 +21,13 @@ import {
   useServerDataFor,
 } from "@homarr/widgets";
 
+import { useRequiredBoard } from "~/app/[locale]/boards/_context";
 import type { Item } from "~/app/[locale]/boards/_types";
 import { modalEvents } from "~/app/[locale]/modals";
 import { editModeAtom } from "../editMode";
 import { useItemActions } from "../items/item-actions";
 import type { UseGridstackRefs } from "./gridstack/use-gridstack";
+import classes from "./item.module.css";
 
 interface Props {
   items: Item[];
@@ -32,6 +35,8 @@ interface Props {
 }
 
 export const SectionContent = ({ items, refs }: Props) => {
+  const board = useRequiredBoard();
+
   return (
     <>
       {items.map((item) => {
@@ -50,7 +55,15 @@ export const SectionContent = ({ items, refs }: Props) => {
             gs-max-h={4}
             ref={refs.items.current[item.id] as RefObject<HTMLDivElement>}
           >
-            <Card className="grid-stack-item-content" withBorder>
+            <Card
+              className={cx(classes.itemCard, "grid-stack-item-content")}
+              withBorder
+              styles={{
+                root: {
+                  "--opacity": board.opacity / 100,
+                },
+              }}
+            >
               <BoardItem item={item} />
             </Card>
           </div>