From 3143baac875a19a6598100a41db06ea9b162bf3c Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Sat, 29 Jun 2024 07:02:27 +0530
Subject: User Canvas (1/2)

---
 apps/web/app/(canvas)/canvas/[id]/page.tsx       |   4 -
 apps/web/app/(canvas)/canvas/layout.tsx          |  13 -
 apps/web/app/(canvas)/canvas/page.tsx            |  22 +-
 apps/web/app/(canvas)/canvas/search&create.tsx   |  35 +
 apps/web/app/(canvas)/canvas/thinkPad.tsx        |  36 +
 apps/web/app/(canvas)/canvas/thinkPads.tsx       |  30 +
 apps/web/app/(canvas)/layout.tsx                 |  19 +
 apps/web/app/actions/doers.ts                    |  35 +
 apps/web/app/actions/fetchers.ts                 |  24 +
 apps/web/cf-env.d.ts                             |   6 +
 apps/web/migrations/0000_bitter_electro.sql      | 122 ++++
 apps/web/migrations/0001_remarkable_avengers.sql |   4 -
 apps/web/migrations/000_setup.sql                | 108 ---
 apps/web/migrations/meta/0000_snapshot.json      | 824 +++++++++++++++++++++++
 apps/web/migrations/meta/_journal.json           |  13 +
 apps/web/server/db/schema.ts                     |  19 +
 package.json                                     |   2 +-
 17 files changed, 1182 insertions(+), 134 deletions(-)
 delete mode 100644 apps/web/app/(canvas)/canvas/layout.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/search&create.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/thinkPad.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/thinkPads.tsx
 create mode 100644 apps/web/app/(canvas)/layout.tsx
 create mode 100644 apps/web/migrations/0000_bitter_electro.sql
 delete mode 100644 apps/web/migrations/0001_remarkable_avengers.sql
 delete mode 100644 apps/web/migrations/000_setup.sql
 create mode 100644 apps/web/migrations/meta/0000_snapshot.json
 create mode 100644 apps/web/migrations/meta/_journal.json

diff --git a/apps/web/app/(canvas)/canvas/[id]/page.tsx b/apps/web/app/(canvas)/canvas/[id]/page.tsx
index 6efb6cf4..e58ab35e 100644
--- a/apps/web/app/(canvas)/canvas/[id]/page.tsx
+++ b/apps/web/app/(canvas)/canvas/[id]/page.tsx
@@ -9,15 +9,11 @@ import { AutocompleteIcon, blockIcon } from "@repo/ui/icons";
 import Image from "next/image";
 import { Switch } from "@repo/ui/shadcn/switch";
 import { Label } from "@repo/ui/shadcn/label";
-import { useRouter } from "next/router";
 
 function page() {
   const [fullScreen, setFullScreen] = useState(false);
   const [visible, setVisible] = useState(true);
 
-  const router = useRouter();
-  router.push("/home");
-
   return (
     <div
       className={`h-screen w-full ${!fullScreen ? "px-4 py-6" : "bg-[#1F2428]"} transition-all`}
diff --git a/apps/web/app/(canvas)/canvas/layout.tsx b/apps/web/app/(canvas)/canvas/layout.tsx
deleted file mode 100644
index 9bc3b6d7..00000000
--- a/apps/web/app/(canvas)/canvas/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import "../canvasStyles.css";
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <div lang="en" className="bg-[#151515]">
-      <div>{children}</div>
-    </div>
-  );
-}
diff --git a/apps/web/app/(canvas)/canvas/page.tsx b/apps/web/app/(canvas)/canvas/page.tsx
index 8b5252af..815d0b93 100644
--- a/apps/web/app/(canvas)/canvas/page.tsx
+++ b/apps/web/app/(canvas)/canvas/page.tsx
@@ -1,9 +1,23 @@
-import { redirect } from "next/navigation";
 import React from "react";
+import { getCanvas } from "@/app/actions/fetchers";
+import SearchandCreate from "./search&create";
+import ThinkPads from "./thinkPads";
 
-function page() {
-  redirect("/signin");
-  return <div>page</div>;
+async function page() {
+  const canvas = await getCanvas();
+  return (
+    <div className="h-screen w-full bg-[#171B1F] py-32 text-[#FFFFFF] ">
+      <div className="flex w-full flex-col items-center gap-8">
+        <h1 className="text-4xl font-medium">Your thinkpads</h1>
+        <p>{JSON.stringify(canvas)}</p>
+        <SearchandCreate />
+        {
+          // @ts-ignore
+          canvas.success && <ThinkPads data={canvas.data} />
+        }
+      </div>
+    </div>
+  );
 }
 
 export default page;
diff --git a/apps/web/app/(canvas)/canvas/search&create.tsx b/apps/web/app/(canvas)/canvas/search&create.tsx
new file mode 100644
index 00000000..3998dde7
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/search&create.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useFormStatus } from "react-dom";
+import Image from "next/image";
+import { SearchIcon } from "@repo/ui/icons";
+import { createCanvas } from "@/app/actions/doers";
+
+export default function SearchandCreate() {
+  return (
+    <div className="flex w-[90%] max-w-2xl gap-2">
+      <div className="flex flex-grow items-center overflow-hidden rounded-xl bg-[#1F2428]">
+        <input
+          placeholder="search here..."
+          className="flex-grow bg-[#1F2428] px-5 py-3 text-xl focus:border-none focus:outline-none"
+        />
+        <button className="h-full border-l-2 border-[#384149] px-2 pl-2">
+          <Image src={SearchIcon} alt="search" />
+        </button>
+      </div>
+
+      <form action={createCanvas}>
+        <Button /> 
+      </form>
+    </div>
+  );
+}
+
+function Button() {
+  const {pending} = useFormStatus()
+  return (
+    <button className="rounded-xl bg-[#1F2428] px-5 py-3 text-xl text-[#B8C4C6]">
+      {pending? "Creating.." : "Create New"}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/thinkPad.tsx b/apps/web/app/(canvas)/canvas/thinkPad.tsx
new file mode 100644
index 00000000..dad2de48
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/thinkPad.tsx
@@ -0,0 +1,36 @@
+import {motion} from "framer-motion"
+import Link from "next/link";
+
+const childVariants = {
+  hidden: { opacity: 0, y: 10, filter: "blur(2px)" },
+  visible: { opacity: 1, y: 0, filter: "blur(0px)" },
+};
+
+export default function ThinkPad({
+  title,
+  description,
+  image,
+  id
+}: {
+  title: string;
+  description: string;
+  image: string;
+  id: string;
+}) {
+  return (
+    <motion.div
+      variants={childVariants}
+      className="flex h-48  gap-4 rounded-2xl bg-[#1F2428] p-2"
+    >
+      <Link className="h-full min-w-[40%] rounded-xl bg-[#363f46]" href={`/canvas/${id}`}>
+      <div></div>
+      </Link>
+      <div className="flex flex-col gap-2">
+        <div>{title}</div>
+        <div className="overflow-hidden text-ellipsis text-[#B8C4C6]">
+          {description}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/thinkPads.tsx b/apps/web/app/(canvas)/canvas/thinkPads.tsx
new file mode 100644
index 00000000..b83d4142
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/thinkPads.tsx
@@ -0,0 +1,30 @@
+"use client";
+import { motion } from "framer-motion";
+import ThinkPad from "./thinkPad";
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+};
+
+export default function ThinkPads({data}: {
+  data: {image: string, title:string, description:string, id: string}[]
+}) {
+  return (
+    <motion.div
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      className="w-[90%] max-w-2xl space-y-6"
+    >
+      {data.map((item) => {
+        return <ThinkPad {...item} />;
+      })}
+    </motion.div>
+  );
+}
diff --git a/apps/web/app/(canvas)/layout.tsx b/apps/web/app/(canvas)/layout.tsx
new file mode 100644
index 00000000..5c925573
--- /dev/null
+++ b/apps/web/app/(canvas)/layout.tsx
@@ -0,0 +1,19 @@
+import { auth } from "@/server/auth";
+import "./canvasStyles.css";
+import { redirect } from "next/navigation";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+
+  const info = await auth();
+
+  if (!info) {
+    return redirect("/signin");
+  }
+  return (
+      <div>{children}</div>
+  );
+}
diff --git a/apps/web/app/actions/doers.ts b/apps/web/app/actions/doers.ts
index 99a1b719..30ddbc8e 100644
--- a/apps/web/app/actions/doers.ts
+++ b/apps/web/app/actions/doers.ts
@@ -3,6 +3,7 @@
 import { revalidatePath } from "next/cache";
 import { db } from "../../server/db";
 import {
+  canvas,
   chatHistory,
   chatThreads,
   contentToSpace,
@@ -381,3 +382,37 @@ export const linkTelegramToUser = async (
     data: true,
   };
 };
+
+export const createCanvas = async () => {
+  const data = await auth();
+
+  if (!data || !data.user || !data.user.id) {
+    redirect("/signin");
+    return { error: "Not authenticated", success: false };
+  }
+
+  const resp = await db
+  .insert(canvas)
+  .values({ userId: data.user.id }).returning({id: canvas.id});
+  redirect(`/canvas/${resp[0]!.id}`);
+  // TODO INVESTIGATE: NO REDIRECT INSIDE TRY CATCH BLOCK
+  // try {
+  //   const resp = await db
+  //     .insert(canvas)
+  //     .values({ userId: data.user.id }).returning({id: canvas.id});
+  //   return redirect(`/canvas/${resp[0]!.id}`);
+  // } catch (e: unknown) {
+  //   const error = e as Error;
+  //   if (
+  //     error.message.includes("D1_ERROR: UNIQUE constraint failed: space.name")
+  //   ) {
+  //     return { success: false, data: 0, error: "Space already exists" };
+  //   } else {
+  //     return {
+  //       success: false,
+  //       data: 0,
+  //       error: "Failed to create space with error: " + error.message,
+  //     };
+  //   }
+  // }
+};
\ No newline at end of file
diff --git a/apps/web/app/actions/fetchers.ts b/apps/web/app/actions/fetchers.ts
index 664c20ac..f485c28d 100644
--- a/apps/web/app/actions/fetchers.ts
+++ b/apps/web/app/actions/fetchers.ts
@@ -3,6 +3,7 @@
 import { and, asc, eq, inArray, not, sql } from "drizzle-orm";
 import { db } from "../../server/db";
 import {
+  canvas,
   chatHistory,
   ChatThread,
   chatThreads,
@@ -189,3 +190,26 @@ export const getChatHistory = async (): ServerActionReturnType<
     };
   }
 };
+
+export const getCanvas = async () => {
+  const data = await auth();
+
+  if (!data || !data.user || !data.user.id) {
+    redirect("/signin");
+    return { error: "Not authenticated", success: false };
+  }
+
+  try {
+    const canvases = await db.select().from(canvas).where(eq(canvas.userId, data.user.id))
+
+    return {
+      success: true,
+      data: canvases.map(({ userId, ...rest }) => rest),
+    };
+  } catch (e) {
+    return {
+      success: false,
+      error: (e as Error).message,
+    };
+  }
+};
diff --git a/apps/web/cf-env.d.ts b/apps/web/cf-env.d.ts
index be5c991a..e645f7b1 100644
--- a/apps/web/cf-env.d.ts
+++ b/apps/web/cf-env.d.ts
@@ -4,13 +4,19 @@ declare global {
       GOOGLE_CLIENT_ID: string;
       GOOGLE_CLIENT_SECRET: string;
       AUTH_SECRET: string;
+
       R2_ENDPOINT: string;
       R2_ACCESS_KEY_ID: string;
       R2_SECRET_ACCESS_KEY: string;
       R2_PUBLIC_BUCKET_ADDRESS: string;
       R2_BUCKET_NAME: string;
+
       BACKEND_SECURITY_KEY: string;
       BACKEND_BASE_URL: string;
+
+      CLOUDFLARE_ACCOUNT_ID: string,
+      CLOUDFLARE_DATABASE_ID: string,
+      CLOUDFLARE_D1_TOKEN: string, 
     }
   }
 }
