put breakpoints into the db

app/routes/index.tsx

@@ -1,5 +1,5 @@
 import { redirect, useLoaderData, type LoaderFunction } from "remix";
-import { Root, initialBreakpoints, type Data } from "@webstudio-is/sdk";
+import { Root, type Data } from "@webstudio-is/sdk";
 import config from "~/config";
 import * as db from "~/shared/db";
 import Document from "./canvas";
@@ -23,10 +23,18 @@ export const loader: LoaderFunction = async ({
     (wstdDomain === "wstd" || wstdDomain?.includes("localhost"))
   ) {
     try {
-      const tree = await db.tree.loadByDomain(userDomain);
-      const props = await db.props.loadByTreeId(tree.id);
-      // @todo fetch breakpoints
-      const breakpoints = initialBreakpoints;
+      const project = await db.project.loadByDomain(userDomain);
+      if (project === null) {
+        throw new Error(`Unknown domain "${userDomain}"`);
+      }
+      if (project.prodTreeId === null) {
+        throw new Error(`Site is not published`);
+      }
+      const [tree, props, breakpoints] = await Promise.all([
+        db.tree.loadByProject(project, "production"),
+        db.props.loadByTreeId(project.prodTreeId),
+        db.breakpoints.load(project.id),
+      ]);
       return { tree, props, breakpoints };
     } catch (error) {
       if (error instanceof Error) {

app/shared/db/breakpoints.server.ts

@@ -0,0 +1,31 @@
+import {
+  initialBreakpoints,
+  type Project,
+  defaultBreakpoint,
+} from "@webstudio-is/sdk";
+import { prisma } from "./prisma.server";
+
+export const create = async (projectId: Project["id"]) => {
+  const data = initialBreakpoints
+    .filter((breakpoint) => breakpoint.ref !== "default")
+    .map((breakpoint) => ({
+      ...breakpoint,
+      projectId,
+    }));
+  // https://github.com/prisma/prisma/issues/8131
+  const breakpoints = await prisma.$transaction(
+    data.map((breakpoint) => prisma.breakpoint.create({ data: breakpoint }))
+  );
+  // DB never contains the default breakpoint
+  breakpoints.push(defaultBreakpoint);
+  return breakpoints;
+};
+
+export const load = async (projectId: Project["id"]) => {
+  const breakpoints = await prisma.breakpoint.findMany({
+    where: { projectId },
+  });
+  // DB never contains the default breakpoint
+  breakpoints.push(defaultBreakpoint);
+  return breakpoints;
+};

app/shared/db/canvas.server.ts

@@ -1,4 +1,4 @@
-import { type Data, initialBreakpoints, type Project } from "@webstudio-is/sdk";
+import { type Data, type Project } from "@webstudio-is/sdk";
 import * as db from ".";
 
 export type CanvasData = Data & { project: Project };
@@ -7,23 +7,29 @@ export type ErrorData = {
   errors: string;
 };
 
-const loadData = async ({ projectId }: { projectId: string }) => {
-  const project = await db.project.loadById(projectId);
+const loadData = async (projectId: Project["id"]) => {
+  const [existingBreakpoints, project] = await Promise.all([
+    db.breakpoints.load(projectId),
+    db.project.loadById(projectId),
+  ]);
   if (project === null) throw new Error(`Project "${projectId}" not found`);
-  const [tree, props] = await Promise.all([
+
+  const [tree, props, breakpoints] = await Promise.all([
     db.tree.loadByProject(project, "development"),
     db.props.loadByProject(project, "development"),
+    existingBreakpoints.length > 1
+      ? existingBreakpoints
+      : db.breakpoints.create(projectId),
   ]);
-  // @todo fetch breakpoints from db
-  return { tree, props, project, breakpoints: initialBreakpoints };
+  return { tree, props, project, breakpoints };
 };
 
 export const loadCanvasData = async ({
   projectId,
 }: {
-  projectId: string;
+  projectId: Project["id"];
 }): Promise<CanvasData | ErrorData> => {
-  return await loadData({ projectId });
+  return await loadData(projectId);
 };
 
 export type PreviewData = Data;
@@ -31,8 +37,8 @@ export type PreviewData = Data;
 export const loadPreviewData = async ({
   projectId,
 }: {
-  projectId: string;
+  projectId: Project["id"];
 }): Promise<PreviewData | ErrorData> => {
-  const { tree, props, breakpoints } = await loadData({ projectId });
+  const { tree, props, breakpoints } = await loadData(projectId);
   return { tree, props, breakpoints };
 };

app/shared/db/index.ts

@@ -3,3 +3,4 @@ export * as project from "./project.server";
 export * as props from "./props.server";
 export * as misc from "./misc.server";
 export * from "./canvas.server";
+export * as breakpoints from "./breakpoints.server";

app/shared/db/tree.server.ts

@@ -49,19 +49,6 @@ export const loadById = async (id: string): Promise<Tree> => {
   })) as Tree;
 };
 
-export const loadByDomain = async (domain: string): Promise<Tree> => {
-  const project = await prisma.project.findUnique({
-    where: { domain },
-  });
-  if (project === null) {
-    throw new Error(`Unknown domain "${domain}"`);
-  }
-  if (project.prodTreeId === null) {
-    throw new Error(`Site is not published`);
-  }
-  return await loadById(project.prodTreeId);
-};
-
 export const loadByProject = async (
   project: Project | null,
   env: "production" | "development" = "development"