feat(boards): add responsive layout system (#2271)

packages/db/schema/sqlite.ts

@@ -265,7 +265,6 @@ export const boards = sqliteTable("board", {
   secondaryColor: text().default("#fd7e14").notNull(),
   opacity: int().default(100).notNull(),
   customCss: text(),
-  columnCount: int().default(10).notNull(),
   iconColor: text(),
   itemRadius: text().$type<MantineSize>().default("lg").notNull(),
   disableStatus: int({ mode: "boolean" }).default(false).notNull(),
@@ -307,20 +306,73 @@ export const boardGroupPermissions = sqliteTable(
   }),
 );
 
+export const layouts = sqliteTable("layout", {
+  id: text().notNull().primaryKey(),
+  name: text().notNull(),
+  boardId: text()
+    .notNull()
+    .references(() => boards.id, { onDelete: "cascade" }),
+  columnCount: int().notNull(),
+  breakpoint: int().notNull().default(0),
+});
+
+export const itemLayouts = sqliteTable(
+  "item_layout",
+  {
+    itemId: text()
+      .notNull()
+      .references(() => items.id, { onDelete: "cascade" }),
+    sectionId: text()
+      .notNull()
+      .references(() => sections.id, { onDelete: "cascade" }),
+    layoutId: text()
+      .notNull()
+      .references(() => layouts.id, { onDelete: "cascade" }),
+    xOffset: int().notNull(),
+    yOffset: int().notNull(),
+    width: int().notNull(),
+    height: int().notNull(),
+  },
+  (table) => ({
+    compoundKey: primaryKey({
+      columns: [table.itemId, table.sectionId, table.layoutId],
+    }),
+  }),
+);
+
+export const sectionLayouts = sqliteTable(
+  "section_layout",
+  {
+    sectionId: text()
+      .notNull()
+      .references(() => sections.id, { onDelete: "cascade" }),
+    layoutId: text()
+      .notNull()
+      .references(() => layouts.id, { onDelete: "cascade" }),
+    parentSectionId: text().references((): AnySQLiteColumn => sections.id, {
+      onDelete: "cascade",
+    }),
+    xOffset: int().notNull(),
+    yOffset: int().notNull(),
+    width: int().notNull(),
+    height: int().notNull(),
+  },
+  (table) => ({
+    compoundKey: primaryKey({
+      columns: [table.sectionId, table.layoutId],
+    }),
+  }),
+);
+
 export const sections = sqliteTable("section", {
   id: text().notNull().primaryKey(),
   boardId: text()
     .notNull()
     .references(() => boards.id, { onDelete: "cascade" }),
   kind: text().$type<SectionKind>().notNull(),
-  xOffset: int().notNull(),
-  yOffset: int().notNull(),
-  width: int(),
-  height: int(),
+  xOffset: int(),
+  yOffset: int(),
   name: text(),
-  parentSectionId: text().references((): AnySQLiteColumn => sections.id, {
-    onDelete: "cascade",
-  }),
 });
 
 export const sectionCollapseStates = sqliteTable(
@@ -343,14 +395,10 @@ export const sectionCollapseStates = sqliteTable(
 
 export const items = sqliteTable("item", {
   id: text().notNull().primaryKey(),
-  sectionId: text()
+  boardId: text()
     .notNull()
-    .references(() => sections.id, { onDelete: "cascade" }),
+    .references(() => boards.id, { onDelete: "cascade" }),
   kind: text().$type<WidgetKind>().notNull(),
-  xOffset: int().notNull(),
-  yOffset: int().notNull(),
-  width: int().notNull(),
-  height: int().notNull(),
   options: text().default('{"json": {}}').notNull(), // empty superjson object
   advancedOptions: text().default('{"json": {}}').notNull(), // empty superjson object
 });
@@ -576,12 +624,14 @@ export const integrationSecretRelations = relations(integrationSecrets, ({ one }
 
 export const boardRelations = relations(boards, ({ many, one }) => ({
   sections: many(sections),
+  items: many(items),
   creator: one(users, {
     fields: [boards.creatorId],
     references: [users.id],
   }),
   userPermissions: many(boardUserPermissions),
   groupPermissions: many(boardGroupPermissions),
+  layouts: many(layouts),
   groupHomes: many(groups, {
     relationName: "groupRelations__board__homeBoardId",
   }),
@@ -591,12 +641,17 @@ export const boardRelations = relations(boards, ({ many, one }) => ({
 }));
 
 export const sectionRelations = relations(sections, ({ many, one }) => ({
-  items: many(items),
   board: one(boards, {
     fields: [sections.boardId],
     references: [boards.id],
   }),
   collapseStates: many(sectionCollapseStates),
+  layouts: many(sectionLayouts, {
+    relationName: "sectionLayoutRelations__section__sectionId",
+  }),
+  children: many(sectionLayouts, {
+    relationName: "sectionLayoutRelations__section__parentSectionId",
+  }),
 }));
 
 export const sectionCollapseStateRelations = relations(sectionCollapseStates, ({ one }) => ({
@@ -611,11 +666,12 @@ export const sectionCollapseStateRelations = relations(sectionCollapseStates, ({
 }));
 
 export const itemRelations = relations(items, ({ one, many }) => ({
-  section: one(sections, {
-    fields: [items.sectionId],
-    references: [sections.id],
-  }),
   integrations: many(integrationItems),
+  layouts: many(itemLayouts),
+  board: one(boards, {
+    fields: [items.boardId],
+    references: [boards.id],
+  }),
 }));
 
 export const integrationItemRelations = relations(integrationItems, ({ one }) => ({
@@ -636,3 +692,44 @@ export const searchEngineRelations = relations(searchEngines, ({ one, many }) =>
   }),
   usersWithDefault: many(users),
 }));
+
+export const itemLayoutRelations = relations(itemLayouts, ({ one }) => ({
+  item: one(items, {
+    fields: [itemLayouts.itemId],
+    references: [items.id],
+  }),
+  section: one(sections, {
+    fields: [itemLayouts.sectionId],
+    references: [sections.id],
+  }),
+  layout: one(layouts, {
+    fields: [itemLayouts.layoutId],
+    references: [layouts.id],
+  }),
+}));
+
+export const sectionLayoutRelations = relations(sectionLayouts, ({ one }) => ({
+  section: one(sections, {
+    fields: [sectionLayouts.sectionId],
+    references: [sections.id],
+    relationName: "sectionLayoutRelations__section__sectionId",
+  }),
+  layout: one(layouts, {
+    fields: [sectionLayouts.layoutId],
+    references: [layouts.id],
+  }),
+  parentSection: one(sections, {
+    fields: [sectionLayouts.parentSectionId],
+    references: [sections.id],
+    relationName: "sectionLayoutRelations__section__parentSectionId",
+  }),
+}));
+
+export const layoutRelations = relations(layouts, ({ one, many }) => ({
+  items: many(itemLayouts),
+  sections: many(sectionLayouts),
+  board: one(boards, {
+    fields: [layouts.boardId],
+    references: [boards.id],
+  }),
+}));