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/gridstack/use-gridstack.ts

@@ -48,7 +48,7 @@ export const useGridstack = ({
 
   useCssVariableConfiguration({ section, mainRef, gridRef });
 
-  const sectionColumnCount = useSectionColumnCount(section.kind);
+  const board = useRequiredBoard();
 
   const items = useMemo(() => section.items, [section.items]);
 
@@ -125,7 +125,7 @@ export const useGridstack = ({
         wrapper: wrapperRef,
         gridstack: gridRef,
       },
-      sectionColumnCount,
+      sectionColumnCount: board.columnCount,
     });
 
     if (isReady) {
@@ -134,7 +134,7 @@ export const useGridstack = ({
 
     // Only run this effect when the section items change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items.length, section.items.length]);
+  }, [items.length, section.items.length, board.columnCount]);
 
   return {
     refs: {
@@ -145,19 +145,6 @@ export const useGridstack = ({
   };
 };
 
-/**
- * Get the column count for the section
- * For the sidebar it's always 2 otherwise it's the column count of the board
- * @param sectionKind kind of the section
- * @returns count of columns
- */
-const useSectionColumnCount = (sectionKind: Section["kind"]) => {
-  const board = useRequiredBoard();
-  if (sectionKind === "sidebar") return 2;
-
-  return board.columnCount;
-};
-
 interface UseCssVariableConfiguration {
   section: Section;
   mainRef?: RefObject<HTMLDivElement>;
@@ -177,7 +164,7 @@ const useCssVariableConfiguration = ({
   mainRef,
   gridRef,
 }: UseCssVariableConfiguration) => {
-  const sectionColumnCount = useSectionColumnCount(section.kind);
+  const board = useRequiredBoard();
 
   // Get reference to the :root element
   const typeofDocument = typeof document;
@@ -188,20 +175,20 @@ const useCssVariableConfiguration = ({
 
   // Define widget-width by calculating the width of one column with mainRef width and column count
   useEffect(() => {
-    if (section.kind === "sidebar" || !mainRef?.current) return;
-    const widgetWidth = mainRef.current.clientWidth / sectionColumnCount;
+    if (!mainRef?.current) return;
+    const widgetWidth = mainRef.current.clientWidth / board.columnCount;
     // widget width is used to define sizes of gridstack items within global.scss
     root?.style.setProperty("--gridstack-widget-width", widgetWidth.toString());
     gridRef.current?.cellHeight(widgetWidth);
     // gridRef.current is required otherwise the cellheight is run on production as undefined
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sectionColumnCount, root, section.kind, mainRef, gridRef.current]);
+  }, [board.columnCount, root, section.kind, mainRef, gridRef.current]);
 
   // Define column count by using the sectionColumnCount
   useEffect(() => {
     root?.style.setProperty(
       "--gridstack-column-count",
-      sectionColumnCount.toString(),
+      board.columnCount.toString(),
     );
-  }, [sectionColumnCount, root]);
+  }, [board.columnCount, root]);
 };