Merge pull request #54 from tgxn/develop

healthier content
tgxn · Oct 18, 2023 · 0d8a9c7 · 0d8a9c7
2 parents c3ef1cc + dea9663
commit 0d8a9c7
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 50 deletions.
diff --git a/public/icons/fedi.png b/public/icons/fedi.png
diff --git a/src/components/Display.jsx b/src/components/Display.jsx
@@ -6,9 +6,10 @@ import { sanitizeUrl } from "@braintree/sanitize-url";
 
 import Tooltip from "@mui/joy/Tooltip";
 import Link from "@mui/joy/Link";
-
 import Chip from "@mui/joy/Chip";
 
+import FediVerse from "../../public/icons/fedi.png";
+
 // time in formats `2023-07-14T04:12:07.720101` are in GMT and must be adjusted to unix epoch for moment display// replace .720101 with Z
 export function MomentAdjustedTimeAgo({ children, ...props }) {
   if (children.includes("T")) {
@@ -52,8 +53,10 @@ export const SquareChip = ({
     <Chip
       size="sm"
       color={color}
+      variant="outlined"
       startDecorator={iconOnly}
       sx={{
+        // height: "25px",
         cursor: "default",
         fontWeight: "normal",
         userSelect: "none",
@@ -73,3 +76,33 @@ export const SanitizedLink = ({ children, href, ...props }) => {
     </Link>
   );
 };
+
+export const FediverseChipLink = ({ href, ...props }) => {
+  return (
+    <Tooltip title="Open Remote Content" color="neutral" variant="plain" placement="top">
+      <Chip
+        component={Link}
+        href={href}
+        size="sm"
+        variant="outlined"
+        onClick={(e) => e.stopPropagation()}
+        startDecorator={
+          <img
+            src={FediVerse}
+            style={{
+              height: "20px",
+              // width: "1.5rem",
+            }}
+          />
+        }
+        sx={{
+          fontWeight: "normal",
+          userSelect: "none",
+          borderRadius: 4,
+          "--Chip-gap": 0,
+        }}
+        {...props}
+      />
+    </Tooltip>
+  );
+};
diff --git a/src/components/ListItem/Comment.jsx b/src/components/ListItem/Comment.jsx
@@ -2,13 +2,15 @@ import React from "react";
 
 import Box from "@mui/joy/Box";
 import Typography from "@mui/joy/Typography";
+import Alert from "@mui/joy/Alert";
 
 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";
 
@@ -17,16 +19,40 @@ import { BanUserCommunityButton, BanUserSiteButton, PurgeUserSiteButton } from "
 
 import { PersonMetaLine, ReportDetails } from "./Common.jsx";
 
-import { MomentAdjustedTimeAgo, SanitizedLink } from "../Display.jsx";
+import { MomentAdjustedTimeAgo, SanitizedLink, FediverseChipLink } from "../Display.jsx";
+
+import { getSiteData } from "../../hooks/getSiteData";
 
 const CommentContentDetail = ({ report }) => {
+  const { baseUrl, siteData, localPerson, userRole } = getSiteData();
+
+  // we need to merge the `post.id` and the current instance's `base_url` to get the link
+  const localPostLink = `https://${baseUrl}/comment/${report.comment.id}`;
+
+  // link across instances
+  // split ap_id
+  const apId = report.post.ap_id.split("/")[2];
+  const fediversePostLink = report.post.ap_id;
+
   return (
     <Box>
+      {/* Comment Title */}
+      <Typography variant="h4" component="h2">
+        {/* <Typography>
+          <ForumIcon fontSize="large" />
+        </Typography> */}
+        <SanitizedLink href={localPostLink} target="_blank" rel="noopener noreferrer">
+          Open Comment in Context
+        </SanitizedLink>
+      </Typography>
+
       {/* Comment Meta */}
       <Typography variant="h6" component="h2" sx={{ display: "flex", gap: 1 }}>
+        {baseUrl != apId && <FediverseChipLink href={fediversePostLink} />}
+
         {report.comment.published && (
           <SquareChip color="neutral" variant="outlined" tooltip={report.comment.published}>
-            <MomentAdjustedTimeAgo fromNow>{report.comment.published}</MomentAdjustedTimeAgo>
+            Created <MomentAdjustedTimeAgo fromNow>{report.comment.published}</MomentAdjustedTimeAgo>
           </SquareChip>
         )}
 
@@ -60,15 +86,25 @@ const CommentContentDetail = ({ report }) => {
         )}
       </Typography>
 
-      {/* Comment Title */}
-      <Typography variant="h4" component="h2">
-        {/* <Typography>
-          <ForumIcon fontSize="large" />
-        </Typography> */}
-        <SanitizedLink href={report.comment.ap_id} target="_blank" rel="noopener noreferrer">
-          Show Comment in Context
-        </SanitizedLink>
-      </Typography>
+      {/* Comment Content */}
+      <Alert
+        startDecorator={<FormatQuoteIcon />}
+        variant="outlined"
+        color="neutral"
+        sx={{ mt: 1 }}
+        // endDecorator={
+        //   <React.Fragment>
+        //     <Button variant="plain" color="danger" sx={{ mr: 1 }}>
+        //       Undo
+        //     </Button>
+        //     <IconButton variant="soft" size="sm" color="danger">
+        //       <CloseIcon />
+        //     </IconButton>
+        //   </React.Fragment>
+        // }
+      >
+        {report.comment.content}
+      </Alert>
 
       <PersonMetaLine
         creator={report.comment_creator}
@@ -77,17 +113,6 @@ const CommentContentDetail = ({ report }) => {
           px: 1,
         }}
       />
-
-      {/* Comment Content */}
-      <Typography
-        variant="body1"
-        component="p"
-        sx={{
-          p: 1,
-        }}
-      >
-        {report.comment.content}
-      </Typography>
     </Box>
   );
 };

diff --git a/src/components/ListItem/Common.jsx b/src/components/ListItem/Common.jsx
@@ -18,7 +18,7 @@ import BlockIcon from "@mui/icons-material/Block";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import DeleteIcon from "@mui/icons-material/Delete";
 
-import { SanitizedLink, SquareChip } from "../Display.jsx";
+import { SquareChip, MomentAdjustedTimeAgo, SanitizedLink, FediverseChipLink } from "../Display.jsx";
 import { UserTooltip } from "../Tooltip.jsx";
 
 import { parseActorId } from "../../utils.js";
@@ -196,6 +196,13 @@ export function ReportDetails({ report, creator }) {
       }}
     >
       <div>
+        <Typography variant="h6" component="h2" sx={{ display: "flex", gap: 1 }}>
+          {report.published && (
+            <SquareChip color="neutral" variant="outlined" tooltip={report.published}>
+              Reported <MomentAdjustedTimeAgo fromNow>{report.published}</MomentAdjustedTimeAgo>
+            </SquareChip>
+          )}
+        </Typography>
         <PersonMetaLine display="outline" creator={creator} />
 
         <Typography

diff --git a/src/components/ListItem/PM.jsx b/src/components/ListItem/PM.jsx
@@ -2,9 +2,11 @@ import React from "react";
 
 import Box from "@mui/joy/Box";
 import Typography from "@mui/joy/Typography";
+import Alert from "@mui/joy/Alert";
 
 import DoneAllIcon from "@mui/icons-material/DoneAll";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
 
 import { MomentAdjustedTimeAgo, SquareChip } from "../Display.jsx";
 
@@ -46,15 +48,24 @@ const PMContentDetail = ({ report }) => {
       <PersonMetaLine creator={report.private_message_creator} />
 
       {/* Post Content */}
-      <Typography
-        variant="body1"
-        component="p"
-        sx={{
-          p: 1,
-        }}
+      <Alert
+        startDecorator={<FormatQuoteIcon />}
+        variant="outlined"
+        color="neutral"
+        sx={{ mt: 1 }}
+        // endDecorator={
+        //   <React.Fragment>
+        //     <Button variant="plain" color="danger" sx={{ mr: 1 }}>
+        //       Undo
+        //     </Button>
+        //     <IconButton variant="soft" size="sm" color="danger">
+        //       <CloseIcon />
+        //     </IconButton>
+        //   </React.Fragment>
+        // }
       >
         {report.private_message.content}
-      </Typography>
+      </Alert>
 
       {/* Report Status */}
       <Typography variant="body1" component="p">

diff --git a/src/components/ListItem/Post.jsx b/src/components/ListItem/Post.jsx
@@ -3,31 +3,67 @@ import React from "react";
 import Box from "@mui/joy/Box";
 import Typography from "@mui/joy/Typography";
 
+import { sanitizeUrl } from "@braintree/sanitize-url";
+
 import ThumbsUpDownIcon from "@mui/icons-material/ThumbsUpDown";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import DoneAllIcon from "@mui/icons-material/DoneAll";
 import BlockIcon from "@mui/icons-material/Block";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 
+import Tooltip from "@mui/joy/Tooltip";
+import Link from "@mui/joy/Link";
+import Chip from "@mui/joy/Chip";
+
 import StickyNote2Icon from "@mui/icons-material/StickyNote2";
 import ForumIcon from "@mui/icons-material/Forum";
 import DraftsIcon from "@mui/icons-material/Drafts";
+import LinkIcon from "@mui/icons-material/Link";
 
-import { SquareChip } from "../Display.jsx";
+import { SquareChip, MomentAdjustedTimeAgo, SanitizedLink, FediverseChipLink } from "../Display.jsx";
 import Image from "../Image.jsx";
 
 import { ResolvePostReportButton, RemovePostButton, PurgePostButton } from "../Actions/PostButtons.jsx";
 
 import { BanUserCommunityButton, BanUserSiteButton, PurgeUserSiteButton } from "../Actions/GenButtons.jsx";
 
 import { PersonMetaLine, ReportDetails } from "./Common.jsx";
-import { MomentAdjustedTimeAgo, SanitizedLink } from "../Display.jsx";
+
+import { getSiteData } from "../../hooks/getSiteData";
 
 const PostContentDetail = ({ report }) => {
+  const { baseUrl, siteData, localPerson, userRole } = getSiteData();
+
+  // we need to merge the `post.id` and the current instance's `base_url` to get the link
+  const localPostLink = `https://${baseUrl}/post/${report.post.id}`;
+
+  // link across instances
+  // split ap_id
+  const apId = report.post.ap_id.split("/")[2];
+  const fediversePostLink = report.post.ap_id;
+
   return (
     <Box>
+      {/* Post Title */}
+      <Typography
+        variant="h2"
+        component="h2"
+        sx={{
+          fontSize: "17px",
+        }}
+      >
+        {/* <Typography>
+        <StickyNote2Icon fontSize="large" />
+      </Typography> */}
+        <SanitizedLink href={localPostLink} target="_blank" rel="noopener noreferrer">
+          {report.post.name}
+        </SanitizedLink>
+      </Typography>
+
       {/* Post Meta */}
       <Typography variant="h6" component="h2" sx={{ mt: 0, display: "flex", gap: 1 }}>
+        {baseUrl != apId && <FediverseChipLink href={fediversePostLink} />}
+
         {report.post.nsfw == true && (
           <SquareChip variant="outlined" color={"warning"}>
             NSFW
@@ -43,7 +79,7 @@ const PostContentDetail = ({ report }) => {
 
         {report.post.published && (
           <SquareChip color="neutral" variant="outlined" tooltip={report.post.published}>
-            <MomentAdjustedTimeAgo fromNow>{report.post.published}</MomentAdjustedTimeAgo>
+            Created <MomentAdjustedTimeAgo fromNow>{report.post.published}</MomentAdjustedTimeAgo>
           </SquareChip>
         )}
 
@@ -87,22 +123,6 @@ const PostContentDetail = ({ report }) => {
         )}
       </Typography>
 
-      {/* Post Title */}
-      <Typography
-        variant="h2"
-        component="h2"
-        sx={{
-          fontSize: "17px",
-        }}
-      >
-        {/* <Typography>
-          <StickyNote2Icon fontSize="large" />
-        </Typography> */}
-        <SanitizedLink href={report.post.ap_id} target="_blank" rel="noopener noreferrer">
-          {report.post.name}
-        </SanitizedLink>
-      </Typography>
-
       <PersonMetaLine
         creator={report.post_creator}
         by