adding in docs and starting page for convo details page

packages/web/components/Drawer/LinkIcon.tsx

@@ -8,7 +8,9 @@ import {
   FaGlobe,
   FaGoogleDrive,
 } from "react-icons/fa";
-import Link, { LinkType } from "../models/link";
+import Link, { LinkType } from "@nirvana/common/models/link";
+
+import { SiGooglemeet } from "react-icons/si";
 
 export default function LinkIcon(props: {
   className?: string;
@@ -41,7 +43,7 @@ export default function LinkIcon(props: {
       return <FaFileCode {...rest} className={`${className} text-pink-200 `} />;
     case LinkType.github:
       return (
-        <FaGithubSquare {...rest} className={`${className} text-gray-200 `} />
+        <FaGithubSquare {...rest} className={`${className} text-gray-400 `} />
       );
     case LinkType.googleDrive:
       return (
@@ -52,7 +54,13 @@ export default function LinkIcon(props: {
         <FaFileImage {...rest} className={`${className} text-purple-500 `} />
       );
     case LinkType.pdf:
-      <FaFilePdf {...rest} className={`${className} text-orange-500 `} />;
+      return (
+        <FaFilePdf {...rest} className={`${className} text-orange-500 `} />
+      );
+    case LinkType.googleMeet:
+      return (
+        <SiGooglemeet {...rest} className={`${className} text-emerald-500 `} />
+      );
     default:
       return (
         <FaFileAlt {...rest} className={`${className} text-orange-500 `} />

packages/web/components/MainTabsOrPages/Conversations.tsx

@@ -1,4 +1,5 @@
 import { Avatar, Badge } from "antd";
+import { useRouter } from "next/router";
 import {
   FaDotCircle,
   FaWalking,
@@ -12,8 +13,18 @@ import {
   FaGithub,
   FaAtlassian,
 } from "react-icons/fa";
+import { Routes } from "@nirvana/common/helpers/routes";
 
 export default function Conversations() {
+  const router = useRouter();
+
+  const handleViewConversationDetails = (convoId) => {
+    router.push({
+      pathname: Routes.home,
+      query: { convoId },
+    });
+  };
+
   return (
     <>
       <span className="flex flex-row items-center mb-5 px-5 w-full">
@@ -66,7 +77,10 @@ export default function Conversations() {
         <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
       </span>
 
-      <span className="flex flex-col w-full items-stretch">
+      <span
+        onClick={() => handleViewConversationDetails("woah")}
+        className="flex flex-col w-full items-stretch"
+      >
         {/* engineering */}
         <span
           className="py-2 px-4 border-t border-t-slate-200 flex flex-row hover:bg-slate-50 transition-all

packages/web/components/MainTabsOrPages/ViewConvo.tsx

@@ -0,0 +1,95 @@
+import { LinkType } from "@nirvana/common/models/link";
+import { Tooltip } from "antd";
+import { FaExternalLinkAlt, FaGithub, FaImages } from "react-icons/fa";
+import LinkIcon from "../Drawer/LinkIcon";
+
+const testDrawerItems: {
+  linkType: LinkType;
+  linkName: string;
+  relativeSentTime: string;
+}[] = [
+  {
+    linkType: LinkType.googleMeet,
+    linkName: "Gmeet - Meeting",
+    relativeSentTime: "5 seconds ago",
+  },
+  {
+    linkType: LinkType.atlassian,
+    linkName: "Jira Ticket - Ecommerce Plugin",
+    relativeSentTime: "20 minutes ago",
+  },
+  {
+    linkType: LinkType.github,
+    linkName: "React library for hotkeys",
+    relativeSentTime: "2 hours ago",
+  },
+  {
+    linkType: LinkType.googleDrive,
+    linkName: "Engineering - Team Drive Folder",
+    relativeSentTime: "last week",
+  },
+];
+
+export default function ViewConvo(props: { conversationId: string }) {
+  // auth if do not have this conversation in react cache, then we are not authorized
+
+  // if somehow it's still cached but we were removed,
+  // then authenticate by checking if we are in the array of users for the conversation
+
+  return (
+    <>
+      <div className="flex flex-row items-stretch mt-5 space-x-10">
+        {/* drawer items */}
+        <div className="flex-1 flex flex-col max-w-xs">
+          <span className="text-md tracking-widest font-semibold text-slate-300 uppercase mb-2">
+            Shared
+          </span>
+
+          {/* column list of drawer items - github first one  */}
+          {testDrawerItems.map((link) => (
+            <span
+              key={link.linkName}
+              className="group flex flex-row items-center border-t p-2 hover:bg-slate-50 transition-all"
+            >
+              {/* <span className="rounded-lg bg-slate-200 p-2 hover:cursor-pointer"></span> */}
+
+              <LinkIcon
+                linkType={link.linkType}
+                className="text-3xl shrink-0"
+              />
+
+              <span className="flex flex-col ml-2">
+                <span className="text-slate-500">{link.linkName}</span>
+                <span className="text-slate-300 text-xs">
+                  {link.relativeSentTime}
+                </span>
+              </span>
+
+              <span className="flex flex-row ml-auto space-x-1 group-hover:visible invisible">
+                <Tooltip title={"Add to personal drawer."}>
+                  <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 ">
+                    <FaImages className="text-xl text-slate-400" />
+                  </span>
+                </Tooltip>
+
+                <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 ">
+                  <FaExternalLinkAlt className="text-lg text-slate-400" />
+                </span>
+              </span>
+            </span>
+          ))}
+        </div>
+
+        {/* main timeline view with action buttons on top */}
+        <div className="flex-1 flex flex-col">
+          <span
+            className="text-md tracking-widest font-semibold 
+          text-slate-300 uppercase"
+          >
+            Timeline
+          </span>
+        </div>
+      </div>
+    </>
+  );
+}