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

@@ -21,24 +21,18 @@ export const initializeGridstack = ({
   sectionColumnCount,
 }: InitializeGridstackProps) => {
   if (!refs.wrapper.current) return false;
-  // calculates the currently available count of columns
-  const columnCount = section.kind === "sidebar" ? 2 : sectionColumnCount;
-  const minRow =
-    section.kind !== "sidebar"
-      ? 1
-      : Math.floor(refs.wrapper.current.offsetHeight / 128);
   // initialize gridstack
   const newGrid = refs.gridstack;
   newGrid.current = GridStack.init(
     {
-      column: columnCount,
-      margin: section.kind === "sidebar" ? 5 : 10,
+      column: sectionColumnCount,
+      margin: 10,
       cellHeight: 128,
       float: true,
       alwaysShowResizeHandle: true,
       acceptWidgets: true,
       staticGrid: true,
-      minRow,
+      minRow: 1,
       animate: false,
       styleInHead: true,
       disableRemoveNodeOnDrop: true,
@@ -49,7 +43,7 @@ export const initializeGridstack = ({
   const grid = newGrid.current;
   if (!grid) return false;
   // Must be used to update the column count after the initialization
-  grid.column(columnCount, "none");
+  grid.column(sectionColumnCount, "none");
 
   grid.batchUpdate();
   grid.removeAll(false);