error solved at database connection string

package.json

@@ -22,6 +22,7 @@
     "clsx": "^2.0.0",
     "eslint-config-prettier": "^9.0.0",
     "lucide-react": "^0.290.0",
+    "mongodb": "^6.3.0",
     "next": "14.0.0",
     "next-themes": "^0.2.1",
     "openai": "^4.14.1",

prisma/schema.prisma

@@ -10,14 +10,13 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
-
 model Note {
-  id        String  @id @default(auto()) @map("_id") @db.ObjectId
+  id        String   @id @default(auto()) @map("_id") @db.ObjectId
   title     String
   content   String?
   userId    String
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  @@map("notes") 
-}
+  @@map("notes")
+}

src/app/notes/NavBar.tsx

@@ -1,32 +1,40 @@
+"use client";
+
 import logo from "@/assets/logo.png";
+import AddNoteDialog from "@/components/AddNoteDialog";
 import { Button } from "@/components/ui/button";
 import { UserButton } from "@clerk/nextjs";
 import { Plus } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
+import { useState } from "react";
 
 export default function NavBar() {
+  const [showAddNoteDialog, setShowAddNoteDialog] = useState(false);
+
   return (
-    <div className="p-4 shadow">
-      <div className="m-auto flex max-w-7xl flex-wrap items-center justify-between gap-3">
-        <Link href="/notes" className="flex items-center gap-1">
-          <Image src={logo} alt="FlowBrain logo" width={40} height={40} />
-          <span className="font-bold">FlowBrain</span>
-        </Link>
-        <div className="flex items-center gap-2">
-          <UserButton
-            afterSignOutUrl="/"
-            appearance={{
-              elements: { avatarBox: { width: "2.5rem", height: "2.5rem" } },
-            }}
-          />
-          <Button>
-            <Plus size={20} className="mr-2" />
-            Add Note
-          </Button>
+    <>
+      <div className="p-4 shadow">
+        <div className="m-auto flex max-w-7xl flex-wrap items-center justify-between gap-3">
+          <Link href="/notes" className="flex items-center gap-1">
+            <Image src={logo} alt="FlowBrain logo" width={40} height={40} />
+            <span className="font-bold">FlowBrain</span>
+          </Link>
+          <div className="flex items-center gap-2">
+            <UserButton
+              afterSignOutUrl="/"
+              appearance={{
+                elements: { avatarBox: { width: "2.5rem", height: "2.5rem" } },
+              }}
+            />
+            <Button onClick={() => setShowAddNoteDialog(true)}>
+              <Plus size={20} className="mr-2" />
+              Add Note
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+      <AddNoteDialog open={showAddNoteDialog} setOpen={setShowAddNoteDialog} />
+    </>
   );
 }
-

src/app/notes/page.tsx

@@ -1,9 +1,17 @@
+import prisma from "@/lib/db/prisma";
+import { auth } from "@clerk/nextjs";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Ai - Notes",
+  title: "FlowBrain - Notes",
 };
 
-export default function NotesPage() {
-  return <div>Here will be your notes</div>;
+export default async function NotesPage() {
+  const { userId } = auth();
+
+  if (!userId) throw Error("userId undefined");
+
+  const allNotes = await prisma.note.findMany({ where: { userId } });
+
+  return <div>{JSON.stringify(allNotes)}</div>;
 }

src/app/sign-in/[[...sign-in]]/page.tsx

@@ -2,7 +2,7 @@ import { SignIn } from "@clerk/nextjs";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "AI-noteTaker - Sign In",
+  title: "FlowBrain - Sign In",
 };
 
 export default function SignInPage() {

src/app/sign-up/[[...sign-up]]/page.tsx

@@ -2,7 +2,7 @@ import { SignUp } from "@clerk/nextjs";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "AI-noteTaker - Sign Up",
+  title: "FlowBrain - Sign Up",
 };
 
 export default function SignUpPage() {

src/components/ui/loading-button.tsx

@@ -0,0 +1,19 @@
+import { Loader2 } from "lucide-react";
+import { Button, ButtonProps } from "./button";
+
+type LoadingButtonProps = {
+  loading: boolean;
+} & ButtonProps;
+
+export default function LoadingButton({
+  children,
+  loading,
+  ...props
+}: LoadingButtonProps) {
+  return (
+    <Button {...props} disabled={props.disabled || loading}>
+      {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {children}
+    </Button>
+  );
+}