grid method sort of done, now can just plug in data

packages/common/models/clientModels/conversationData.md

@@ -0,0 +1,48 @@
+export default class ConversationData { // want all of the contents of a
+conversation in one place for the frontend // need all of the content items in
+the conversation for the past week // can be audio clip or link for now // if
+user wants more data, click button to fetch further back // see if this convo is
+a priority one // all users in the conversation: userId's perhaps, but the
+actual user we can get from the relevantUsersCache map // want to create
+individual convo chunks...if I send three messages in a row, it should show my
+name and only one click to listen to all three in order
+
+// B - conversations - last activity date - update cache item for when last time
+this conversation had something going on (new link, new room, new clip...) AND
+other users just subscribe to this published source - last audioClip url - last
+// -> users - A -> last interaction date // -> audioClips - c // -> links // ->
+live }
+
+# Listeners
+
+### A - listener for all - users within conversation documents
+
+### B - listener for changes to overall top level convo details
+
+### C - get once audio messages for a relevant conversation - maybe last 3 messages
+
+### D - get once latest links for all relevant conversations
+
+### F - live room listener - for all relevant convos, stay up to date on the live rooms associated
+
+// one map: all relevant users, a map we build based on where the user visits
+
+// one map: conversation id -> conversationData as above to get everything
+relevant // fetch only all convos in last 90 days // search for any other ones
+in the search bar
+
+// filter selector to get live convos // filter selector to get all priority
+convos // filter selector to get all later convos // filter selector to get all
+done convos
+
+// filter selector to get a map of default "inbox" conversations: // go through
+all conversations in the conversation map and place in right category /\*\*
+
+- {
+- "Today": [if latest message was today],
+- "Last 7 Days": [if convo last message was > day - 7],
+- "earlier this month": [...not in above two, but still > day - 30],
+- "mm yyyy": [create these if convo is older than the last threshold]
+- } \*/
+
+//

packages/web/components/MainTabsOrPages/ViewConvo.tsx

