feat(brains): temporary /explore/brains route

frontend/app/explore/DocumentItem/index.tsx

@@ -3,6 +3,7 @@ import Ellipsis from "@/app/components/ui/Ellipsis";
 import { useSupabase } from "@/app/supabase-provider";
 import { useToast } from "@/lib/hooks/useToast";
 import { useAxios } from "@/lib/useAxios";
+import { motion } from "framer-motion";
 import {
   Dispatch,
   RefObject,
@@ -11,7 +12,6 @@ import {
   useState,
 } from "react";
 import Button from "../../components/ui/Button";
-import { AnimatedCard } from "../../components/ui/Card";
 import Modal from "../../components/ui/Modal";
 import { Document } from "../types";
 import DocumentData from "./DocumentData";
@@ -45,13 +45,13 @@ const DocumentItem = forwardRef(
     };
 
     return (
-      <AnimatedCard
+      <motion.div
         initial={{ x: -64, opacity: 0 }}
         animate={{ x: 0, opacity: 1 }}
         exit={{ x: 64, opacity: 0 }}
         layout
         ref={forwardedRef as RefObject<HTMLDivElement>}
-        className="flex flex-col sm:flex-row sm:items-center justify-between w-full p-5 gap-5"
+        className="flex flex-col sm:flex-row sm:items-center justify-between w-full p-5 gap-5 border-b last:border-none border-black/10 dark:border-white/25"
       >
         <Ellipsis tooltip maxCharacters={30}>
           {document.name}
@@ -85,7 +85,7 @@ const DocumentItem = forwardRef(
             <p>{document.name}</p>
           </Modal>
         </div>
-      </AnimatedCard>
+      </motion.div>
     );
   }
 );

frontend/app/explore/brains/components/BrainListItem.tsx

@@ -0,0 +1,40 @@
+import Button from "@/app/components/ui/Button";
+import Modal from "@/app/components/ui/Modal";
+import { useBrainScope } from "@/lib/context/BrainScopeProvider/hooks/useBrainScope";
+import { BrainScope } from "@/lib/context/BrainScopeProvider/types";
+import { FC } from "react";
+import { FaBrain } from "react-icons/fa";
+import DocumentItem from "../../DocumentItem";
+
+interface BrainListItemProps {
+  brain: BrainScope;
+}
+
+const BrainListItem: FC<BrainListItemProps> = ({ brain }) => {
+  const { removeDocumentFromBrain } = useBrainScope();
+
+  return (
+    <div className="flex items-center max-w-lg w-full gap-5">
+      <div className="flex-1 flex items-center gap-5">
+        <FaBrain className="text-4xl" />
+        <div className="flex flex-1 flex-col">
+          <span className="text-lg font-bold">{brain.name}</span>
+          <span className="text-xs">{brain.documents.length} files</span>
+        </div>
+      </div>
+      <Modal
+        title={`${brain.name}'s files`}
+        desc={brain.id}
+        Trigger={<Button>View</Button>}
+      >
+        <div>
+          {brain.documents.map((doc) => (
+            <DocumentItem document={doc} setDocuments={() => {}} />
+          ))}
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default BrainListItem;

frontend/app/explore/brains/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+import PageHeading from "@/app/components/ui/PageHeading";
+import { useBrainScope } from "@/lib/context/BrainScopeProvider/hooks/useBrainScope";
+import { FC } from "react";
+import BrainListItem from "./components/BrainListItem";
+
+interface BrainsPageProps {}
+
+const BrainsPage: FC<BrainsPageProps> = ({}) => {
+  const { allBrains } = useBrainScope();
+  return (
+    <main>
+      <section className="w-full outline-none pt-10 flex flex-col gap-5 items-center justify-center p-6">
+        <PageHeading title="Your Brains" subtitle="View and tune your brains" />
+        {allBrains.map((brain) => {
+          return <BrainListItem brain={brain} />;
+        })}
+        <div></div>
+      </section>
+    </main>
+  );
+};
+
+export default BrainsPage;

frontend/app/explore/layout.tsx

@@ -0,0 +1,18 @@
+"use client";
+import { redirect } from "next/navigation";
+import { FC, ReactNode } from "react";
+import { useSupabase } from "../supabase-provider";
+
+interface LayoutProps {
+  children?: ReactNode;
+}
+
+const Layout: FC<LayoutProps> = ({ children }) => {
+  const { session } = useSupabase();
+  if (!session) {
+    redirect("/login");
+  }
+  return <>{children}</>;
+};
+
+export default Layout;