attempting another type of timeline but not nice

packages/web/components/Conversations/TimelineAudioClip.tsx

@@ -12,6 +12,9 @@ import {
 } from "../../recoil/main";
 import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
 import { useState } from "react";
+import { UserAvatarSizes } from "../UserDetails/UserAvatar";
+import { FaPlay } from "react-icons/fa";
+import { Tooltip } from "antd";
 
 export default function TimelineAudioClip(props: {
   index: number;
@@ -46,7 +49,7 @@ export default function TimelineAudioClip(props: {
     });
   };
 
-  let customClasses = "bg-slate-100 border";
+  let customClasses = "bg-slate-100";
   if (audioQueueCurrentClip?.id == props.audioClip.id) {
     customClasses = "animate-pulse bg-orange-200";
   } else if (
@@ -56,6 +59,38 @@ export default function TimelineAudioClip(props: {
     customClasses = "bg-sky-100";
   }
 
+  return (
+    <span
+      onClick={playAudioClip}
+      className={`flex flex-row px-5 items-start group ${customClasses}`}
+    >
+      <span className="flex flex-col border-dashed border-l-2 h-[5rem] border-l-slate-500">
+        <span className="-translate-x-5 z-10">
+          <MasterAvatarGroupWithUserFetch
+            showCurrUser={true}
+            listOfUserIds={audioClipUser?.id ? [audioClipUser?.id] : []}
+            size={UserAvatarSizes.large}
+          />
+        </span>
+      </span>
+
+      <span className="flex flex-col ml-2 mr-10">
+        <span className="text-slate-500 font-semibold">
+          {audioClipUser?.firstName + " " + audioClipUser?.lastName}
+        </span>
+        <span className="text-slate-400 text-xs">
+          {moment(props.audioClip.createdDate.toDate()).fromNow()}
+        </span>
+      </span>
+
+      <Tooltip title={"Play from here."}>
+        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 group-hover:visible invisible">
+          <FaPlay className="ml-auto text-lg text-emerald-500" />
+        </span>
+      </Tooltip>
+    </span>
+  );
+
   return (
     <span
       onClick={playAudioClip}

packages/web/components/Drawer/CreateItemModal.tsx

@@ -24,7 +24,7 @@ export default function CreateItemModal(props: {
   };
 
   const handleCancel = () => {
-    toast.success("closing");
+    console.log("closing");
     props.handleClose();
   };
 

packages/web/components/MainTabsOrPages/ViewConvo.tsx

@@ -16,6 +16,7 @@ import {
   FaExternalLinkAlt,
   FaGithub,
   FaImages,
+  FaLink,
   FaMicrophone,
   FaPlay,
   FaRegClock,
@@ -239,19 +240,18 @@ export default function ViewConvo(props: { conversationId: string }) {
 
         // check that the link is valid
         if (!isValidHttpUrl(text)) {
-          toast.error("Not a valid link");
-          return;
+          console.log("Not a valid link");
         }
 
         // set it as we should show modal regardless now
         setPastedLink(text);
-
-        setShowItemModal(true);
       })
       .catch((err) => {
         console.error("Failed to read clipboard contents: ", err);
         toast.error("Please enable permissions for clipboard");
       });
+
+    setShowItemModal(true);
   };
 
   const keyMap: KeyMap = {
@@ -376,7 +376,7 @@ export default function ViewConvo(props: { conversationId: string }) {
                   onClick={() => setEditTldrMode(true)}
                   className="flex flex-row group items-center"
                 >
-                  <span className="text-md tracking-widest font-semibold text-slate-300 uppercase mb-2">
+                  <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
                     TLDR;
                   </span>
 
@@ -418,12 +418,12 @@ export default function ViewConvo(props: { conversationId: string }) {
               </span>
             )}
 
-            {/* have one row, but just translate it along y downward to put it in it's own place */}
+            {/* timeline clips */}
+            <span className="text-md tracking-widest font-semibold text-slate-300 uppercase mt-[2rem]">
+              Conversation
+            </span>
 
-            <span
-              className="flex flex-row flex-nowrap pb-[10rem] py-[5rem] 
-          overflow-auto min-h-max shadow-xl bg-slate-50 rounded mt-5"
-            >
+            <span className="flex flex-col flex-nowrap pb-[10rem] mt-5">
               {audioClips?.length > 0 ? (
                 audioClips.reverse().map((audClip, index) => {
                   const restAudioClips = audioClips.slice(index);
@@ -447,35 +447,6 @@ export default function ViewConvo(props: { conversationId: string }) {
 
               <span ref={endOfTimeline}></span>
             </span>
-
-            {/* stuff for recording and playing action */}
-            <span className="mx-auto flex flex-row py-10 space-x-5">
-              <Tooltip title={"Press and hold R to send a voice clip."}>
-                <span
-                  className={`ml-auto shadow-lg flex flex-row items-center p-5 
-            justify-center rounded-lg font-bold hover:cursor-pointer ${
-              isRecording
-                ? "bg-orange-700 text-white"
-                : "bg-slate-50 text-orange-700"
-            }`}
-                >
-                  <FaMicrophone className="text-xl " />
-                </span>
-              </Tooltip>
-
-              <Tooltip title={"SPACE to play last conversation chunk."}>
-                <span
-                  className={`shadow-lg flex flex-row items-center p-5 justify-center 
-          rounded-lg font-bold ${
-            !audioQueueCurrentItem
-              ? "bg-slate-50 text-teal-600"
-              : " bg-teal-600 text-white"
-          }`}
-                >
-                  <FaPlay className="text-xl" />
-                </span>
-              </Tooltip>
-            </span>
           </div>
 
           {/* drawer items */}
@@ -529,6 +500,44 @@ export default function ViewConvo(props: { conversationId: string }) {
           </div>
         </div>
       </div>
+
+      {/* stuff for recording and playing and sharing action */}
+      <span className="mx-auto flex flex-row space-x-5 p-5">
+        <Tooltip title={"Press and hold R to send a voice clip."}>
+          <span
+            className={`ml-auto shadow-lg flex flex-row items-center p-5 
+            justify-center rounded-lg font-bold hover:cursor-pointer ${
+              isRecording
+                ? "bg-orange-700 text-white"
+                : "bg-slate-50 text-orange-700"
+            }`}
+          >
+            <FaMicrophone className="text-xl " />
+          </span>
+        </Tooltip>
+
+        <Tooltip title={"SPACE to play last conversation chunk."}>
+          <span
+            className={`shadow-lg flex flex-row items-center p-5 justify-center 
+          rounded-lg font-bold ${
+            !audioQueueCurrentItem
+              ? "bg-slate-50 text-teal-600"
+              : " bg-teal-600 text-white"
+          }`}
+          >
+            <FaPlay className="text-xl" />
+          </span>
+        </Tooltip>
+
+        <Tooltip title={"CTRL+V to share a link."}>
+          <span
+            className={`shadow-lg flex flex-row items-center p-5 justify-center 
+          rounded-lg font-bold bg-slate-50 text-purple-600`}
+          >
+            <FaLink className="text-xl" />
+          </span>
+        </Tooltip>
+      </span>
     </>
   );
 }

packages/web/components/UserDetails/MasterAvatarGroup.tsx

@@ -39,7 +39,7 @@ export default function MasterAvatarGroup(props: {
         key={finalistUsers[0].id}
         src={finalistUsers[0].avatarUrl}
         shape={AVATAR_SHAPE}
-        size={"default"}
+        size={props.size || UserAvatarSizes.default}
       />
     );
   }

packages/web/pages/s/index.tsx

@@ -74,7 +74,7 @@ export default function Me() {
             timeout={400}
             classNames="slide"
           >
-            <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
+            <div className="flex-1 flex flex-col justify-start items-stretch container mx-auto">
               {fullCleanPageContent}
             </div>
           </CSSTransition>