(NEEDS MIGRATION)made sidebar functional

7 files changed, 145 insertions, 96 deletions

diff --git a/apps/web/src/app/MessagePoster.tsx b/apps/web/src/app/MessagePoster.tsx
index 3d0bbe7e..64dc89fd 100644
--- a/apps/web/src/app/MessagePoster.tsx
+++ b/apps/web/src/app/MessagePoster.tsx
@@ -8,7 +8,16 @@ function MessagePoster({ jwt }: { jwt: string }) {
     window.postMessage({ jwt }, '*');
   }, [jwt]);
 
-  return null;
+  return (
+    <button
+      onClick={() => {
+        if (typeof window === 'undefined') return;
+        window.postMessage({ jwt }, '*');
+      }}
+    >
+      Send message
+    </button>
+  );
 }
 
 export default MessagePoster;
diff --git a/apps/web/src/app/api/store/route.ts b/apps/web/src/app/api/store/route.ts
index 3a4f7e27..06db08b9 100644
--- a/apps/web/src/app/api/store/route.ts
+++ b/apps/web/src/app/api/store/route.ts
@@ -1,6 +1,6 @@
 import { db } from "@/server/db";
-import { eq } from "drizzle-orm";
-import { sessions, storedContent, users } from "@/server/db/schema";
+import { and, eq } from "drizzle-orm";
+import { contentToSpace, sessions, storedContent, users, space } from "@/server/db/schema";
 import { type NextRequest, NextResponse } from "next/server";
 import { env } from "@/env";
 import { getMetaData } from "@/server/helpers";
