Merge pull request #51 from tgxn/develop

approvals improvements

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}

README.md

@@ -2,21 +2,21 @@
 
 # Lemmy Modder https://modder.lemmyverse.net/ 
 
-⚡ A moderation tool for Lemmy community moderators and site admins. ⚡
+⚡ A moderation tool for [Lemmy](https://github.com/LemmyNet/lemmy) community moderators and site admins. ⚡
 
  > Currently only compatible with 0.18.x instances _(and not 0.19.x)_, as the [Lemmy SDK is not backwards-compatible.](https://github.com/LemmyNet/lemmy-js-client/issues/194) ☹
 
 ## Screenshots
-| | |
-| --- | --- | 
-| ![Login Screen](./docs/image/050/image-2.png) | ![Clean Screen](./docs/image/050/image.png)   |
+| | | |
+| --- | --- | --- |
+| ![Reports](./docs/image/reports.png) | ![Registrations](./docs/image/registrations.png) | ![Mod Log](./docs/image/modlog.png) |
 
 ## Features
 - **Does not save, proxy or store any of your user credentials or data**
-  - Data is stored in your browsers' [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is only sent to your Lemmy instance.
-- User Registration Approval
-    - Improved user registrations approval panel
-    - See more user data when making decision, join date, email, etc.
+  - Data is stored in your browsers [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is only sent to your Lemmy instance.
+- User Registration Panel
+    - Improved user registrations experience
+    - More user data when making decision, join date, email, etc.
 - Content Reports
     - Resolve/Unresolve Reports
     - Remove/Restore/Purge Posts & Comments
@@ -30,23 +30,18 @@
 
 ## Hosting Options
 
-To use Lemmy Modder - You can either:
+You can either use the hosted option at https://modder.lemmyverse.net/ or host your own instance.
 
-1. Use the hosted version at https://modder.lemmyverse.net/ _(Production)_
-2. Clone this repo and start your own instance alongside Lemmy  _(Production)_
-3. Download the latest release and run it locally on your computer _(Development/Testing)_
+### Running Own Instance with Docker Compose
 
-### Running with Docker Compose
+You will need docker & docker-compose installed on your server.
 
-You will need:
-- docker & docker-compose
 
 1. Add this (service) to your docker-compose alongside the lemmy services, or wherever you like:
 ```yaml
-## your networks and volumes from lemmy should stay here
-
+## ... your networks and volumes from lemmy should stay here
 services:
-  ## your other lemmy services
+  ## ... your other lemmy services should stay here
 
   ## this is the lemmy modder container, you can change port 9696 to wehatever you like
   lemmy-modder:
@@ -55,33 +50,38 @@ services:
     ports:
       - 9696:80
 ```
-
+2. Bring up the new container `docker-compose up -d lemmy-modder`
 2. Setup your reverse proxy to proxy requests for `modder.example.com` to the new container on port `80`.
 
 _There are no more steps, as there is no users or databases._
 
-### Running Locally
+## Development
+
+### Setup Development Environment
 
-You will need:
+Just make sure you have these tools installed:
 - git
 - nodejs & npm (use nvm to install `v18.17.0`)
 
-1. Clone this repo `git clone https://github.com/tgxn/lemmy-modder.git`
-2. Switch to the repo directory `cd lemmy-modder`
-3. Install dependencies `npm i`
-4. Start the dev server `npm start`
-
-## Development
-
-### Dev Running
-
-1. Clone this repo `git clone https://github.com/tgxn/lemmy-modder.git`
-2. Switch to the repo directory `cd lemmy-modder`
-3. Install dependencies `npm i`
-4. Start the dev server `npm start`
+#### Steps 
 
+1. Clone this Github repo locally, and switch to the cloned directory
+```
+git clone https://github.com/tgxn/lemmy-modder.git && cd lemmy-modder
+```
+3. Install the Node Dependencies 
+```
+npm i
+```
+4. Start the dev server
+```
+npm start
+```
+5. Open http://localhost:9696 in your browser
 
 # Credits
 
+Lemmy  Devs https://github.com/LemmyNet
+
 Logo made by Andy Cuccaro (@andycuccaro) under the CC-BY-SA 4.0 license.
 

src/components/ApprovalsList.jsx

@@ -50,31 +50,14 @@ function ApplicationListItem({ registration }) {
   if (isAccepted === true) {
     resolved = true;
     itemColor = "success";
-    itemIcon = (
-      <Tooltip title={`Approved by @${registration.admin.name}`} variant="plain" placement="right">
-        <ThumbUpIcon fontSize="md" />
-      </Tooltip>
-    );
+    itemIcon = <ThumbUpIcon fontSize="md" />;
   } else if (isAccepted === false) {
     resolved = true;
     itemColor = "danger";
-    itemIcon = (
-      <Tooltip
-        title={`Rejected by @${registration.admin.name}`}
-        variant="plain"
-        placement="right"
-        color="danger"
-      >
-        <ThumbDownIcon fontSize="md" />
-      </Tooltip>
-    );
+    itemIcon = <ThumbDownIcon fontSize="md" />;
   } else {
     itemColor = "primary";
-    itemIcon = (
-      <Tooltip title={`Undecided`} variant="plain" placement="right" color="primary">
-        <HelpIcon fontSize="md" />
-      </Tooltip>
-    );
+    itemIcon = <HelpIcon fontSize="md" />;
   }
 
   return (
@@ -117,24 +100,63 @@ function ApplicationListItem({ registration }) {
           <PersonMetaLine creator={registration.creator} local_user={registration.creator_local_user} />
 
           <Typography variant="h6" component="h2" sx={{ mt: 0, display: "flex", gap: 1 }}>
+            {isAccepted !== null && (
+              <SquareChip
+                color={isAccepted ? "success" : "danger"}
+                variant="outlined"
+                // TODO upstream needs support for saving time the registration was actioned
+                // show how long ago `registration_application.published`
+                // tooltip={
+                //   <>
+                //     {isAccepted ? "approved" : "denied"}{" "}
+                //     <MomentAdjustedTimeAgo fromNow>
+                //       {registration.registration_application.published}
+                //     </MomentAdjustedTimeAgo>
+                //   </>
+                // }
+                tooltipPlacement="bottom"
+              >
+                {isAccepted
+                  ? `approved by @${registration.admin.name}`
+                  : `denied by @${registration.admin.name}`}
+              </SquareChip>
+            )}
+
             {registration.creator.published && (
-              <SquareChip color="primary" variant="outlined" tooltip={registration.creator.published}>
+              <SquareChip
+                color="primary"
+                variant="outlined"
+                tooltip={registration.creator_local_user.validator_time}
+                tooltipPlacement="bottom"
+              >
                 registered{" "}
-                <MomentAdjustedTimeAgo fromNow>{registration.creator.published}</MomentAdjustedTimeAgo>
+                <MomentAdjustedTimeAgo fromNow>
+                  {registration.creator_local_user.validator_time}
+                </MomentAdjustedTimeAgo>
               </SquareChip>
             )}
 
             {registration.creator_local_user.show_nsfw && (
               <>
-                <SquareChip color="neutral" variant="outlined" tooltip={"Enable NSFW?"}>
+                <SquareChip
+                  color="neutral"
+                  variant="outlined"
+                  tooltip={"Do they enable NSFW?"}
+                  tooltipPlacement="bottom"
+                >
                   {registration.creator_local_user.show_nsfw ? "NSFW: Yes" : "NSFW: No"}
                 </SquareChip>
               </>
             )}
 
             {registration.creator_local_user.email && (
               <>
-                <SquareChip color="success" variant="outlined" tooltip={"User Email Address"}>
+                <SquareChip
+                  color="success"
+                  variant="outlined"
+                  tooltip={"User Email Address"}
+                  tooltipPlacement="bottom"
+                >
                   {registration.creator_local_user.email}
                 </SquareChip>
               </>
@@ -180,7 +202,8 @@ function ApplicationListItem({ registration }) {
             >
               <Box>
                 <Typography level="body1" fontWeight="lg">
-                  Admin Denied with reason
+                  {!deny_reason && `${registration.admin.name} denied with no reason`}
+                  {deny_reason && `${registration.admin.name} denied:`}
                 </Typography>
                 <Typography level="body2">{deny_reason}</Typography>
               </Box>

src/components/Display.jsx

@@ -41,8 +41,14 @@ export const HeaderChip = ({ children, tooltip = null, count = 0, ...props }) =>
   </Tooltip>
 );
 
-export const SquareChip = ({ iconOnly = null, tooltip = null, color = "neutral", ...props }) => (
-  <Tooltip title={tooltip} color={"neutral"} variant="plain" placement="top">
+export const SquareChip = ({
+  iconOnly = null,
+  tooltip = null,
+  tooltipPlacement = "top",
+  color = "neutral",
+  ...props
+}) => (
+  <Tooltip title={tooltip} color={"neutral"} variant="plain" placement={tooltipPlacement}>
     <Chip
       size="sm"
       color={color}