feat: rebuild board grid experience

packages/validation/src/board-layout.spec.ts

@@ -0,0 +1,42 @@
+import { describe, expect, test } from "vitest";
+
+import { boardLayoutSchema } from "./board";
+
+describe("board layout gutters", () => {
+  test("defaults both gutters to disabled", () => {
+    expect(
+      boardLayoutSchema.parse({
+        id: "layout",
+        name: "Base",
+        columnCount: 12,
+        breakpoint: 0,
+      }),
+    ).toMatchObject({
+      leftGutterColumnCount: 0,
+      rightGutterColumnCount: 0,
+    });
+  });
+
+  test("allows up to three columns per gutter while preserving a main column", () => {
+    expect(
+      boardLayoutSchema.safeParse({
+        id: "layout",
+        name: "Base",
+        columnCount: 6,
+        leftGutterColumnCount: 3,
+        rightGutterColumnCount: 2,
+        breakpoint: 0,
+      }).success,
+    ).toBe(true);
+    expect(
+      boardLayoutSchema.safeParse({
+        id: "layout",
+        name: "Base",
+        columnCount: 6,
+        leftGutterColumnCount: 3,
+        rightGutterColumnCount: 3,
+        breakpoint: 0,
+      }).success,
+    ).toBe(false);
+  });
+});

packages/validation/src/board.spec.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+
+import { categorySectionOptionsDefaults, dynamicSectionOptionsDefaults, sectionSchema } from "./shared";
+
+describe("section behavior validation", () => {
+  it("normalizes a legacy category to the current behavior defaults", () => {
+    const result = sectionSchema.parse({
+      id: "category",
+      name: "Media",
+      kind: "category",
+      yOffset: 0,
+      xOffset: 0,
+    });
+
+    expect(result).toMatchObject({
+      collapsed: true,
+      options: categorySectionOptionsDefaults,
+    });
+  });
+
+  it("normalizes a legacy dynamic section to the current behavior defaults", () => {
+    const result = sectionSchema.parse({
+      id: "dynamic",
+      kind: "dynamic",
+      options: {
+        title: "Media",
+        customCssClasses: [],
+        borderColor: "",
+      },
+      layouts: [],
+    });
+
+    expect(result).toMatchObject({
+      collapsed: false,
+      options: {
+        ...dynamicSectionOptionsDefaults,
+        title: "Media",
+      },
+    });
+  });
+
+  it("accepts a configured category rail", () => {
+    const result = sectionSchema.parse({
+      id: "category",
+      name: "Navigation",
+      kind: "category",
+      yOffset: 0,
+      xOffset: 0,
+      collapsed: false,
+      options: {
+        showLabel: false,
+        collapsible: false,
+        showOpenAll: false,
+        railPlacement: "left",
+        columnCount: 3,
+      },
+    });
+
+    expect(result).toMatchObject({
+      options: {
+        showLabel: false,
+        collapsible: false,
+        showOpenAll: false,
+        railPlacement: "left",
+        columnCount: 3,
+      },
+    });
+  });
+});

packages/validation/src/board.ts

@@ -25,6 +25,7 @@ export const boardNameSchema = z
   .max(255)
   .regex(/^[A-Za-z0-9-_]*$/);
 export const boardColumnCountSchema = z.number().min(1).max(24);
+export const boardGutterColumnCountSchema = z.number().int().min(0).max(3);
 
 export const boardByNameSchema = z.object({
   name: boardNameSchema,
@@ -70,16 +71,23 @@ export const boardSavePartialSettingsSchema = z
   })
   .partial();
 
+export const boardLayoutSchema = z
+  .object({
+    id: z.string(),
+    name: z.string().trim().nonempty().max(32),
+    columnCount: boardColumnCountSchema,
+    leftGutterColumnCount: boardGutterColumnCountSchema.default(0),
+    rightGutterColumnCount: boardGutterColumnCountSchema.default(0),
+    breakpoint: z.number().min(0).max(32767),
+  })
+  .refine((layout) => layout.leftGutterColumnCount + layout.rightGutterColumnCount < layout.columnCount, {
+    message: "Gutters must leave at least one dashboard column",
+    path: ["columnCount"],
+  });
+
 export const boardSaveLayoutsSchema = z.object({
   id: z.string(),
-  layouts: z.array(
-    z.object({
-      id: z.string(),
-      name: z.string().trim().nonempty().max(32),
-      columnCount: boardColumnCountSchema,
-      breakpoint: z.number().min(0).max(32767),
-    }),
-  ),
+  layouts: z.array(boardLayoutSchema),
 });
 
 export const boardSaveSchema = z.object({

packages/validation/src/shared.ts

@@ -44,13 +44,36 @@ export const commonItemSchema = z
   })
   .and(sharedItemSchema);
 
+export const sectionRailPlacements = ["main", "left", "right"] as const;
+
+export const categorySectionOptionsDefaults = {
+  showLabel: true,
+  collapsible: true,
+  showOpenAll: true,
+  railPlacement: "main",
+  columnCount: 2,
+} as const;
+
+export const categorySectionOptionsSchema = z
+  .object({
+    showLabel: z.boolean().default(categorySectionOptionsDefaults.showLabel),
+    collapsible: z.boolean().default(categorySectionOptionsDefaults.collapsible),
+    showOpenAll: z.boolean().default(categorySectionOptionsDefaults.showOpenAll),
+    railPlacement: z.enum(sectionRailPlacements).default(categorySectionOptionsDefaults.railPlacement),
+    columnCount: z.number().int().min(1).max(24).default(categorySectionOptionsDefaults.columnCount),
+  })
+  .default(categorySectionOptionsDefaults);
+
+export type CategorySectionOptions = z.infer<typeof categorySectionOptionsSchema>;
+
 const categorySectionSchema = z.object({
   id: z.string(),
   name: z.string(),
   kind: z.literal("category"),
   yOffset: z.number(),
   xOffset: z.number(),
-  collapsed: z.boolean(),
+  collapsed: z.boolean().default(true),
+  options: categorySectionOptionsSchema,
 });
 
 const emptySectionSchema = z.object({
@@ -60,16 +83,33 @@ const emptySectionSchema = z.object({
   xOffset: z.number(),
 });
 
-export const dynamicSectionOptionsSchema = z.object({
-  title: z.string().max(20).default(""),
-  customCssClasses: z.array(z.string()).default([]),
-  borderColor: z.string().default(""),
-});
+export const dynamicSectionOptionsDefaults = {
+  title: "",
+  customCssClasses: [] as string[],
+  borderColor: "",
+  showLabel: true,
+  collapsible: false,
+  showOpenAll: false,
+} as const;
+
+export const dynamicSectionOptionsSchema = z
+  .object({
+    title: z.string().max(64).default(dynamicSectionOptionsDefaults.title),
+    customCssClasses: z.array(z.string()).default([]),
+    borderColor: z.string().default(dynamicSectionOptionsDefaults.borderColor),
+    showLabel: z.boolean().default(dynamicSectionOptionsDefaults.showLabel),
+    collapsible: z.boolean().default(dynamicSectionOptionsDefaults.collapsible),
+    showOpenAll: z.boolean().default(dynamicSectionOptionsDefaults.showOpenAll),
+  })
+  .default(dynamicSectionOptionsDefaults);
+
+export type DynamicSectionOptions = z.infer<typeof dynamicSectionOptionsSchema>;
 
 const dynamicSectionSchema = z.object({
   id: z.string(),
   kind: z.literal("dynamic"),
   options: dynamicSectionOptionsSchema,
+  collapsed: z.boolean().default(false),
   layouts: z.array(
     z.object({
       layoutId: z.string(),