@@ -31,6 +31,7 @@ export async function POST(req: NextRequest) {
     const data = await req.json() as {
         pageContent: string,
         url: string,
+        space?: string
     };
 
     const metadata = await getMetaData(data.url);
@@ -38,6 +39,12 @@ export async function POST(req: NextRequest) {
 
     let id: number | undefined = undefined;
 
+    let storeToSpace = data.space
+
+    if (!storeToSpace) {
+        storeToSpace = 'all'
+    }
+
     const storedContentId = await db.insert(storedContent).values({
         content: data.pageContent,
         title: metadata.title,
@@ -46,12 +53,33 @@ export async function POST(req: NextRequest) {
         baseUrl: metadata.baseUrl,
         image: metadata.image,
         savedAt: new Date(),
-        space: "all",
         user: session.user.id
     })
 
     id = storedContentId.meta.last_row_id;
 
+    if (!id) {
+        return NextResponse.json({ message: "Error", error: "Error in CF function" }, { status: 500 });
+    }
+
+    let spaceID = 0;
+
+    const spaceData = await db.select().from(space).where(and(eq(space.name, storeToSpace), eq(space.user, session.user.id))).limit(1)
+    spaceID = spaceData[0]?.id
+
+    if (!spaceData || spaceData.length === 0) {
+        const spaceId = await db.insert(space).values({
+            name: storeToSpace,
+            user: session.user.id
+        })
+        spaceID = spaceId.meta.last_row_id;
+    }
+
+    await db.insert(contentToSpace).values({
+        contentId: id as number,
+        spaceId: spaceID
+    })
+
     const res = await Promise.race([
         fetch("https://cf-ai-backend.dhravya.workers.dev/add", {
             method: "POST",
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index d1d47ae5..c25de8c7 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,5 +1,12 @@
 import { db } from '@/server/db';
-import { sessions, storedContent, users } from '@/server/db/schema';
+import {
+  contentToSpace,
+  sessions,
+  space,
+  StoredContent,
+  storedContent,
+  users,
+} from '@/server/db/schema';
 import { eq, inArray } from 'drizzle-orm';
 import { cookies, headers } from 'next/headers';
 import { redirect } from 'next/navigation';
@@ -47,12 +54,19 @@ export default async function Home() {
     return redirect('/api/auth/signin');
   }
 
-  const posts = await db
+  // Fetch all content for the user
+  const contents = await db
     .select()
     .from(storedContent)
-    .where(eq(storedContent.user, userData.id));
+    .where(eq(storedContent.user, userData.id))
+    .all();
 
-  const collectedSpaces = transformContent(posts);
+  console.log(contents);
+
+  const collectedSpaces =
+    contents.length > 0 ? await transformContent(contents) : [];
+
+  console.log('collected', collectedSpaces);
 
   return (
     <div className="flex w-screen">
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 1af37025..66ca1652 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -26,8 +26,7 @@ export default function Sidebar() {
       description: '',
       image: 'https://code.visualstudio.com/favicon.ico',
       baseUrl: 'https://code.visualstudio.com',
-      savedAt: new Date(),
-      space: 'Development',
+      savedAt: new Date()
     },
     {
       id: 1,
@@ -37,8 +36,7 @@ export default function Sidebar() {
       description: '',
       image: 'https://github.com/favicon.ico',
       baseUrl: 'https://github.com',
-      savedAt: new Date(),
-      space: 'Development',
+      savedAt: new Date()
     },
   ];
 
diff --git a/apps/web/src/components/Sidebar/CategoryItem.tsx b/apps/web/src/components/Sidebar/CategoryItem.tsx
index c2e72ba5..0cf8a70c 100644
--- a/apps/web/src/components/Sidebar/CategoryItem.tsx
+++ b/apps/web/src/components/Sidebar/CategoryItem.tsx
@@ -1,13 +1,13 @@
-"use client";
-import { cleanUrl } from "@/lib/utils";
-import { StoredContent } from "@/server/db/schema";
+'use client';
+import { cleanUrl } from '@/lib/utils';
+import { StoredContent } from '@/server/db/schema';
 import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
-} from "../ui/dropdown-menu";
-import { Label } from "../ui/label";
+} from '../ui/dropdown-menu';
+import { Label } from '../ui/label';
 import {
   ArrowUpRight,
   MoreHorizontal,
@@ -19,8 +19,8 @@ import {
   ChevronRight,
   Plus,
   Minus,
-} from "lucide-react";
-import { useState } from "react";
+} from 'lucide-react';
+import { useState } from 'react';
 import {
   Drawer,
   DrawerContent,
@@ -29,116 +29,107 @@ import {
   DrawerDescription,
   DrawerFooter,
   DrawerClose,
-} from "../ui/drawer";
-import { Input } from "../ui/input";
-import { Textarea } from "../ui/textarea";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+} from '../ui/drawer';
+import { Input } from '../ui/input';
+import { Textarea } from '../ui/textarea';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import {
   AnimatePresence,
   motion,
   Reorder,
   useMotionValue,
-} from "framer-motion";
+} from 'framer-motion';
 
 const pages: StoredContent[] = [
   {
     id: 1,
-    content: "",
-    title: "Visual Studio Code",
-    url: "https://code.visualstudio.com",
-    description: "",
-    image: "https://code.visualstudio.com/favicon.ico",
-    baseUrl: "https://code.visualstudio.com",
+    content: '',
+    title: 'Visual Studio Code',
+    url: 'https://code.visualstudio.com',
+    description: '',
+    image: 'https://code.visualstudio.com/favicon.ico',
+    baseUrl: 'https://code.visualstudio.com',
     savedAt: new Date(),
-    space: ""
   },
   {
     id: 2,
-    content: "",
+    content: '',
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: "https://github.com/yxshv/vscode",
-    description: "",
-    image: "https://github.com/favicon.ico",
-    baseUrl: "https://github.com",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
     savedAt: new Date(),
-    space: ""
   },
   {
     id: 3,
-    content: "",
+    content: '',
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: "https://github.com/yxshv/vscode",
-    description: "",
-    image: "https://github.com/favicon.ico",
-    baseUrl: "https://github.com",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
     savedAt: new Date(),
-    space: ""
   },
   {
     id: 4,
-    content: "",
+    content: '',
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: "https://github.com/yxshv/vscode",
-    description: "",
-    image: "https://github.com/favicon.ico",
-    baseUrl: "https://github.com",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
     savedAt: new Date(),
-    space: ""
   },
   {
     id: 5,
-    content: "",
+    content: '',
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: "https://github.com/yxshv/vscode",
-    description: "",
-    image: "https://github.com/favicon.ico",
-    baseUrl: "https://github.com",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
     savedAt: new Date(),
-    space: ""
   },
   {
     id: 6,
-    content: "",
+    content: '',
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: "https://github.com/yxshv/vscode",
-    description: "",
-    image: "https://github.com/favicon.ico",
-    baseUrl: "https://github.com",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
     savedAt: new Date(),
-    space: ""
   },
   {
     id: 7,
-    content: "",
+    content: '',
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: "https://github.com/yxshv/vscode",
-    description: "",
-    image: "https://github.com/favicon.ico",
-    baseUrl: "https://github.com",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
     savedAt: new Date(),
-    space: ""
   },
   {
     id: 8,
-    content: "",
+    content: '',
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: "https://github.com/yxshv/vscode",
-    description: "",
-    image: "https://github.com/favicon.ico",
-    baseUrl: "https://github.com",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
     savedAt: new Date(),
-    space: ""
   },
   {
     id: 9,
-    content: "",
+    content: '',
     title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-    url: "https://github.com/yxshv/vscode",
-    description: "",
-    image: "https://github.com/favicon.ico",
-    baseUrl: "https://github.com",
+    url: 'https://github.com/yxshv/vscode',
+    description: '',
+    image: 'https://github.com/favicon.ico',
+    baseUrl: 'https://github.com',
     savedAt: new Date(),
-    space: ""
   },
 ];
 export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => {
@@ -162,13 +153,13 @@ export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => {
             />
             <ChevronDown
               data-down-icon
-              className={`absolute left-1/2 top-1/2 z-[2] h-4 w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-[transform,opacity] duration-150 ${isExpanded ? "rotate-180" : "rotate-0"}`}
+              className={`absolute left-1/2 top-1/2 z-[2] h-4 w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-[transform,opacity] duration-150 ${isExpanded ? 'rotate-180' : 'rotate-0'}`}
               strokeWidth={1.5}
             />
           </div>
 
           <span className="w-full truncate text-nowrap text-left">
-            {item.title ?? "Untitled website"}
+            {item.title ?? 'Untitled website'}
           </span>
         </button>
         <Drawer
@@ -187,7 +178,7 @@ export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => {
                 href={item.url}
                 className="text-rgray-11/90 bg-rgray-3 text-md absolute right-0 top-0 flex w-min translate-y-1/2 items-center justify-center gap-1 rounded-full px-5 py-1"
               >
-                <img src={item.image ?? "/brain.png"} className="h-4 w-4" />
+                <img src={item.image ?? '/brain.png'} className="h-4 w-4" />
                 {cleanUrl(item.url)}
               </a>
             </DrawerHeader>
@@ -197,16 +188,16 @@ export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => {
               <Input
                 className=""
                 required
-                value={item.title ?? ""}
-                placeholder={item.title ?? "Enter the title for the page"}
+                value={item.title ?? ''}
+                placeholder={item.title ?? 'Enter the title for the page'}
               />
             </div>
             <div className="mt-5">
               <Label>Additional Context</Label>
               <Textarea
                 className=""
-                value={item.content ?? ""}
-                placeholder={"Enter additional context for this page"}
+                value={item.content ?? ''}
+                placeholder={'Enter additional context for this page'}
               />
             </div>
             <DrawerFooter className="flex flex-row-reverse items-center justify-end px-0 pt-5">
@@ -233,7 +224,7 @@ export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => {
             onReorder={setItems}
             as="div"
             initial={{ height: 0 }}
-            animate={{ height: "auto" }}
+            animate={{ height: 'auto' }}
             exit={{
               height: 0,
               transition: {},
@@ -281,8 +272,8 @@ export const CategoryPage: React.FC<{
       >
         <div className="relative h-4 min-w-4">
           <img
-            src={item.image ?? "/brain.png"}
-            alt={item.title ?? "Untitiled website"}
+            src={item.image ?? '/brain.png'}
+            alt={item.title ?? 'Untitiled website'}
             className="z-1 h-4 w-4 transition-[transform,opacity] delay-150 duration-150"
           />
           <ArrowUpRight
@@ -293,7 +284,7 @@ export const CategoryPage: React.FC<{
         </div>
 
         <span className="w-full truncate text-nowrap">
-          {item.title ?? "Untitled website"}
+          {item.title ?? 'Untitled website'}
         </span>
       </a>
       <button
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index 9fcd3ff8..889a3ab7 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -76,7 +76,6 @@ const SpaceExitVariant: Variant = {
 
 export function SpaceItem({
   title,
-  description,
   content,
   id,
   onDelete,
diff --git a/apps/web/src/server/db/schema.ts b/apps/web/src/server/db/schema.ts
index d66965c4..a80eb7cf 100644
--- a/apps/web/src/server/db/schema.ts
+++ b/apps/web/src/server/db/schema.ts
@@ -87,7 +87,6 @@ export const storedContent = createTable(
     title: text("title", { length: 255 }),
     description: text("description", { length: 255 }),
     url: text("url").notNull(),
-    space: text("space", { length: 255 }).references(() => spaces.name).default('all'),
     savedAt: int("savedAt", { mode: "timestamp" }).notNull(),
     baseUrl: text("baseUrl", { length: 255 }),
     image: text("image", { length: 255 }),
@@ -97,20 +96,31 @@ export const storedContent = createTable(
     urlIdx: index("storedContent_url_idx").on(sc.url),
     savedAtIdx: index("storedContent_savedAt_idx").on(sc.savedAt),
     titleInx: index("storedContent_title_idx").on(sc.title),
-    spaceIdx: index("storedContent_space_idx").on(sc.space),
     userIdx: index("storedContent_user_idx").on(sc.user),
   }),
 );
 
-export const spaces = createTable(
-  "spaces",
+export const contentToSpace = createTable(
+  "contentToSpace",
+  {
+    contentId: integer("contentId").notNull().references(() => storedContent.id),
+    spaceId: integer("spaceId").notNull().references(() => space.id),
+  },
+  (cts) => ({
+    compoundKey: primaryKey({ columns: [cts.contentId, cts.spaceId] }),
+  }),
+);
+
+export const space = createTable(
+  "space",
   {
     id: integer("id").notNull().primaryKey({ autoIncrement: true }),
     name: text('name').notNull().default('all'),
-    description: text("description", { length: 255 }),
+    user: text("user", { length: 255 }).references(() => users.id),
   },
   (space) => ({
     nameIdx: index("spaces_name_idx").on(space.name),
+    userIdx: index("spaces_user_idx").on(space.user),
   }),
 );