feat: add board (#15)

* wip: Add gridstack board
* wip: Centralize board pages, Add board settings page
* fix: remove cyclic dependency and rename widget-sort to kind
* improve: Add header actions as parallel route
* feat: add item select modal, add category edit modal,
* feat: add edit item modal
* feat: add remove item modal
* wip: add category actions
* feat: add saving of board, wip: add app widget
* Merge branch 'main' into add-board
* chore: update turbo dependencies
* chore: update mantine dependencies
* chore: fix typescript errors, lint and format
* feat: add confirm modal to category removal, move items of removed category to above wrapper
* feat: remove app widget to continue in another branch
* feat: add loading spinner until board is initialized
* fix: issue with cellheight of gridstack items
* feat: add translations for board
* fix: issue with translation for settings page
* chore: address pull request feedback

packages/db/client.ts

@@ -0,0 +1 @@
+export { createId } from "@paralleldrive/cuid2";

packages/db/index.ts

@@ -1,4 +1,5 @@
 import Database from "better-sqlite3";
+import type { BetterSQLite3Database } from "drizzle-orm/better-sqlite3";
 import { drizzle } from "drizzle-orm/better-sqlite3";
 
 import * as sqliteSchema from "./schema/sqlite";
@@ -11,4 +12,6 @@ const sqlite = new Database(process.env.DB_URL!);
 
 export const db = drizzle(sqlite, { schema });
 
+export type Database = BetterSQLite3Database<typeof schema>;
+
 export { createId } from "@paralleldrive/cuid2";

packages/db/package.json

@@ -1,6 +1,11 @@
 {
   "name": "@homarr/db",
   "version": "0.1.0",
+  "exports": {
+    ".": "./index.ts",
+    "./client": "./client.ts",
+    "./schema/sqlite": "./schema/sqlite.ts"
+  },
   "private": true,
   "main": "./index.ts",
   "types": "./index.ts",

packages/db/schema/sqlite.ts

@@ -1,8 +1,10 @@
 import type { AdapterAccount } from "@auth/core/adapters";
+import type { MantineColor } from "@mantine/core";
 import type { InferSelectModel } from "drizzle-orm";
 import { relations } from "drizzle-orm";
 import {
   index,
+  int,
   integer,
   primaryKey,
   sqliteTable,
@@ -10,8 +12,13 @@ import {
 } from "drizzle-orm/sqlite-core";
 
 import type {
+  BackgroundImageAttachment,
+  BackgroundImageRepeat,
+  BackgroundImageSize,
   IntegrationKind,
   IntegrationSecretKind,
+  SectionKind,
+  WidgetKind,
 } from "@homarr/definitions";
 
 export const users = sqliteTable("user", {
@@ -107,6 +114,91 @@ export const integrationSecrets = sqliteTable(
   }),
 );
 
+export const boards = sqliteTable("board", {
+  id: text("id").notNull().primaryKey(),
+  name: text("name").notNull(),
+  isPublic: int("is_public", { mode: "boolean" }).default(false).notNull(),
+  pageTitle: text("page_title"),
+  metaTitle: text("meta_title"),
+  logoImageUrl: text("logo_image_url"),
+  faviconImageUrl: text("favicon_image_url"),
+  backgroundImageUrl: text("background_image_url"),
+  backgroundImageAttachment: text("background_image_attachment")
+    .$type<BackgroundImageAttachment>()
+    .default("fixed")
+    .notNull(),
+  backgroundImageRepeat: text("background_image_repeat")
+    .$type<BackgroundImageRepeat>()
+    .default("no-repeat")
+    .notNull(),
+  backgroundImageSize: text("background_image_size")
+    .$type<BackgroundImageSize>()
+    .default("cover")
+    .notNull(),
+  primaryColor: text("primary_color")
+    .$type<MantineColor>()
+    .default("red")
+    .notNull(),
+  secondaryColor: text("secondary_color")
+    .$type<MantineColor>()
+    .default("orange")
+    .notNull(),
+  primaryShade: int("primary_shade").default(6).notNull(),
+  appOpacity: int("app_opacity").default(100).notNull(),
+  customCss: text("custom_css"),
+  showRightSidebar: int("show_right_sidebar", {
+    mode: "boolean",
+  })
+    .default(false)
+    .notNull(),
+  showLeftSidebar: int("show_left_sidebar", {
+    mode: "boolean",
+  })
+    .default(false)
+    .notNull(),
+  columnCount: int("column_count").default(10).notNull(),
+});
+
+export const sections = sqliteTable("section", {
+  id: text("id").notNull().primaryKey(),
+  boardId: text("board_id")
+    .notNull()
+    .references(() => boards.id, { onDelete: "cascade" }),
+  kind: text("kind").$type<SectionKind>().notNull(),
+  position: int("position").notNull(),
+  name: text("name"),
+});
+
+export const items = sqliteTable("item", {
+  id: text("id").notNull().primaryKey(),
+  sectionId: text("section_id")
+    .notNull()
+    .references(() => sections.id, { onDelete: "cascade" }),
+  kind: text("kind").$type<WidgetKind>().notNull(),
+  xOffset: int("x_offset").notNull(),
+  yOffset: int("y_offset").notNull(),
+  width: int("width").notNull(),
+  height: int("height").notNull(),
+  options: text("options").default('{"json": {}}').notNull(), // empty superjson object
+});
+
+export const integrationItems = sqliteTable(
+  "integration_item",
+  {
+    itemId: text("item_id")
+      .notNull()
+      .references(() => items.id, { onDelete: "cascade" }),
+    integrationId: text("integration_id")
+      .notNull()
+      .references(() => integrations.id, { onDelete: "cascade" }),
+  },
+  (table) => ({
+    compoundKey: primaryKey({
+      columns: [table.itemId, table.integrationId],
+    }),
+  }),
+);
+
 export const accountRelations = relations(accounts, ({ one }) => ({
   user: one(users, {
     fields: [accounts.userId],
@@ -120,6 +212,7 @@ export const userRelations = relations(users, ({ many }) => ({
 
 export const integrationRelations = relations(integrations, ({ many }) => ({
   secrets: many(integrationSecrets),
+  items: many(integrationItems),
 }));
 
 export const integrationSecretRelations = relations(
@@ -132,6 +225,40 @@ export const integrationSecretRelations = relations(
   }),
 );
 
+export const boardRelations = relations(boards, ({ many }) => ({
+  sections: many(sections),
+}));
+
+export const sectionRelations = relations(sections, ({ many, one }) => ({
+  items: many(items),
+  board: one(boards, {
+    fields: [sections.boardId],
+    references: [boards.id],
+  }),
+}));
+
+export const itemRelations = relations(items, ({ one, many }) => ({
+  section: one(sections, {
+    fields: [items.sectionId],
+    references: [sections.id],
+  }),
+  integrations: many(integrationItems),
+}));
+
+export const integrationItemRelations = relations(
+  integrationItems,
+  ({ one }) => ({
+    integration: one(integrations, {
+      fields: [integrationItems.integrationId],
+      references: [integrations.id],
+    }),
+    item: one(items, {
+      fields: [integrationItems.itemId],
+      references: [items.id],
+    }),
+  }),
+);
+
 export type User = InferSelectModel<typeof users>;
 export type Account = InferSelectModel<typeof accounts>;
 export type Session = InferSelectModel<typeof sessions>;