User log popup

src/components/ApprovalsList.jsx

@@ -16,7 +16,7 @@ import ReportIcon from "@mui/icons-material/Report";
 
 import { MomentAdjustedTimeAgo, SquareChip } from "./Display.jsx";
 
-import { PersonMetaLine, ReportDetails } from "./ListItem/Common.jsx";
+import { PersonMetaLine } from "./Shared/ActorMeta.jsx";
 
 import { ApproveButton, DenyButton } from "./Actions/RegistrationButtons.jsx";
 

src/components/Display.jsx

@@ -4,8 +4,8 @@ import Moment from "react-moment";
 
 import { sanitizeUrl } from "@braintree/sanitize-url";
 
+import Avatar from "@mui/joy/Avatar";
 import Typography from "@mui/joy/Typography";
-import Tooltip from "@mui/joy/Tooltip";
 import Link from "@mui/joy/Link";
 import Chip from "@mui/joy/Chip";
 
@@ -135,3 +135,19 @@ export const FediverseChipLink = ({ href, size = "md", ...props }) => {
     </BasicInfoTooltip>
   );
 };
+
+export function UserAvatar({ source, ...props }) {
+  return (
+    <Avatar
+      component="span"
+      size="sm"
+      src={source}
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+      {...props}
+    />
+  );
+}

src/components/ListItem/Comment.jsx

@@ -15,7 +15,8 @@ import { SquareChip } from "../Display.jsx";
 import { ResolveCommentReportButton, RemoveCommentButton } from "../Actions/CommentButtons.jsx";
 import { BanUserCommunityButton, BanUserSiteButton, PurgeUserSiteButton } from "../Actions/GenButtons.jsx";
 
-import { PersonMetaLine, CommunityMetaLine, ReportDetails } from "./Common.jsx";
+import { PersonMetaLine, CommunityMetaLine } from "../Shared/ActorMeta.jsx";
+import { ReportDetails } from "../Shared/ReportDetails.jsx";
 
 import { MomentAdjustedTimeAgo, SanitizedLink, FediverseChipLink, UpvoteDownvoteChip } from "../Display.jsx";
 

src/components/ListItem/PM.jsx

@@ -14,7 +14,8 @@ import { MomentAdjustedTimeAgo, SquareChip } from "../Display.jsx";
 import { ResolvePMReportButton } from "../Actions/PMButtons.jsx";
 import { BanUserSiteButton, PurgeUserSiteButton } from "../Actions/GenButtons.jsx";
 
-import { PersonMetaLine, ReportDetails } from "./Common.jsx";
+import { PersonMetaLine, CommunityMetaLine } from "../Shared/ActorMeta.jsx";
+import { ReportDetails } from "../Shared/ReportDetails.jsx";
 
 const PMContentDetail = ({ report }) => {
   return (

src/components/ListItem/Post.jsx

@@ -26,7 +26,8 @@ import { ResolvePostReportButton, RemovePostButton, PurgePostButton } from "../A
 
 import { BanUserCommunityButton, BanUserSiteButton, PurgeUserSiteButton } from "../Actions/GenButtons.jsx";
 
-import { PersonMetaLine, CommunityMetaLine, ReportDetails } from "./Common.jsx";
+import { PersonMetaLine, CommunityMetaLine } from "../Shared/ActorMeta.jsx";
+import { ReportDetails } from "../Shared/ReportDetails.jsx";
 
 import { getSiteData } from "../../hooks/getSiteData";
 

src/components/ReportsList.jsx

@@ -1,14 +1,119 @@
 import React from "react";
 
+import Card from "@mui/joy/Card";
+
 import Box from "@mui/joy/Box";
+import Badge from "@mui/joy/Badge";
+import Tooltip from "@mui/joy/Tooltip";
+
+import StickyNote2Icon from "@mui/icons-material/StickyNote2";
+import ForumIcon from "@mui/icons-material/Forum";
+import DraftsIcon from "@mui/icons-material/Drafts";
 
 import SoapIcon from "@mui/icons-material/Soap";
 
 import PostReportItem from "./ListItem/Post.jsx";
 import CommentReportItem from "./ListItem/Comment.jsx";
 import PMReportItem from "./ListItem/PM.jsx";
 
-import { ReportListItem } from "./ListItem/Common.jsx";
+function ReportListItem({ itemType, report, children }) {
+  let itemColor;
+  let itemIcon;
+  let resolved = true;
+
+  // const parsedActor = parseActorId(report.actor_id);
+
+  if (itemType == "post") {
+    resolved = report.post_report.resolved;
+    itemColor = "primary";
+    itemIcon = (
+      <Tooltip
+        title={`Post: ${report.community.actor_id.split("/")[2]}/c/${report.community.name}`}
+        variant="outlined"
+        placement="right"
+        color="primary"
+      >
+        <StickyNote2Icon fontSize="md" />
+      </Tooltip>
+    );
+  } else if (itemType == "comment") {
+    resolved = report.comment_report.resolved;
+    itemColor = "success";
+    itemIcon = (
+      <Tooltip
+        title={`Comment: ${report.community.actor_id.split("/")[2]}/c/${report.community.name}`}
+        variant="outlined"
+        placement="right"
+        color="success"
+      >
+        <ForumIcon fontSize="md" />
+      </Tooltip>
+    );
+  } else if (itemType == "pm") {
+    resolved = report.private_message_report.resolved;
+    itemColor = "warning";
+    itemIcon = (
+      <Tooltip
+        title={`PM: @${report.private_message_creator.name}`}
+        variant="outlined"
+        placement="right"
+        color="warning"
+      >
+        <DraftsIcon fontSize="md" />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Badge
+      badgeContent={itemIcon}
+      color={itemColor}
+      size="lg"
+      variant="outlined"
+      badgeInset="5px 0 0 5px"
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: "left",
+      }}
+      sx={{
+        "& .MuiBadge-badge": {
+          height: "25px",
+          zIndex: 950,
+        },
+      }}
+    >
+      <Card
+        sx={{
+          outline: resolved ? "1px solid #35ae716e" : null,
+          display: "flex",
+          flexDirection: "row",
+          gap: 0,
+          width: "100%",
+          p: 2.5,
+        }}
+      >
+        {/* {isFetching && (
+          <Card
+            color="neutral"
+            sx={{
+              width: "100%",
+              // height: "100%",
+              position: "absolute",
+              top: 0,
+              left: 0,
+              zIndex: 1000,
+              bottom: 0,
+              right: 0,
+            }}
+          >
+            Loading...
+          </Card>
+        )} */}
+        {children}
+      </Card>
+    </Badge>
+  );
+}
 
 export default function ReportsList({ reportsList }) {
   if (!reportsList || reportsList.length == 0) {