Merge pull request #46 from IzzyDotExe/transcripts-redesign

redesign transcript
IzzyDotExe · Jul 9, 2024 · d67108a · d67108a
2 parents ba9134a + 1343391
commit d67108a
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 28 deletions.
diff --git a/arc3-dash/src/components/Transcripts/TranscriptMessage.jsx b/arc3-dash/src/components/Transcripts/TranscriptMessage.jsx
@@ -1,14 +1,14 @@
 import axios from 'axios';
 import { useState, useEffect } from 'react'; 
 
-export function TranscriptMessage({data, key}) {
+export function TranscriptMessage({data, key, showuser}) {
 
   const [user, setUser] = useState(null);
 
   const UserName = user ? user.username : "User";
   const Avatar = user ? `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png?size=1024` : "/blank-avatar.jpg"; 
   const date = new Date(data.createdat);
-  const formattedDate = date.toLocaleString('en-US', { timeZoneName: 'short' });
+  const formattedDate = date.toLocaleString('en-CA');
 
   useEffect(() => {
 
@@ -20,26 +20,50 @@ export function TranscriptMessage({data, key}) {
 
   return (
     <>
-      <div id={key} class="chatlog__message-group">
-        <div className="chatlog__message-container">
-          <div className="chatlog__message">
-            <div className="chatlog__message-aside">
-              <img style={{opacity: data.comment? "40%": "100%"}} className="chatlog__avatar"
-                src={Avatar}
-                alt="Avatar" loading="lazy"/>
-            </div>
-            <div className="chatlog__message-primary">
-              <div className="chatlog__header">
-                <span className="chatlog__author" style={{opacity: data.comment? "40%": "100%"}} title={UserName} data-user-id={data.sendersnowflake}>{UserName}</span> 
-                <span className="chatlog__timestamp"><a style={{opacity: data.comment? "50%": "100%"}} href={`#${key}`}>{formattedDate} {`${data.comment? "Comment": ""}`}</a></span>
+
+
+          {showuser &&
+              <div id={key} class="chatlog__message-group">
+              <div className="chatlog__message-container">
+                <div className="chatlog__message">
+                  <div className="chatlog__message-aside">
+                    <img style={{opacity: data.comment ? "40%" : "100%"}} className="chatlog__avatar"
+                         src={Avatar}
+                         alt="Avatar" loading="lazy"/>
+                  </div>
+                  <div className="chatlog__message-primary">
+                    <div className="chatlog__header">
+                      <span className="chatlog__author" style={{opacity: data.comment ? "40%" : "100%"}}
+                            title={UserName} data-user-id={data.sendersnowflake}>{UserName}</span>
+                      <span className="chatlog__timestamp"><a style={{opacity: data.comment ? "50%" : "100%"}}
+                                                              href={`#${key}`}>{formattedDate} {`${data.comment ? "Comment" : ""}`}</a></span>
+                    </div>
+                    <div class='chatlog__content chatlog__markdown'>
+                      <span style={{opacity: data.comment ? "50%" : "100%"}}
+                            className="chatlog__markdown-preserve">{data.comment ? data.messagecontent.split("# ")[1] : data.messagecontent}</span>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div class='chatlog__content chatlog__markdown'>
-                <span style={{opacity: data.comment? "50%": "100%"}} className="chatlog__markdown-preserve">{data.comment? data.messagecontent.split("# ")[1] : data.messagecontent}</span>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
+          }
+
+        {
+            !showuser && <>
+                <div className="chatlog__message">
+                  <div className="chatlog__message-aside under">
+                  </div>
+                  <div className="chatlog__message-primary under  ">
+                    <div className='chatlog__content chatlog__markdown'>
+                      <span style={{opacity: data.comment ? "50%" : "100%"}}
+                            className="chatlog__markdown-preserve">{data.comment ? data.messagecontent.split("# ")[1] : data.messagecontent}</span>
+                    </div>
+                  </div>
+                </div>
+              </>
+          }
+
+
     </>
   )
 }
diff --git a/arc3-dash/src/routes/Transcript.css b/arc3-dash/src/routes/Transcript.css
@@ -139,7 +139,7 @@ a:hover {
 .transcript-body {
     margin: 0;
     padding: 0;
-    background-color: #36393e;
+    background-color: rgb(30, 30, 30);
     color: #dcddde;
     font-family: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 17px;
@@ -200,7 +200,7 @@ a:hover {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1)
 }
 
-.chatlog__message-group {
+.chatlog__message:has( + .chatlog__message-group) {
     margin-bottom: 1rem
 }
 
@@ -226,7 +226,7 @@ a:hover {
 }
 
 .chatlog__message:hover {
-    background-color: #32353b
+    background-color: rgb(35, 35, 35)
 }
 
 .chatlog__message:hover .chatlog__short-timestamp {
@@ -268,6 +268,10 @@ a:hover {
     min-width: 0
 }
 
+.under {
+    margin: 0;
+}
+
 .chatlog__reply {
     display: flex;
     margin-bottom: 0.15rem;

diff --git a/arc3-dash/src/routes/Transcript.jsx b/arc3-dash/src/routes/Transcript.jsx
@@ -1,5 +1,5 @@
 import { useParams } from 'react-router';
-import { useState, useEffect } from 'react';
+import {useState, useEffect, useCallback} from 'react';
 import axios from 'axios';
 
 import './Transcript.css'
@@ -32,6 +32,19 @@ export default function Transcript() {
 
   }, [mailId, guildid]);
 
+  const renderMessages = useCallback(() => {
+
+      if (!modmail)
+          return
+
+      var prevmail = {sendersnowflake:0}
+      return modmail.map((x, i, d) => {
+          var showuser = x.sendersnowflake !== prevmail.sendersnowflake
+          prevmail = x;
+          return <TranscriptMessage showuser={showuser} data={x} key={i}/>
+      })
+  }, [modmail])
+
   return (
     <>
       <div className="preamble">
@@ -43,15 +56,13 @@ export default function Transcript() {
 
         <div className="preamble__entries-container">
             <div className="preamble__entry">{ServerName}</div>
-            <div className="preamble__entry"><button onClick={toggleSidebar}>Transcripts</button></div>
+            <div className="preamble__entry"><button className="button" onClick={toggleSidebar}>Transcripts</button></div>
             <div className="preamble__entry">{mailId}</div>
         </div>
 
       </div>
 
-      <p>{modmail.map((x, i, d) => {
-        return <TranscriptMessage data={x} key={i}/>
-      })}</p>
+      <p>{renderMessages()}</p>
 
       <div className="postamble">
         <div className="postamble__entry">Saved {modmail.length} message(s)</div>