chore: added ui for friendship route and isMain attribute in account db

apps/web/app/account/components/accountLayout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { userData } from "@/app/chat/data";
+import { userData } from "@/app/friendship/chat/data";
 import React, { useEffect, useState } from "react";
 import {
     ResizableHandle,

apps/web/app/chat/components/chat/chat-bottombar.tsx → apps/web/app/friendship/chat/components/chat/chat-bottombar.tsx

@@ -12,7 +12,7 @@ import {
   import { buttonVariants } from "@/components/ui/button";
   import { cn } from "@/lib/utils";
   import { AnimatePresence, motion } from "framer-motion";
-  import { Message, loggedInUserData } from "@/app/chat/data";
+  import { Message, loggedInUserData } from "@/app/friendship/chat/data";
   import { Textarea } from "@/components/ui/textarea";
   import { EmojiPicker } from "../emoji-picker";
   import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

apps/web/app/chat/components/chat/chat-layout.tsx → apps/web/app/friendship/chat/components/chat/chat-layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { userData } from "@/app/chat/data";
+import { userData } from "@/app/friendship/chat/data";
 import React, { useEffect, useState } from "react";
 import {
   ResizableHandle,
@@ -92,7 +92,7 @@ export function ChatLayout({
         />
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={defaultLayout[1]} minSize={30}>
+      <ResizablePanel defaultSize={defaultLayout[1]} minSize={30} className="dark:bg-primary-foreground">
         <Chat
           messages={selectedUser.messages}
           selectedUser={selectedUser}

apps/web/app/chat/components/chat/chat-list.tsx → apps/web/app/friendship/chat/components/chat/chat-list.tsx

@@ -1,4 +1,4 @@
-import { Message, UserData } from "@/app/chat/data";
+import { Message, UserData } from "@/app/friendship/chat/data";
 import { cn } from "@/lib/utils";
 import React, { useRef } from "react";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
@@ -69,7 +69,7 @@ export function ChatList({
                     />
                   </Avatar>
                 )}
-                <span className=" bg-accent p-3 rounded-md max-w-xs">
+                <span className=" bg-accent p-3 rounded-md max-w-xs  dark:bg-card">
                   {message.message}
                 </span>
                 {message.name !== selectedUser.name && (

apps/web/app/chat/components/chat/chat-topbar.tsx → apps/web/app/friendship/chat/components/chat/chat-topbar.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Avatar, AvatarImage } from '@/components/ui/avatar'
-import { UserData } from '@/app/chat/data';
+import { UserData } from '@/app/friendship/chat/data';
 import { Info, Phone, Video } from 'lucide-react';
 import Link from 'next/link';
 import { cn } from '@/lib/utils';

apps/web/app/chat/components/chat/chat.tsx → apps/web/app/friendship/chat/components/chat/chat.tsx

@@ -1,4 +1,4 @@
-import { Message, UserData } from "@/app/chat/data";
+import { Message, UserData } from "@/app/friendship/chat/data";
 import ChatTopbar from "./chat-topbar";
 import { ChatList } from "./chat-list";
 import React from "react";

apps/web/app/chat/components/sidebar.tsx → apps/web/app/friendship/chat/components/sidebar.tsx

@@ -11,7 +11,7 @@ import {
   TooltipProvider,
 } from "@/components/ui/tooltip";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { Message } from "@/app/chat/data";
+import { Message } from "@/app/friendship/chat/data";
 
 interface SidebarProps {
   isCollapsed: boolean;

apps/web/app/friendship/chat/components/sidenav-links.tsx

@@ -0,0 +1,55 @@
+import { FriendshipType } from "@paybox/common";
+import { BellIcon, CogIcon, HomeIcon, MailIcon, UsersIcon } from "lucide-react";
+
+export const sidenavLinks = [
+    {
+        id: "Dashboard",
+        variant: "ghost",
+        title: "Dashboard",
+        link: "/friendship/",
+        icon: HomeIcon,
+    },
+    {
+        id: "friends",
+        variant: "ghost",
+        title: "Friends",
+        link: "/friendship/friends",
+        icon: UsersIcon,
+    },
+    {
+        id: "messages",
+        variant: "ghost",
+        title: "Messages",
+        link: "/friendship/chat",
+        icon: MailIcon,
+    },
+    {
+        id: "notifications",
+        variant: "ghost",
+        title: "Notifications",
+        link: "/friendship/notifications",
+        icon: BellIcon,
+    },
+    {
+        id: "settings",
+        variant: "ghost",
+        title: "Settings",
+        link: "/friendship/settings",
+        icon: CogIcon,
+    },
+];
+
+
+export const getFriendsTab = (friendships: FriendshipType[]) => {
+    return friendships.map((friendship) => {
+        return {
+            id: friendship.id,
+            variant: "ghost",
+            title: friendship.friend?.firstname + " " + friendship.friend?.lastname,
+            link: `/friendship/chat/${friendship.id}`,
+            //todo: pass the account image or the icon
+            icon: UsersIcon,
+
+        };
+    });
+}

apps/web/app/chat/layout.tsx → apps/web/app/friendship/chat/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { GeistSans } from 'geist/font/sans';
-import "../globals.css";
+import "../../globals.css";
 
 export const metadata: Metadata = {
     title: "Chat | Paybox",
@@ -20,6 +20,8 @@ export default function RootLayout({
     children: React.ReactNode;
 }>) {
     return (
-        <div className={GeistSans.className}>{children}</div>
+        <>
+            {children}
+        </>
     );
 }

apps/web/app/friendship/chat/page.tsx

@@ -0,0 +1,46 @@
+import { cookies } from "next/headers";
+import { ChatLayout } from "@/app/friendship/chat/components/chat/chat-layout";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import Link from "next/link";
+import { FriendshipStatusEnum, FriendshipType, WS_BACKEND_URL, responseStatus } from "@paybox/common";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../api/auth/[...nextauth]/util";
+import { redirect } from "next/navigation";
+
+
+
+export default async function Home({
+    params,
+    searchParams,
+}: {
+    params: { slug: string }
+    searchParams: { [key: string]: string | string[] | undefined }
+}) {
+    console.log(searchParams["friendshipId"]);
+    const session = await getServerSession(authOptions);
+
+    //@ts-ignore
+    const jwt = session?.user.jwt as string;
+    if (!jwt) {
+        redirect('/signin');
+    }
+
+
+    const layout = cookies().get("react-resizable-panels:layout");
+    const defaultLayout = layout ? JSON.parse(layout.value) : undefined;
+    return (
+        <main className="flex h-[calc(100dvh)] flex-col w-full">
+
+            <div className="z-10 border-t-none rounded-lg w-full h-full text-sm lg:flex">
+                {/* <ChatLayout
+                    defaultLayout={defaultLayout}
+                    navCollapsedSize={8}
+                    // friendships={friendships}
+                /> */}
+            </div>
+
+        </main>
+    );
+}

apps/web/app/friendship/components/accept-request.tsx

@@ -0,0 +1,82 @@
+"use client";
+import { Button } from '@/components/ui/button'
+import { FriendshipStatusEnum, WS_BACKEND_URL, responseStatus } from '@paybox/common';
+import { clientJwtAtom } from '@paybox/recoil';
+import { CheckCheck } from 'lucide-react'
+import React, { useEffect } from 'react'
+import { useSetRecoilState } from 'recoil';
+import { toast } from 'sonner';
+
+export function AcceptButton({
+    jwt,
+    friendshipId
+}: {
+    jwt: string,
+    friendshipId: string
+}) {
+    const setClientJwt = useSetRecoilState(clientJwtAtom);
+    useEffect(() => {
+        setClientJwt(jwt);
+    }, [jwt]);
+    const [unmount, setUnmount] = React.useState(false);
+
+    useEffect(() => {
+        if(unmount) {
+            return () => {
+                setUnmount(false);
+            }
+        }
+    }, [unmount]);
+
+    const accept = () => {
+        const call = async () => {
+            try {
+                const { status, friendshipStatus, msg }: {status: responseStatus, friendshipStatus: FriendshipStatusEnum, msg?: string} =
+                    await fetch(`${WS_BACKEND_URL}/friendship/accept?friendshipId=${friendshipId}`, {
+                        method: "put",
+                        headers: {
+                            "Content-Type": "application/json",
+                            Authorization: `Bearer ${jwt}`,
+                        }
+                    }).then(res => res.json());
+                if (status === responseStatus.Error) {
+                   console.error(msg);
+                   Promise.reject(msg);
+                }
+                return {friendshipStatus, status, msg};
+            } catch (error) {
+                console.log(error);
+                return {
+                    status: responseStatus.Error,
+                    msg: "Internal error",
+                    error: error,
+                }
+            }
+        };
+
+        toast.promise(call(), {
+            loading: "Accepting...",
+            success: ({msg, friendshipStatus, status}) => {
+                //todo: set some atoms
+                return "Friendship Accepted"
+            },
+            error: ({msg}) => {
+                setUnmount(true);
+                return msg;
+            }
+        });
+
+    }
+    return (
+        <>
+            <Button
+                onClick={accept}
+                variant={"default"}
+                className="flex justify-around gap-x-4"
+            >
+                <CheckCheck className="w-4 h-4" />
+                <span>Accept</span>
+            </Button>
+        </>
+    )
+}

apps/web/app/friendship/components/drawer-content.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@/components/ui/button'
+import { DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } from '@/components/ui/drawer'
+import { getFriendPubKey } from '@/lib/helper'
+import { Client, Friend } from '@paybox/common'
+import React from 'react'
+
+export async function Content({
+    friend,
+    jwt
+}: {
+    friend: Friend,
+    jwt: string
+}) {
+
+    const pubkeys = await getFriendPubKey(jwt, friend.id);
+    console.log(pubkeys, "from")
+
+    return (
+        <>
+            <DrawerHeader>
+                <DrawerTitle>{friend.firstname} {friend.lastname}</DrawerTitle>
+                <DrawerDescription>This action cannot be undone.</DrawerDescription>
+            </DrawerHeader>
+            <DrawerFooter>
+                <Button>Submit</Button>
+                <DrawerClose>
+                    <Button variant="outline">Cancel</Button>
+                </DrawerClose>
+            </DrawerFooter>
+        </>
+    )
+}