UI overhaul

app/(auth)/login/page.tsx

@@ -28,11 +28,11 @@ const LoginPage = () => {
   const router = useRouter();
   const [show, setShow] = useState(false);
 
-  // redirect to home page if user exists
+  // redirect to app page if user exists
   const session = useSession();
   useEffect(() => {
-    if (session.status !== "loading" && session.data?.user) {
-      router.push("/home");
+    if (session.status !== "loading" && session.status === "authenticated") {
+      router.push("/app/todo");
     }
   }, [router, session.status, session.data?.user]);
   // define login page ui
@@ -147,7 +147,7 @@ const LoginPage = () => {
   // login functions
   async function onGoogle() {
     try {
-      const result = await signIn("google", { callbackUrl: "/home" });
+      const result = await signIn("google", { callbackUrl: "/app" });
       if (result?.error) {
         toast({ title: "we could not sign you in to google at the moment" });
         console.error(result.error);
@@ -159,7 +159,7 @@ const LoginPage = () => {
   }
   async function onDiscord() {
     try {
-      const result = await signIn("discord", { callbackUrl: "/home" });
+      const result = await signIn("discord", { callbackUrl: "/app" });
       if (result?.error) {
         toast({ title: "we could not sign you in to discord at the moment" });
         console.error(result.error);
@@ -174,7 +174,7 @@ const LoginPage = () => {
       const result = await signIn("credentials", {
         ...data,
         redirect: false,
-        callbackUrl: "/home",
+        callbackUrl: "/app",
       });
 
       if (result?.error) {

app/(auth)/register/page.tsx

@@ -28,11 +28,11 @@ const Page = () => {
   const router = useRouter();
   const [show, setShow] = useState(false);
 
-  // redirect to home page if user exists
+  // redirect to app page if user exists
   const session = useSession();
   useEffect(() => {
     if (session.data?.user) {
-      router.push("/home");
+      router.push("/app/todo");
     }
   }, [session.data?.user, router]);
 
@@ -174,7 +174,7 @@ const Page = () => {
   // login functions
   async function onGoogle() {
     try {
-      const result = await signIn("google", { callbackUrl: "/home" });
+      const result = await signIn("google", { callbackUrl: "/app" });
       if (result?.error) {
         toast({ title: "we could not sign you in to google at the moment" });
         console.error(result.error);
@@ -186,7 +186,7 @@ const Page = () => {
   }
   async function onDiscord() {
     try {
-      const result = await signIn("discord", { callbackUrl: "/home" });
+      const result = await signIn("discord", { callbackUrl: "/app" });
       if (result?.error) {
         toast({ title: "we could not sign you in to discord at the moment" });
         console.error(result.error);

app/api/todo/reorder/route.ts

@@ -0,0 +1,61 @@
+import { auth } from "@/app/auth";
+import {
+  UnauthorizedError,
+  BadRequestError,
+  InternalError,
+  BaseServerError,
+} from "@/lib/customError";
+import { prisma } from "@/lib/prisma/client";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function PATCH(req: NextRequest) {
+  try {
+    const session = await auth();
+    const user = session?.user;
+
+    if (!user?.id)
+      throw new UnauthorizedError("You must be logged in to do this");
+
+    const { changedTodos }: { changedTodos: { id: string; order: number }[] } =
+      await req.json();
+    if (!changedTodos) throw new BadRequestError("Invalid request body");
+
+    // Run all updates in a transaction
+    const updatedTodos = await prisma.$transaction(
+      changedTodos.map(({ id, order }) =>
+        prisma.todo.update({
+          where: { id },
+          data: { order },
+        })
+      )
+    );
+
+    // Check if all updates were successful
+    const allUpdated = updatedTodos.length === changedTodos.length;
+
+    if (!allUpdated) {
+      throw new InternalError("Failed to update todo order");
+    }
+
+    return NextResponse.json({ message: "Todo updated" }, { status: 200 });
+  } catch (error) {
+    console.log(error);
+
+    if (error instanceof BaseServerError) {
+      return NextResponse.json(
+        { message: error.message },
+        { status: error.status }
+      );
+    }
+
+    return NextResponse.json(
+      {
+        message:
+          error instanceof Error
+            ? error.message.slice(0, 50)
+            : "An unexpected error occurred",
+      },
+      { status: 500 }
+    );
+  }
+}

app/api/todo/route.ts

@@ -22,9 +22,10 @@ export async function POST(req: NextRequest) {
     const parsedObj = todoSchema.safeParse(body);
     if (!parsedObj.success) throw new BadRequestError();
 
+    const { title, description } = parsedObj.data;
     //create todo
     const todo = await prisma.todo.create({
-      data: { ...parsedObj.data, userID: user.id },
+      data: { userID: user.id, title, description },
     });
     if (!todo) throw new InternalError("todo cannot be created at this time");
 

app/app/completed/layout.tsx

@@ -0,0 +1,28 @@
+"use client";
+import SidebarIcon from "@/components/ui/icon/sidebar";
+import SidebarToggle from "@/components/ui/SidebarToggle";
+import { useMenu } from "@/providers/MenuProvider";
+import clsx from "clsx";
+
+import React from "react";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  const { showMenu, isResizing } = useMenu();
+  return (
+    <div
+      className={clsx(
+        "m-auto h-full p-5 overflow-scroll scrollbar-none w-[55rem] pt-[4rem]",
+        isResizing && "select-none"
+      )}
+    >
+      {!showMenu && (
+        <SidebarToggle className="fixed left-4 md:left-10 top-[10px]">
+          <SidebarIcon className="w-6 h-6" />
+        </SidebarToggle>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Layout;

app/app/completed/page.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import CompletedTodoContainer from "@/components/Completed/CompletedContainer";
+const page = () => {
+  return <CompletedTodoContainer />;
+};
+
+export default page;

app/home/layout.tsx → app/app/layout.tsx

@@ -1,8 +1,10 @@
-import Taskbar from "@/components/Taskbar";
 import { auth } from "@/app/auth";
 import { redirect } from "next/navigation";
 import { MenuProvider } from "@/providers/MenuProvider";
-export default async function layout({
+import { SessionProvider } from "next-auth/react";
+import AppLayout from "@/components/AppLayout";
+
+export default async function Layout({
   children,
 }: Readonly<{
   children: React.ReactNode;
@@ -11,12 +13,12 @@ export default async function layout({
   if (!session?.user) {
     redirect("/login");
   }
+
   return (
-    <MenuProvider>
-      <div className="h-screen flex flex-col">
-        <Taskbar />
-        <div className="w-full xl:p-[50px] xl:px-[80px] h-full">{children}</div>
-      </div>
-    </MenuProvider>
+    <SessionProvider session={session}>
+      <MenuProvider>
+        <AppLayout>{children}</AppLayout>
+      </MenuProvider>
+    </SessionProvider>
   );
 }

app/app/note/[id]/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { useParams, useRouter } from "next/navigation";
+import React, { useEffect } from "react";
+import { useNote } from "@/hooks/useNote";
+import Editor from "@/components/Note/Editor";
+import NoteLoading from "@/components/Sidebar/Note/NoteLoading";
+const Page = () => {
+  const router = useRouter();
+  const params = useParams();
+  const { notes, notesLoading } = useNote(true);
+  const note = notes.find(({ id }) => id === params.id);
+
+  useEffect(() => {
+    if (!notesLoading && !note) {
+      router.replace("/app/todo");
+    }
+  }, [notesLoading, note, router]);
+
+  if (notesLoading) return <NoteLoading />;
+
+  if (!note) return null;
+
+  return <Editor note={note} />;
+};
+
+export default Page;

app/app/note/layout.tsx

@@ -0,0 +1,28 @@
+"use client";
+import SidebarIcon from "@/components/ui/icon/sidebar";
+import SidebarToggle from "@/components/ui/SidebarToggle";
+import { useMenu } from "@/providers/MenuProvider";
+import clsx from "clsx";
+
+import React from "react";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  const { showMenu, isResizing } = useMenu();
+  return (
+    <div
+      className={clsx(
+        "m-auto h-full p-5 overflow-scroll scrollbar-none w-[55rem] pt-[4rem]",
+        isResizing && "select-none"
+      )}
+    >
+      {!showMenu && (
+        <SidebarToggle className="fixed left-4 md:left-10 top-[10px]">
+          <SidebarIcon className="w-6 h-6" />
+        </SidebarToggle>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Layout;

app/app/todo/layout.tsx

@@ -0,0 +1,28 @@
+"use client";
+import SidebarIcon from "@/components/ui/icon/sidebar";
+import SidebarToggle from "@/components/ui/SidebarToggle";
+import { useMenu } from "@/providers/MenuProvider";
+import clsx from "clsx";
+
+import React from "react";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  const { showMenu, isResizing } = useMenu();
+  return (
+    <div
+      className={clsx(
+        "w-full m-auto h-full p-12 lg:px-[clamp(10px,10%,20%)] xl:px-[clamp(10px,15%,20%)] 2xl:px-[clamp(10px,20%,30%)]  overflow-scroll scrollbar-none pt-[4rem]",
+        isResizing && "select-none"
+      )}
+    >
+      {!showMenu && (
+        <SidebarToggle className="fixed left-4 md:left-10 top-[10px]">
+          <SidebarIcon className="w-6 h-6" />
+        </SidebarToggle>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Layout;

app/app/todo/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+import React from "react";
+import Todo from "@/components/Todo/TodoContainer";
+const Page = () => {
+  return <Todo />;
+};
+
+export default Page;

app/app/vault/layout.tsx

@@ -0,0 +1,29 @@
+"use client";
+import SidebarIcon from "@/components/ui/icon/sidebar";
+import SidebarToggle from "@/components/ui/SidebarToggle";
+import { useMenu } from "@/providers/MenuProvider";
+import clsx from "clsx";
+
+import React from "react";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  const { showMenu, isResizing } = useMenu();
+
+  return (
+    <div
+      className={clsx(
+        "m-auto h-full p-5 overflow-scroll scrollbar-none w-[55rem] pt-[4rem]",
+        isResizing && "select-none"
+      )}
+    >
+      {!showMenu && (
+        <SidebarToggle className="fixed left-4 md:left-10 top-[10px]">
+          <SidebarIcon className="w-6 h-6" />
+        </SidebarToggle>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Layout;

app/app/vault/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+import React from "react";
+import Vault from "@/components/Vault/VaultContainer";
+const Page = () => {
+  return <Vault />;
+};
+
+export default Page;