✨ Add usage of column count configured for layout

src/components/Board/BoardView.tsx

@@ -16,7 +16,6 @@ import { DashboardSidebar } from './Sections/Sidebar/SidebarSection';
 import { useGridstackStore } from './gridstack/store';
 
 export const BoardView = () => {
-  const board = useRequiredBoard();
   const boardName = useRequiredBoard().name;
   const stackedSections = useStackedSections();
   const sidebarsVisible = useSidebarVisibility();
@@ -96,14 +95,14 @@ const usePrepareGridstack = () => {
 };
 
 const useSidebarVisibility = () => {
-  const board = useRequiredBoard();
+  const layout = useRequiredBoard().layout;
   const screenLargerThanMd = useScreenLargerThan('md'); // For smaller screens mobile ribbons are displayed with drawers
 
   const isScreenSizeUnknown = typeof screenLargerThanMd === 'undefined';
 
   return {
-    right: board.showRightSidebar && screenLargerThanMd,
-    left: board.showLeftSidebar && screenLargerThanMd,
+    right: layout.showRightSidebar && screenLargerThanMd,
+    left: layout.showLeftSidebar && screenLargerThanMd,
     isLoading: isScreenSizeUnknown,
   };
 };

src/components/Board/Sections/Sidebar/MobileRibbon/MobileRibbon.tsx

@@ -26,7 +26,7 @@ export const MobileRibbons = () => {
 
   return (
     <div className={classes.root}>
-      {board.showLeftSidebar && leftSection ? (
+      {board.layout.showLeftSidebar && leftSection ? (
         <>
           <ActionIcon
             onClick={leftSidebar.open}
@@ -45,7 +45,7 @@ export const MobileRibbons = () => {
         <Space />
       )}
 
-      {board.showRightSidebar && rightSection ? (
+      {board.layout.showRightSidebar && rightSection ? (
         <>
           <ActionIcon
             onClick={rightSidebar.open}

src/components/Board/gridstack/store.tsx

@@ -2,6 +2,8 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { GridstackBreakpoints } from '~/constants/gridstack-breakpoints';
 
+import { useRequiredBoard } from '../context';
+
 export const useGridstackStore = createWithEqualityFn<GridstackStoreType>(
   (set, get) => ({
     mainAreaWidth: null,
@@ -30,23 +32,9 @@ export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | nul
 };
 
 export const useWrapperColumnCount = () => {
-  return 10;
-  /*const { config } = useConfigContext();
+  const board = useRequiredBoard();
 
-  if (!config) {
-    return null;
-  }
-
-  switch (useNamedWrapperColumnCount()) {
-    case 'large':
-      return config.settings.customization.gridstack?.columnCountLarge ?? 12;
-    case 'medium':
-      return config.settings.customization.gridstack?.columnCountMedium ?? 6;
-    case 'small':
-      return config.settings.customization.gridstack?.columnCountSmall ?? 3;
-    default:
-      return null;
-  }*/
+  return board.layout.columnCount;
 };
 
 function getCurrentShapeSize(size: number) {

src/components/layout/Templates/BoardLayout.tsx

@@ -165,7 +165,11 @@ const ToggleEditModeButton = () => {
   const save = async () => {
     toggleEditMode();
     if (!board || !name) return;
-    await saveBoardAsync({ boardId: board.id, sections: board.sections, layoutId: board.layoutId });
+    await saveBoardAsync({
+      boardId: board.id,
+      sections: board.sections,
+      layoutId: board.layout.id,
+    });
     utils.boards.byName.invalidate();
     Consola.log('Saved config to server', name);
     hideNotification(editModeNotificationId);

src/server/api/routers/board.ts

@@ -208,10 +208,13 @@ export const boardRouter = createTRPCRouter({
       const { layouts: _, mediaIntegrations, ...withoutLayouts } = board;
       return {
         ...withoutLayouts,
-        layoutName: layout.name,
-        layoutId: layout.id,
-        showRightSidebar: layout.showRightSidebar,
-        showLeftSidebar: layout.showLeftSidebar,
+        layout: {
+          id: layout.id,
+          name: layout.name,
+          showLeftSidebar: layout.showLeftSidebar,
+          showRightSidebar: layout.showRightSidebar,
+          columnCount: layout.columnCount,
+        },
         sections: preparedSections,
         mediaIntegrations: mediaIntegrations
           .map((x) => x.integration)

src/server/api/routers/board/db/board.ts

@@ -37,6 +37,7 @@ export const getFullBoardWithLayoutSectionsAsync = async (
           name: true,
           showLeftSidebar: true,
           showRightSidebar: true,
+          columnCount: true,
         },
         with: {
           sections: {