made nav changes

Author: safipatel

app/classrooms/[classroomId]/chat/MessageBox.tsx

@@ -6,7 +6,7 @@ import {
   RagFlowMessages,
   sendMessage,
 } from "@shared/lib/ragflow/chat/chat-client";
-import { toast } from "@shared/hooks/use-toast";
+import { toast } from "sonner";
 
 function MessageBox(props: {
   chatClient: ChatClientWithSession;
@@ -28,11 +28,10 @@ function MessageBox(props: {
     const messageResponse = await sendMessage(props.chatClient, value);
 
     if (!messageResponse.ragflowCallSuccess) {
-      toast({
-        title: "Error sending message",
+      toast.error("Error sending message",
+        {
         description: `Please try refreshing the page`,
         duration: 10000,
-        variant: "destructive",
       });
       return;
     }

app/classrooms/page.tsx

@@ -76,6 +76,8 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
     const tab = searchParams.get("tab");
     if (tab && (tab == "enrolled" || tab == "admin")) {
       setCurrentTab(tab);
+    }else{
+      setCurrentTab("enrolled");
     }
   }, [searchParams]);
 
@@ -285,7 +287,7 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
     isAdmin: boolean;
   }) {
     return (
-      <Card className="w-1/5" animated>
+      <Card className="w-1/5 min-w-[300px]" animated>
         <CardHeader>
           <CardTitle animated>{classroom.name}</CardTitle>
           <CardDescription animated>
@@ -311,7 +313,7 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
                 asChild
                 // className="me-2 rounded-lg border px-5 py-2.5 text-center text-sm font-medium hover:bg-green-800 hover:text-white focus:outline-none focus:ring-4 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-600 dark:hover:text-white dark:focus:ring-green-900"
               >
-                <Link href={`../chat/${classroom.id}`} passHref>
+                <Link href={`/classrooms/${classroom.id}/chat`} passHref>
                   <MessageSquareMore className="scale-[200%]" />{" "}
                 </Link>
               </Button>
@@ -401,7 +403,7 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
 
       <Tabs
         value={currentTab}
-        onValueChange={setCurrentTab}
+        onValueChange={(value) => {window.history.replaceState(null, "", `/classrooms?tab=${value}`); setCurrentTab(value)}}
         defaultValue="enrolled"
         // className="w-[75vw] bg-"
       >
@@ -424,7 +426,7 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
         <Separator className="my-4 mb-10" />
         <TabsContent value="admin">
           <div>
-            <div className="flex flex-wrap justify-start gap-4">
+            <div className="flex flex-wrap gap-4">
               {adminClasses.map((classroom) => (
                 <ClassroomCard
                   key={classroom.id}

app/page.tsx

@@ -31,7 +31,7 @@ export default function Home() {
         <div className="flex flex-col items-center gap-4 sm:flex-row">
           <a
             className="flex h-10 items-center justify-center gap-2 rounded-full border border-solid border-transparent bg-foreground px-4 text-sm text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] sm:h-12 sm:px-5 sm:text-base"
-            href="classroom"
+            href="classrooms"
           >
             My classrooms
           </a>

shared/components/ui/sidebar/nav-utils.ts

@@ -1,3 +1,5 @@
+import { ReadonlyURLSearchParams } from "next/navigation";
+
 type PageStructure =
   | PickOne<{
       classroomLanding: PickOne<{
@@ -20,15 +22,18 @@ type PageStructure =
   | undefined;
 
 // TODO: once structure is finalized, fix this
-export function getPageAspectsByPath(pathname: string): PageStructure {
+export function getPageAspectsByPath(pathname: string, searchParams: ReadonlyURLSearchParams): PageStructure {
   if (pathname == "/") {
     return undefined;
   }
 
   const split = pathname.split("/");
 
   if (pathname.includes("classroom") && split.length == 2) {
-    // TODO: add admin separate
+    const tab = searchParams.get("tab")
+    if (tab && tab === "admin" ){
+      return { classroomLanding: { admin: true } };
+    }
     return { classroomLanding: { enrolled: true } };
   }