feat: new project frames (#2673)

Author: Kitenite

apps/web/client/src/server/api/routers/project/project.ts

@@ -116,12 +116,28 @@ export const projectRouter = createTRPCRouter({
                 const newCanvas = createDefaultCanvas(newProject.id);
                 await tx.insert(canvases).values(newCanvas);
 
-                const newUserCanvas = createDefaultUserCanvas(input.userId, newCanvas.id);
+                const newUserCanvas = createDefaultUserCanvas(input.userId, newCanvas.id, {
+                    x: '120',
+                    y: '120',
+                    scale: '0.56',
+                });
                 await tx.insert(userCanvases).values(newUserCanvas);
 
                 // 4. Create the default frame
-                const newFrame = createDefaultFrame(newCanvas.id, input.project.sandboxUrl);
-                await tx.insert(frames).values(newFrame);
+                const desktopFrame = createDefaultFrame(newCanvas.id, input.project.sandboxUrl, {
+                    x: '5',
+                    y: '0',
+                    width: '1536',
+                    height: '960',
+                });
+                await tx.insert(frames).values(desktopFrame);
+                const mobileFrame = createDefaultFrame(newCanvas.id, input.project.sandboxUrl, {
+                    x: '1600',
+                    y: '0',
+                    width: '440',
+                    height: '956',
+                });
+                await tx.insert(frames).values(mobileFrame);
 
                 // 5. Create the creation request
                 if (input.creationData) {

apps/web/template/app/page.tsx

@@ -2,19 +2,13 @@
 
 export default function Page() {
     return (
-        <div
-            className="w-screen h-screen flex items-center justify-center bg-white dark:bg-black transition-colors duration-200 flex-col p-4 gap-[32px]"
-            data-oid="1"
-        >
-            <h1 className="text-4xl md:text-5xl font-semibold tracking-tight" data-oid="3">
-                Hello world
-            </h1>
-            <img
-                src="./favicon.ico"
-                alt="Don't worry be happy"
-                className="object-contain"
-                data-oid="7"
-            />
+        <div className="w-full min-h-screen flex items-center justify-center bg-black transition-colors duration-200 flex-col p-4 gap-8">
+            <div className="text-center text-gray-100 p-4">
+                <h1 className="text-4xl font-semibold mb-4 tracking-tight">Welcome to your app</h1>
+                <p className="text-xl md:text-2xl text-gray-300">
+                    This is a blank template Next.js App
+                </p>
+            </div>
         </div>
     );
 }

packages/db/src/defaults/frame.ts

@@ -3,15 +3,16 @@ import type { Frame as DbFrame } from '@onlook/db';
 import { FrameType } from '@onlook/models';
 import { v4 as uuidv4 } from 'uuid';
 
-export const createDefaultFrame = (canvasId: string, url: string): DbFrame => {
+export const createDefaultFrame = (canvasId: string, url: string, overrides?: Partial<DbFrame>): DbFrame => {
     return {
         id: uuidv4(),
-        canvasId: canvasId,
+        canvasId,
         type: FrameType.WEB,
-        url: url,
+        url,
         x: DefaultSettings.FRAME_POSITION.x.toString(),
         y: DefaultSettings.FRAME_POSITION.y.toString(),
         width: DefaultSettings.FRAME_DIMENSION.width.toString(),
         height: DefaultSettings.FRAME_DIMENSION.height.toString(),
+        ...overrides,
     };
 };

packages/db/src/defaults/user-canvas.ts

@@ -1,12 +1,13 @@
 import { DefaultSettings } from '@onlook/constants';
 import type { UserCanvas as DbUserCanvas } from '@onlook/db';
 
-export const createDefaultUserCanvas = (userId: string, canvasId: string): DbUserCanvas => {
+export const createDefaultUserCanvas = (userId: string, canvasId: string, overrides?: Partial<DbUserCanvas>): DbUserCanvas => {
     return {
         userId,
         canvasId,
         scale: DefaultSettings.SCALE.toString(),
         x: DefaultSettings.PAN_POSITION.x.toString(),
         y: DefaultSettings.PAN_POSITION.y.toString(),
+        ...overrides,
     };
 };