@@ -48,6 +48,7 @@ const testAudioClips: {
   relativeSentTime: string;
   duration: number;
   alreadyPlayed: boolean;
+  isGap?: boolean;
 }[] = [
   {
     senderName: "John",
@@ -55,6 +56,14 @@ const testAudioClips: {
     duration: 150,
     alreadyPlayed: true,
   },
+
+  {
+    senderName: "Moha",
+    relativeSentTime: "5 minutes ago",
+    duration: 600,
+    alreadyPlayed: false,
+    isGap: true,
+  },
   {
     senderName: "Alex",
     relativeSentTime: "7 hours ago",
@@ -67,6 +76,7 @@ const testAudioClips: {
     duration: 300,
     alreadyPlayed: false,
   },
+
   {
     senderName: "Alex",
     relativeSentTime: "30 minutes ago",
@@ -81,6 +91,9 @@ const testAudioClips: {
   },
 ];
 
+const gridRows = 4;
+const gridItems = 4 * 100;
+
 export default function ViewConvo(props: { conversationId: string }) {
   // auth if do not have this conversation in react cache, then we are not authorized
 
@@ -89,48 +102,7 @@ export default function ViewConvo(props: { conversationId: string }) {
 
   return (
     <>
-      <div className="flex flex-row items-stretch mt-5 space-x-10">
+      <div className="flex flex-col items-stretch mt-5 space-y-10">
-        {/* drawer items */}
-        <div className="flex-1 flex flex-col max-w-xs shrink-0">
-          <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-400 text-sm">{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 overflow-auto">
           {/* header */}
@@ -179,40 +151,64 @@ export default function ViewConvo(props: { conversationId: string }) {
             </span>
           </span>
 
-          {/* have one row, but just translate it along y downward to put it in it's own place */}
+          {/* grid */}
-          <span className="flex flex-row flex-nowrap pb-[10rem] py-[5rem] overflow-auto min-h-max">
+          <div className="grid grid-rows-4 auto-cols-max grid-flow-col overflow-auto relative">
-            {testAudioClips.map((audClip, index) => (
+            {[...Array(gridItems)].map((e, i) => (
-              <span
+              <div key={i} className="border w-[5rem] h-[5rem]"></div>
-                key={index}
-                className={`flex flex-row items-center p-5 rounded h-[5rem] shadow shrink-0
-                 ${index % 2 == 1 && "translate-y-20"} ${
-                  index % 2 == 0 && ""
-                } ${
-                  audClip.alreadyPlayed ? "bg-slate-100 border" : "bg-sky-50 "
-                }`}
-                style={{
-                  width: `${Math.round(audClip.duration)}px;`,
-                  //   minWidth: "fit-content",
-                }}
-              >
-                <UserAvatar
-                  userFirstName={"s"}
-                  status={UserStatus.busy}
-                  size={UserAvatarSizes.large}
-                  avatarUrl={"https://joeschmoe.io/api/v1/" + Math.random()}
-                />
-
-                <span className="flex flex-col ml-2">
-                  <span className="text-slate-500 font-semibold">
-                    {audClip.senderName}
-                  </span>
-                  <span className="text-slate-400 text-xs">
-                    {audClip.relativeSentTime}
-                  </span>
-                </span>
-              </span>
             ))}
-          </span>
+
+            {/* have one row, but just translate it along y downward to put it in it's own place */}
+            <span className="flex flex-row flex-nowrap pb-[10rem] py-[5rem] overflow-auto min-h-max absolute">
+              {testAudioClips.map((audClip, index) => {
+                if (audClip.isGap) {
+                  return (
+                    <span
+                      key={index}
+                      className={`flex flex-row items-center p-5 rounded h-[5rem] shadow shrink-0
+               ${index % 2 == 1 && "translate-y-20"} ${index % 2 == 0 && ""}`}
+                      style={{
+                        // minWidth: "max-content",
+                        width: `5rem`,
+                      }}
+                    ></span>
+                  );
+                }
+                return (
+                  <span
+                    key={index}
+                    className={`flex flex-row items-center p-5 rounded h-[5rem] shadow shrink-0
+                 ${index % 2 == 1 && "translate-y-20"} ${
+                      index % 2 == 0 && ""
+                    } ${
+                      audClip.alreadyPlayed
+                        ? "bg-slate-100 border"
+                        : "bg-sky-100 "
+                    }`}
+                    style={{
+                      // minWidth: "max-content",
+                      width: `10rem`,
+                    }}
+                  >
+                    <UserAvatar
+                      userFirstName={"s"}
+                      status={UserStatus.busy}
+                      size={UserAvatarSizes.large}
+                      avatarUrl={"https://joeschmoe.io/api/v1/" + Math.random()}
+                    />
+
+                    <span className="flex flex-col ml-2">
+                      <span className="text-slate-500 font-semibold">
+                        {audClip.senderName}
+                      </span>
+                      <span className="text-slate-400 text-xs">
+                        {audClip.relativeSentTime}
+                      </span>
+                    </span>
+                  </span>
+                );
+              })}
+            </span>
+          </div>
 
           {/* stuff for recording and playing action */}
           <span className="mx-auto flex flex-row py-10 space-x-5">
@@ -235,6 +231,52 @@ export default function ViewConvo(props: { conversationId: string }) {
             </Tooltip>
           </span>
         </div>
+
+        {/* drawer items */}
+        <div className="flex-1 flex flex-col">
+          <span className="text-md tracking-widest font-semibold text-slate-300 uppercase mb-2">
+            Shared
+          </span>
+
+          {/* row of cards drawer items  */}
+          <span className="flex flex-row items-stretch gap-5 overflow-auto w-full pb-10">
+            {testDrawerItems.map((link) => (
+              <span
+                key={link.linkName}
+                className="group flex flex-row items-center border rounded 
+                p-2 hover:bg-slate-50 transition-all shrink-0 w-[15rem] bg-slate-50 text-ellipsis"
+              >
+                {/* <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-400 text-sm">
+                    {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>
+            ))}
+          </span>
+        </div>
       </div>
     </>
   );