diff --git a/apps/web/migrations/0000_bitter_electro.sql b/apps/web/migrations/0000_bitter_electro.sql
new file mode 100644
index 00000000..3ce840e7
--- /dev/null
+++ b/apps/web/migrations/0000_bitter_electro.sql
@@ -0,0 +1,122 @@
+CREATE TABLE `account` (
+	`userId` text NOT NULL,
+	`type` text NOT NULL,
+	`provider` text NOT NULL,
+	`providerAccountId` text NOT NULL,
+	`refresh_token` text,
+	`access_token` text,
+	`expires_at` integer,
+	`token_type` text,
+	`scope` text,
+	`id_token` text,
+	`session_state` text,
+	PRIMARY KEY(`provider`, `providerAccountId`),
+	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `authenticator` (
+	`credentialID` text NOT NULL,
+	`userId` text NOT NULL,
+	`providerAccountId` text NOT NULL,
+	`credentialPublicKey` text NOT NULL,
+	`counter` integer NOT NULL,
+	`credentialDeviceType` text NOT NULL,
+	`credentialBackedUp` integer NOT NULL,
+	`transports` text,
+	PRIMARY KEY(`credentialID`, `userId`),
+	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `canvas` (
+	`id` text PRIMARY KEY NOT NULL,
+	`title` text DEFAULT 'Untitled' NOT NULL,
+	`description` text DEFAULT 'Untitled' NOT NULL,
+	`url` text DEFAULT '' NOT NULL,
+	`userId` text NOT NULL,
+	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `chatHistory` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`threadId` text NOT NULL,
+	`question` text NOT NULL,
+	`answerParts` text,
+	`answerSources` text,
+	`answerJustification` text,
+	FOREIGN KEY (`threadId`) REFERENCES `chatThread`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `chatThread` (
+	`id` text PRIMARY KEY NOT NULL,
+	`firstMessage` text NOT NULL,
+	`userId` text NOT NULL,
+	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `contentToSpace` (
+	`contentId` integer NOT NULL,
+	`spaceId` integer NOT NULL,
+	PRIMARY KEY(`contentId`, `spaceId`),
+	FOREIGN KEY (`contentId`) REFERENCES `storedContent`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`spaceId`) REFERENCES `space`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `session` (
+	`sessionToken` text PRIMARY KEY NOT NULL,
+	`userId` text NOT NULL,
+	`expires` integer NOT NULL,
+	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `space` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`name` text DEFAULT 'none' NOT NULL,
+	`user` text(255),
+	FOREIGN KEY (`user`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `storedContent` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`content` text NOT NULL,
+	`title` text(255),
+	`description` text(255),
+	`url` text NOT NULL,
+	`savedAt` integer NOT NULL,
+	`baseUrl` text(255),
+	`ogImage` text(255),
+	`type` text DEFAULT 'page',
+	`image` text(255),
+	`user` text,
+	FOREIGN KEY (`user`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `user` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text,
+	`email` text NOT NULL,
+	`emailVerified` integer,
+	`image` text,
+	`telegramId` text
+);
+--> statement-breakpoint
+CREATE TABLE `verificationToken` (
+	`identifier` text NOT NULL,
+	`token` text NOT NULL,
+	`expires` integer NOT NULL,
+	PRIMARY KEY(`identifier`, `token`)
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `authenticator_credentialID_unique` ON `authenticator` (`credentialID`);--> statement-breakpoint
+CREATE INDEX `canvas_user_userId` ON `canvas` (`userId`);--> statement-breakpoint
+CREATE INDEX `chatHistory_thread_idx` ON `chatHistory` (`threadId`);--> statement-breakpoint
+CREATE INDEX `chatThread_user_idx` ON `chatThread` (`userId`);--> statement-breakpoint
+CREATE UNIQUE INDEX `space_name_unique` ON `space` (`name`);--> statement-breakpoint
+CREATE INDEX `spaces_name_idx` ON `space` (`name`);--> statement-breakpoint
+CREATE INDEX `spaces_user_idx` ON `space` (`user`);--> statement-breakpoint
+CREATE INDEX `storedContent_url_idx` ON `storedContent` (`url`);--> statement-breakpoint
+CREATE INDEX `storedContent_savedAt_idx` ON `storedContent` (`savedAt`);--> statement-breakpoint
+CREATE INDEX `storedContent_title_idx` ON `storedContent` (`title`);--> statement-breakpoint
+CREATE INDEX `storedContent_user_idx` ON `storedContent` (`user`);--> statement-breakpoint
+CREATE INDEX `users_email_idx` ON `user` (`email`);--> statement-breakpoint
+CREATE INDEX `users_telegram_idx` ON `user` (`telegramId`);--> statement-breakpoint
+CREATE INDEX `users_id_idx` ON `user` (`id`);
\ No newline at end of file
diff --git a/apps/web/migrations/0001_remarkable_avengers.sql b/apps/web/migrations/0001_remarkable_avengers.sql
deleted file mode 100644
index cb2fa422..00000000
--- a/apps/web/migrations/0001_remarkable_avengers.sql
+++ /dev/null
@@ -1,4 +0,0 @@
-ALTER TABLE `user` ADD `telegramId` text;--> statement-breakpoint
-CREATE INDEX `users_email_idx` ON `user` (`email`);--> statement-breakpoint
-CREATE INDEX `users_telegram_idx` ON `user` (`telegramId`);--> statement-breakpoint
-CREATE INDEX `users_id_idx` ON `user` (`id`);
\ No newline at end of file
diff --git a/apps/web/migrations/000_setup.sql b/apps/web/migrations/000_setup.sql
deleted file mode 100644
index a4855ec9..00000000
--- a/apps/web/migrations/000_setup.sql
+++ /dev/null
@@ -1,108 +0,0 @@
-CREATE TABLE `account` (
-	`userId` text NOT NULL,
-	`type` text NOT NULL,
-	`provider` text NOT NULL,
-	`providerAccountId` text NOT NULL,
-	`refresh_token` text,
-	`access_token` text,
-	`expires_at` integer,
-	`token_type` text,
-	`scope` text,
-	`id_token` text,
-	`session_state` text,
-	PRIMARY KEY(`provider`, `providerAccountId`),
-	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `authenticator` (
-	`credentialID` text NOT NULL,
-	`userId` text NOT NULL,
-	`providerAccountId` text NOT NULL,
-	`credentialPublicKey` text NOT NULL,
-	`counter` integer NOT NULL,
-	`credentialDeviceType` text NOT NULL,
-	`credentialBackedUp` integer NOT NULL,
-	`transports` text,
-	PRIMARY KEY(`credentialID`, `userId`),
-	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `chatHistory` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-	`threadId` text NOT NULL,
-	`question` text NOT NULL,
-	`answerParts` text,
-	`answerSources` text,
-	`answerJustification` text,
-	FOREIGN KEY (`threadId`) REFERENCES `chatThread`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `chatThread` (
-	`id` text PRIMARY KEY NOT NULL,
-	`firstMessage` text NOT NULL,
-	`userId` text NOT NULL,
-	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `contentToSpace` (
-	`contentId` integer NOT NULL,
-	`spaceId` integer NOT NULL,
-	PRIMARY KEY(`contentId`, `spaceId`),
-	FOREIGN KEY (`contentId`) REFERENCES `storedContent`(`id`) ON UPDATE no action ON DELETE cascade,
-	FOREIGN KEY (`spaceId`) REFERENCES `space`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `session` (
-	`sessionToken` text PRIMARY KEY NOT NULL,
-	`userId` text NOT NULL,
-	`expires` integer NOT NULL,
-	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `space` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-	`name` text DEFAULT 'none' NOT NULL,
-	`user` text(255),
-	FOREIGN KEY (`user`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `storedContent` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-	`content` text NOT NULL,
-	`title` text(255),
-	`description` text(255),
-	`url` text NOT NULL,
-	`savedAt` integer NOT NULL,
-	`baseUrl` text(255),
-	`ogImage` text(255),
-	`type` text DEFAULT 'page',
-	`image` text(255),
-	`user` text,
-	FOREIGN KEY (`user`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `user` (
-	`id` text PRIMARY KEY NOT NULL,
-	`name` text,
-	`email` text NOT NULL,
-	`emailVerified` integer,
-	`image` text
-);
---> statement-breakpoint
-CREATE TABLE `verificationToken` (
-	`identifier` text NOT NULL,
-	`token` text NOT NULL,
-	`expires` integer NOT NULL,
-	PRIMARY KEY(`identifier`, `token`)
-);
---> statement-breakpoint
-CREATE UNIQUE INDEX `authenticator_credentialID_unique` ON `authenticator` (`credentialID`);--> statement-breakpoint
-CREATE INDEX `chatHistory_thread_idx` ON `chatHistory` (`threadId`);--> statement-breakpoint
-CREATE INDEX `chatThread_user_idx` ON `chatThread` (`userId`);--> statement-breakpoint
-CREATE UNIQUE INDEX `space_name_unique` ON `space` (`name`);--> statement-breakpoint
-CREATE INDEX `spaces_name_idx` ON `space` (`name`);--> statement-breakpoint
-CREATE INDEX `spaces_user_idx` ON `space` (`user`);--> statement-breakpoint
-CREATE INDEX `storedContent_url_idx` ON `storedContent` (`url`);--> statement-breakpoint
-CREATE INDEX `storedContent_savedAt_idx` ON `storedContent` (`savedAt`);--> statement-breakpoint
-CREATE INDEX `storedContent_title_idx` ON `storedContent` (`title`);--> statement-breakpoint
-CREATE INDEX `storedContent_user_idx` ON `storedContent` (`user`);
diff --git a/apps/web/migrations/meta/0000_snapshot.json b/apps/web/migrations/meta/0000_snapshot.json
new file mode 100644
index 00000000..30920063
--- /dev/null
+++ b/apps/web/migrations/meta/0000_snapshot.json
@@ -0,0 +1,824 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "58ec8bd8-5aad-4ade-a718-74eaf6056d36",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "providerAccountId": {
+          "name": "providerAccountId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "account_userId_user_id_fk": {
+          "name": "account_userId_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": [
+            "userId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_providerAccountId_pk": {
+          "columns": [
+            "provider",
+            "providerAccountId"
+          ],
+          "name": "account_provider_providerAccountId_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "authenticator": {
+      "name": "authenticator",
+      "columns": {
+        "credentialID": {
+          "name": "credentialID",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "providerAccountId": {
+          "name": "providerAccountId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "credentialPublicKey": {
+          "name": "credentialPublicKey",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "counter": {
+          "name": "counter",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "credentialDeviceType": {
+          "name": "credentialDeviceType",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "credentialBackedUp": {
+          "name": "credentialBackedUp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "transports": {
+          "name": "transports",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "authenticator_credentialID_unique": {
+          "name": "authenticator_credentialID_unique",
+          "columns": [
+            "credentialID"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "authenticator_userId_user_id_fk": {
+          "name": "authenticator_userId_user_id_fk",
+          "tableFrom": "authenticator",
+          "tableTo": "user",
+          "columnsFrom": [
+            "userId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "authenticator_userId_credentialID_pk": {
+          "columns": [
+            "credentialID",
+            "userId"
+          ],
+          "name": "authenticator_userId_credentialID_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "canvas": {
+      "name": "canvas",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'Untitled'"
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'Untitled'"
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "canvas_user_userId": {
+          "name": "canvas_user_userId",
+          "columns": [
+            "userId"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "canvas_userId_user_id_fk": {
+          "name": "canvas_userId_user_id_fk",
+          "tableFrom": "canvas",
+          "tableTo": "user",
+          "columnsFrom": [
+            "userId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "chatHistory": {
+      "name": "chatHistory",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "threadId": {
+          "name": "threadId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "question": {
+          "name": "question",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "answerParts": {
+          "name": "answerParts",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "answerSources": {
+          "name": "answerSources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "answerJustification": {
+          "name": "answerJustification",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "chatHistory_thread_idx": {
+          "name": "chatHistory_thread_idx",
+          "columns": [
+            "threadId"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "chatHistory_threadId_chatThread_id_fk": {
+          "name": "chatHistory_threadId_chatThread_id_fk",
+          "tableFrom": "chatHistory",
+          "tableTo": "chatThread",
+          "columnsFrom": [
+            "threadId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "chatThread": {
+      "name": "chatThread",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "firstMessage": {
+          "name": "firstMessage",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "chatThread_user_idx": {
+          "name": "chatThread_user_idx",
+          "columns": [
+            "userId"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "chatThread_userId_user_id_fk": {
+          "name": "chatThread_userId_user_id_fk",
+          "tableFrom": "chatThread",
+          "tableTo": "user",
+          "columnsFrom": [
+            "userId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "contentToSpace": {
+      "name": "contentToSpace",
+      "columns": {
+        "contentId": {
+          "name": "contentId",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "spaceId": {
+          "name": "spaceId",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "contentToSpace_contentId_storedContent_id_fk": {
+          "name": "contentToSpace_contentId_storedContent_id_fk",
+          "tableFrom": "contentToSpace",
+          "tableTo": "storedContent",
+          "columnsFrom": [
+            "contentId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "contentToSpace_spaceId_space_id_fk": {
+          "name": "contentToSpace_spaceId_space_id_fk",
+          "tableFrom": "contentToSpace",
+          "tableTo": "space",
+          "columnsFrom": [
+            "spaceId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "contentToSpace_contentId_spaceId_pk": {
+          "columns": [
+            "contentId",
+            "spaceId"
+          ],
+          "name": "contentToSpace_contentId_spaceId_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "sessionToken": {
+          "name": "sessionToken",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "session_userId_user_id_fk": {
+          "name": "session_userId_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "userId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "space": {
+      "name": "space",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'none'"
+        },
+        "user": {
+          "name": "user",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "space_name_unique": {
+          "name": "space_name_unique",
+          "columns": [
+            "name"
+          ],
+          "isUnique": true
+        },
+        "spaces_name_idx": {
+          "name": "spaces_name_idx",
+          "columns": [
+            "name"
+          ],
+          "isUnique": false
+        },
+        "spaces_user_idx": {
+          "name": "spaces_user_idx",
+          "columns": [
+            "user"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "space_user_user_id_fk": {
+          "name": "space_user_user_id_fk",
+          "tableFrom": "space",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "storedContent": {
+      "name": "storedContent",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "savedAt": {
+          "name": "savedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "baseUrl": {
+          "name": "baseUrl",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "ogImage": {
+          "name": "ogImage",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'page'"
+        },
+        "image": {
+          "name": "image",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user": {
+          "name": "user",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "storedContent_url_idx": {
+          "name": "storedContent_url_idx",
+          "columns": [
+            "url"
+          ],
+          "isUnique": false
+        },
+        "storedContent_savedAt_idx": {
+          "name": "storedContent_savedAt_idx",
+          "columns": [
+            "savedAt"
+          ],
+          "isUnique": false
+        },
+        "storedContent_title_idx": {
+          "name": "storedContent_title_idx",
+          "columns": [
+            "title"
+          ],
+          "isUnique": false
+        },
+        "storedContent_user_idx": {
+          "name": "storedContent_user_idx",
+          "columns": [
+            "user"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "storedContent_user_user_id_fk": {
+          "name": "storedContent_user_user_id_fk",
+          "tableFrom": "storedContent",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "telegramId": {
+          "name": "telegramId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "users_email_idx": {
+          "name": "users_email_idx",
+          "columns": [
+            "email"
+          ],
+          "isUnique": false
+        },
+        "users_telegram_idx": {
+          "name": "users_telegram_idx",
+          "columns": [
+            "telegramId"
+          ],
+          "isUnique": false
+        },
+        "users_id_idx": {
+          "name": "users_id_idx",
+          "columns": [
+            "id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "columns": [
+            "identifier",
+            "token"
+          ],
+          "name": "verificationToken_identifier_token_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
\ No newline at end of file
diff --git a/apps/web/migrations/meta/_journal.json b/apps/web/migrations/meta/_journal.json
new file mode 100644
index 00000000..68c578aa
--- /dev/null
+++ b/apps/web/migrations/meta/_journal.json
@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "6",
+      "when": 1719619409551,
+      "tag": "0000_bitter_electro",
+      "breakpoints": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/server/db/schema.ts b/apps/web/server/db/schema.ts
index 69372a35..c40e50f1 100644
--- a/apps/web/server/db/schema.ts
+++ b/apps/web/server/db/schema.ts
@@ -198,5 +198,24 @@ export const chatHistory = createTable(
   }),
 );
 
+export const canvas = createTable(
+  "canvas",
+  {
+    id: text("id")
+      .notNull()
+      .primaryKey()
+      .$defaultFn(() => crypto.randomUUID()),
+    title: text("title").default("Untitled").notNull(),
+    description: text("description").default("Untitled").notNull(),
+    imageUrl: text("url").default("").notNull(),
+    userId: text("userId")
+      .notNull()
+      .references(() => users.id, { onDelete: "cascade" }),
+  },
+  (canvas) => ({
+    userIdx: index("canvas_user_userId").on(canvas.userId),
+  }),
+);
+
 export type ChatThread = typeof chatThreads.$inferSelect;
 export type ChatHistory = typeof chatHistory.$inferSelect;
diff --git a/package.json b/package.json
index c94610a6..e95e630c 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@repo/ui": "*",
     "@tailwindcss/typography": "^0.5.13",
     "autoprefixer": "^10.4.19",
-    "drizzle-kit": "^0.21.2",
+    "drizzle-kit": "^0.22.7",
     "eslint-plugin-next-on-pages": "^1.11.3",
     "lint-staged": "^15.2.5",
     "postcss": "^8.4.38",
-- 
cgit v1.2.3


From ffe9103da6eb7f93819f6c0d0ddf0905ccfc4524 Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Sat, 29 Jun 2024 20:08:46 +0530
Subject: user canvas (2/2)

---
 apps/web/app/(canvas)/canvas/[id]/page.tsx         | 135 ++----------
 .../canvas/_canvas_comp/(components)/canvas.tsx    |  96 +++++++++
 .../(components)/draggableComponent.tsx            |  67 ++++++
 .../_canvas_comp/(components)/dropComponent.tsx    | 203 ++++++++++++++++++
 .../_canvas_comp/(components)/enabledComp copy.tsx |  22 ++
 .../_canvas_comp/(components)/enabledComp.tsx      |  22 ++
 .../_canvas_comp/(components)/resizableLayout.tsx  | 170 +++++++++++++++
 .../canvas/_canvas_comp/(components)/savesnap.tsx  |  33 +++
 .../canvas/_canvas_comp/(components)/textCard.tsx  |  45 ++++
 .../_canvas_comp/(components)/twitterCard.tsx      |  84 ++++++++
 .../(canvas)/canvas/_canvas_comp/lib/context.ts    |  18 ++
 .../canvas/_canvas_comp/lib/createAssetUrl.ts      |  94 ++++++++
 .../canvas/_canvas_comp/lib/createEmbeds.ts        | 236 +++++++++++++++++++++
 .../(canvas)/canvas/_canvas_comp/lib/loadSnap.ts   |  13 ++
 apps/web/app/actions/doers.ts                      |  15 +-
 apps/web/app/actions/fetchers.ts                   |  43 ++++
 apps/web/env.d.ts                                  |   1 +
 apps/web/wrangler.toml                             |   4 +
 .../ui/components/canvas/components/canvas.tsx     |  94 --------
 .../canvas/components/draggableComponent.tsx       |  71 -------
 .../components/canvas/components/dropComponent.tsx | 203 ------------------
 .../canvas/components/enabledComp copy.tsx         |  22 --
 .../components/canvas/components/enabledComp.tsx   |  22 --
 .../ui/components/canvas/components/savesnap.tsx   |  43 ----
 .../ui/components/canvas/components/textCard.tsx   |  45 ----
 .../components/canvas/components/twitterCard.tsx   |  84 --------
 packages/ui/components/canvas/lib/context.ts       |  18 --
 .../ui/components/canvas/lib/createAssetUrl.ts     |  94 --------
 packages/ui/components/canvas/lib/createEmbeds.ts  | 236 ---------------------
 packages/ui/components/canvas/lib/loadSnap.ts      |  14 --
 30 files changed, 1179 insertions(+), 1068 deletions(-)
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/draggableComponent.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp copy.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/resizableLayout.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/savesnap.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/textCard.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/twitterCard.tsx
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/lib/context.ts
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/lib/createAssetUrl.ts
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/lib/createEmbeds.ts
 create mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts
 delete mode 100644 packages/ui/components/canvas/components/canvas.tsx
 delete mode 100644 packages/ui/components/canvas/components/draggableComponent.tsx
 delete mode 100644 packages/ui/components/canvas/components/dropComponent.tsx
 delete mode 100644 packages/ui/components/canvas/components/enabledComp copy.tsx
 delete mode 100644 packages/ui/components/canvas/components/enabledComp.tsx
 delete mode 100644 packages/ui/components/canvas/components/savesnap.tsx
 delete mode 100644 packages/ui/components/canvas/components/textCard.tsx
 delete mode 100644 packages/ui/components/canvas/components/twitterCard.tsx
 delete mode 100644 packages/ui/components/canvas/lib/context.ts
 delete mode 100644 packages/ui/components/canvas/lib/createAssetUrl.ts
 delete mode 100644 packages/ui/components/canvas/lib/createEmbeds.ts
 delete mode 100644 packages/ui/components/canvas/lib/loadSnap.ts

diff --git a/apps/web/app/(canvas)/canvas/[id]/page.tsx b/apps/web/app/(canvas)/canvas/[id]/page.tsx
index e58ab35e..7cf5b91c 100644
--- a/apps/web/app/(canvas)/canvas/[id]/page.tsx
+++ b/apps/web/app/(canvas)/canvas/[id]/page.tsx
@@ -1,125 +1,18 @@
-"use client";
+import { userHasCanvas } from "@/app/actions/fetchers";
+import { redirect } from "next/navigation";
+import {
+  RectProvider,
+  ResizaleLayout,
+} from "../_canvas_comp/(components)/resizableLayout";
 
-import { Canvas } from "@repo/ui/components/canvas/components/canvas";
-import React, { useState } from "react";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import { SettingsIcon, DragIcon } from "@repo/ui/icons";
-import DraggableComponentsContainer from "@repo/ui/components/canvas/components/draggableComponent";
-import { AutocompleteIcon, blockIcon } from "@repo/ui/icons";
-import Image from "next/image";
-import { Switch } from "@repo/ui/shadcn/switch";
-import { Label } from "@repo/ui/shadcn/label";
-
-function page() {
-  const [fullScreen, setFullScreen] = useState(false);
-  const [visible, setVisible] = useState(true);
-
-  return (
-    <div
-      className={`h-screen w-full ${!fullScreen ? "px-4 py-6" : "bg-[#1F2428]"} transition-all`}
-    >
-      <div>
-        <PanelGroup
-          onLayout={(l) => {
-            l[0]! < 20 ? setVisible(false) : setVisible(true);
-          }}
-          className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`}
-          direction="horizontal"
-        >
-          <Panel
-            onExpand={() => {
-              setTimeout(() => setFullScreen(false), 50);
-            }}
-            onCollapse={() => {
-              setTimeout(() => setFullScreen(true), 50);
-            }}
-            defaultSize={30}
-            collapsible={true}
-          >
-            <div
-              className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen" : "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}
-            >
-              <div className="flex items-center justify-between bg-[#2C3439] px-4 py-2 text-lg font-medium text-[#989EA4]">
-                Change Filters
-                <Image src={SettingsIcon} alt="setting-icon" />
-              </div>
-              {visible ? (
-                <SidePanel />
-              ) : (
-                <h1 className="text-center py-10 text-xl">
-                  Need more space to show!
-                </h1>
-              )}
-            </div>
-          </Panel>
-          <PanelResizeHandle
-            className={`relative flex items-center transition-all justify-center ${!fullScreen && "px-1"}`}
-          >
-            <div
-              className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}
-            >
-              <Image src={DragIcon} alt="drag-icon" />
-            </div>
-          </PanelResizeHandle>
-          <Panel className="relative" defaultSize={70} minSize={60}>
-            <div
-              className={`absolute overflow-hidden transition-all inset-0 ${fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}
-            >
-              <Canvas />
-            </div>
-          </Panel>
-        </PanelGroup>
-      </div>
-    </div>
-  );
-}
-
-function SidePanel() {
-  const [value, setValue] = useState("");
-  const [dragAsText, setDragAsText] = useState(false);
+export default async function page({ params }: any) {
+  const canvasExists = await userHasCanvas(params.id);
+  if (!canvasExists.success) {
+    redirect("/canvas");
+  }
   return (
-    <>
-      <div className="px-3 py-5">
-        <input
-          placeholder="search..."
-          onChange={(e) => {
-            setValue(e.target.value);
-          }}
-          value={value}
-          // rows={1}
-          className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
-        />
-      </div>
-      <div className="flex items-center justify-end px-3 py-4">
-        <Switch
-          className="bg-[#151515] data-[state=unchecked]:bg-red-400 data-[state=checked]:bg-blue-400"
-          onCheckedChange={(e) => setDragAsText(e)}
-          id="drag-text-mode"
-        />
-        <Label htmlFor="drag-text-mode">Drag as Text</Label>
-      </div>
-      <DraggableComponentsContainer content={content} />
-    </>
+    <RectProvider id={params.id}>
+      <ResizaleLayout />
+    </RectProvider>
   );
 }
-
-export default page;
-
-const content = [
-  {
-    content:
-      "Regional growth patterns diverge, with strong performance in the United States and several emerging markets, contrasted by weaker prospects in many advanced economies, particularly in Europe (World Economic Forum) (OECD). The rapid adoption of artificial intelligence (AI) is expected to drive productivity growth, especially in advanced economies, potentially mitigating labor shortages and boosting income levels in emerging markets (World Economic Forum) (OECD). However, ongoing geopolitical tensions and economic fragmentation are likely to maintain a level of uncertainty and volatility in the global economy (World Economic Forum.",
-    icon: AutocompleteIcon,
-    iconAlt: "Autocomplete",
-    extraInfo:
-      "Page Url: https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a",
-  },
-  {
-    content:
-      "As of mid-2024, the global economy is experiencing modest growth with significant regional disparities. Global GDP growth is projected to be around 3.1% in 2024, rising slightly to 3.2% in 2025. This performance, although below the pre-pandemic average, reflects resilience despite various economic pressures, including tight monetary conditions and geopolitical tensions (IMF)(OECD) Inflation is moderating faster than expected, with global headline inflation projected to fall to 5.8% in 2024 and 4.4% in 2025, contributing to improving real incomes and positive trade growth (IMF) (OECD)",
-    icon: blockIcon,
-    iconAlt: "Autocomplete",
-    extraInfo:
-      "Page Url: https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia",
-  },
-];
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx
new file mode 100644
index 00000000..22fcd709
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx
@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Editor, Tldraw, setUserPreferences, TLStoreWithStatus } from "tldraw";
+import { createAssetFromUrl } from "../lib/createAssetUrl";
+import "tldraw/tldraw.css";
+import { components } from "./enabledComp";
+import { twitterCardUtil } from "./twitterCard";
+import { textCardUtil } from "./textCard";
+import createEmbedsFromUrl from "../lib/createEmbeds";
+import { loadRemoteSnapshot } from "../lib/loadSnap";
+import { SaveStatus } from "./savesnap";
+import { getAssetUrls } from "@tldraw/assets/selfHosted";
+import { memo } from "react";
+import DragContext from "../lib/context";
+import DropZone from "./dropComponent";
+import { useRect } from "./resizableLayout";
+// import "./canvas.css";
+
+export const Canvas = memo(() => {
+  const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
+  const Dragref = useRef<HTMLDivElement | null>(null);
+
+  const handleDragOver = (event: any) => {
+    event.preventDefault();
+    setIsDraggingOver(true);
+    console.log("entere");
+  };
+
+  useEffect(() => {
+    const divElement = Dragref.current;
+    if (divElement) {
+      divElement.addEventListener("dragover", handleDragOver);
+    }
+    return () => {
+      if (divElement) {
+        divElement.removeEventListener("dragover", handleDragOver);
+      }
+    };
+  }, []);
+
+  return (
+    <DragContext.Provider value={{ isDraggingOver, setIsDraggingOver }}>
+      <div ref={Dragref} className="w-full h-full">
+        <TldrawComponent />
+      </div>
+    </DragContext.Provider>
+  );
+});
+
+const TldrawComponent = memo(() => {
+  const { id } = useRect();
+  const [storeWithStatus, setStoreWithStatus] = useState<TLStoreWithStatus>({
+    status: "loading",
+  });
+  useEffect(() => {
+    const fetchStore = async () => {
+      const store = await loadRemoteSnapshot(id);
+
+      setStoreWithStatus({
+        store: store,
+        status: "not-synced",
+      });
+    };
+
+    fetchStore();
+  }, []);
+
+  const handleMount = useCallback((editor: Editor) => {
+    (window as any).app = editor;
+    (window as any).editor = editor;
+    editor.registerExternalAssetHandler("url", createAssetFromUrl);
+    editor.registerExternalContentHandler("url", ({ url, point, sources }) => {
+      createEmbedsFromUrl({ url, point, sources, editor });
+    });
+  }, []);
+
+  setUserPreferences({ id: "supermemory",colorScheme: "dark" });
+
+  const assetUrls = getAssetUrls();
+  return (
+    <div className="w-full h-full">
+      <Tldraw
+        className="relative"
+        assetUrls={assetUrls}
+        components={components}
+        store={storeWithStatus}
+        shapeUtils={[twitterCardUtil, textCardUtil]}
+        onMount={handleMount}
+      >
+        <div className="absolute left-1/2 top-0 z-[1000000] flex -translate-x-1/2 gap-2 bg-[#2C3439] text-[#B3BCC5]">
+          <SaveStatus id={id} />
+        </div>
+        <DropZone />
+      </Tldraw>
+    </div>
+  );
+});
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/draggableComponent.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/draggableComponent.tsx
new file mode 100644
index 00000000..8c39c732
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/draggableComponent.tsx
@@ -0,0 +1,67 @@
+import Image from "next/image";
+import { useRef, useState } from "react";
+
+interface DraggableComponentsProps {
+  content: string;
+  extraInfo?: string;
+  iconAlt: string;
+}
+
+export default function DraggableComponentsContainer({
+  content,
+}: {
+  content: DraggableComponentsProps[];
+}) {
+  return (
+    <div className="flex flex-col gap-10">
+      {content.map((i) => {
+        return (
+          <DraggableComponents
+            content={i.content}
+            iconAlt={i.iconAlt}
+            extraInfo={i.extraInfo}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function DraggableComponents({
+  content,
+  extraInfo,
+  iconAlt,
+}: DraggableComponentsProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    setIsDragging(true);
+    if (containerRef.current) {
+      // Serialize the children as a string for dataTransfer
+      const childrenHtml = containerRef.current.innerHTML;
+      event.dataTransfer.setData("text/html", childrenHtml);
+    }
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      draggable
+      className={`flex gap-4 px-1 rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
+    >
+      <div className="flex flex-col gap-2">
+        <div>
+          <h1 className="line-clamp-3">{content}</h1>
+        </div>
+        <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx
new file mode 100644
index 00000000..0374f367
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx
@@ -0,0 +1,203 @@
+import React, { useRef, useCallback, useEffect, useContext } from "react";
+import { useEditor } from "tldraw";
+import DragContext, { DragContextType, useDragContext } from "../lib/context";
+import { handleExternalDroppedContent } from "../lib/createEmbeds";
+
+const stripHtmlTags = (html: string): string => {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  return div.textContent || div.innerText || "";
+};
+
+function formatTextToRatio(text: string) {
+  const totalWidth = text.length;
+  const maxLineWidth = Math.floor(totalWidth / 4);
+
+  const words = text.split(" ");
+  let lines = [];
+  let currentLine = "";
+
+  words.forEach((word) => {
+    // Check if adding the next word exceeds the maximum line width
+    if ((currentLine + word).length <= maxLineWidth) {
+      currentLine += (currentLine ? " " : "") + word;
+    } else {
+      // If the current line is full, push it to new line
+      lines.push(currentLine);
+      currentLine = word;
+    }
+  });
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return lines.join("\n");
+}
+
+function DropZone() {
+  const dropRef = useRef<HTMLDivElement | null>(null);
+  const { isDraggingOver, setIsDraggingOver } = useDragContext();
+
+  const editor = useEditor();
+
+  const handleDragLeave = () => {
+    setIsDraggingOver(false);
+    console.log("leaver");
+  };
+
+  useEffect(() => {
+    setInterval(() => {
+      editor.selectAll();
+      const shapes = editor.getSelectedShapes();
+      const text = shapes.filter((s) => s.type === "text");
+      console.log("hrhh", text);
+    }, 5000);
+  }, []);
+
+  const handleDrop = useCallback((event: DragEvent) => {
+    event.preventDefault();
+    setIsDraggingOver(false);
+    const dt = event.dataTransfer;
+    if (!dt) {
+      return;
+    }
+    const items = dt.items;
+
+    for (let i = 0; i < items.length; i++) {
+      if (items[i]!.kind === "file" && items[i]!.type.startsWith("image/")) {
+        const file = items[i]!.getAsFile();
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            if (e.target) {
+              // setDroppedImage(e.target.result as string);
+            }
+          };
+          reader.readAsDataURL(file);
+        }
+      } else if (items[i]!.kind === "string") {
+        items[i]!.getAsString((data) => {
+          const cleanText = stripHtmlTags(data);
+          const onethree = formatTextToRatio(cleanText);
+          handleExternalDroppedContent({ editor, text: onethree });
+        });
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const divElement = dropRef.current;
+    if (divElement) {
+      divElement.addEventListener("drop", handleDrop);
+      divElement.addEventListener("dragleave", handleDragLeave);
+    }
+    return () => {
+      if (divElement) {
+        divElement.removeEventListener("drop", handleDrop);
+        divElement.addEventListener("dragleave", handleDragLeave);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={`h-full flex justify-center items-center w-full absolute top-0 left-0 z-[100000] pointer-events-none  ${isDraggingOver && "bg-[#2c3439ad]  pointer-events-auto"}`}
+      ref={dropRef}
+    >
+      {isDraggingOver && (
+        <>
+          <div className="absolute top-4 left-8">
+            <TopRight />
+          </div>
+          <div className="absolute top-4 right-8">
+            <TopLeft />
+          </div>
+          <div className="absolute bottom-4 left-8">
+            <BottomLeft />
+          </div>
+          <div className="absolute bottom-4 right-8">
+            <BottomRight />
+          </div>
+          <h2 className="text-2xl">Drop here to add Content on Canvas</h2>
+        </>
+      )}
+    </div>
+  );
+}
+
+function TopRight() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M44 4H12C7.58172 4 4 7.58172 4 12V44"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+function TopLeft() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 4H36C40.4183 4 44 7.58172 44 12V44"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+function BottomLeft() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M44 44H12C7.58172 44 4 40.4183 4 36V4"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+function BottomRight() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 44H36C40.4183 44 44 40.4183 44 36V4"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+export default DropZone;
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp copy.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp copy.tsx
new file mode 100644
index 00000000..85811b82
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp copy.tsx	
@@ -0,0 +1,22 @@
+import { TLUiComponents } from "tldraw";
+
+export const components: Partial<TLUiComponents> = {
+  ActionsMenu: null,
+  MainMenu: null,
+  QuickActions: null,
+  TopPanel: null,
+  DebugPanel: null,
+  DebugMenu: null,
+  PageMenu: null,
+  // Minimap: null,
+  // ContextMenu: null,
+  // HelpMenu: null,
+  // ZoomMenu: null,
+  // StylePanel: null,
+  // NavigationPanel: null,
+  // Toolbar: null,
+  // KeyboardShortcutsDialog: null,
+  // HelperButtons: null,
+  // SharePanel: null,
+  // MenuPanel: null,
+};
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp.tsx
new file mode 100644
index 00000000..85811b82
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp.tsx
@@ -0,0 +1,22 @@
+import { TLUiComponents } from "tldraw";
+
+export const components: Partial<TLUiComponents> = {
+  ActionsMenu: null,
+  MainMenu: null,
+  QuickActions: null,
+  TopPanel: null,
+  DebugPanel: null,
+  DebugMenu: null,
+  PageMenu: null,
+  // Minimap: null,
+  // ContextMenu: null,
+  // HelpMenu: null,
+  // ZoomMenu: null,
+  // StylePanel: null,
+  // NavigationPanel: null,
+  // Toolbar: null,
+  // KeyboardShortcutsDialog: null,
+  // HelperButtons: null,
+  // SharePanel: null,
+  // MenuPanel: null,
+};
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/resizableLayout.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/resizableLayout.tsx
new file mode 100644
index 00000000..5ba6780b
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/resizableLayout.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { Canvas } from "./canvas";
+import React, { createContext, useContext, useState } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { SettingsIcon, DragIcon } from "@repo/ui/icons";
+import DraggableComponentsContainer from "./draggableComponent";
+import Image from "next/image";
+import { Label } from "@repo/ui/shadcn/label";
+
+interface RectContextType {
+  fullScreen: boolean;
+  setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
+  visible: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  id: string
+}
+
+const RectContext = createContext<RectContextType | undefined>(undefined);
+
+export const RectProvider = ({ id, children }: {id: string, children: React.ReactNode}) => {
+  const [fullScreen, setFullScreen] = useState(false);
+  const [visible, setVisible] = useState(true);
+
+  const value = {
+    id,
+    fullScreen,
+    setFullScreen,
+    visible,
+    setVisible,
+  };
+
+  return <RectContext.Provider value={value}>{children}</RectContext.Provider>;
+};
+
+export const useRect = () => {
+  const context = useContext(RectContext);
+  if (context === undefined) {
+    throw new Error('useRect must be used within a RectProvider');
+  }
+  return context;
+};
+
+
+export function ResizaleLayout() {
+  const { setVisible, fullScreen, setFullScreen } = useRect();
+
+  return (
+    <div
+      className={`h-screen w-full ${!fullScreen ? "px-4 py-6" : "bg-[#1F2428]"} transition-all`}
+    >
+      <PanelGroup
+        onLayout={(l) => {
+          l[0]! < 20 ? setVisible(false) : setVisible(true);
+        }}
+        className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`}
+        direction="horizontal"
+      >
+        <Panel
+          onExpand={() => {
+            setTimeout(() => setFullScreen(false), 50);
+          }}
+          onCollapse={() => {
+            setTimeout(() => setFullScreen(true), 50);
+          }}
+          defaultSize={30}
+          collapsible={true}
+        >
+          <SidePanelContainer />
+        </Panel>
+        <PanelResizeHandle
+          className={`relative flex items-center transition-all justify-center ${!fullScreen && "px-1"}`}
+        >
+          <DragIconContainer />
+        </PanelResizeHandle>
+        <Panel className="relative" defaultSize={70} minSize={60}>
+          <CanvasContainer />
+        </Panel>
+      </PanelGroup>
+    </div>
+  );
+}
+
+function DragIconContainer() {
+  const { fullScreen} = useRect();
+  return (
+    <div
+      className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}
+    >
+      <Image src={DragIcon} alt="drag-icon" />
+    </div>
+  );
+}
+
+function CanvasContainer() {
+  const { fullScreen} = useRect();
+  return (
+    <div
+      className={`absolute overflow-hidden transition-all inset-0 ${fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}
+    >
+      <Canvas />
+    </div>
+  );
+}
+
+function SidePanelContainer() {
+  const { fullScreen, visible} = useRect();
+  return (
+    <div
+      className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen" : "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}
+    >
+      <div className="flex items-center justify-between bg-[#2C3439] px-4 py-2 text-lg font-medium text-[#989EA4]">
+        Change Filters
+        <Image src={SettingsIcon} alt="setting-icon" />
+      </div>
+      {visible ? (
+        <SidePanel />
+      ) : (
+        <h1 className="text-center py-10 text-xl">Need more space to show!</h1>
+      )}
+    </div>
+  );
+}
+
+function SidePanel() {
+  const [value, setValue] = useState("");
+  // const [dragAsText, setDragAsText] = useState(false);
+  return (
+    <>
+      <div className="px-3 py-5">
+        <input
+          placeholder="search..."
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+          value={value}
+          // rows={1}
+          className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
+        />
+      </div>
+      <div className="flex items-center justify-end px-3 py-4">
+        {/* <Switch
+          className="bg-[#151515] data-[state=unchecked]:bg-red-400 data-[state=checked]:bg-blue-400"
+          onCheckedChange={(e) => setDragAsText(e)}
+          id="drag-text-mode"
+        /> */}
+        <Label htmlFor="drag-text-mode">Drag as Text</Label>
+      </div>
+      <DraggableComponentsContainer content={content} />
+    </>
+  );
+}
+
+
+const content = [
+  {
+    content:
+      "Regional growth patterns diverge, with strong performance in the United States and several emerging markets, contrasted by weaker prospects in many advanced economies, particularly in Europe (World Economic Forum) (OECD). The rapid adoption of artificial intelligence (AI) is expected to drive productivity growth, especially in advanced economies, potentially mitigating labor shortages and boosting income levels in emerging markets (World Economic Forum) (OECD). However, ongoing geopolitical tensions and economic fragmentation are likely to maintain a level of uncertainty and volatility in the global economy (World Economic Forum.",
+    iconAlt: "Autocomplete",
+    extraInfo:
+      "Page Url: https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a",
+  },
+  {
+    content:
+      "As of mid-2024, the global economy is experiencing modest growth with significant regional disparities. Global GDP growth is projected to be around 3.1% in 2024, rising slightly to 3.2% in 2025. This performance, although below the pre-pandemic average, reflects resilience despite various economic pressures, including tight monetary conditions and geopolitical tensions (IMF)(OECD) Inflation is moderating faster than expected, with global headline inflation projected to fall to 5.8% in 2024 and 4.4% in 2025, contributing to improving real incomes and positive trade growth (IMF) (OECD)",
+    iconAlt: "Autocomplete",
+    extraInfo:
+      "Page Url: https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia",
+  },
+];
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/savesnap.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/savesnap.tsx
new file mode 100644
index 00000000..45fc7e9d
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/savesnap.tsx
@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from "react";
+import { debounce, getSnapshot, useEditor } from "tldraw";
+import { SaveCanvas } from "@/app/actions/doers";
+
+export function SaveStatus({id}: {id:string}) {
+  const [save, setSave] = useState("saved!");
+  const editor = useEditor();
+  
+
+  const debouncedSave = useCallback(
+    debounce(async () => {
+      const snapshot = getSnapshot(editor.store)
+      SaveCanvas({id, data: JSON.stringify(snapshot)})
+      
+      setSave("saved!");
+    }, 3000),
+    [editor], // Dependency array ensures the function is not recreated on every render
+  );
+
+  useEffect(() => {
+    const unsubscribe = editor.store.listen(
+      () => {
+        setSave("saving...");
+        debouncedSave();
+      },
+      { scope: "document", source: "user" },
+    );
+
+    return () => unsubscribe(); // Cleanup on unmount
+  }, [editor, debouncedSave]);
+
+  return <button>{save}</button>;
+}
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/textCard.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/textCard.tsx
new file mode 100644
index 00000000..b24dae52
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/textCard.tsx
@@ -0,0 +1,45 @@
+import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape } from "tldraw";
+
+type ITextCardShape = TLBaseShape<
+  "Textcard",
+  { w: number; h: number; content: string; extrainfo: string }
+>;
+
+export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> {
+  static override type = "Textcard" as const;
+
+  getDefaultProps(): ITextCardShape["props"] {
+    return {
+      w: 100,
+      h: 50,
+      content: "",
+      extrainfo: "",
+    };
+  }
+
+  component(s: ITextCardShape) {
+    return (
+      <HTMLContainer className="flex h-full w-full items-center justify-center">
+        <div
+          style={{
+            height: s.props.h,
+            width: s.props.w,
+            pointerEvents: "all",
+            background: "#2C3439",
+            borderRadius: "16px",
+            padding: "8px 14px",
+          }}
+        >
+          <h1 style={{ fontSize: "15px" }}>{s.props.content}</h1>
+          <p style={{ fontSize: "14px", color: "#369DFD" }}>
+            {s.props.extrainfo}
+          </p>
+        </div>
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: ITextCardShape) {
+    return <rect width={shape.props.w} height={shape.props.h} />;
+  }
+}
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/twitterCard.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/twitterCard.tsx
new file mode 100644
index 00000000..c5582a98
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/twitterCard.tsx
@@ -0,0 +1,84 @@
+import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape, toDomPrecision } from "tldraw";
+
+type ITwitterCardShape = TLBaseShape<
+  "Twittercard",
+  { w: number; h: number; url: string }
+>;
+
+export class twitterCardUtil extends BaseBoxShapeUtil<ITwitterCardShape> {
+  static override type = "Twittercard" as const;
+
+  getDefaultProps(): ITwitterCardShape["props"] {
+    return {
+      w: 500,
+      h: 550,
+      url: "",
+    };
+  }
+
+  component(s: ITwitterCardShape) {
+    return (
+      <HTMLContainer className="flex h-full w-full items-center justify-center">
+        <TwitterPost
+          url={s.props.url}
+          width={s.props.w}
+          isInteractive={false}
+          height={s.props.h}
+        />
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: ITwitterCardShape) {
+    return <rect width={shape.props.w} height={shape.props.h} />;
+  }
+}
+
+function TwitterPost({
+  isInteractive,
+  width,
+  height,
+  url,
+}: {
+  isInteractive: boolean;
+  width: number;
+  height: number;
+  url: string;
+}) {
+  const link = (() => {
+    try {
+      const urlObj = new URL(url);
+      const path = urlObj.pathname;
+      return path;
+    } catch (error) {
+      console.error("Invalid URL", error);
+      return null;
+    }
+  })();
+
+  return (
+    <iframe
+      className="tl-embed"
+      draggable={false}
+      width={toDomPrecision(width)}
+      height={toDomPrecision(height)}
+      seamless
+      referrerPolicy="no-referrer-when-downgrade"
+      style={{
+        pointerEvents: isInteractive ? "all" : "none",
+        zIndex: isInteractive ? "" : "-1",
+      }}
+      srcDoc={`
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Document</title>
+        </head>
+        <body>
+          <blockquote data-theme="dark" class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+        </body>
+        </html>`}
+    />
+  );
+}
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/context.ts b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/context.ts
new file mode 100644
index 00000000..4e6ecd1c
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/context.ts
@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+export interface DragContextType {
+  isDraggingOver: boolean;
+  setIsDraggingOver: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const DragContext = createContext<DragContextType | undefined>(undefined);
+
+export const useDragContext = () => {
+  const context = useContext(DragContext);
+  if (context === undefined) {
+    throw new Error('useAppContext must be used within an AppProvider');
+  }
+  return context;
+};
+
+export default DragContext;
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createAssetUrl.ts b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createAssetUrl.ts
new file mode 100644
index 00000000..05c2baea
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createAssetUrl.ts
@@ -0,0 +1,94 @@
+import {
+  AssetRecordType,
+  TLAsset,
+  getHashForString,
+  truncateStringWithEllipsis,
+} from "tldraw";
+// import { BOOKMARK_ENDPOINT } from './config'
+
+interface ResponseBody {
+  title?: string;
+  description?: string;
+  image?: string;
+}
+
+export async function createAssetFromUrl({
+  url,
+}: {
+  type: "url";
+  url: string;
+}): Promise<TLAsset> {
+  // try {
+  // 	// First, try to get the meta data from our endpoint
+  // 	const meta = (await (
+  // 		await fetch(BOOKMARK_ENDPOINT, {
+  // 			method: 'POST',
+  // 			headers: {
+  // 				'Content-Type': 'application/json',
+  // 			},
+  // 			body: JSON.stringify({
+  // 				url,
+  // 			}),
+  // 		})
+  // 	).json()) as ResponseBody
+
+  // 	return {
+  // 		id: AssetRecordType.createId(getHashForString(url)),
+  // 		typeName: 'asset',
+  // 		type: 'bookmark',
+  // 		props: {
+  // 			src: url,
+  // 			description: meta.description ?? '',
+  // 			image: meta.image ?? '',
+  // 			title: meta.title ?? truncateStringWithEllipsis(url, 32),
+  // 		},
+  // 		meta: {},
+  // 	}
+  // } catch (error) {
+  // Otherwise, fallback to fetching data from the url
+
+  let meta: { image: string; title: string; description: string };
+
+  try {
+    const resp = await fetch(url, { method: "GET", mode: "no-cors" });
+    const html = await resp.text();
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    meta = {
+      image:
+        doc.head
+          .querySelector('meta[property="og:image"]')
+          ?.getAttribute("content") ?? "",
+      title:
+        doc.head
+          .querySelector('meta[property="og:title"]')
+          ?.getAttribute("content") ?? truncateStringWithEllipsis(url, 32),
+      description:
+        doc.head
+          .querySelector('meta[property="og:description"]')
+          ?.getAttribute("content") ?? "",
+    };
+  } catch (error) {
+    console.error(error);
+    meta = {
+      image: "",
+      title: truncateStringWithEllipsis(url, 32),
+      description: "",
+    };
+  }
+
+  // Create the bookmark asset from the meta
+  return {
+    id: AssetRecordType.createId(getHashForString(url)),
+    typeName: "asset",
+    type: "bookmark",
+    props: {
+      src: url,
+      image: meta.image,
+      title: meta.title,
+      description: meta.description,
+      favicon: meta.image,
+    },
+    meta: {},
+  };
+  // }
+}
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createEmbeds.ts b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createEmbeds.ts
new file mode 100644
index 00000000..b3a7fb52
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createEmbeds.ts
@@ -0,0 +1,236 @@
+// @ts-nocheck TODO: A LOT OF TS ERRORS HERE
+
+import {
+  AssetRecordType,
+  Editor,
+  TLAsset,
+  TLAssetId,
+  TLBookmarkShape,
+  TLExternalContentSource,
+  TLShapePartial,
+  Vec,
+  VecLike,
+  createShapeId,
+  getEmbedInfo,
+  getHashForString,
+} from "tldraw";
+
+export default async function createEmbedsFromUrl({
+  url,
+  point,
+  sources,
+  editor,
+}: {
+  url: string;
+  point?: VecLike | undefined;
+  sources?: TLExternalContentSource[] | undefined;
+  editor: Editor;
+}) {
+  const position =
+    point ??
+    (editor.inputs.shiftKey
+      ? editor.inputs.currentPagePoint
+      : editor.getViewportPageBounds().center);
+
+  if (url?.includes("x.com") || url?.includes("twitter.com")) {
+    return editor.createShape({
+      type: "Twittercard",
+      x: position.x - 250,
+      y: position.y - 150,
+      props: { url: url },
+    });
+  }
+
+  // try to paste as an embed first
+  const embedInfo = getEmbedInfo(url);
+
+  if (embedInfo) {
+    return editor.putExternalContent({
+      type: "embed",
+      url: embedInfo.url,
+      point,
+      embed: embedInfo.definition,
+    });
+  }
+
+  const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url));
+  const shape = createEmptyBookmarkShape(editor, url, position);
+
+  // Use an existing asset if we have one, or else else create a new one
+  let asset = editor.getAsset(assetId) as TLAsset;
+  let shouldAlsoCreateAsset = false;
+  if (!asset) {
+    shouldAlsoCreateAsset = true;
+    try {
+      const bookmarkAsset = await editor.getAssetForExternalContent({
+        type: "url",
+        url,
+      });
+      const fetchWebsite: {
+        title?: string;
+        image?: string;
+        description?: string;
+      } = await (
+        await fetch(`/api/unfirlsite?website=${url}`, {
+          method: "POST",
+        })
+      ).json();
+      if (bookmarkAsset) {
+        if (fetchWebsite.title) bookmarkAsset.props.title = fetchWebsite.title;
+        if (fetchWebsite.image) bookmarkAsset.props.image = fetchWebsite.image;
+        if (fetchWebsite.description)
+          bookmarkAsset.props.description = fetchWebsite.description;
+      }
+      if (!bookmarkAsset) throw Error("Could not create an asset");
+      asset = bookmarkAsset;
+    } catch (e) {
+      console.log(e);
+      return;
+    }
+  }
+
+  editor.batch(() => {
+    if (shouldAlsoCreateAsset) {
+      editor.createAssets([asset]);
+    }
+
+    editor.updateShapes([
+      {
+        id: shape.id,
+        type: shape.type,
+        props: {
+          assetId: asset.id,
+        },
+      },
+    ]);
+  });
+}
+
+function isURL(str: string) {
+  try {
+    new URL(str);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function formatTextToRatio(text: string) {
+  const totalWidth = text.length;
+  const maxLineWidth = Math.floor(totalWidth / 10);
+
+  const words = text.split(" ");
+  let lines = [];
+  let currentLine = "";
+
+  words.forEach((word) => {
+    if ((currentLine + word).length <= maxLineWidth) {
+      currentLine += (currentLine ? " " : "") + word;
+    } else {
+      lines.push(currentLine);
+      currentLine = word;
+    }
+  });
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return { height: (lines.length + 1) * 18, width: maxLineWidth * 10 };
+}
+
+export function handleExternalDroppedContent({
+  text,
+  editor,
+}: {
+  text: string;
+  editor: Editor;
+}) {
+  const position = editor.inputs.shiftKey
+    ? editor.inputs.currentPagePoint
+    : editor.getViewportPageBounds().center;
+
+  if (isURL(text)) {
+    createEmbedsFromUrl({ editor, url: text });
+  } else {
+    // editor.createShape({
+    //   type: "text",
+    //   x: position.x - 75,
+    //   y: position.y - 75,
+    //   props: {
+    //     text: text,
+    //     size: "s",
+    //     textAlign: "start",
+    //   },
+    // });
+    const { height, width } = formatTextToRatio(text);
+    editor.createShape({
+      type: "Textcard",
+      x: position.x - width / 2,
+      y: position.y - height / 2,
+      props: {
+        content: text,
+        extrainfo: "https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a",
+        w: width,
+        h: height,
+      },
+    });
+  }
+}
+
+function centerSelectionAroundPoint(editor: Editor, position: VecLike) {
+  // Re-position shapes so that the center of the group is at the provided point
+  const viewportPageBounds = editor.getViewportPageBounds();
+  let selectionPageBounds = editor.getSelectionPageBounds();
+
+  if (selectionPageBounds) {
+    const offset = selectionPageBounds!.center.sub(position);
+
+    editor.updateShapes(
+      editor.getSelectedShapes().map((shape) => {
+        const localRotation = editor
+          .getShapeParentTransform(shape)
+          .decompose().rotation;
+        const localDelta = Vec.Rot(offset, -localRotation);
+        return {
+          id: shape.id,
+          type: shape.type,
+          x: shape.x! - localDelta.x,
+          y: shape.y! - localDelta.y,
+        };
+      }),
+    );
+  }
+
+  // Zoom out to fit the shapes, if necessary
+  selectionPageBounds = editor.getSelectionPageBounds();
+  if (
+    selectionPageBounds &&
+    !viewportPageBounds.contains(selectionPageBounds)
+  ) {
+    editor.zoomToSelection();
+  }
+}
+
+export function createEmptyBookmarkShape(
+  editor: Editor,
+  url: string,
+  position: VecLike,
+): TLBookmarkShape {
+  const partial: TLShapePartial = {
+    id: createShapeId(),
+    type: "bookmark",
+    x: position.x - 150,
+    y: position.y - 160,
+    opacity: 1,
+    props: {
+      assetId: null,
+      url,
+    },
+  };
+
+  editor.batch(() => {
+    editor.createShapes([partial]).select(partial.id);
+    centerSelectionAroundPoint(editor, position);
+  });
+
+  return editor.getShape(partial.id) as TLBookmarkShape;
+}
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts
new file mode 100644
index 00000000..ee4dc22f
--- /dev/null
+++ b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts
@@ -0,0 +1,13 @@
+import { createTLStore, defaultShapeUtils, loadSnapshot } from "tldraw";
+import { twitterCardUtil } from "../(components)/twitterCard";
+import { textCardUtil } from "../(components)/textCard";
+import { getCanvasData } from "@/app/actions/fetchers";
+export async function loadRemoteSnapshot(id:string) {
+  const snapshot = await getCanvasData(id);
+
+  const newStore = createTLStore({
+    shapeUtils: [...defaultShapeUtils, twitterCardUtil, textCardUtil],
+  });
+  loadSnapshot(newStore, snapshot);
+  return newStore;
+}
diff --git a/apps/web/app/actions/doers.ts b/apps/web/app/actions/doers.ts
index 30ddbc8e..00feaa17 100644
--- a/apps/web/app/actions/doers.ts
+++ b/apps/web/app/actions/doers.ts
@@ -415,4 +415,17 @@ export const createCanvas = async () => {
   //     };
   //   }
   // }
-};
\ No newline at end of file
+};
+
+export const SaveCanvas = async ({id, data}: {id: string, data: string}) => {
+  console.log({id, data})
+  try {
+    await process.env.CANVAS_SNAPS.put(id, data)
+     return {
+      success: true,
+      message: "in-sync"
+     }
+   } catch (error) {
+    return {success: false, error, message:"An error occured while saving your canvas"}
+   }
+}
\ No newline at end of file
diff --git a/apps/web/app/actions/fetchers.ts b/apps/web/app/actions/fetchers.ts
index f485c28d..d93cd4d0 100644
--- a/apps/web/app/actions/fetchers.ts
+++ b/apps/web/app/actions/fetchers.ts
@@ -213,3 +213,46 @@ export const getCanvas = async () => {
     };
   }
 };
+
+export const userHasCanvas = async (canvasId: string) => {
+  const data = await auth();
+
+  if (!data || !data.user || !data.user.id) {
+    redirect("/signin");
+    return { error: "Not authenticated", success: false };
+  }
+
+  try {
+    const canvases = await db.select().from(canvas).where(eq(canvas.userId, data.user.id))
+    const exists = !!canvases.find(canvas => canvas.id === canvasId);
+    return {
+      success: exists,
+    };
+  } catch (e) {
+    return {
+      success: false,
+      error: (e as Error).message,
+    };
+  }
+}
+
+export const getCanvasData = async (canvasId: string) => {
+
+  const data = await auth();
+
+  if (!data || !data.user || !data.user.id) {
+    redirect("/signin");
+    return { error: "Not authenticated", success: false };
+  }
+
+  const canvas = await process.env.CANVAS_SNAPS.get(canvasId)
+
+  console.log({canvas, canvasId})
+  if (canvas){
+    return JSON.parse(canvas);
+  } else {
+    return {}
+  }
+}
+
+
diff --git a/apps/web/env.d.ts b/apps/web/env.d.ts
index ee41239f..d52ab7b5 100644
--- a/apps/web/env.d.ts
+++ b/apps/web/env.d.ts
@@ -5,4 +5,5 @@ interface CloudflareEnv {
   STORAGE: R2Bucket;
   DATABASE: D1Database;
   DEV_IMAGES: R2Bucket;
+  CANVAS_SNAPS: KVNamespace;
 }
diff --git a/apps/web/wrangler.toml b/apps/web/wrangler.toml
index 594614c7..a5f9b461 100644
--- a/apps/web/wrangler.toml
+++ b/apps/web/wrangler.toml
@@ -16,6 +16,10 @@ binding = "DATABASE"
 database_name = "dev-d1-anycontext"
 database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
 
+[[kv_namespaces]]
+binding = "CANVAS_SNAPS"
+id = "c6446f7190dd4afebe1c318df3400518"
+
 [[env.production.d1_databases]]
 binding = "DATABASE"
 database_name = "prod-d1-supermemory"
diff --git a/packages/ui/components/canvas/components/canvas.tsx b/packages/ui/components/canvas/components/canvas.tsx
deleted file mode 100644
index f3e4c090..00000000
--- a/packages/ui/components/canvas/components/canvas.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Editor, Tldraw, setUserPreferences, TLStoreWithStatus } from "tldraw";
-import { createAssetFromUrl } from "../lib/createAssetUrl";
-import "tldraw/tldraw.css";
-import { components } from "./enabledComp";
-import { twitterCardUtil } from "./twitterCard";
-import { textCardUtil } from "./textCard";
-import createEmbedsFromUrl from "../lib/createEmbeds";
-import { loadRemoteSnapshot } from "../lib/loadSnap";
-import { SaveStatus } from "./savesnap";
-import { getAssetUrls } from "@tldraw/assets/selfHosted";
-import { memo } from "react";
-import DragContext from "../lib/context";
-import DropZone from "./dropComponent";
-// import "./canvas.css";
-
-export const Canvas = memo(() => {
-  const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
-  const Dragref = useRef<HTMLDivElement | null>(null);
-
-  const handleDragOver = (event: any) => {
-    event.preventDefault();
-    setIsDraggingOver(true);
-    console.log("entere");
-  };
-
-  useEffect(() => {
-    const divElement = Dragref.current;
-    if (divElement) {
-      divElement.addEventListener("dragover", handleDragOver);
-    }
-    return () => {
-      if (divElement) {
-        divElement.removeEventListener("dragover", handleDragOver);
-      }
-    };
-  }, []);
-
-  return (
-    <DragContext.Provider value={{ isDraggingOver, setIsDraggingOver }}>
-      <div ref={Dragref} className="w-full h-full">
-        <TldrawComponent />
-      </div>
-    </DragContext.Provider>
-  );
-});
-
-const TldrawComponent = memo(() => {
-  const [storeWithStatus, setStoreWithStatus] = useState<TLStoreWithStatus>({
-    status: "loading",
-  });
-  useEffect(() => {
-    const fetchStore = async () => {
-      const store = await loadRemoteSnapshot();
-
-      setStoreWithStatus({
-        store: store,
-        status: "not-synced",
-      });
-    };
-
-    fetchStore();
-  }, []);
-
-  const handleMount = useCallback((editor: Editor) => {
-    (window as any).app = editor;
-    (window as any).editor = editor;
-    editor.registerExternalAssetHandler("url", createAssetFromUrl);
-    editor.registerExternalContentHandler("url", ({ url, point, sources }) => {
-      createEmbedsFromUrl({ url, point, sources, editor });
-    });
-  }, []);
-
-  setUserPreferences({ id: "supermemory" });
-
-  const assetUrls = getAssetUrls();
-  return (
-    <div className="w-full h-full">
-      <Tldraw
-        className="relative"
-        assetUrls={assetUrls}
-        components={components}
-        store={storeWithStatus}
-        shapeUtils={[twitterCardUtil, textCardUtil]}
-        onMount={handleMount}
-      >
-        <div className="absolute left-1/2 top-0 z-[1000000] flex -translate-x-1/2 gap-2 bg-[#2C3439] text-[#B3BCC5]">
-          <SaveStatus />
-        </div>
-        <DropZone />
-      </Tldraw>
-    </div>
-  );
-});
diff --git a/packages/ui/components/canvas/components/draggableComponent.tsx b/packages/ui/components/canvas/components/draggableComponent.tsx
deleted file mode 100644
index d0832e81..00000000
--- a/packages/ui/components/canvas/components/draggableComponent.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import Image from "next/image";
-import { useRef, useState } from "react";
-
-interface DraggableComponentsProps {
-  content: string;
-  extraInfo?: string;
-  icon: string;
-  iconAlt: string;
-}
-
-export default function DraggableComponentsContainer({
-  content,
-}: {
-  content: DraggableComponentsProps[];
-}) {
-  return (
-    <div className="flex flex-col gap-10">
-      {content.map((i) => {
-        return (
-          <DraggableComponents
-            content={i.content}
-            icon={i.icon}
-            iconAlt={i.iconAlt}
-            extraInfo={i.extraInfo}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-function DraggableComponents({
-  content,
-  extraInfo,
-  icon,
-  iconAlt,
-}: DraggableComponentsProps) {
-  const [isDragging, setIsDragging] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
-    setIsDragging(true);
-    if (containerRef.current) {
-      // Serialize the children as a string for dataTransfer
-      const childrenHtml = containerRef.current.innerHTML;
-      event.dataTransfer.setData("text/html", childrenHtml);
-    }
-  };
-
-  const handleDragEnd = () => {
-    setIsDragging(false);
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      onDragEnd={handleDragEnd}
-      onDragStart={handleDragStart}
-      draggable
-      className={`flex gap-4 px-1 rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
-    >
-      <Image className="select-none" src={icon} alt={iconAlt} />
-      <div className="flex flex-col gap-2">
-        <div>
-          <h1 className="line-clamp-3">{content}</h1>
-        </div>
-        <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/ui/components/canvas/components/dropComponent.tsx b/packages/ui/components/canvas/components/dropComponent.tsx
deleted file mode 100644
index 0374f367..00000000
--- a/packages/ui/components/canvas/components/dropComponent.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, { useRef, useCallback, useEffect, useContext } from "react";
-import { useEditor } from "tldraw";
-import DragContext, { DragContextType, useDragContext } from "../lib/context";
-import { handleExternalDroppedContent } from "../lib/createEmbeds";
-
-const stripHtmlTags = (html: string): string => {
-  const div = document.createElement("div");
-  div.innerHTML = html;
-  return div.textContent || div.innerText || "";
-};
-
-function formatTextToRatio(text: string) {
-  const totalWidth = text.length;
-  const maxLineWidth = Math.floor(totalWidth / 4);
-
-  const words = text.split(" ");
-  let lines = [];
-  let currentLine = "";
-
-  words.forEach((word) => {
-    // Check if adding the next word exceeds the maximum line width
-    if ((currentLine + word).length <= maxLineWidth) {
-      currentLine += (currentLine ? " " : "") + word;
-    } else {
-      // If the current line is full, push it to new line
-      lines.push(currentLine);
-      currentLine = word;
-    }
-  });
-  if (currentLine) {
-    lines.push(currentLine);
-  }
-  return lines.join("\n");
-}
-
-function DropZone() {
-  const dropRef = useRef<HTMLDivElement | null>(null);
-  const { isDraggingOver, setIsDraggingOver } = useDragContext();
-
-  const editor = useEditor();
-
-  const handleDragLeave = () => {
-    setIsDraggingOver(false);
-    console.log("leaver");
-  };
-
-  useEffect(() => {
-    setInterval(() => {
-      editor.selectAll();
-      const shapes = editor.getSelectedShapes();
-      const text = shapes.filter((s) => s.type === "text");
-      console.log("hrhh", text);
-    }, 5000);
-  }, []);
-
-  const handleDrop = useCallback((event: DragEvent) => {
-    event.preventDefault();
-    setIsDraggingOver(false);
-    const dt = event.dataTransfer;
-    if (!dt) {
-      return;
-    }
-    const items = dt.items;
-
-    for (let i = 0; i < items.length; i++) {
-      if (items[i]!.kind === "file" && items[i]!.type.startsWith("image/")) {
-        const file = items[i]!.getAsFile();
-        if (file) {
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            if (e.target) {
-              // setDroppedImage(e.target.result as string);
-            }
-          };
-          reader.readAsDataURL(file);
-        }
-      } else if (items[i]!.kind === "string") {
-        items[i]!.getAsString((data) => {
-          const cleanText = stripHtmlTags(data);
-          const onethree = formatTextToRatio(cleanText);
-          handleExternalDroppedContent({ editor, text: onethree });
-        });
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    const divElement = dropRef.current;
-    if (divElement) {
-      divElement.addEventListener("drop", handleDrop);
-      divElement.addEventListener("dragleave", handleDragLeave);
-    }
-    return () => {
-      if (divElement) {
-        divElement.removeEventListener("drop", handleDrop);
-        divElement.addEventListener("dragleave", handleDragLeave);
-      }
-    };
-  }, []);
-
-  return (
-    <div
-      className={`h-full flex justify-center items-center w-full absolute top-0 left-0 z-[100000] pointer-events-none  ${isDraggingOver && "bg-[#2c3439ad]  pointer-events-auto"}`}
-      ref={dropRef}
-    >
-      {isDraggingOver && (
-        <>
-          <div className="absolute top-4 left-8">
-            <TopRight />
-          </div>
-          <div className="absolute top-4 right-8">
-            <TopLeft />
-          </div>
-          <div className="absolute bottom-4 left-8">
-            <BottomLeft />
-          </div>
-          <div className="absolute bottom-4 right-8">
-            <BottomRight />
-          </div>
-          <h2 className="text-2xl">Drop here to add Content on Canvas</h2>
-        </>
-      )}
-    </div>
-  );
-}
-
-function TopRight() {
-  return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M44 4H12C7.58172 4 4 7.58172 4 12V44"
-        stroke="white"
-        stroke-width="8"
-        stroke-linecap="round"
-      />
-    </svg>
-  );
-}
-
-function TopLeft() {
-  return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4 4H36C40.4183 4 44 7.58172 44 12V44"
-        stroke="white"
-        stroke-width="8"
-        stroke-linecap="round"
-      />
-    </svg>
-  );
-}
-
-function BottomLeft() {
-  return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M44 44H12C7.58172 44 4 40.4183 4 36V4"
-        stroke="white"
-        stroke-width="8"
-        stroke-linecap="round"
-      />
-    </svg>
-  );
-}
-
-function BottomRight() {
-  return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4 44H36C40.4183 44 44 40.4183 44 36V4"
-        stroke="white"
-        stroke-width="8"
-        stroke-linecap="round"
-      />
-    </svg>
-  );
-}
-
-export default DropZone;
diff --git a/packages/ui/components/canvas/components/enabledComp copy.tsx b/packages/ui/components/canvas/components/enabledComp copy.tsx
deleted file mode 100644
index 85811b82..00000000
--- a/packages/ui/components/canvas/components/enabledComp copy.tsx	
+++ /dev/null
@@ -1,22 +0,0 @@
-import { TLUiComponents } from "tldraw";
-
-export const components: Partial<TLUiComponents> = {
-  ActionsMenu: null,
-  MainMenu: null,
-  QuickActions: null,
-  TopPanel: null,
-  DebugPanel: null,
-  DebugMenu: null,
-  PageMenu: null,
-  // Minimap: null,
-  // ContextMenu: null,
-  // HelpMenu: null,
-  // ZoomMenu: null,
-  // StylePanel: null,
-  // NavigationPanel: null,
-  // Toolbar: null,
-  // KeyboardShortcutsDialog: null,
-  // HelperButtons: null,
-  // SharePanel: null,
-  // MenuPanel: null,
-};
\ No newline at end of file
diff --git a/packages/ui/components/canvas/components/enabledComp.tsx b/packages/ui/components/canvas/components/enabledComp.tsx
deleted file mode 100644
index 85811b82..00000000
--- a/packages/ui/components/canvas/components/enabledComp.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { TLUiComponents } from "tldraw";
-
-export const components: Partial<TLUiComponents> = {
-  ActionsMenu: null,
-  MainMenu: null,
-  QuickActions: null,
-  TopPanel: null,
-  DebugPanel: null,
-  DebugMenu: null,
-  PageMenu: null,
-  // Minimap: null,
-  // ContextMenu: null,
-  // HelpMenu: null,
-  // ZoomMenu: null,
-  // StylePanel: null,
-  // NavigationPanel: null,
-  // Toolbar: null,
-  // KeyboardShortcutsDialog: null,
-  // HelperButtons: null,
-  // SharePanel: null,
-  // MenuPanel: null,
-};
\ No newline at end of file
diff --git a/packages/ui/components/canvas/components/savesnap.tsx b/packages/ui/components/canvas/components/savesnap.tsx
deleted file mode 100644
index f82e97e3..00000000
--- a/packages/ui/components/canvas/components/savesnap.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { debounce, useEditor } from "tldraw";
-
-export function SaveStatus() {
-  const [save, setSave] = useState("saved!");
-  const editor = useEditor();
-
-  const debouncedSave = useCallback(
-    debounce(async () => {
-      const snapshot = editor.store.getSnapshot();
-      localStorage.setItem("saved", JSON.stringify(snapshot));
-
-      const res = await fetch(
-        "https://learning-cf.pruthvirajthinks.workers.dev/post/page3",
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            data: snapshot,
-          }),
-        },
-      );
-
-      console.log(await res.json());
-      setSave("saved!");
-    }, 3000),
-    [editor], // Dependency array ensures the function is not recreated on every render
-  );
-
-  useEffect(() => {
-    const unsubscribe = editor.store.listen(
-      () => {
-        setSave("saving...");
-        debouncedSave();
-      },
-      { scope: "document", source: "user" },
-    );
-
-    return () => unsubscribe(); // Cleanup on unmount
-  }, [editor, debouncedSave]);
-
-  return <button>{save}</button>;
-}
\ No newline at end of file
diff --git a/packages/ui/components/canvas/components/textCard.tsx b/packages/ui/components/canvas/components/textCard.tsx
deleted file mode 100644
index b24dae52..00000000
--- a/packages/ui/components/canvas/components/textCard.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape } from "tldraw";
-
-type ITextCardShape = TLBaseShape<
-  "Textcard",
-  { w: number; h: number; content: string; extrainfo: string }
->;
-
-export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> {
-  static override type = "Textcard" as const;
-
-  getDefaultProps(): ITextCardShape["props"] {
-    return {
-      w: 100,
-      h: 50,
-      content: "",
-      extrainfo: "",
-    };
-  }
-
-  component(s: ITextCardShape) {
-    return (
-      <HTMLContainer className="flex h-full w-full items-center justify-center">
-        <div
-          style={{
-            height: s.props.h,
-            width: s.props.w,
-            pointerEvents: "all",
-            background: "#2C3439",
-            borderRadius: "16px",
-            padding: "8px 14px",
-          }}
-        >
-          <h1 style={{ fontSize: "15px" }}>{s.props.content}</h1>
-          <p style={{ fontSize: "14px", color: "#369DFD" }}>
-            {s.props.extrainfo}
-          </p>
-        </div>
-      </HTMLContainer>
-    );
-  }
-
-  indicator(shape: ITextCardShape) {
-    return <rect width={shape.props.w} height={shape.props.h} />;
-  }
-}
diff --git a/packages/ui/components/canvas/components/twitterCard.tsx b/packages/ui/components/canvas/components/twitterCard.tsx
deleted file mode 100644
index c5582a98..00000000
--- a/packages/ui/components/canvas/components/twitterCard.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape, toDomPrecision } from "tldraw";
-
-type ITwitterCardShape = TLBaseShape<
-  "Twittercard",
-  { w: number; h: number; url: string }
->;
-
-export class twitterCardUtil extends BaseBoxShapeUtil<ITwitterCardShape> {
-  static override type = "Twittercard" as const;
-
-  getDefaultProps(): ITwitterCardShape["props"] {
-    return {
-      w: 500,
-      h: 550,
-      url: "",
-    };
-  }
-
-  component(s: ITwitterCardShape) {
-    return (
-      <HTMLContainer className="flex h-full w-full items-center justify-center">
-        <TwitterPost
-          url={s.props.url}
-          width={s.props.w}
-          isInteractive={false}
-          height={s.props.h}
-        />
-      </HTMLContainer>
-    );
-  }
-
-  indicator(shape: ITwitterCardShape) {
-    return <rect width={shape.props.w} height={shape.props.h} />;
-  }
-}
-
-function TwitterPost({
-  isInteractive,
-  width,
-  height,
-  url,
-}: {
-  isInteractive: boolean;
-  width: number;
-  height: number;
-  url: string;
-}) {
-  const link = (() => {
-    try {
-      const urlObj = new URL(url);
-      const path = urlObj.pathname;
-      return path;
-    } catch (error) {
-      console.error("Invalid URL", error);
-      return null;
-    }
-  })();
-
-  return (
-    <iframe
-      className="tl-embed"
-      draggable={false}
-      width={toDomPrecision(width)}
-      height={toDomPrecision(height)}
-      seamless
-      referrerPolicy="no-referrer-when-downgrade"
-      style={{
-        pointerEvents: isInteractive ? "all" : "none",
-        zIndex: isInteractive ? "" : "-1",
-      }}
-      srcDoc={`
-        <html lang="en">
-        <head>
-          <meta charset="UTF-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <title>Document</title>
-        </head>
-        <body>
-          <blockquote data-theme="dark" class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-        </body>
-        </html>`}
-    />
-  );
-}
diff --git a/packages/ui/components/canvas/lib/context.ts b/packages/ui/components/canvas/lib/context.ts
deleted file mode 100644
index 4e6ecd1c..00000000
--- a/packages/ui/components/canvas/lib/context.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export interface DragContextType {
-  isDraggingOver: boolean;
-  setIsDraggingOver: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const DragContext = createContext<DragContextType | undefined>(undefined);
-
-export const useDragContext = () => {
-  const context = useContext(DragContext);
-  if (context === undefined) {
-    throw new Error('useAppContext must be used within an AppProvider');
-  }
-  return context;
-};
-
-export default DragContext;
\ No newline at end of file
diff --git a/packages/ui/components/canvas/lib/createAssetUrl.ts b/packages/ui/components/canvas/lib/createAssetUrl.ts
deleted file mode 100644
index 05c2baea..00000000
--- a/packages/ui/components/canvas/lib/createAssetUrl.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import {
-  AssetRecordType,
-  TLAsset,
-  getHashForString,
-  truncateStringWithEllipsis,
-} from "tldraw";
-// import { BOOKMARK_ENDPOINT } from './config'
-
-interface ResponseBody {
-  title?: string;
-  description?: string;
-  image?: string;
-}
-
-export async function createAssetFromUrl({
-  url,
-}: {
-  type: "url";
-  url: string;
-}): Promise<TLAsset> {
-  // try {
-  // 	// First, try to get the meta data from our endpoint
-  // 	const meta = (await (
-  // 		await fetch(BOOKMARK_ENDPOINT, {
-  // 			method: 'POST',
-  // 			headers: {
-  // 				'Content-Type': 'application/json',
-  // 			},
-  // 			body: JSON.stringify({
-  // 				url,
-  // 			}),
-  // 		})
-  // 	).json()) as ResponseBody
-
-  // 	return {
-  // 		id: AssetRecordType.createId(getHashForString(url)),
-  // 		typeName: 'asset',
-  // 		type: 'bookmark',
-  // 		props: {
-  // 			src: url,
-  // 			description: meta.description ?? '',
-  // 			image: meta.image ?? '',
-  // 			title: meta.title ?? truncateStringWithEllipsis(url, 32),
-  // 		},
-  // 		meta: {},
-  // 	}
-  // } catch (error) {
-  // Otherwise, fallback to fetching data from the url
-
-  let meta: { image: string; title: string; description: string };
-
-  try {
-    const resp = await fetch(url, { method: "GET", mode: "no-cors" });
-    const html = await resp.text();
-    const doc = new DOMParser().parseFromString(html, "text/html");
-    meta = {
-      image:
-        doc.head
-          .querySelector('meta[property="og:image"]')
-          ?.getAttribute("content") ?? "",
-      title:
-        doc.head
-          .querySelector('meta[property="og:title"]')
-          ?.getAttribute("content") ?? truncateStringWithEllipsis(url, 32),
-      description:
-        doc.head
-          .querySelector('meta[property="og:description"]')
-          ?.getAttribute("content") ?? "",
-    };
-  } catch (error) {
-    console.error(error);
-    meta = {
-      image: "",
-      title: truncateStringWithEllipsis(url, 32),
-      description: "",
-    };
-  }
-
-  // Create the bookmark asset from the meta
-  return {
-    id: AssetRecordType.createId(getHashForString(url)),
-    typeName: "asset",
-    type: "bookmark",
-    props: {
-      src: url,
-      image: meta.image,
-      title: meta.title,
-      description: meta.description,
-      favicon: meta.image,
-    },
-    meta: {},
-  };
-  // }
-}
diff --git a/packages/ui/components/canvas/lib/createEmbeds.ts b/packages/ui/components/canvas/lib/createEmbeds.ts
deleted file mode 100644
index b3a7fb52..00000000
--- a/packages/ui/components/canvas/lib/createEmbeds.ts
+++ /dev/null
@@ -1,236 +0,0 @@
-// @ts-nocheck TODO: A LOT OF TS ERRORS HERE
-
-import {
-  AssetRecordType,
-  Editor,
-  TLAsset,
-  TLAssetId,
-  TLBookmarkShape,
-  TLExternalContentSource,
-  TLShapePartial,
-  Vec,
-  VecLike,
-  createShapeId,
-  getEmbedInfo,
-  getHashForString,
-} from "tldraw";
-
-export default async function createEmbedsFromUrl({
-  url,
-  point,
-  sources,
-  editor,
-}: {
-  url: string;
-  point?: VecLike | undefined;
-  sources?: TLExternalContentSource[] | undefined;
-  editor: Editor;
-}) {
-  const position =
-    point ??
-    (editor.inputs.shiftKey
-      ? editor.inputs.currentPagePoint
-      : editor.getViewportPageBounds().center);
-
-  if (url?.includes("x.com") || url?.includes("twitter.com")) {
-    return editor.createShape({
-      type: "Twittercard",
-      x: position.x - 250,
-      y: position.y - 150,
-      props: { url: url },
-    });
-  }
-
-  // try to paste as an embed first
-  const embedInfo = getEmbedInfo(url);
-
-  if (embedInfo) {
-    return editor.putExternalContent({
-      type: "embed",
-      url: embedInfo.url,
-      point,
-      embed: embedInfo.definition,
-    });
-  }
-
-  const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url));
-  const shape = createEmptyBookmarkShape(editor, url, position);
-
-  // Use an existing asset if we have one, or else else create a new one
-  let asset = editor.getAsset(assetId) as TLAsset;
-  let shouldAlsoCreateAsset = false;
-  if (!asset) {
-    shouldAlsoCreateAsset = true;
-    try {
-      const bookmarkAsset = await editor.getAssetForExternalContent({
-        type: "url",
-        url,
-      });
-      const fetchWebsite: {
-        title?: string;
-        image?: string;
-        description?: string;
-      } = await (
-        await fetch(`/api/unfirlsite?website=${url}`, {
-          method: "POST",
-        })
-      ).json();
-      if (bookmarkAsset) {
-        if (fetchWebsite.title) bookmarkAsset.props.title = fetchWebsite.title;
-        if (fetchWebsite.image) bookmarkAsset.props.image = fetchWebsite.image;
-        if (fetchWebsite.description)
-          bookmarkAsset.props.description = fetchWebsite.description;
-      }
-      if (!bookmarkAsset) throw Error("Could not create an asset");
-      asset = bookmarkAsset;
-    } catch (e) {
-      console.log(e);
-      return;
-    }
-  }
-
-  editor.batch(() => {
-    if (shouldAlsoCreateAsset) {
-      editor.createAssets([asset]);
-    }
-
-    editor.updateShapes([
-      {
-        id: shape.id,
-        type: shape.type,
-        props: {
-          assetId: asset.id,
-        },
-      },
-    ]);
-  });
-}
-
-function isURL(str: string) {
-  try {
-    new URL(str);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function formatTextToRatio(text: string) {
-  const totalWidth = text.length;
-  const maxLineWidth = Math.floor(totalWidth / 10);
-
-  const words = text.split(" ");
-  let lines = [];
-  let currentLine = "";
-
-  words.forEach((word) => {
-    if ((currentLine + word).length <= maxLineWidth) {
-      currentLine += (currentLine ? " " : "") + word;
-    } else {
-      lines.push(currentLine);
-      currentLine = word;
-    }
-  });
-  if (currentLine) {
-    lines.push(currentLine);
-  }
-  return { height: (lines.length + 1) * 18, width: maxLineWidth * 10 };
-}
-
-export function handleExternalDroppedContent({
-  text,
-  editor,
-}: {
-  text: string;
-  editor: Editor;
-}) {
-  const position = editor.inputs.shiftKey
-    ? editor.inputs.currentPagePoint
-    : editor.getViewportPageBounds().center;
-
-  if (isURL(text)) {
-    createEmbedsFromUrl({ editor, url: text });
-  } else {
-    // editor.createShape({
-    //   type: "text",
-    //   x: position.x - 75,
-    //   y: position.y - 75,
-    //   props: {
-    //     text: text,
-    //     size: "s",
-    //     textAlign: "start",
-    //   },
-    // });
-    const { height, width } = formatTextToRatio(text);
-    editor.createShape({
-      type: "Textcard",
-      x: position.x - width / 2,
-      y: position.y - height / 2,
-      props: {
-        content: text,
-        extrainfo: "https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a",
-        w: width,
-        h: height,
-      },
-    });
-  }
-}
-
-function centerSelectionAroundPoint(editor: Editor, position: VecLike) {
-  // Re-position shapes so that the center of the group is at the provided point
-  const viewportPageBounds = editor.getViewportPageBounds();
-  let selectionPageBounds = editor.getSelectionPageBounds();
-
-  if (selectionPageBounds) {
-    const offset = selectionPageBounds!.center.sub(position);
-
-    editor.updateShapes(
-      editor.getSelectedShapes().map((shape) => {
-        const localRotation = editor
-          .getShapeParentTransform(shape)
-          .decompose().rotation;
-        const localDelta = Vec.Rot(offset, -localRotation);
-        return {
-          id: shape.id,
-          type: shape.type,
-          x: shape.x! - localDelta.x,
-          y: shape.y! - localDelta.y,
-        };
-      }),
-    );
-  }
-
-  // Zoom out to fit the shapes, if necessary
-  selectionPageBounds = editor.getSelectionPageBounds();
-  if (
-    selectionPageBounds &&
-    !viewportPageBounds.contains(selectionPageBounds)
-  ) {
-    editor.zoomToSelection();
-  }
-}
-
-export function createEmptyBookmarkShape(
-  editor: Editor,
-  url: string,
-  position: VecLike,
-): TLBookmarkShape {
-  const partial: TLShapePartial = {
-    id: createShapeId(),
-    type: "bookmark",
-    x: position.x - 150,
-    y: position.y - 160,
-    opacity: 1,
-    props: {
-      assetId: null,
-      url,
-    },
-  };
-
-  editor.batch(() => {
-    editor.createShapes([partial]).select(partial.id);
-    centerSelectionAroundPoint(editor, position);
-  });
-
-  return editor.getShape(partial.id) as TLBookmarkShape;
-}
diff --git a/packages/ui/components/canvas/lib/loadSnap.ts b/packages/ui/components/canvas/lib/loadSnap.ts
deleted file mode 100644
index 846b1967..00000000
--- a/packages/ui/components/canvas/lib/loadSnap.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createTLStore, defaultShapeUtils, loadSnapshot } from "tldraw";
-import { twitterCardUtil } from "../components/twitterCard";
-import { textCardUtil } from "../components/textCard";
-export async function loadRemoteSnapshot() {
-  const res = await fetch(
-    "https://learning-cf.pruthvirajthinks.workers.dev/get/page3",
-  );
-  const snapshot = JSON.parse(await res.json());
-  const newStore = createTLStore({
-    shapeUtils: [...defaultShapeUtils, twitterCardUtil, textCardUtil],
-  });
-  loadSnapshot(newStore, snapshot);
-  return newStore;
-}
-- 
cgit v1.2.3


From 6294f5fa3384f82f51631e43685bba0e49abab4f Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Sat, 29 Jun 2024 20:34:48 +0530
Subject: fix typescript errors

---
 apps/web/app/(canvas)/canvas/[id]/page.tsx         |   6 +-
 .../canvas/_canvas_comp/(components)/canvas.tsx    |  96 ---------
 .../(components)/draggableComponent.tsx            |  67 ------
 .../_canvas_comp/(components)/dropComponent.tsx    | 203 ------------------
 .../_canvas_comp/(components)/enabledComp copy.tsx |  22 --
 .../_canvas_comp/(components)/enabledComp.tsx      |  22 --
 .../_canvas_comp/(components)/resizableLayout.tsx  | 170 ---------------
 .../canvas/_canvas_comp/(components)/savesnap.tsx  |  33 ---
 .../canvas/_canvas_comp/(components)/textCard.tsx  |  45 ----
 .../_canvas_comp/(components)/twitterCard.tsx      |  84 --------
 .../(canvas)/canvas/_canvas_comp/lib/context.ts    |  18 --
 .../canvas/_canvas_comp/lib/createAssetUrl.ts      |  94 --------
 .../canvas/_canvas_comp/lib/createEmbeds.ts        | 236 ---------------------
 .../(canvas)/canvas/_canvas_comp/lib/loadSnap.ts   |  13 --
 apps/web/app/api/canvas/route.ts                   |  10 +
 apps/web/components/canvas/canvas.tsx              |  96 +++++++++
 apps/web/components/canvas/draggableComponent.tsx  |  67 ++++++
 apps/web/components/canvas/dropComponent.tsx       | 206 ++++++++++++++++++
 apps/web/components/canvas/enabledComp copy.tsx    |  22 ++
 apps/web/components/canvas/enabledComp.tsx         |  22 ++
 apps/web/components/canvas/resizableLayout.tsx     | 170 +++++++++++++++
 apps/web/components/canvas/savesnap.tsx            |  33 +++
 apps/web/components/canvas/textCard.tsx            |  45 ++++
 apps/web/components/canvas/twitterCard.tsx         |  84 ++++++++
 apps/web/lib/context.ts                            |  18 ++
 apps/web/lib/createAssetUrl.ts                     |  94 ++++++++
 apps/web/lib/createEmbeds.ts                       | 236 +++++++++++++++++++++
 apps/web/lib/loadSnap.ts                           |  14 ++
 apps/web/tsconfig.json                             |   3 +-
 29 files changed, 1120 insertions(+), 1109 deletions(-)
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/draggableComponent.tsx
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp copy.tsx
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp.tsx
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/resizableLayout.tsx
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/savesnap.tsx
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/textCard.tsx
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/(components)/twitterCard.tsx
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/lib/context.ts
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/lib/createAssetUrl.ts
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/lib/createEmbeds.ts
 delete mode 100644 apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts
 create mode 100644 apps/web/app/api/canvas/route.ts
 create mode 100644 apps/web/components/canvas/canvas.tsx
 create mode 100644 apps/web/components/canvas/draggableComponent.tsx
 create mode 100644 apps/web/components/canvas/dropComponent.tsx
 create mode 100644 apps/web/components/canvas/enabledComp copy.tsx
 create mode 100644 apps/web/components/canvas/enabledComp.tsx
 create mode 100644 apps/web/components/canvas/resizableLayout.tsx
 create mode 100644 apps/web/components/canvas/savesnap.tsx
 create mode 100644 apps/web/components/canvas/textCard.tsx
 create mode 100644 apps/web/components/canvas/twitterCard.tsx
 create mode 100644 apps/web/lib/context.ts
 create mode 100644 apps/web/lib/createAssetUrl.ts
 create mode 100644 apps/web/lib/createEmbeds.ts
 create mode 100644 apps/web/lib/loadSnap.ts

diff --git a/apps/web/app/(canvas)/canvas/[id]/page.tsx b/apps/web/app/(canvas)/canvas/[id]/page.tsx
index 7cf5b91c..76f5da30 100644
--- a/apps/web/app/(canvas)/canvas/[id]/page.tsx
+++ b/apps/web/app/(canvas)/canvas/[id]/page.tsx
@@ -1,10 +1,6 @@
 import { userHasCanvas } from "@/app/actions/fetchers";
+import { RectProvider, ResizaleLayout } from "@/components/canvas/resizableLayout";
 import { redirect } from "next/navigation";
-import {
-  RectProvider,
-  ResizaleLayout,
-} from "../_canvas_comp/(components)/resizableLayout";
-
 export default async function page({ params }: any) {
   const canvasExists = await userHasCanvas(params.id);
   if (!canvasExists.success) {
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx
deleted file mode 100644
index 22fcd709..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Editor, Tldraw, setUserPreferences, TLStoreWithStatus } from "tldraw";
-import { createAssetFromUrl } from "../lib/createAssetUrl";
-import "tldraw/tldraw.css";
-import { components } from "./enabledComp";
-import { twitterCardUtil } from "./twitterCard";
-import { textCardUtil } from "./textCard";
-import createEmbedsFromUrl from "../lib/createEmbeds";
-import { loadRemoteSnapshot } from "../lib/loadSnap";
-import { SaveStatus } from "./savesnap";
-import { getAssetUrls } from "@tldraw/assets/selfHosted";
-import { memo } from "react";
-import DragContext from "../lib/context";
-import DropZone from "./dropComponent";
-import { useRect } from "./resizableLayout";
-// import "./canvas.css";
-
-export const Canvas = memo(() => {
-  const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
-  const Dragref = useRef<HTMLDivElement | null>(null);
-
-  const handleDragOver = (event: any) => {
-    event.preventDefault();
-    setIsDraggingOver(true);
-    console.log("entere");
-  };
-
-  useEffect(() => {
-    const divElement = Dragref.current;
-    if (divElement) {
-      divElement.addEventListener("dragover", handleDragOver);
-    }
-    return () => {
-      if (divElement) {
-        divElement.removeEventListener("dragover", handleDragOver);
-      }
-    };
-  }, []);
-
-  return (
-    <DragContext.Provider value={{ isDraggingOver, setIsDraggingOver }}>
-      <div ref={Dragref} className="w-full h-full">
-        <TldrawComponent />
-      </div>
-    </DragContext.Provider>
-  );
-});
-
-const TldrawComponent = memo(() => {
-  const { id } = useRect();
-  const [storeWithStatus, setStoreWithStatus] = useState<TLStoreWithStatus>({
-    status: "loading",
-  });
-  useEffect(() => {
-    const fetchStore = async () => {
-      const store = await loadRemoteSnapshot(id);
-
-      setStoreWithStatus({
-        store: store,
-        status: "not-synced",
-      });
-    };
-
-    fetchStore();
-  }, []);
-
-  const handleMount = useCallback((editor: Editor) => {
-    (window as any).app = editor;
-    (window as any).editor = editor;
-    editor.registerExternalAssetHandler("url", createAssetFromUrl);
-    editor.registerExternalContentHandler("url", ({ url, point, sources }) => {
-      createEmbedsFromUrl({ url, point, sources, editor });
-    });
-  }, []);
-
-  setUserPreferences({ id: "supermemory",colorScheme: "dark" });
-
-  const assetUrls = getAssetUrls();
-  return (
-    <div className="w-full h-full">
-      <Tldraw
-        className="relative"
-        assetUrls={assetUrls}
-        components={components}
-        store={storeWithStatus}
-        shapeUtils={[twitterCardUtil, textCardUtil]}
-        onMount={handleMount}
-      >
-        <div className="absolute left-1/2 top-0 z-[1000000] flex -translate-x-1/2 gap-2 bg-[#2C3439] text-[#B3BCC5]">
-          <SaveStatus id={id} />
-        </div>
-        <DropZone />
-      </Tldraw>
-    </div>
-  );
-});
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/draggableComponent.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/draggableComponent.tsx
deleted file mode 100644
index 8c39c732..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/draggableComponent.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import Image from "next/image";
-import { useRef, useState } from "react";
-
-interface DraggableComponentsProps {
-  content: string;
-  extraInfo?: string;
-  iconAlt: string;
-}
-
-export default function DraggableComponentsContainer({
-  content,
-}: {
-  content: DraggableComponentsProps[];
-}) {
-  return (
-    <div className="flex flex-col gap-10">
-      {content.map((i) => {
-        return (
-          <DraggableComponents
-            content={i.content}
-            iconAlt={i.iconAlt}
-            extraInfo={i.extraInfo}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-function DraggableComponents({
-  content,
-  extraInfo,
-  iconAlt,
-}: DraggableComponentsProps) {
-  const [isDragging, setIsDragging] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
-    setIsDragging(true);
-    if (containerRef.current) {
-      // Serialize the children as a string for dataTransfer
-      const childrenHtml = containerRef.current.innerHTML;
-      event.dataTransfer.setData("text/html", childrenHtml);
-    }
-  };
-
-  const handleDragEnd = () => {
-    setIsDragging(false);
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      onDragEnd={handleDragEnd}
-      onDragStart={handleDragStart}
-      draggable
-      className={`flex gap-4 px-1 rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
-    >
-      <div className="flex flex-col gap-2">
-        <div>
-          <h1 className="line-clamp-3">{content}</h1>
-        </div>
-        <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx
deleted file mode 100644
index 0374f367..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, { useRef, useCallback, useEffect, useContext } from "react";
-import { useEditor } from "tldraw";
-import DragContext, { DragContextType, useDragContext } from "../lib/context";
-import { handleExternalDroppedContent } from "../lib/createEmbeds";
-
-const stripHtmlTags = (html: string): string => {
-  const div = document.createElement("div");
-  div.innerHTML = html;
-  return div.textContent || div.innerText || "";
-};
-
-function formatTextToRatio(text: string) {
-  const totalWidth = text.length;
-  const maxLineWidth = Math.floor(totalWidth / 4);
-
-  const words = text.split(" ");
-  let lines = [];
-  let currentLine = "";
-
-  words.forEach((word) => {
-    // Check if adding the next word exceeds the maximum line width
-    if ((currentLine + word).length <= maxLineWidth) {
-      currentLine += (currentLine ? " " : "") + word;
-    } else {
-      // If the current line is full, push it to new line
-      lines.push(currentLine);
-      currentLine = word;
-    }
-  });
-  if (currentLine) {
-    lines.push(currentLine);
-  }
-  return lines.join("\n");
-}
-
-function DropZone() {
-  const dropRef = useRef<HTMLDivElement | null>(null);
-  const { isDraggingOver, setIsDraggingOver } = useDragContext();
-
-  const editor = useEditor();
-
-  const handleDragLeave = () => {
-    setIsDraggingOver(false);
-    console.log("leaver");
-  };
-
-  useEffect(() => {
-    setInterval(() => {
-      editor.selectAll();
-      const shapes = editor.getSelectedShapes();
-      const text = shapes.filter((s) => s.type === "text");
-      console.log("hrhh", text);
-    }, 5000);
-  }, []);
-
-  const handleDrop = useCallback((event: DragEvent) => {
-    event.preventDefault();
-    setIsDraggingOver(false);
-    const dt = event.dataTransfer;
-    if (!dt) {
-      return;
-    }
-    const items = dt.items;
-
-    for (let i = 0; i < items.length; i++) {
-      if (items[i]!.kind === "file" && items[i]!.type.startsWith("image/")) {
-        const file = items[i]!.getAsFile();
-        if (file) {
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            if (e.target) {
-              // setDroppedImage(e.target.result as string);
-            }
-          };
-          reader.readAsDataURL(file);
-        }
-      } else if (items[i]!.kind === "string") {
-        items[i]!.getAsString((data) => {
-          const cleanText = stripHtmlTags(data);
-          const onethree = formatTextToRatio(cleanText);
-          handleExternalDroppedContent({ editor, text: onethree });
-        });
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    const divElement = dropRef.current;
-    if (divElement) {
-      divElement.addEventListener("drop", handleDrop);
-      divElement.addEventListener("dragleave", handleDragLeave);
-    }
-    return () => {
-      if (divElement) {
-        divElement.removeEventListener("drop", handleDrop);
-        divElement.addEventListener("dragleave", handleDragLeave);
-      }
-    };
-  }, []);
-
-  return (
-    <div
-      className={`h-full flex justify-center items-center w-full absolute top-0 left-0 z-[100000] pointer-events-none  ${isDraggingOver && "bg-[#2c3439ad]  pointer-events-auto"}`}
-      ref={dropRef}
-    >
-      {isDraggingOver && (
-        <>
-          <div className="absolute top-4 left-8">
-            <TopRight />
-          </div>
-          <div className="absolute top-4 right-8">
-            <TopLeft />
-          </div>
-          <div className="absolute bottom-4 left-8">
-            <BottomLeft />
-          </div>
-          <div className="absolute bottom-4 right-8">
-            <BottomRight />
-          </div>
-          <h2 className="text-2xl">Drop here to add Content on Canvas</h2>
-        </>
-      )}
-    </div>
-  );
-}
-
-function TopRight() {
-  return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M44 4H12C7.58172 4 4 7.58172 4 12V44"
-        stroke="white"
-        stroke-width="8"
-        stroke-linecap="round"
-      />
-    </svg>
-  );
-}
-
-function TopLeft() {
-  return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4 4H36C40.4183 4 44 7.58172 44 12V44"
-        stroke="white"
-        stroke-width="8"
-        stroke-linecap="round"
-      />
-    </svg>
-  );
-}
-
-function BottomLeft() {
-  return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M44 44H12C7.58172 44 4 40.4183 4 36V4"
-        stroke="white"
-        stroke-width="8"
-        stroke-linecap="round"
-      />
-    </svg>
-  );
-}
-
-function BottomRight() {
-  return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4 44H36C40.4183 44 44 40.4183 44 36V4"
-        stroke="white"
-        stroke-width="8"
-        stroke-linecap="round"
-      />
-    </svg>
-  );
-}
-
-export default DropZone;
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp copy.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp copy.tsx
deleted file mode 100644
index 85811b82..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp copy.tsx	
+++ /dev/null
@@ -1,22 +0,0 @@
-import { TLUiComponents } from "tldraw";
-
-export const components: Partial<TLUiComponents> = {
-  ActionsMenu: null,
-  MainMenu: null,
-  QuickActions: null,
-  TopPanel: null,
-  DebugPanel: null,
-  DebugMenu: null,
-  PageMenu: null,
-  // Minimap: null,
-  // ContextMenu: null,
-  // HelpMenu: null,
-  // ZoomMenu: null,
-  // StylePanel: null,
-  // NavigationPanel: null,
-  // Toolbar: null,
-  // KeyboardShortcutsDialog: null,
-  // HelperButtons: null,
-  // SharePanel: null,
-  // MenuPanel: null,
-};
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp.tsx
deleted file mode 100644
index 85811b82..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { TLUiComponents } from "tldraw";
-
-export const components: Partial<TLUiComponents> = {
-  ActionsMenu: null,
-  MainMenu: null,
-  QuickActions: null,
-  TopPanel: null,
-  DebugPanel: null,
-  DebugMenu: null,
-  PageMenu: null,
-  // Minimap: null,
-  // ContextMenu: null,
-  // HelpMenu: null,
-  // ZoomMenu: null,
-  // StylePanel: null,
-  // NavigationPanel: null,
-  // Toolbar: null,
-  // KeyboardShortcutsDialog: null,
-  // HelperButtons: null,
-  // SharePanel: null,
-  // MenuPanel: null,
-};
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/resizableLayout.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/resizableLayout.tsx
deleted file mode 100644
index 5ba6780b..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/resizableLayout.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-"use client";
-
-import { Canvas } from "./canvas";
-import React, { createContext, useContext, useState } from "react";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import { SettingsIcon, DragIcon } from "@repo/ui/icons";
-import DraggableComponentsContainer from "./draggableComponent";
-import Image from "next/image";
-import { Label } from "@repo/ui/shadcn/label";
-
-interface RectContextType {
-  fullScreen: boolean;
-  setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
-  visible: boolean;
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  id: string
-}
-
-const RectContext = createContext<RectContextType | undefined>(undefined);
-
-export const RectProvider = ({ id, children }: {id: string, children: React.ReactNode}) => {
-  const [fullScreen, setFullScreen] = useState(false);
-  const [visible, setVisible] = useState(true);
-
-  const value = {
-    id,
-    fullScreen,
-    setFullScreen,
-    visible,
-    setVisible,
-  };
-
-  return <RectContext.Provider value={value}>{children}</RectContext.Provider>;
-};
-
-export const useRect = () => {
-  const context = useContext(RectContext);
-  if (context === undefined) {
-    throw new Error('useRect must be used within a RectProvider');
-  }
-  return context;
-};
-
-
-export function ResizaleLayout() {
-  const { setVisible, fullScreen, setFullScreen } = useRect();
-
-  return (
-    <div
-      className={`h-screen w-full ${!fullScreen ? "px-4 py-6" : "bg-[#1F2428]"} transition-all`}
-    >
-      <PanelGroup
-        onLayout={(l) => {
-          l[0]! < 20 ? setVisible(false) : setVisible(true);
-        }}
-        className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`}
-        direction="horizontal"
-      >
-        <Panel
-          onExpand={() => {
-            setTimeout(() => setFullScreen(false), 50);
-          }}
-          onCollapse={() => {
-            setTimeout(() => setFullScreen(true), 50);
-          }}
-          defaultSize={30}
-          collapsible={true}
-        >
-          <SidePanelContainer />
-        </Panel>
-        <PanelResizeHandle
-          className={`relative flex items-center transition-all justify-center ${!fullScreen && "px-1"}`}
-        >
-          <DragIconContainer />
-        </PanelResizeHandle>
-        <Panel className="relative" defaultSize={70} minSize={60}>
-          <CanvasContainer />
-        </Panel>
-      </PanelGroup>
-    </div>
-  );
-}
-
-function DragIconContainer() {
-  const { fullScreen} = useRect();
-  return (
-    <div
-      className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}
-    >
-      <Image src={DragIcon} alt="drag-icon" />
-    </div>
-  );
-}
-
-function CanvasContainer() {
-  const { fullScreen} = useRect();
-  return (
-    <div
-      className={`absolute overflow-hidden transition-all inset-0 ${fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}
-    >
-      <Canvas />
-    </div>
-  );
-}
-
-function SidePanelContainer() {
-  const { fullScreen, visible} = useRect();
-  return (
-    <div
-      className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen" : "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}
-    >
-      <div className="flex items-center justify-between bg-[#2C3439] px-4 py-2 text-lg font-medium text-[#989EA4]">
-        Change Filters
-        <Image src={SettingsIcon} alt="setting-icon" />
-      </div>
-      {visible ? (
-        <SidePanel />
-      ) : (
-        <h1 className="text-center py-10 text-xl">Need more space to show!</h1>
-      )}
-    </div>
-  );
-}
-
-function SidePanel() {
-  const [value, setValue] = useState("");
-  // const [dragAsText, setDragAsText] = useState(false);
-  return (
-    <>
-      <div className="px-3 py-5">
-        <input
-          placeholder="search..."
-          onChange={(e) => {
-            setValue(e.target.value);
-          }}
-          value={value}
-          // rows={1}
-          className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
-        />
-      </div>
-      <div className="flex items-center justify-end px-3 py-4">
-        {/* <Switch
-          className="bg-[#151515] data-[state=unchecked]:bg-red-400 data-[state=checked]:bg-blue-400"
-          onCheckedChange={(e) => setDragAsText(e)}
-          id="drag-text-mode"
-        /> */}
-        <Label htmlFor="drag-text-mode">Drag as Text</Label>
-      </div>
-      <DraggableComponentsContainer content={content} />
-    </>
-  );
-}
-
-
-const content = [
-  {
-    content:
-      "Regional growth patterns diverge, with strong performance in the United States and several emerging markets, contrasted by weaker prospects in many advanced economies, particularly in Europe (World Economic Forum) (OECD). The rapid adoption of artificial intelligence (AI) is expected to drive productivity growth, especially in advanced economies, potentially mitigating labor shortages and boosting income levels in emerging markets (World Economic Forum) (OECD). However, ongoing geopolitical tensions and economic fragmentation are likely to maintain a level of uncertainty and volatility in the global economy (World Economic Forum.",
-    iconAlt: "Autocomplete",
-    extraInfo:
-      "Page Url: https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a",
-  },
-  {
-    content:
-      "As of mid-2024, the global economy is experiencing modest growth with significant regional disparities. Global GDP growth is projected to be around 3.1% in 2024, rising slightly to 3.2% in 2025. This performance, although below the pre-pandemic average, reflects resilience despite various economic pressures, including tight monetary conditions and geopolitical tensions (IMF)(OECD) Inflation is moderating faster than expected, with global headline inflation projected to fall to 5.8% in 2024 and 4.4% in 2025, contributing to improving real incomes and positive trade growth (IMF) (OECD)",
-    iconAlt: "Autocomplete",
-    extraInfo:
-      "Page Url: https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia",
-  },
-];
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/savesnap.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/savesnap.tsx
deleted file mode 100644
index 45fc7e9d..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/savesnap.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { debounce, getSnapshot, useEditor } from "tldraw";
-import { SaveCanvas } from "@/app/actions/doers";
-
-export function SaveStatus({id}: {id:string}) {
-  const [save, setSave] = useState("saved!");
-  const editor = useEditor();
-  
-
-  const debouncedSave = useCallback(
-    debounce(async () => {
-      const snapshot = getSnapshot(editor.store)
-      SaveCanvas({id, data: JSON.stringify(snapshot)})
-      
-      setSave("saved!");
-    }, 3000),
-    [editor], // Dependency array ensures the function is not recreated on every render
-  );
-
-  useEffect(() => {
-    const unsubscribe = editor.store.listen(
-      () => {
-        setSave("saving...");
-        debouncedSave();
-      },
-      { scope: "document", source: "user" },
-    );
-
-    return () => unsubscribe(); // Cleanup on unmount
-  }, [editor, debouncedSave]);
-
-  return <button>{save}</button>;
-}
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/textCard.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/textCard.tsx
deleted file mode 100644
index b24dae52..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/textCard.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape } from "tldraw";
-
-type ITextCardShape = TLBaseShape<
-  "Textcard",
-  { w: number; h: number; content: string; extrainfo: string }
->;
-
-export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> {
-  static override type = "Textcard" as const;
-
-  getDefaultProps(): ITextCardShape["props"] {
-    return {
-      w: 100,
-      h: 50,
-      content: "",
-      extrainfo: "",
-    };
-  }
-
-  component(s: ITextCardShape) {
-    return (
-      <HTMLContainer className="flex h-full w-full items-center justify-center">
-        <div
-          style={{
-            height: s.props.h,
-            width: s.props.w,
-            pointerEvents: "all",
-            background: "#2C3439",
-            borderRadius: "16px",
-            padding: "8px 14px",
-          }}
-        >
-          <h1 style={{ fontSize: "15px" }}>{s.props.content}</h1>
-          <p style={{ fontSize: "14px", color: "#369DFD" }}>
-            {s.props.extrainfo}
-          </p>
-        </div>
-      </HTMLContainer>
-    );
-  }
-
-  indicator(shape: ITextCardShape) {
-    return <rect width={shape.props.w} height={shape.props.h} />;
-  }
-}
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/twitterCard.tsx b/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/twitterCard.tsx
deleted file mode 100644
index c5582a98..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/twitterCard.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape, toDomPrecision } from "tldraw";
-
-type ITwitterCardShape = TLBaseShape<
-  "Twittercard",
-  { w: number; h: number; url: string }
->;
-
-export class twitterCardUtil extends BaseBoxShapeUtil<ITwitterCardShape> {
-  static override type = "Twittercard" as const;
-
-  getDefaultProps(): ITwitterCardShape["props"] {
-    return {
-      w: 500,
-      h: 550,
-      url: "",
-    };
-  }
-
-  component(s: ITwitterCardShape) {
-    return (
-      <HTMLContainer className="flex h-full w-full items-center justify-center">
-        <TwitterPost
-          url={s.props.url}
-          width={s.props.w}
-          isInteractive={false}
-          height={s.props.h}
-        />
-      </HTMLContainer>
-    );
-  }
-
-  indicator(shape: ITwitterCardShape) {
-    return <rect width={shape.props.w} height={shape.props.h} />;
-  }
-}
-
-function TwitterPost({
-  isInteractive,
-  width,
-  height,
-  url,
-}: {
-  isInteractive: boolean;
-  width: number;
-  height: number;
-  url: string;
-}) {
-  const link = (() => {
-    try {
-      const urlObj = new URL(url);
-      const path = urlObj.pathname;
-      return path;
-    } catch (error) {
-      console.error("Invalid URL", error);
-      return null;
-    }
-  })();
-
-  return (
-    <iframe
-      className="tl-embed"
-      draggable={false}
-      width={toDomPrecision(width)}
-      height={toDomPrecision(height)}
-      seamless
-      referrerPolicy="no-referrer-when-downgrade"
-      style={{
-        pointerEvents: isInteractive ? "all" : "none",
-        zIndex: isInteractive ? "" : "-1",
-      }}
-      srcDoc={`
-        <html lang="en">
-        <head>
-          <meta charset="UTF-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <title>Document</title>
-        </head>
-        <body>
-          <blockquote data-theme="dark" class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-        </body>
-        </html>`}
-    />
-  );
-}
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/context.ts b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/context.ts
deleted file mode 100644
index 4e6ecd1c..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/context.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export interface DragContextType {
-  isDraggingOver: boolean;
-  setIsDraggingOver: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const DragContext = createContext<DragContextType | undefined>(undefined);
-
-export const useDragContext = () => {
-  const context = useContext(DragContext);
-  if (context === undefined) {
-    throw new Error('useAppContext must be used within an AppProvider');
-  }
-  return context;
-};
-
-export default DragContext;
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createAssetUrl.ts b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createAssetUrl.ts
deleted file mode 100644
index 05c2baea..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createAssetUrl.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import {
-  AssetRecordType,
-  TLAsset,
-  getHashForString,
-  truncateStringWithEllipsis,
-} from "tldraw";
-// import { BOOKMARK_ENDPOINT } from './config'
-
-interface ResponseBody {
-  title?: string;
-  description?: string;
-  image?: string;
-}
-
-export async function createAssetFromUrl({
-  url,
-}: {
-  type: "url";
-  url: string;
-}): Promise<TLAsset> {
-  // try {
-  // 	// First, try to get the meta data from our endpoint
-  // 	const meta = (await (
-  // 		await fetch(BOOKMARK_ENDPOINT, {
-  // 			method: 'POST',
-  // 			headers: {
-  // 				'Content-Type': 'application/json',
-  // 			},
-  // 			body: JSON.stringify({
-  // 				url,
-  // 			}),
-  // 		})
-  // 	).json()) as ResponseBody
-
-  // 	return {
-  // 		id: AssetRecordType.createId(getHashForString(url)),
-  // 		typeName: 'asset',
-  // 		type: 'bookmark',
-  // 		props: {
-  // 			src: url,
-  // 			description: meta.description ?? '',
-  // 			image: meta.image ?? '',
-  // 			title: meta.title ?? truncateStringWithEllipsis(url, 32),
-  // 		},
-  // 		meta: {},
-  // 	}
-  // } catch (error) {
-  // Otherwise, fallback to fetching data from the url
-
-  let meta: { image: string; title: string; description: string };
-
-  try {
-    const resp = await fetch(url, { method: "GET", mode: "no-cors" });
-    const html = await resp.text();
-    const doc = new DOMParser().parseFromString(html, "text/html");
-    meta = {
-      image:
-        doc.head
-          .querySelector('meta[property="og:image"]')
-          ?.getAttribute("content") ?? "",
-      title:
-        doc.head
-          .querySelector('meta[property="og:title"]')
-          ?.getAttribute("content") ?? truncateStringWithEllipsis(url, 32),
-      description:
-        doc.head
-          .querySelector('meta[property="og:description"]')
-          ?.getAttribute("content") ?? "",
-    };
-  } catch (error) {
-    console.error(error);
-    meta = {
-      image: "",
-      title: truncateStringWithEllipsis(url, 32),
-      description: "",
-    };
-  }
-
-  // Create the bookmark asset from the meta
-  return {
-    id: AssetRecordType.createId(getHashForString(url)),
-    typeName: "asset",
-    type: "bookmark",
-    props: {
-      src: url,
-      image: meta.image,
-      title: meta.title,
-      description: meta.description,
-      favicon: meta.image,
-    },
-    meta: {},
-  };
-  // }
-}
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createEmbeds.ts b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createEmbeds.ts
deleted file mode 100644
index b3a7fb52..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createEmbeds.ts
+++ /dev/null
@@ -1,236 +0,0 @@
-// @ts-nocheck TODO: A LOT OF TS ERRORS HERE
-
-import {
-  AssetRecordType,
-  Editor,
-  TLAsset,
-  TLAssetId,
-  TLBookmarkShape,
-  TLExternalContentSource,
-  TLShapePartial,
-  Vec,
-  VecLike,
-  createShapeId,
-  getEmbedInfo,
-  getHashForString,
-} from "tldraw";
-
-export default async function createEmbedsFromUrl({
-  url,
-  point,
-  sources,
-  editor,
-}: {
-  url: string;
-  point?: VecLike | undefined;
-  sources?: TLExternalContentSource[] | undefined;
-  editor: Editor;
-}) {
-  const position =
-    point ??
-    (editor.inputs.shiftKey
-      ? editor.inputs.currentPagePoint
-      : editor.getViewportPageBounds().center);
-
-  if (url?.includes("x.com") || url?.includes("twitter.com")) {
-    return editor.createShape({
-      type: "Twittercard",
-      x: position.x - 250,
-      y: position.y - 150,
-      props: { url: url },
-    });
-  }
-
-  // try to paste as an embed first
-  const embedInfo = getEmbedInfo(url);
-
-  if (embedInfo) {
-    return editor.putExternalContent({
-      type: "embed",
-      url: embedInfo.url,
-      point,
-      embed: embedInfo.definition,
-    });
-  }
-
-  const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url));
-  const shape = createEmptyBookmarkShape(editor, url, position);
-
-  // Use an existing asset if we have one, or else else create a new one
-  let asset = editor.getAsset(assetId) as TLAsset;
-  let shouldAlsoCreateAsset = false;
-  if (!asset) {
-    shouldAlsoCreateAsset = true;
-    try {
-      const bookmarkAsset = await editor.getAssetForExternalContent({
-        type: "url",
-        url,
-      });
-      const fetchWebsite: {
-        title?: string;
-        image?: string;
-        description?: string;
-      } = await (
-        await fetch(`/api/unfirlsite?website=${url}`, {
-          method: "POST",
-        })
-      ).json();
-      if (bookmarkAsset) {
-        if (fetchWebsite.title) bookmarkAsset.props.title = fetchWebsite.title;
-        if (fetchWebsite.image) bookmarkAsset.props.image = fetchWebsite.image;
-        if (fetchWebsite.description)
-          bookmarkAsset.props.description = fetchWebsite.description;
-      }
-      if (!bookmarkAsset) throw Error("Could not create an asset");
-      asset = bookmarkAsset;
-    } catch (e) {
-      console.log(e);
-      return;
-    }
-  }
-
-  editor.batch(() => {
-    if (shouldAlsoCreateAsset) {
-      editor.createAssets([asset]);
-    }
-
-    editor.updateShapes([
-      {
-        id: shape.id,
-        type: shape.type,
-        props: {
-          assetId: asset.id,
-        },
-      },
-    ]);
-  });
-}
-
-function isURL(str: string) {
-  try {
-    new URL(str);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function formatTextToRatio(text: string) {
-  const totalWidth = text.length;
-  const maxLineWidth = Math.floor(totalWidth / 10);
-
-  const words = text.split(" ");
-  let lines = [];
-  let currentLine = "";
-
-  words.forEach((word) => {
-    if ((currentLine + word).length <= maxLineWidth) {
-      currentLine += (currentLine ? " " : "") + word;
-    } else {
-      lines.push(currentLine);
-      currentLine = word;
-    }
-  });
-  if (currentLine) {
-    lines.push(currentLine);
-  }
-  return { height: (lines.length + 1) * 18, width: maxLineWidth * 10 };
-}
-
-export function handleExternalDroppedContent({
-  text,
-  editor,
-}: {
-  text: string;
-  editor: Editor;
-}) {
-  const position = editor.inputs.shiftKey
-    ? editor.inputs.currentPagePoint
-    : editor.getViewportPageBounds().center;
-
-  if (isURL(text)) {
-    createEmbedsFromUrl({ editor, url: text });
-  } else {
-    // editor.createShape({
-    //   type: "text",
-    //   x: position.x - 75,
-    //   y: position.y - 75,
-    //   props: {
-    //     text: text,
-    //     size: "s",
-    //     textAlign: "start",
-    //   },
-    // });
-    const { height, width } = formatTextToRatio(text);
-    editor.createShape({
-      type: "Textcard",
-      x: position.x - width / 2,
-      y: position.y - height / 2,
-      props: {
-        content: text,
-        extrainfo: "https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a",
-        w: width,
-        h: height,
-      },
-    });
-  }
-}
-
-function centerSelectionAroundPoint(editor: Editor, position: VecLike) {
-  // Re-position shapes so that the center of the group is at the provided point
-  const viewportPageBounds = editor.getViewportPageBounds();
-  let selectionPageBounds = editor.getSelectionPageBounds();
-
-  if (selectionPageBounds) {
-    const offset = selectionPageBounds!.center.sub(position);
-
-    editor.updateShapes(
-      editor.getSelectedShapes().map((shape) => {
-        const localRotation = editor
-          .getShapeParentTransform(shape)
-          .decompose().rotation;
-        const localDelta = Vec.Rot(offset, -localRotation);
-        return {
-          id: shape.id,
-          type: shape.type,
-          x: shape.x! - localDelta.x,
-          y: shape.y! - localDelta.y,
-        };
-      }),
-    );
-  }
-
-  // Zoom out to fit the shapes, if necessary
-  selectionPageBounds = editor.getSelectionPageBounds();
-  if (
-    selectionPageBounds &&
-    !viewportPageBounds.contains(selectionPageBounds)
-  ) {
-    editor.zoomToSelection();
-  }
-}
-
-export function createEmptyBookmarkShape(
-  editor: Editor,
-  url: string,
-  position: VecLike,
-): TLBookmarkShape {
-  const partial: TLShapePartial = {
-    id: createShapeId(),
-    type: "bookmark",
-    x: position.x - 150,
-    y: position.y - 160,
-    opacity: 1,
-    props: {
-      assetId: null,
-      url,
-    },
-  };
-
-  editor.batch(() => {
-    editor.createShapes([partial]).select(partial.id);
-    centerSelectionAroundPoint(editor, position);
-  });
-
-  return editor.getShape(partial.id) as TLBookmarkShape;
-}
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts b/apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts
deleted file mode 100644
index ee4dc22f..00000000
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createTLStore, defaultShapeUtils, loadSnapshot } from "tldraw";
-import { twitterCardUtil } from "../(components)/twitterCard";
-import { textCardUtil } from "../(components)/textCard";
-import { getCanvasData } from "@/app/actions/fetchers";
-export async function loadRemoteSnapshot(id:string) {
-  const snapshot = await getCanvasData(id);
-
-  const newStore = createTLStore({
-    shapeUtils: [...defaultShapeUtils, twitterCardUtil, textCardUtil],
-  });
-  loadSnapshot(newStore, snapshot);
-  return newStore;
-}
diff --git a/apps/web/app/api/canvas/route.ts b/apps/web/app/api/canvas/route.ts
new file mode 100644
index 00000000..f6af5109
--- /dev/null
+++ b/apps/web/app/api/canvas/route.ts
@@ -0,0 +1,10 @@
+export function GET(req: Request){
+  const id = new URL(req.url).searchParams.get("id");
+  return new Response(JSON.stringify(id));
+} 
+
+export async function POST(req: Request){
+  const body = await req.json();
+  const id = new URL(req.url).searchParams.get("id");
+  return new Response(JSON.stringify({body, id}));
+}
\ No newline at end of file
diff --git a/apps/web/components/canvas/canvas.tsx b/apps/web/components/canvas/canvas.tsx
new file mode 100644
index 00000000..1fbff4b8
--- /dev/null
+++ b/apps/web/components/canvas/canvas.tsx
@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Editor, Tldraw, setUserPreferences, TLStoreWithStatus } from "tldraw";
+import { createAssetFromUrl } from "../../lib/createAssetUrl";
+import "tldraw/tldraw.css";
+import { components } from "./enabledComp";
+import { twitterCardUtil } from "./twitterCard";
+import { textCardUtil } from "./textCard";
+import createEmbedsFromUrl from "../../lib/createEmbeds";
+import { loadRemoteSnapshot } from "../../lib/loadSnap";
+import { SaveStatus } from "./savesnap";
+import { getAssetUrls } from "@tldraw/assets/selfHosted";
+import { memo } from "react";
+import DragContext from "../../lib/context";
+import DropZone from "./dropComponent";
+import { useRect } from "./resizableLayout";
+// import "./canvas.css";
+
+export const Canvas = memo(() => {
+  const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
+  const Dragref = useRef<HTMLDivElement | null>(null);
+
+  const handleDragOver = (event: any) => {
+    event.preventDefault();
+    setIsDraggingOver(true);
+    console.log("entere");
+  };
+
+  useEffect(() => {
+    const divElement = Dragref.current;
+    if (divElement) {
+      divElement.addEventListener("dragover", handleDragOver);
+    }
+    return () => {
+      if (divElement) {
+        divElement.removeEventListener("dragover", handleDragOver);
+      }
+    };
+  }, []);
+
+  return (
+    <DragContext.Provider value={{ isDraggingOver, setIsDraggingOver }}>
+      <div ref={Dragref} className="w-full h-full">
+        <TldrawComponent />
+      </div>
+    </DragContext.Provider>
+  );
+});
+
+const TldrawComponent = memo(() => {
+  const { id } = useRect();
+  const [storeWithStatus, setStoreWithStatus] = useState<TLStoreWithStatus>({
+    status: "loading",
+  });
+  useEffect(() => {
+    const fetchStore = async () => {
+      const store = await loadRemoteSnapshot(id);
+
+      setStoreWithStatus({
+        store: store,
+        status: "not-synced",
+      });
+    };
+
+    fetchStore();
+  }, []);
+
+  const handleMount = useCallback((editor: Editor) => {
+    (window as any).app = editor;
+    (window as any).editor = editor;
+    editor.registerExternalAssetHandler("url", createAssetFromUrl);
+    editor.registerExternalContentHandler("url", ({ url, point, sources }) => {
+      createEmbedsFromUrl({ url, point, sources, editor });
+    });
+  }, []);
+
+  setUserPreferences({ id: "supermemory", colorScheme: "dark" });
+
+  const assetUrls = getAssetUrls();
+  return (
+    <div className="w-full h-full">
+      <Tldraw
+        className="relative"
+        assetUrls={assetUrls}
+        components={components}
+        store={storeWithStatus}
+        shapeUtils={[twitterCardUtil, textCardUtil]}
+        onMount={handleMount}
+      >
+        <div className="absolute left-1/2 top-0 z-[1000000] flex -translate-x-1/2 gap-2 bg-[#2C3439] text-[#B3BCC5]">
+          <SaveStatus id={id} />
+        </div>
+        <DropZone />
+      </Tldraw>
+    </div>
+  );
+});
diff --git a/apps/web/components/canvas/draggableComponent.tsx b/apps/web/components/canvas/draggableComponent.tsx
new file mode 100644
index 00000000..8c39c732
--- /dev/null
+++ b/apps/web/components/canvas/draggableComponent.tsx
@@ -0,0 +1,67 @@
+import Image from "next/image";
+import { useRef, useState } from "react";
+
+interface DraggableComponentsProps {
+  content: string;
+  extraInfo?: string;
+  iconAlt: string;
+}
+
+export default function DraggableComponentsContainer({
+  content,
+}: {
+  content: DraggableComponentsProps[];
+}) {
+  return (
+    <div className="flex flex-col gap-10">
+      {content.map((i) => {
+        return (
+          <DraggableComponents
+            content={i.content}
+            iconAlt={i.iconAlt}
+            extraInfo={i.extraInfo}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function DraggableComponents({
+  content,
+  extraInfo,
+  iconAlt,
+}: DraggableComponentsProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    setIsDragging(true);
+    if (containerRef.current) {
+      // Serialize the children as a string for dataTransfer
+      const childrenHtml = containerRef.current.innerHTML;
+      event.dataTransfer.setData("text/html", childrenHtml);
+    }
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      draggable
+      className={`flex gap-4 px-1 rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
+    >
+      <div className="flex flex-col gap-2">
+        <div>
+          <h1 className="line-clamp-3">{content}</h1>
+        </div>
+        <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/canvas/dropComponent.tsx b/apps/web/components/canvas/dropComponent.tsx
new file mode 100644
index 00000000..5ea383a1
--- /dev/null
+++ b/apps/web/components/canvas/dropComponent.tsx
@@ -0,0 +1,206 @@
+import React, { useRef, useCallback, useEffect, useContext } from "react";
+import { useEditor } from "tldraw";
+import DragContext, {
+  DragContextType,
+  useDragContext,
+} from "../../lib/context";
+import { handleExternalDroppedContent } from "../../lib/createEmbeds";
+
+const stripHtmlTags = (html: string): string => {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  return div.textContent || div.innerText || "";
+};
+
+function formatTextToRatio(text: string) {
+  const totalWidth = text.length;
+  const maxLineWidth = Math.floor(totalWidth / 4);
+
+  const words = text.split(" ");
+  let lines = [];
+  let currentLine = "";
+
+  words.forEach((word) => {
+    // Check if adding the next word exceeds the maximum line width
+    if ((currentLine + word).length <= maxLineWidth) {
+      currentLine += (currentLine ? " " : "") + word;
+    } else {
+      // If the current line is full, push it to new line
+      lines.push(currentLine);
+      currentLine = word;
+    }
+  });
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return lines.join("\n");
+}
+
+function DropZone() {
+  const dropRef = useRef<HTMLDivElement | null>(null);
+  const { isDraggingOver, setIsDraggingOver } = useDragContext();
+
+  const editor = useEditor();
+
+  const handleDragLeave = () => {
+    setIsDraggingOver(false);
+    console.log("leaver");
+  };
+
+  useEffect(() => {
+    setInterval(() => {
+      editor.selectAll();
+      const shapes = editor.getSelectedShapes();
+      const text = shapes.filter((s) => s.type === "text");
+      console.log("hrhh", text);
+    }, 5000);
+  }, []);
+
+  const handleDrop = useCallback((event: DragEvent) => {
+    event.preventDefault();
+    setIsDraggingOver(false);
+    const dt = event.dataTransfer;
+    if (!dt) {
+      return;
+    }
+    const items = dt.items;
+
+    for (let i = 0; i < items.length; i++) {
+      if (items[i]!.kind === "file" && items[i]!.type.startsWith("image/")) {
+        const file = items[i]!.getAsFile();
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            if (e.target) {
+              // setDroppedImage(e.target.result as string);
+            }
+          };
+          reader.readAsDataURL(file);
+        }
+      } else if (items[i]!.kind === "string") {
+        items[i]!.getAsString((data) => {
+          const cleanText = stripHtmlTags(data);
+          const onethree = formatTextToRatio(cleanText);
+          handleExternalDroppedContent({ editor, text: onethree });
+        });
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const divElement = dropRef.current;
+    if (divElement) {
+      divElement.addEventListener("drop", handleDrop);
+      divElement.addEventListener("dragleave", handleDragLeave);
+    }
+    return () => {
+      if (divElement) {
+        divElement.removeEventListener("drop", handleDrop);
+        divElement.addEventListener("dragleave", handleDragLeave);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={`h-full flex justify-center items-center w-full absolute top-0 left-0 z-[100000] pointer-events-none  ${isDraggingOver && "bg-[#2c3439ad]  pointer-events-auto"}`}
+      ref={dropRef}
+    >
+      {isDraggingOver && (
+        <>
+          <div className="absolute top-4 left-8">
+            <TopRight />
+          </div>
+          <div className="absolute top-4 right-8">
+            <TopLeft />
+          </div>
+          <div className="absolute bottom-4 left-8">
+            <BottomLeft />
+          </div>
+          <div className="absolute bottom-4 right-8">
+            <BottomRight />
+          </div>
+          <h2 className="text-2xl">Drop here to add Content on Canvas</h2>
+        </>
+      )}
+    </div>
+  );
+}
+
+function TopRight() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M44 4H12C7.58172 4 4 7.58172 4 12V44"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+function TopLeft() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 4H36C40.4183 4 44 7.58172 44 12V44"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+function BottomLeft() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M44 44H12C7.58172 44 4 40.4183 4 36V4"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+function BottomRight() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 44H36C40.4183 44 44 40.4183 44 36V4"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+export default DropZone;
diff --git a/apps/web/components/canvas/enabledComp copy.tsx b/apps/web/components/canvas/enabledComp copy.tsx
new file mode 100644
index 00000000..85811b82
--- /dev/null
+++ b/apps/web/components/canvas/enabledComp copy.tsx	
@@ -0,0 +1,22 @@
+import { TLUiComponents } from "tldraw";
+
+export const components: Partial<TLUiComponents> = {
+  ActionsMenu: null,
+  MainMenu: null,
+  QuickActions: null,
+  TopPanel: null,
+  DebugPanel: null,
+  DebugMenu: null,
+  PageMenu: null,
+  // Minimap: null,
+  // ContextMenu: null,
+  // HelpMenu: null,
+  // ZoomMenu: null,
+  // StylePanel: null,
+  // NavigationPanel: null,
+  // Toolbar: null,
+  // KeyboardShortcutsDialog: null,
+  // HelperButtons: null,
+  // SharePanel: null,
+  // MenuPanel: null,
+};
\ No newline at end of file
diff --git a/apps/web/components/canvas/enabledComp.tsx b/apps/web/components/canvas/enabledComp.tsx
new file mode 100644
index 00000000..85811b82
--- /dev/null
+++ b/apps/web/components/canvas/enabledComp.tsx
@@ -0,0 +1,22 @@
+import { TLUiComponents } from "tldraw";
+
+export const components: Partial<TLUiComponents> = {
+  ActionsMenu: null,
+  MainMenu: null,
+  QuickActions: null,
+  TopPanel: null,
+  DebugPanel: null,
+  DebugMenu: null,
+  PageMenu: null,
+  // Minimap: null,
+  // ContextMenu: null,
+  // HelpMenu: null,
+  // ZoomMenu: null,
+  // StylePanel: null,
+  // NavigationPanel: null,
+  // Toolbar: null,
+  // KeyboardShortcutsDialog: null,
+  // HelperButtons: null,
+  // SharePanel: null,
+  // MenuPanel: null,
+};
\ No newline at end of file
diff --git a/apps/web/components/canvas/resizableLayout.tsx b/apps/web/components/canvas/resizableLayout.tsx
new file mode 100644
index 00000000..5ba6780b
--- /dev/null
+++ b/apps/web/components/canvas/resizableLayout.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { Canvas } from "./canvas";
+import React, { createContext, useContext, useState } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { SettingsIcon, DragIcon } from "@repo/ui/icons";
+import DraggableComponentsContainer from "./draggableComponent";
+import Image from "next/image";
+import { Label } from "@repo/ui/shadcn/label";
+
+interface RectContextType {
+  fullScreen: boolean;
+  setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
+  visible: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  id: string
+}
+
+const RectContext = createContext<RectContextType | undefined>(undefined);
+
+export const RectProvider = ({ id, children }: {id: string, children: React.ReactNode}) => {
+  const [fullScreen, setFullScreen] = useState(false);
+  const [visible, setVisible] = useState(true);
+
+  const value = {
+    id,
+    fullScreen,
+    setFullScreen,
+    visible,
+    setVisible,
+  };
+
+  return <RectContext.Provider value={value}>{children}</RectContext.Provider>;
+};
+
+export const useRect = () => {
+  const context = useContext(RectContext);
+  if (context === undefined) {
+    throw new Error('useRect must be used within a RectProvider');
+  }
+  return context;
+};
+
+
+export function ResizaleLayout() {
+  const { setVisible, fullScreen, setFullScreen } = useRect();
+
+  return (
+    <div
+      className={`h-screen w-full ${!fullScreen ? "px-4 py-6" : "bg-[#1F2428]"} transition-all`}
+    >
+      <PanelGroup
+        onLayout={(l) => {
+          l[0]! < 20 ? setVisible(false) : setVisible(true);
+        }}
+        className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`}
+        direction="horizontal"
+      >
+        <Panel
+          onExpand={() => {
+            setTimeout(() => setFullScreen(false), 50);
+          }}
+          onCollapse={() => {
+            setTimeout(() => setFullScreen(true), 50);
+          }}
+          defaultSize={30}
+          collapsible={true}
+        >
+          <SidePanelContainer />
+        </Panel>
+        <PanelResizeHandle
+          className={`relative flex items-center transition-all justify-center ${!fullScreen && "px-1"}`}
+        >
+          <DragIconContainer />
+        </PanelResizeHandle>
+        <Panel className="relative" defaultSize={70} minSize={60}>
+          <CanvasContainer />
+        </Panel>
+      </PanelGroup>
+    </div>
+  );
+}
+
+function DragIconContainer() {
+  const { fullScreen} = useRect();
+  return (
+    <div
+      className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}
+    >
+      <Image src={DragIcon} alt="drag-icon" />
+    </div>
+  );
+}
+
+function CanvasContainer() {
+  const { fullScreen} = useRect();
+  return (
+    <div
+      className={`absolute overflow-hidden transition-all inset-0 ${fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}
+    >
+      <Canvas />
+    </div>
+  );
+}
+
+function SidePanelContainer() {
+  const { fullScreen, visible} = useRect();
+  return (
+    <div
+      className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen" : "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}
+    >
+      <div className="flex items-center justify-between bg-[#2C3439] px-4 py-2 text-lg font-medium text-[#989EA4]">
+        Change Filters
+        <Image src={SettingsIcon} alt="setting-icon" />
+      </div>
+      {visible ? (
+        <SidePanel />
+      ) : (
+        <h1 className="text-center py-10 text-xl">Need more space to show!</h1>
+      )}
+    </div>
+  );
+}
+
+function SidePanel() {
+  const [value, setValue] = useState("");
+  // const [dragAsText, setDragAsText] = useState(false);
+  return (
+    <>
+      <div className="px-3 py-5">
+        <input
+          placeholder="search..."
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+          value={value}
+          // rows={1}
+          className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
+        />
+      </div>
+      <div className="flex items-center justify-end px-3 py-4">
+        {/* <Switch
+          className="bg-[#151515] data-[state=unchecked]:bg-red-400 data-[state=checked]:bg-blue-400"
+          onCheckedChange={(e) => setDragAsText(e)}
+          id="drag-text-mode"
+        /> */}
+        <Label htmlFor="drag-text-mode">Drag as Text</Label>
+      </div>
+      <DraggableComponentsContainer content={content} />
+    </>
+  );
+}
+
+
+const content = [
+  {
+    content:
+      "Regional growth patterns diverge, with strong performance in the United States and several emerging markets, contrasted by weaker prospects in many advanced economies, particularly in Europe (World Economic Forum) (OECD). The rapid adoption of artificial intelligence (AI) is expected to drive productivity growth, especially in advanced economies, potentially mitigating labor shortages and boosting income levels in emerging markets (World Economic Forum) (OECD). However, ongoing geopolitical tensions and economic fragmentation are likely to maintain a level of uncertainty and volatility in the global economy (World Economic Forum.",
+    iconAlt: "Autocomplete",
+    extraInfo:
+      "Page Url: https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a",
+  },
+  {
+    content:
+      "As of mid-2024, the global economy is experiencing modest growth with significant regional disparities. Global GDP growth is projected to be around 3.1% in 2024, rising slightly to 3.2% in 2025. This performance, although below the pre-pandemic average, reflects resilience despite various economic pressures, including tight monetary conditions and geopolitical tensions (IMF)(OECD) Inflation is moderating faster than expected, with global headline inflation projected to fall to 5.8% in 2024 and 4.4% in 2025, contributing to improving real incomes and positive trade growth (IMF) (OECD)",
+    iconAlt: "Autocomplete",
+    extraInfo:
+      "Page Url: https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia",
+  },
+];
diff --git a/apps/web/components/canvas/savesnap.tsx b/apps/web/components/canvas/savesnap.tsx
new file mode 100644
index 00000000..45fc7e9d
--- /dev/null
+++ b/apps/web/components/canvas/savesnap.tsx
@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from "react";
+import { debounce, getSnapshot, useEditor } from "tldraw";
+import { SaveCanvas } from "@/app/actions/doers";
+
+export function SaveStatus({id}: {id:string}) {
+  const [save, setSave] = useState("saved!");
+  const editor = useEditor();
+  
+
+  const debouncedSave = useCallback(
+    debounce(async () => {
+      const snapshot = getSnapshot(editor.store)
+      SaveCanvas({id, data: JSON.stringify(snapshot)})
+      
+      setSave("saved!");
+    }, 3000),
+    [editor], // Dependency array ensures the function is not recreated on every render
+  );
+
+  useEffect(() => {
+    const unsubscribe = editor.store.listen(
+      () => {
+        setSave("saving...");
+        debouncedSave();
+      },
+      { scope: "document", source: "user" },
+    );
+
+    return () => unsubscribe(); // Cleanup on unmount
+  }, [editor, debouncedSave]);
+
+  return <button>{save}</button>;
+}
\ No newline at end of file
diff --git a/apps/web/components/canvas/textCard.tsx b/apps/web/components/canvas/textCard.tsx
new file mode 100644
index 00000000..b24dae52
--- /dev/null
+++ b/apps/web/components/canvas/textCard.tsx
@@ -0,0 +1,45 @@
+import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape } from "tldraw";
+
+type ITextCardShape = TLBaseShape<
+  "Textcard",
+  { w: number; h: number; content: string; extrainfo: string }
+>;
+
+export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> {
+  static override type = "Textcard" as const;
+
+  getDefaultProps(): ITextCardShape["props"] {
+    return {
+      w: 100,
+      h: 50,
+      content: "",
+      extrainfo: "",
+    };
+  }
+
+  component(s: ITextCardShape) {
+    return (
+      <HTMLContainer className="flex h-full w-full items-center justify-center">
+        <div
+          style={{
+            height: s.props.h,
+            width: s.props.w,
+            pointerEvents: "all",
+            background: "#2C3439",
+            borderRadius: "16px",
+            padding: "8px 14px",
+          }}
+        >
+          <h1 style={{ fontSize: "15px" }}>{s.props.content}</h1>
+          <p style={{ fontSize: "14px", color: "#369DFD" }}>
+            {s.props.extrainfo}
+          </p>
+        </div>
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: ITextCardShape) {
+    return <rect width={shape.props.w} height={shape.props.h} />;
+  }
+}
diff --git a/apps/web/components/canvas/twitterCard.tsx b/apps/web/components/canvas/twitterCard.tsx
new file mode 100644
index 00000000..c5582a98
--- /dev/null
+++ b/apps/web/components/canvas/twitterCard.tsx
@@ -0,0 +1,84 @@
+import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape, toDomPrecision } from "tldraw";
+
+type ITwitterCardShape = TLBaseShape<
+  "Twittercard",
+  { w: number; h: number; url: string }
+>;
+
+export class twitterCardUtil extends BaseBoxShapeUtil<ITwitterCardShape> {
+  static override type = "Twittercard" as const;
+
+  getDefaultProps(): ITwitterCardShape["props"] {
+    return {
+      w: 500,
+      h: 550,
+      url: "",
+    };
+  }
+
+  component(s: ITwitterCardShape) {
+    return (
+      <HTMLContainer className="flex h-full w-full items-center justify-center">
+        <TwitterPost
+          url={s.props.url}
+          width={s.props.w}
+          isInteractive={false}
+          height={s.props.h}
+        />
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: ITwitterCardShape) {
+    return <rect width={shape.props.w} height={shape.props.h} />;
+  }
+}
+
+function TwitterPost({
+  isInteractive,
+  width,
+  height,
+  url,
+}: {
+  isInteractive: boolean;
+  width: number;
+  height: number;
+  url: string;
+}) {
+  const link = (() => {
+    try {
+      const urlObj = new URL(url);
+      const path = urlObj.pathname;
+      return path;
+    } catch (error) {
+      console.error("Invalid URL", error);
+      return null;
+    }
+  })();
+
+  return (
+    <iframe
+      className="tl-embed"
+      draggable={false}
+      width={toDomPrecision(width)}
+      height={toDomPrecision(height)}
+      seamless
+      referrerPolicy="no-referrer-when-downgrade"
+      style={{
+        pointerEvents: isInteractive ? "all" : "none",
+        zIndex: isInteractive ? "" : "-1",
+      }}
+      srcDoc={`
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Document</title>
+        </head>
+        <body>
+          <blockquote data-theme="dark" class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+        </body>
+        </html>`}
+    />
+  );
+}
diff --git a/apps/web/lib/context.ts b/apps/web/lib/context.ts
new file mode 100644
index 00000000..4e6ecd1c
--- /dev/null
+++ b/apps/web/lib/context.ts
@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+export interface DragContextType {
+  isDraggingOver: boolean;
+  setIsDraggingOver: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const DragContext = createContext<DragContextType | undefined>(undefined);
+
+export const useDragContext = () => {
+  const context = useContext(DragContext);
+  if (context === undefined) {
+    throw new Error('useAppContext must be used within an AppProvider');
+  }
+  return context;
+};
+
+export default DragContext;
\ No newline at end of file
diff --git a/apps/web/lib/createAssetUrl.ts b/apps/web/lib/createAssetUrl.ts
new file mode 100644
index 00000000..05c2baea
--- /dev/null
+++ b/apps/web/lib/createAssetUrl.ts
@@ -0,0 +1,94 @@
+import {
+  AssetRecordType,
+  TLAsset,
+  getHashForString,
+  truncateStringWithEllipsis,
+} from "tldraw";
+// import { BOOKMARK_ENDPOINT } from './config'
+
+interface ResponseBody {
+  title?: string;
+  description?: string;
+  image?: string;
+}
+
+export async function createAssetFromUrl({
+  url,
+}: {
+  type: "url";
+  url: string;
+}): Promise<TLAsset> {
+  // try {
+  // 	// First, try to get the meta data from our endpoint
+  // 	const meta = (await (
+  // 		await fetch(BOOKMARK_ENDPOINT, {
+  // 			method: 'POST',
+  // 			headers: {
+  // 				'Content-Type': 'application/json',
+  // 			},
+  // 			body: JSON.stringify({
+  // 				url,
+  // 			}),
+  // 		})
+  // 	).json()) as ResponseBody
+
+  // 	return {
+  // 		id: AssetRecordType.createId(getHashForString(url)),
+  // 		typeName: 'asset',
+  // 		type: 'bookmark',
+  // 		props: {
+  // 			src: url,
+  // 			description: meta.description ?? '',
+  // 			image: meta.image ?? '',
+  // 			title: meta.title ?? truncateStringWithEllipsis(url, 32),
+  // 		},
+  // 		meta: {},
+  // 	}
+  // } catch (error) {
+  // Otherwise, fallback to fetching data from the url
+
+  let meta: { image: string; title: string; description: string };
+
+  try {
+    const resp = await fetch(url, { method: "GET", mode: "no-cors" });
+    const html = await resp.text();
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    meta = {
+      image:
+        doc.head
+          .querySelector('meta[property="og:image"]')
+          ?.getAttribute("content") ?? "",
+      title:
+        doc.head
+          .querySelector('meta[property="og:title"]')
+          ?.getAttribute("content") ?? truncateStringWithEllipsis(url, 32),
+      description:
+        doc.head
+          .querySelector('meta[property="og:description"]')
+          ?.getAttribute("content") ?? "",
+    };
+  } catch (error) {
+    console.error(error);
+    meta = {
+      image: "",
+      title: truncateStringWithEllipsis(url, 32),
+      description: "",
+    };
+  }
+
+  // Create the bookmark asset from the meta
+  return {
+    id: AssetRecordType.createId(getHashForString(url)),
+    typeName: "asset",
+    type: "bookmark",
+    props: {
+      src: url,
+      image: meta.image,
+      title: meta.title,
+      description: meta.description,
+      favicon: meta.image,
+    },
+    meta: {},
+  };
+  // }
+}
diff --git a/apps/web/lib/createEmbeds.ts b/apps/web/lib/createEmbeds.ts
new file mode 100644
index 00000000..b3a7fb52
--- /dev/null
+++ b/apps/web/lib/createEmbeds.ts
@@ -0,0 +1,236 @@
+// @ts-nocheck TODO: A LOT OF TS ERRORS HERE
+
+import {
+  AssetRecordType,
+  Editor,
+  TLAsset,
+  TLAssetId,
+  TLBookmarkShape,
+  TLExternalContentSource,
+  TLShapePartial,
+  Vec,
+  VecLike,
+  createShapeId,
+  getEmbedInfo,
+  getHashForString,
+} from "tldraw";
+
+export default async function createEmbedsFromUrl({
+  url,
+  point,
+  sources,
+  editor,
+}: {
+  url: string;
+  point?: VecLike | undefined;
+  sources?: TLExternalContentSource[] | undefined;
+  editor: Editor;
+}) {
+  const position =
+    point ??
+    (editor.inputs.shiftKey
+      ? editor.inputs.currentPagePoint
+      : editor.getViewportPageBounds().center);
+
+  if (url?.includes("x.com") || url?.includes("twitter.com")) {
+    return editor.createShape({
+      type: "Twittercard",
+      x: position.x - 250,
+      y: position.y - 150,
+      props: { url: url },
+    });
+  }
+
+  // try to paste as an embed first
+  const embedInfo = getEmbedInfo(url);
+
+  if (embedInfo) {
+    return editor.putExternalContent({
+      type: "embed",
+      url: embedInfo.url,
+      point,
+      embed: embedInfo.definition,
+    });
+  }
+
+  const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url));
+  const shape = createEmptyBookmarkShape(editor, url, position);
+
+  // Use an existing asset if we have one, or else else create a new one
+  let asset = editor.getAsset(assetId) as TLAsset;
+  let shouldAlsoCreateAsset = false;
+  if (!asset) {
+    shouldAlsoCreateAsset = true;
+    try {
+      const bookmarkAsset = await editor.getAssetForExternalContent({
+        type: "url",
+        url,
+      });
+      const fetchWebsite: {
+        title?: string;
+        image?: string;
+        description?: string;
+      } = await (
+        await fetch(`/api/unfirlsite?website=${url}`, {
+          method: "POST",
+        })
+      ).json();
+      if (bookmarkAsset) {
+        if (fetchWebsite.title) bookmarkAsset.props.title = fetchWebsite.title;
+        if (fetchWebsite.image) bookmarkAsset.props.image = fetchWebsite.image;
+        if (fetchWebsite.description)
+          bookmarkAsset.props.description = fetchWebsite.description;
+      }
+      if (!bookmarkAsset) throw Error("Could not create an asset");
+      asset = bookmarkAsset;
+    } catch (e) {
+      console.log(e);
+      return;
+    }
+  }
+
+  editor.batch(() => {
+    if (shouldAlsoCreateAsset) {
+      editor.createAssets([asset]);
+    }
+
+    editor.updateShapes([
+      {
+        id: shape.id,
+        type: shape.type,
+        props: {
+          assetId: asset.id,
+        },
+      },
+    ]);
+  });
+}
+
+function isURL(str: string) {
+  try {
+    new URL(str);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function formatTextToRatio(text: string) {
+  const totalWidth = text.length;
+  const maxLineWidth = Math.floor(totalWidth / 10);
+
+  const words = text.split(" ");
+  let lines = [];
+  let currentLine = "";
+
+  words.forEach((word) => {
+    if ((currentLine + word).length <= maxLineWidth) {
+      currentLine += (currentLine ? " " : "") + word;
+    } else {
+      lines.push(currentLine);
+      currentLine = word;
+    }
+  });
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return { height: (lines.length + 1) * 18, width: maxLineWidth * 10 };
+}
+
+export function handleExternalDroppedContent({
+  text,
+  editor,
+}: {
+  text: string;
+  editor: Editor;
+}) {
+  const position = editor.inputs.shiftKey
+    ? editor.inputs.currentPagePoint
+    : editor.getViewportPageBounds().center;
+
+  if (isURL(text)) {
+    createEmbedsFromUrl({ editor, url: text });
+  } else {
+    // editor.createShape({
+    //   type: "text",
+    //   x: position.x - 75,
+    //   y: position.y - 75,
+    //   props: {
+    //     text: text,
+    //     size: "s",
+    //     textAlign: "start",
+    //   },
+    // });
+    const { height, width } = formatTextToRatio(text);
+    editor.createShape({
+      type: "Textcard",
+      x: position.x - width / 2,
+      y: position.y - height / 2,
+      props: {
+        content: text,
+        extrainfo: "https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a",
+        w: width,
+        h: height,
+      },
+    });
+  }
+}
+
+function centerSelectionAroundPoint(editor: Editor, position: VecLike) {
+  // Re-position shapes so that the center of the group is at the provided point
+  const viewportPageBounds = editor.getViewportPageBounds();
+  let selectionPageBounds = editor.getSelectionPageBounds();
+
+  if (selectionPageBounds) {
+    const offset = selectionPageBounds!.center.sub(position);
+
+    editor.updateShapes(
+      editor.getSelectedShapes().map((shape) => {
+        const localRotation = editor
+          .getShapeParentTransform(shape)
+          .decompose().rotation;
+        const localDelta = Vec.Rot(offset, -localRotation);
+        return {
+          id: shape.id,
+          type: shape.type,
+          x: shape.x! - localDelta.x,
+          y: shape.y! - localDelta.y,
+        };
+      }),
+    );
+  }
+
+  // Zoom out to fit the shapes, if necessary
+  selectionPageBounds = editor.getSelectionPageBounds();
+  if (
+    selectionPageBounds &&
+    !viewportPageBounds.contains(selectionPageBounds)
+  ) {
+    editor.zoomToSelection();
+  }
+}
+
+export function createEmptyBookmarkShape(
+  editor: Editor,
+  url: string,
+  position: VecLike,
+): TLBookmarkShape {
+  const partial: TLShapePartial = {
+    id: createShapeId(),
+    type: "bookmark",
+    x: position.x - 150,
+    y: position.y - 160,
+    opacity: 1,
+    props: {
+      assetId: null,
+      url,
+    },
+  };
+
+  editor.batch(() => {
+    editor.createShapes([partial]).select(partial.id);
+    centerSelectionAroundPoint(editor, position);
+  });
+
+  return editor.getShape(partial.id) as TLBookmarkShape;
+}
diff --git a/apps/web/lib/loadSnap.ts b/apps/web/lib/loadSnap.ts
new file mode 100644
index 00000000..fb4647f6
--- /dev/null
+++ b/apps/web/lib/loadSnap.ts
@@ -0,0 +1,14 @@
+import { createTLStore, defaultShapeUtils, loadSnapshot } from "tldraw";
+import { getCanvasData } from "../app/actions/fetchers";
+import { twitterCardUtil } from "../components/canvas/twitterCard";
+import { textCardUtil } from "../components/canvas/textCard";
+
+export async function loadRemoteSnapshot(id:string) {
+  const snapshot = await getCanvasData(id);
+
+  const newStore = createTLStore({
+    shapeUtils: [...defaultShapeUtils, twitterCardUtil, textCardUtil],
+  });
+  loadSnapshot(newStore, snapshot);
+  return newStore;
+}
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 34e0a9b0..6efa20e9 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -17,7 +17,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "../../packages/ui/"
+    "../../packages/ui/",
+    "./components"
   ],
   "exclude": ["node_modules/"]
 }
-- 
cgit v1.2.3


From 4d381dd00f95e174a6d771dafe71b8ed673f8fab Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Mon, 1 Jul 2024 06:08:17 +0530
Subject: canvas (3/3)

---
 apps/web/app/(canvas)/canvas/page.tsx             |   3 +-
 apps/web/app/(canvas)/canvas/search&create.tsx    |  22 +-
 apps/web/app/(canvas)/canvas/thinkPad.tsx         | 274 ++++++++++++++++++++--
 apps/web/app/(canvas)/canvasStyles.css            |   2 +-
 apps/web/app/(canvas)/layout.tsx                  |  13 +-
 apps/web/app/actions/doers.ts                     |  35 +++
 apps/web/app/actions/fetchers.ts                  |   2 +-
 apps/web/app/api/canvasai/route.ts                |  27 +++
 apps/web/components/canvas/draggableComponent.tsx |  28 +--
 apps/web/components/canvas/resizableLayout.tsx    |  57 +++--
 apps/web/components/canvas/savesnap.tsx           |   5 +-
 apps/web/lib/loadSnap.ts                          |   2 +-
 12 files changed, 397 insertions(+), 73 deletions(-)
 create mode 100644 apps/web/app/api/canvasai/route.ts

diff --git a/apps/web/app/(canvas)/canvas/page.tsx b/apps/web/app/(canvas)/canvas/page.tsx
index 815d0b93..d0824a20 100644
--- a/apps/web/app/(canvas)/canvas/page.tsx
+++ b/apps/web/app/(canvas)/canvas/page.tsx
@@ -6,10 +6,9 @@ import ThinkPads from "./thinkPads";
 async function page() {
   const canvas = await getCanvas();
   return (
-    <div className="h-screen w-full bg-[#171B1F] py-32 text-[#FFFFFF] ">
+    <div className="h-screen w-full py-32 text-[#FFFFFF] ">
       <div className="flex w-full flex-col items-center gap-8">
         <h1 className="text-4xl font-medium">Your thinkpads</h1>
-        <p>{JSON.stringify(canvas)}</p>
         <SearchandCreate />
         {
           // @ts-ignore
diff --git a/apps/web/app/(canvas)/canvas/search&create.tsx b/apps/web/app/(canvas)/canvas/search&create.tsx
index 3998dde7..a52a4cbe 100644
--- a/apps/web/app/(canvas)/canvas/search&create.tsx
+++ b/apps/web/app/(canvas)/canvas/search&create.tsx
@@ -1,9 +1,10 @@
-"use client"
+"use client";
 
 import { useFormStatus } from "react-dom";
 import Image from "next/image";
 import { SearchIcon } from "@repo/ui/icons";
 import { createCanvas } from "@/app/actions/doers";
+import { toast } from "sonner";
 
 export default function SearchandCreate() {
   return (
@@ -18,18 +19,27 @@ export default function SearchandCreate() {
         </button>
       </div>
 
-      <form action={createCanvas}>
-        <Button /> 
+      <form
+        action={async () => {
+          const res = await createCanvas();
+          if (!res.success){
+            toast.warning(res.message, {
+              style: {backgroundColor: "rgb(22 31 42 / 0.3)"}
+            });
+          }
+        }}
+      >
+        <Button />
       </form>
     </div>
   );
 }
 
 function Button() {
-  const {pending} = useFormStatus()
+  const { pending } = useFormStatus();
   return (
     <button className="rounded-xl bg-[#1F2428] px-5 py-3 text-xl text-[#B8C4C6]">
-      {pending? "Creating.." : "Create New"}
+      {pending ? "Creating.." : "Create New"}
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/app/(canvas)/canvas/thinkPad.tsx b/apps/web/app/(canvas)/canvas/thinkPad.tsx
index dad2de48..00a83fda 100644
--- a/apps/web/app/(canvas)/canvas/thinkPad.tsx
+++ b/apps/web/app/(canvas)/canvas/thinkPad.tsx
@@ -1,5 +1,13 @@
-import {motion} from "framer-motion"
+import { getCanvasData } from "@/app/actions/fetchers";
+import { AnimatePresence, motion } from "framer-motion";
 import Link from "next/link";
+import {
+  EllipsisHorizontalCircleIcon,
+  TrashIcon,
+  PencilSquareIcon,
+} from "@heroicons/react/24/outline";
+import { toast } from "sonner";
+import { Label } from "@repo/ui/shadcn/label";
 
 const childVariants = {
   hidden: { opacity: 0, y: 10, filter: "blur(2px)" },
@@ -10,27 +18,259 @@ export default function ThinkPad({
   title,
   description,
   image,
-  id
+  id,
 }: {
   title: string;
   description: string;
   image: string;
   id: string;
 }) {
+  const [deleted, setDeleted] = useState(false);
+  const [info, setInfo] = useState({ title, description });
   return (
-    <motion.div
-      variants={childVariants}
-      className="flex h-48  gap-4 rounded-2xl bg-[#1F2428] p-2"
-    >
-      <Link className="h-full min-w-[40%] rounded-xl bg-[#363f46]" href={`/canvas/${id}`}>
-      <div></div>
-      </Link>
-      <div className="flex flex-col gap-2">
-        <div>{title}</div>
-        <div className="overflow-hidden text-ellipsis text-[#B8C4C6]">
-          {description}
-        </div>
-      </div>
-    </motion.div>
+    <AnimatePresence mode="sync">
+      {!deleted && (
+        <motion.div
+          layout
+          exit={{ opacity: 0, scaleY: 0 }}
+          variants={childVariants}
+          className="flex h-48 origin-top relative gap-4 rounded-2xl bg-[#1F2428] p-2"
+        >
+          <Link
+            className="h-full select-none min-w-[40%] bg-[#363f46] rounded-xl overflow-hidden"
+            href={`/canvas/${id}`}
+          >
+            <Suspense
+              fallback={
+                <div className=" h-full w-full flex  justify-center items-center">
+                  Loading...
+                </div>
+              }
+            >
+              <ImageComponent id={id} />
+            </Suspense>
+          </Link>
+          <div className="flex flex-col gap-2">
+            <motion.h2
+              initial={{ opacity: 0, filter: "blur(3px)" }}
+              animate={{ opacity: 1, filter: "blur(0px)" }}
+              key={info.title}
+            >
+              {info.title}
+            </motion.h2>
+            <motion.h3
+              key={info.description}
+              initial={{ opacity: 0, filter: "blur(3px)" }}
+              animate={{ opacity: 1, filter: "blur(0px)" }}
+              className="overflow-hidden text-ellipsis text-[#B8C4C6]"
+            >
+              {info.description}
+            </motion.h3>
+          </div>
+          <Menu
+            info={info}
+            id={id}
+            setDeleted={() => setDeleted(true)}
+            setInfo={(e) => setInfo(e)}
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
-}
\ No newline at end of file
+}
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ui/shadcn/popover";
+
+function Menu({
+  info,
+  id,
+  setDeleted,
+  setInfo,
+}: {
+  info: { title: string; description: string };
+  id: string;
+  setDeleted: () => void;
+  setInfo: ({
+    title,
+    description,
+  }: {
+    title: string;
+    description: string;
+  }) => void;
+}) {
+  return (
+    <Popover>
+      <PopoverTrigger className="absolute z-20 top-0 right-0" asChild>
+        <Button variant="secondary">
+          <EllipsisHorizontalCircleIcon className="size-5 stroke-2 stroke-[#B8C4C6]" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-32 px-2 py-2 bg-[#161f2a]/30 text-[#B8C4C6] border-border flex flex-col gap-3"
+      >
+        <EditToolbar info={info} id={id} setInfo={setInfo} />
+        <Button
+          onClick={async () => {
+            const res = await deleteCanvas(id);
+            if (res.success) {
+              toast.success("Thinkpad removed.", {
+                style: { backgroundColor: "rgb(22 31 42 / 0.3)" },
+              });
+              setDeleted();
+            } else {
+              toast.warning("Something went wrong.", {
+                style: { backgroundColor: "rgb(22 31 42 / 0.3)" },
+              });
+            }
+          }}
+          className="flex gap-2 border-border"
+          variant="outline"
+        >
+          <TrashIcon className="size-8 stroke-1" /> Delete
+        </Button>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function EditToolbar({
+  id,
+  setInfo,
+  info
+}: {
+  id: string;
+  setInfo: ({
+    title,
+    description,
+  }: {
+    title: string;
+    description: string;
+  }) => void;
+  info: {
+    title: string;
+    description: string;
+  }
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button className="flex gap-2 border-border" variant="outline">
+          <PencilSquareIcon className="size-8 stroke-1" /> Edit
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px] bg-[#161f2a]/30 border-0">
+        <form
+          action={async (FormData) => {
+            const data = {
+              title: FormData.get("title") as string,
+              description: FormData.get("description") as string,
+            };
+            const res = await AddCanvasInfo({ id, ...data });
+            if (res.success) {
+              setOpen(false);
+              setInfo(data);
+            } else {
+              setOpen(false);
+              toast.error("Something went wrong.", {
+                style: { backgroundColor: "rgb(22 31 42 / 0.3)" },
+              });
+            }
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>Edit Canvas</DialogTitle>
+            <DialogDescription>
+              Add Description to your canvas. Pro tip: Let AI do the job, as you
+              add your content into canvas, we will autogenerate your
+              description.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="title" className="text-right">
+                Title
+              </Label>
+              <Input
+                defaultValue={info.title}
+                name="title"
+                id="title"
+                placeholder="life planning..."
+                className="col-span-3 border-0"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="description" className="text-right">
+                Description
+              </Label>
+              <Textarea
+                defaultValue={info.description}
+                rows={6}
+                id="description"
+                name="description"
+                placeholder="contains information about..."
+                className="col-span-3 border-0 resize-none"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="submit">Save changes</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+import { Suspense, memo, use, useState } from "react";
+import { Box, TldrawImage } from "tldraw";
+import { Button } from "@repo/ui/shadcn/button";
+import { AddCanvasInfo, deleteCanvas } from "@/app/actions/doers";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@repo/ui/shadcn/dialog";
+import { Input } from "@repo/ui/shadcn/input";
+import { Textarea } from "@repo/ui/shadcn/textarea";
+import { textCardUtil } from "@/components/canvas/textCard";
+import { twitterCardUtil } from "@/components/canvas/twitterCard";
+
+const ImageComponent = memo(({ id }: { id: string }) => {
+  const snapshot = use(getCanvasData(id));
+  if (snapshot.bounds) {
+    const pageBounds = new Box(
+      snapshot.bounds.x,
+      snapshot.bounds.y,
+      snapshot.bounds.w,
+      snapshot.bounds.h
+    );
+
+    return (
+      <TldrawImage
+        shapeUtils={[twitterCardUtil, textCardUtil]}
+        snapshot={snapshot.snapshot}
+        background={false}
+        darkMode={true}
+        bounds={pageBounds}
+        padding={0}
+        scale={1}
+        format="png"
+      />
+    );
+  }
+  return (
+    <div className=" h-full w-full flex justify-center items-center">
+      Drew things to seee here
+    </div>
+  );
+});
diff --git a/apps/web/app/(canvas)/canvasStyles.css b/apps/web/app/(canvas)/canvasStyles.css
index 04da2054..a9029680 100644
--- a/apps/web/app/(canvas)/canvasStyles.css
+++ b/apps/web/app/(canvas)/canvasStyles.css
@@ -1,5 +1,5 @@
 .tl-background {
-  background: #1F2428 !important;
+  background: #181E23 !important;
 }
 
 .tlui-style-panel.tlui-style-panel__wrapper, .tlui-navigation-panel::before ,.tlui-menu-zone, .tlui-toolbar__tools, .tlui-popover__content, .tlui-menu, .tlui-button__help, .tlui-help-menu, .tlui-dialog__content {
diff --git a/apps/web/app/(canvas)/layout.tsx b/apps/web/app/(canvas)/layout.tsx
index 5c925573..33e0adfb 100644
--- a/apps/web/app/(canvas)/layout.tsx
+++ b/apps/web/app/(canvas)/layout.tsx
@@ -1,19 +1,30 @@
 import { auth } from "@/server/auth";
 import "./canvasStyles.css";
 import { redirect } from "next/navigation";
+import BackgroundPlus from "../(landing)/GridPatterns/PlusGrid";
+import { Toaster } from "@repo/ui/shadcn/sonner";
 
 export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-
   const info = await auth();
 
   if (!info) {
     return redirect("/signin");
   }
   return (
+    <>
+      <div className="relative flex justify-center z-40 pointer-events-none">
+        <div
+          className="absolute -z-10 left-0 top-[10%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-100 md:bg-opacity-70 blur-[337.4px]"
+          style={{ transform: "rotate(-30deg)" }}
+        />
+      </div>
+      <BackgroundPlus className="absolute top-0 left-0 w-full h-full -z-50 opacity-70" />
       <div>{children}</div>
+      <Toaster />
+    </>
   );
 }
diff --git a/apps/web/app/actions/doers.ts b/apps/web/app/actions/doers.ts
index 00feaa17..da0e49b5 100644
--- a/apps/web/app/actions/doers.ts
+++ b/apps/web/app/actions/doers.ts
@@ -391,6 +391,12 @@ export const createCanvas = async () => {
     return { error: "Not authenticated", success: false };
   }
 
+  const canvases = await db.select().from(canvas).where(eq(canvas.userId, data.user.id))
+
+  if (canvases.length >= 5){
+    return {success: false, message: "A user currently can only have 5 canvases"}
+  }
+  
   const resp = await db
   .insert(canvas)
   .values({ userId: data.user.id }).returning({id: canvas.id});
@@ -428,4 +434,33 @@ export const SaveCanvas = async ({id, data}: {id: string, data: string}) => {
    } catch (error) {
     return {success: false, error, message:"An error occured while saving your canvas"}
    }
+}
+
+export const deleteCanvas = async (id: string) => {
+  try {
+    await process.env.CANVAS_SNAPS.delete(id)
+     await db.delete(canvas).where(eq(canvas.id,id))
+     return {
+      success: true,
+      message: "in-sync"
+     }
+   } catch (error) {
+    return {success: false, error, message:"An error occured while saving your canvas"}
+   }
+}
+
+export async function AddCanvasInfo({id, title, description}: {id:  string, title: string, description: string}){
+  try {
+  await db.update(canvas).set({description, title}).where(eq(canvas.id, id))    
+  return {
+    success: true,
+    message: "info updated successfully"
+   }
+  } catch (error) {
+    return {
+      success: false,
+      message: "something went wrong :/"
+     }
+    
+  }
 }
\ No newline at end of file
diff --git a/apps/web/app/actions/fetchers.ts b/apps/web/app/actions/fetchers.ts
index d93cd4d0..4cb5d1dc 100644
--- a/apps/web/app/actions/fetchers.ts
+++ b/apps/web/app/actions/fetchers.ts
@@ -251,7 +251,7 @@ export const getCanvasData = async (canvasId: string) => {
   if (canvas){
     return JSON.parse(canvas);
   } else {
-    return {}
+    return {snapshot: {}}
   }
 }
 
diff --git a/apps/web/app/api/canvasai/route.ts b/apps/web/app/api/canvasai/route.ts
new file mode 100644
index 00000000..07538bdf
--- /dev/null
+++ b/apps/web/app/api/canvasai/route.ts
@@ -0,0 +1,27 @@
+import type { NextRequest } from "next/server";
+import { ensureAuth } from "../ensureAuth";
+
+export const runtime = "edge";
+
+export async function POST(request: NextRequest) {
+  const session = await ensureAuth(request);
+  if (!session) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+  const res : {query: string} = await request.json()
+
+  try {
+    const resp = await fetch(`${process.env.BACKEND_BASE_URL}/api/search?query=${res.query}&user=${session.user.id}`);
+    if (resp.status !== 200 || !resp.ok) {
+      const errorData = await resp.text();
+      console.log(errorData);
+      return new Response(
+        JSON.stringify({ message: "Error in CF function", error: errorData }),
+        { status: resp.status },
+      );
+    }
+    return new Response(JSON.stringify({response:await resp.json(), status: 200 }));
+  } catch (error) {
+    return new Response(`Error, ${error}`)
+  }
+}
\ No newline at end of file
diff --git a/apps/web/components/canvas/draggableComponent.tsx b/apps/web/components/canvas/draggableComponent.tsx
index 8c39c732..cc31246e 100644
--- a/apps/web/components/canvas/draggableComponent.tsx
+++ b/apps/web/components/canvas/draggableComponent.tsx
@@ -1,25 +1,19 @@
 import Image from "next/image";
 import { useRef, useState } from "react";
-
-interface DraggableComponentsProps {
-  content: string;
-  extraInfo?: string;
-  iconAlt: string;
-}
+import {motion} from "framer-motion"
 
 export default function DraggableComponentsContainer({
   content,
 }: {
-  content: DraggableComponentsProps[];
+  content: {context:string}[] | undefined;
 }) {
+  if (content === undefined) return null;
   return (
     <div className="flex flex-col gap-10">
       {content.map((i) => {
         return (
           <DraggableComponents
-            content={i.content}
-            iconAlt={i.iconAlt}
-            extraInfo={i.extraInfo}
+            content={i.context}
           />
         );
       })}
@@ -29,9 +23,7 @@ export default function DraggableComponentsContainer({
 
 function DraggableComponents({
   content,
-  extraInfo,
-  iconAlt,
-}: DraggableComponentsProps) {
+}: {content: string}) {
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -49,19 +41,21 @@ function DraggableComponents({
   };
 
   return (
-    <div
+    <motion.div
+      initial={{opacity: 0, y: 5}}
+      animate={{opacity: 1, y: 0}}
       ref={containerRef}
       onDragEnd={handleDragEnd}
       onDragStart={handleDragStart}
       draggable
-      className={`flex gap-4 px-1 rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
+      className={`flex gap-4 px-3 overflow-hidden rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
     >
       <div className="flex flex-col gap-2">
         <div>
           <h1 className="line-clamp-3">{content}</h1>
         </div>
-        <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p>
+        {/* <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p> */}
       </div>
-    </div>
+    </motion.div>
   );
 }
diff --git a/apps/web/components/canvas/resizableLayout.tsx b/apps/web/components/canvas/resizableLayout.tsx
index 5ba6780b..5f88de55 100644
--- a/apps/web/components/canvas/resizableLayout.tsx
+++ b/apps/web/components/canvas/resizableLayout.tsx
@@ -13,12 +13,18 @@ interface RectContextType {
   setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
   visible: boolean;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  id: string
+  id: string;
 }
 
 const RectContext = createContext<RectContextType | undefined>(undefined);
 
-export const RectProvider = ({ id, children }: {id: string, children: React.ReactNode}) => {
+export const RectProvider = ({
+  id,
+  children,
+}: {
+  id: string;
+  children: React.ReactNode;
+}) => {
   const [fullScreen, setFullScreen] = useState(false);
   const [visible, setVisible] = useState(true);
 
@@ -36,12 +42,11 @@ export const RectProvider = ({ id, children }: {id: string, children: React.Reac
 export const useRect = () => {
   const context = useContext(RectContext);
   if (context === undefined) {
-    throw new Error('useRect must be used within a RectProvider');
+    throw new Error("useRect must be used within a RectProvider");
   }
   return context;
 };
 
-
 export function ResizaleLayout() {
   const { setVisible, fullScreen, setFullScreen } = useRect();
 
@@ -82,7 +87,7 @@ export function ResizaleLayout() {
 }
 
 function DragIconContainer() {
-  const { fullScreen} = useRect();
+  const { fullScreen } = useRect();
   return (
     <div
       className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}
@@ -93,7 +98,7 @@ function DragIconContainer() {
 }
 
 function CanvasContainer() {
-  const { fullScreen} = useRect();
+  const { fullScreen } = useRect();
   return (
     <div
       className={`absolute overflow-hidden transition-all inset-0 ${fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}
@@ -104,7 +109,7 @@ function CanvasContainer() {
 }
 
 function SidePanelContainer() {
-  const { fullScreen, visible} = useRect();
+  const { fullScreen, visible } = useRect();
   return (
     <div
       className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen" : "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}
@@ -123,35 +128,35 @@ function SidePanelContainer() {
 }
 
 function SidePanel() {
-  const [value, setValue] = useState("");
-  // const [dragAsText, setDragAsText] = useState(false);
+  const [content, setContent] = useState<{context: string}[]>()
   return (
     <>
       <div className="px-3 py-5">
-        <input
-          placeholder="search..."
-          onChange={(e) => {
-            setValue(e.target.value);
+        <form
+          action={async (FormData) => {
+            const search = FormData.get("search");
+            console.log(search)
+            const res = await fetch("/api/canvasai", {
+              method: "POST",
+              body: JSON.stringify({ query: search }),
+            });
+            const t = await res.json()
+            console.log(t.response.response);
+            setContent(t.response.response)
           }}
-          value={value}
-          // rows={1}
-          className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
-        />
-      </div>
-      <div className="flex items-center justify-end px-3 py-4">
-        {/* <Switch
-          className="bg-[#151515] data-[state=unchecked]:bg-red-400 data-[state=checked]:bg-blue-400"
-          onCheckedChange={(e) => setDragAsText(e)}
-          id="drag-text-mode"
-        /> */}
-        <Label htmlFor="drag-text-mode">Drag as Text</Label>
+        >
+          <input
+            placeholder="search..."
+            name="search"
+            className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
+          />
+        </form>
       </div>
       <DraggableComponentsContainer content={content} />
     </>
   );
 }
 
-
 const content = [
   {
     content:
diff --git a/apps/web/components/canvas/savesnap.tsx b/apps/web/components/canvas/savesnap.tsx
index 45fc7e9d..52654bd1 100644
--- a/apps/web/components/canvas/savesnap.tsx
+++ b/apps/web/components/canvas/savesnap.tsx
@@ -10,7 +10,10 @@ export function SaveStatus({id}: {id:string}) {
   const debouncedSave = useCallback(
     debounce(async () => {
       const snapshot = getSnapshot(editor.store)
-      SaveCanvas({id, data: JSON.stringify(snapshot)})
+      const bounds = editor.getViewportPageBounds()
+      console.log(bounds)
+
+      SaveCanvas({id, data: JSON.stringify({snapshot, bounds})})
       
       setSave("saved!");
     }, 3000),
diff --git a/apps/web/lib/loadSnap.ts b/apps/web/lib/loadSnap.ts
index fb4647f6..0d5bb593 100644
--- a/apps/web/lib/loadSnap.ts
+++ b/apps/web/lib/loadSnap.ts
@@ -9,6 +9,6 @@ export async function loadRemoteSnapshot(id:string) {
   const newStore = createTLStore({
     shapeUtils: [...defaultShapeUtils, twitterCardUtil, textCardUtil],
   });
-  loadSnapshot(newStore, snapshot);
+  loadSnapshot(newStore, snapshot.snapshot);
   return newStore;
 }
-- 
cgit v1.2.3


From 888a1a589f1a3b218007da6fb6f2d0a512af0401 Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Mon, 1 Jul 2024 06:48:00 +0530
Subject: dhravya's improvements

---
 apps/web/components/canvas/textCard.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/canvas/textCard.tsx b/apps/web/components/canvas/textCard.tsx
index b24dae52..79ed4091 100644
--- a/apps/web/components/canvas/textCard.tsx
+++ b/apps/web/components/canvas/textCard.tsx
@@ -25,9 +25,11 @@ export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> {
             height: s.props.h,
             width: s.props.w,
             pointerEvents: "all",
-            background: "#2C3439",
+            background: "#2d333a", 
             borderRadius: "16px",
+            border: "2px solid #3e4449",
             padding: "8px 14px",
+            overflow: "auto"
           }}
         >
           <h1 style={{ fontSize: "15px" }}>{s.props.content}</h1>
-- 
cgit v1.2.3


From 66a7c24d2204a3affe4811c6a0c9f3a1e2c2eece Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Mon, 1 Jul 2024 07:11:20 +0530
Subject: done!

---
 apps/web/app/(canvas)/canvasStyles.css  | 18 +++++++++---------
 apps/web/components/canvas/textCard.tsx |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/app/(canvas)/canvasStyles.css b/apps/web/app/(canvas)/canvasStyles.css
index a9029680..7cf5b562 100644
--- a/apps/web/app/(canvas)/canvasStyles.css
+++ b/apps/web/app/(canvas)/canvasStyles.css
@@ -1,22 +1,22 @@
 .tl-background {
-  background: #181E23 !important;
+  background: #1F2428 !important;
 }
 
 .tlui-style-panel.tlui-style-panel__wrapper, .tlui-navigation-panel::before ,.tlui-menu-zone, .tlui-toolbar__tools, .tlui-popover__content, .tlui-menu, .tlui-button__help, .tlui-help-menu, .tlui-dialog__content {
-  background: #2C3439 !important;
-  border-top: #2C3439 !important;
-  border-right: #2C3439 !important;
-  border-bottom: #2C3439 !important;
-  border-left: #2C3439 !important;
+  background: #2C3840 !important;
+  border-top: #2C3840 !important;
+  border-right: #2C3840 !important;
+  border-bottom: #2C3840 !important;
+  border-left: #2C3840 !important;
 }
 
 .tlui-navigation-panel::before {
-  border-top: #2C3439 !important;
-  border-right: #2C3439 !important;
+  border-top: #2C3840 !important;
+  border-right: #2C3840 !important;
 }
 
 .tlui-minimap {
-  background: #2C3439 !important;
+  background: #2C3840 !important;
 }
 
 .tlui-minimap__canvas {
diff --git a/apps/web/components/canvas/textCard.tsx b/apps/web/components/canvas/textCard.tsx
index 79ed4091..9f02d6ff 100644
--- a/apps/web/components/canvas/textCard.tsx
+++ b/apps/web/components/canvas/textCard.tsx
@@ -25,7 +25,7 @@ export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> {
             height: s.props.h,
             width: s.props.w,
             pointerEvents: "all",
-            background: "#2d333a", 
+            background: "#2E3C4C", 
             borderRadius: "16px",
             border: "2px solid #3e4449",
             padding: "8px 14px",
-- 
cgit v1.2.3