From 3ddd46456c72bcf516e2a58684b97828f2da9eda Mon Sep 17 00:00:00 2001
From: Domenic Horner <domenic@tgxn.net>
Date: Wed, 1 Nov 2023 20:16:27 +0800
Subject: [PATCH] me image fixes

---
 src/components/Image.jsx            |  9 ++++--
 src/components/ListItem/Comment.jsx |  6 ++--
 src/components/ListItem/Common.jsx  | 48 ++++++++++++++++++++---------
 src/components/ListItem/PM.jsx      |  1 +
 src/components/ListItem/Post.jsx    | 18 ++++++-----
 5 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/components/Image.jsx b/src/components/Image.jsx
index 561a53b..7e52389 100644
--- a/src/components/Image.jsx
+++ b/src/components/Image.jsx
@@ -27,18 +27,21 @@ function RenderImage({ imageSrc, imageAlt = "" }) {
       height={"100%"}
       width={"100%"}
       loading="lazy"
-      style={{ visible: imageLoaded ? "visible" : "hidden" }}
+      style={{
+        visible: imageLoaded ? "visible" : "hidden",
+        // fit image to container
+      }}
       onLoad={() => setImageLoaded(true)}
       onError={() => setImageError(true)}
     />
   );
 }
 
-export default function LazyImage({ width = 175, imageSrc, imageAlt = "" }) {
+export default function LazyImage({ width = 200, imageSrc, imageAlt = "" }) {
   const isImage = imageSrc.match(/\.(jpeg|jpg|gif|png)$/) != null;
 
   return (
-    <AspectRatio sx={{ width: width }}>
+    <AspectRatio sx={{ width: width }} ratio="1/1">
       <SanitizedLink underline={"none"} href={imageSrc} target="_new">
         {isImage ? (
           <RenderImage imageSrc={imageSrc} imageAlt={imageAlt} />
diff --git a/src/components/ListItem/Comment.jsx b/src/components/ListItem/Comment.jsx
index 8fadb41..7715fb1 100644
--- a/src/components/ListItem/Comment.jsx
+++ b/src/components/ListItem/Comment.jsx
@@ -3,13 +3,11 @@ import React from "react";
 import Box from "@mui/joy/Box";
 import Typography from "@mui/joy/Typography";
 import Alert from "@mui/joy/Alert";
+import Divider from "@mui/joy/Divider";
 
-import ThumbsUpDownIcon from "@mui/icons-material/ThumbsUpDown";
-import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import DoneAllIcon from "@mui/icons-material/DoneAll";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import ForumIcon from "@mui/icons-material/Forum";
-import DraftsIcon from "@mui/icons-material/Drafts";
 import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
 
 import { SquareChip } from "../Display.jsx";
@@ -159,6 +157,8 @@ export default function CommentListItem({ report }) {
           {/* <DeletePostButton report={report} /> */}
           <RemoveCommentButton report={report} />
 
+          <Divider orientation="vertical" flexItem />
+
           <BanUserCommunityButton person={report.comment_creator} community={report.community} />
           <BanUserSiteButton person={report.comment_creator} />
           <PurgeUserSiteButton person={report.comment_creator} />
diff --git a/src/components/ListItem/Common.jsx b/src/components/ListItem/Common.jsx
index 7529608..708d77d 100644
--- a/src/components/ListItem/Common.jsx
+++ b/src/components/ListItem/Common.jsx
@@ -2,6 +2,8 @@ import React from "react";
 
 import Alert from "@mui/joy/Alert";
 import Card from "@mui/joy/Card";
+
+import Avatar from "@mui/joy/Avatar";
 import Box from "@mui/joy/Box";
 import Typography from "@mui/joy/Typography";
 import Badge from "@mui/joy/Badge";
@@ -25,6 +27,22 @@ import { parseActorId } from "../../utils.js";
 
 import { getSiteData } from "../../hooks/getSiteData";
 
+export function UserAvatar({ source, ...props }) {
+  return (
+    <Avatar
+      component="span"
+      size="sm"
+      src={source}
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+      {...props}
+    />
+  );
+}
+
 export function ReportListItem({ itemType, report, children }) {
   let itemColor;
   let itemIcon;
@@ -130,7 +148,7 @@ export function PersonMetaLine({ creator, by = false, sx }) {
   const actorInstanceBaseUrl = creator.actor_id.split("/")[2];
   const fediverseUserLink = creator.actor_id;
 
-  // console.log("creator", actorInstanceBaseUrl, fediverseUserLink);
+  // console.log("creator", creator);
 
   let localUserLink = `https://${baseUrl}/u/${creator.name}`;
   if (baseUrl != actorInstanceBaseUrl) localUserLink = `${localUserLink}@${actorInstanceBaseUrl}`;
@@ -144,16 +162,20 @@ export function PersonMetaLine({ creator, by = false, sx }) {
         ...sx,
       }}
     >
-      <Typography
-        variant="body3"
-        component="p"
+      <Box
         sx={{
           fontSize: "14px",
           overflow: "hidden",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
         }}
       >
-        {by && "by "}
-        {creator.display_name && `${creator.display_name} `}
+        {by && <Typography sx={{ pr: 1 }}>by</Typography>}
+        <UserAvatar source={creator.avatar} />
+        {creator.display_name && (
+          <Typography sx={{ fontSize: "15px", px: 1 }}>{creator.display_name}</Typography>
+        )}
         <Tooltip
           placement="top-start"
           variant="outlined"
@@ -162,18 +184,16 @@ export function PersonMetaLine({ creator, by = false, sx }) {
           disableInteractive
         >
           <Link href={creator.actor_id} target="_blank" rel="noopener noreferrer" sx={{ pb: 0.7, pl: 1 }}>
-            <Typography component="span" sx={{ fontSize: "16px", mr: 0.25 }}>
+            <Typography component="span" sx={{ mr: 0.25 }}>
               {creator.name}
             </Typography>
-            <Typography component="span" sx={{ fontSize: "12px" }}>
-              @{creator.actor_id.split("/")[2]}
-            </Typography>
+            <Typography component="span">@{creator.actor_id.split("/")[2]}</Typography>
           </Link>
         </Tooltip>
-      </Typography>
+      </Box>
 
       {/* Post Author Meta */}
-      <Typography variant="h6" component="h2" sx={{ display: "flex", gap: 1 }}>
+      <Box sx={{ display: "flex", gap: 1 }}>
         {baseUrl != actorInstanceBaseUrl && <FediverseChipLink href={fediverseUserLink} size="sm" />}
 
         {creator.admin && (
@@ -199,7 +219,7 @@ export function PersonMetaLine({ creator, by = false, sx }) {
         {creator.deleted && (
           <SquareChip color={"danger"} tooltip="User is deleted" iconOnly={<DeleteIcon fontSize="small" />} />
         )}
-      </Typography>
+      </Box>
     </Box>
   );
 }
@@ -279,7 +299,7 @@ export function ReportDetails({ report, creator }) {
       variant={"soft"}
       color="warning"
       sx={{
-        mt: 2,
+        mt: 1,
         mb: 1,
         p: 2,
       }}
diff --git a/src/components/ListItem/PM.jsx b/src/components/ListItem/PM.jsx
index d8281af..b8be4c4 100644
--- a/src/components/ListItem/PM.jsx
+++ b/src/components/ListItem/PM.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import Box from "@mui/joy/Box";
 import Typography from "@mui/joy/Typography";
 import Alert from "@mui/joy/Alert";
+import Divider from "@mui/joy/Divider";
 
 import DoneAllIcon from "@mui/icons-material/DoneAll";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
diff --git a/src/components/ListItem/Post.jsx b/src/components/ListItem/Post.jsx
index 39e62c0..cfaa1bd 100644
--- a/src/components/ListItem/Post.jsx
+++ b/src/components/ListItem/Post.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import Box from "@mui/joy/Box";
 import Typography from "@mui/joy/Typography";
 import Alert from "@mui/joy/Alert";
+import Divider from "@mui/joy/Divider";
 
 import DoneAllIcon from "@mui/icons-material/DoneAll";
 import BlockIcon from "@mui/icons-material/Block";
@@ -175,19 +176,20 @@ export default function PostListItem({ report }) {
           >
             <PostContentDetail report={report} />
           </Box>
+
           {/* Show External Link or Image for URLs */}
           {report.post.url && (
             <Box
               sx={{
-                flexGrow: 0,
-                flexShrink: 0,
-                flexBasis: "auto",
+                // flexGrow: 0,
+                // flexShrink: 0,
+                // flexBasis: "auto",
                 // width: "175px",
-                // height: "200px",
-                pr: 2,
+                // height: "500px",
+                pl: 2,
                 // flexAlign: "center",
-                justifyContent: "center",
-                display: "flex",
+                // justifyContent: "center",
+                // display: "flex",
                 // flexDirection: "column",
               }}
             >
@@ -223,6 +225,8 @@ export default function PostListItem({ report }) {
             {/* @TODO Maybe only show purge is post is deleted?? */}
             <PurgePostButton report={report} />
 
+            <Divider orientation="vertical" flexItem />
+
             <BanUserCommunityButton person={report.post_creator} community={report.community} />
             <BanUserSiteButton person={report.post_creator} />
             <PurgeUserSiteButton person={report.post_creator} />