Merge branch 'main' of https://github.com/Dhravya/supermemory into new-uinew-ui

1 files changed, 39 insertions, 24 deletions

diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index 830b0f05..568aa3dd 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -1,29 +1,35 @@
-'use client';
-import { MemoryIcon } from '../../assets/Memories';
-import { Trash2, User2 } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
-import { MemoriesBar } from './MemoriesBar';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Bin } from '@/assets/Bin';
-import { Avatar, AvatarFallback, AvatarImage } from '@radix-ui/react-avatar';
-import { useSession } from 'next-auth/react';
+"use client";
+import { MemoryIcon } from "../../assets/Memories";
+import { Trash2, User2 } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { MemoriesBar } from "./MemoriesBar";
+import { AnimatePresence, motion } from "framer-motion";
+import { Bin } from "@/assets/Bin";
+import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import { useSession } from "next-auth/react";
+import MessagePoster from "@/app/MessagePoster";
+import Image from "next/image";
+import WordMark from "../WordMark";
 
 export type MenuItem = {
   icon: React.ReactNode | React.ReactNode[];
   label: string;
   content?: React.ReactNode;
+  labelDisplay?: React.ReactNode;
 };
 
 export default function Sidebar({
   selectChange,
+  jwt,
 }: {
   selectChange?: (selectedItem: string | null) => void;
+  jwt: string;
 }) {
   const { data: session } = useSession();
   const menuItemsTop: Array<MenuItem> = [
     {
       icon: <MemoryIcon className="h-10 w-10" />,
-      label: 'Memories',
+      label: "Memories",
       content: <MemoriesBar />,
     },
   ];
@@ -31,7 +37,7 @@ export default function Sidebar({
   const menuItemsBottom: Array<MenuItem> = [
     {
       icon: <Trash2 strokeWidth={1.3} className="h-6 w-6" />,
-      label: 'Trash',
+      label: "Trash",
     },
     {
       icon: (
@@ -47,12 +53,12 @@ export default function Sidebar({
               <User2 strokeWidth={1.3} className="h-6 w-6" />
             )}
             <AvatarFallback>
-              {session?.user?.name?.split(' ').map((n) => n[0])}{' '}
+              {session?.user?.name?.split(" ").map((n) => n[0])}{" "}
             </AvatarFallback>
           </Avatar>
         </div>
       ),
-      label: 'Profile',
+      label: "Profile",
     },
   ];
 
@@ -70,22 +76,30 @@ export default function Sidebar({
   return (
     <>
       <div className="relative hidden h-screen max-h-screen w-max flex-col items-center text-sm font-light md:flex">
-        <div className="bg-rgray-2 border-r-rgray-6 relative z-[50] flex h-full w-full flex-col items-center justify-center border-r px-2 py-5 ">
+        <div className="bg-rgray-3 border-r-rgray-6 relative z-[50] flex h-full w-full flex-col items-center justify-center border-r px-2 py-5 ">
+          <Image
+            className="mb-4 rounded-md"
+            src="/icons/logo_bw_without_bg.png"
+            alt="Smort logo"
+            width={50}
+            height={50}
+          />
+
+          <div className="bg-rgray-6 mb-8 h-[1px] w-full" />
+
           <MenuItem
             item={{
-              label: 'Memories',
+              label: "Memories",
               icon: <MemoryIcon className="h-10 w-10" />,
               content: <MemoriesBar />,
             }}
             selectedItem={selectedItem}
             setSelectedItem={setSelectedItem}
           />
-
           <div className="mt-auto" />
-
           <MenuItem
             item={{
-              label: 'Trash',
+              label: "Trash",
               icon: <Bin id="trash" className="z-[300] h-7 w-7" />,
             }}
             selectedItem={selectedItem}
@@ -94,7 +108,7 @@ export default function Sidebar({
           />
           <MenuItem
             item={{
-              label: 'Profile',
+              label: "Profile",
               icon: (
                 <div className="mb-2">
                   <Avatar>
@@ -108,7 +122,7 @@ export default function Sidebar({
                       <User2 strokeWidth={1.3} className="h-6 w-6" />
                     )}
                     <AvatarFallback>
-                      {session?.user?.name?.split(' ').map((n) => n[0])}{' '}
+                      {session?.user?.name?.split(" ").map((n) => n[0])}{" "}
                     </AvatarFallback>
                   </Avatar>
                 </div>
@@ -117,6 +131,7 @@ export default function Sidebar({
             selectedItem={selectedItem}
             setSelectedItem={setSelectedItem}
           />
+          <MessagePoster jwt={jwt} />
         </div>
         <AnimatePresence>
           {selectedItem && <SubSidebar>{Subbar}</SubSidebar>}
@@ -127,7 +142,7 @@ export default function Sidebar({
 }
 
 const MenuItem = ({
-  item: { icon, label },
+  item: { icon, label, labelDisplay },
   selectedItem,
   setSelectedItem,
   ...props
@@ -143,18 +158,18 @@ const MenuItem = ({
     {...props}
   >
     {icon}
-    <span className="">{label}</span>
+    <span className="">{labelDisplay ?? label}</span>
   </button>
 );
 
 export function SubSidebar({ children }: { children?: React.ReactNode }) {
   return (
     <motion.div
-      initial={{ opacity: 0, x: '-100%' }}
+      initial={{ opacity: 0, x: "-100%" }}
       animate={{ opacity: 1, x: 0 }}
       exit={{
         opacity: 0,
-        x: '-100%',
+        x: "-100%",
         transition: { delay: 0.2 },
       }}
       transition={{