Make some changes to reviewdb ui and add badges to it (#245)

src/plugins/reviewDB/components/ReviewBadge.tsx

@@ -0,0 +1,45 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { MaskedLinkStore, Tooltip } from "@webpack/common";
+
+import { Badge } from "../entities/Badge";
+
+export default function ReviewBadge(badge: Badge) {
+    return (
+        <Tooltip
+            text={badge.badge_name}>
+            {({ onMouseEnter, onMouseLeave }) => (
+                <img
+                    width="24px"
+                    height="24px"
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                    src={badge.badge_icon}
+                    alt={badge.badge_description}
+                    style={{ verticalAlign: "middle", marginLeft: "4px" }}
+                    onClick={() =>
+                        MaskedLinkStore.openUntrustedLink({
+                            href: badge.redirect_url,
+                        })
+                    }
+                />
+            )}
+        </Tooltip>
+    );
+}

src/plugins/reviewDB/components/ReviewComponent.tsx

@@ -24,6 +24,7 @@ import { Review } from "../entities/Review";
 import { deleteReview, reportReview } from "../Utils/ReviewDBAPI";
 import { canDeleteReview, openUserProfileModal, showToast } from "../Utils/Utils";
 import MessageButton from "./MessageButton";
+import ReviewBadge from "./ReviewBadge";
 
 export default LazyComponent(() => {
     // this is terrible, blame mantika
@@ -78,24 +79,32 @@ export default LazyComponent(() => {
         }
 
         return (
-            <div className={classes(cozyMessage, message, groupStart, wrapper, cozy, "user-review")}>
-                <div className={contents}>
+            <div className={classes(cozyMessage, wrapper, message, groupStart, cozy, "user-review")} style={
+                {
+                    marginLeft: "0px",
+                    paddingLeft: "52px",
+                    paddingRight: "16px"
+                }
+            }>
+
+                <div className={contents} style={{ paddingLeft: "0px" }}>
                     <img
                         className={classes(avatar, clickable)}
-                        style={{ left: "8px" }}
                         onClick={openModal}
                         src={review.profile_photo || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
+                        style={{ left: "0px" }}
                     />
                     <span
-                        className={classes(username, clickable)}
-                        style={{ color: "var(--text-normal)", right: "8px" }}
+                        className={classes(clickable, username)}
+                        style={{ color: "var(--channels-default)", fontSize: "14px" }}
                         onClick={() => openModal()}
                     >
                         {review.username}
                     </span>
+                    {review.badges.map(badge => <ReviewBadge {...badge} />)}
                     <p
                         className={classes(messageContent, defaultColor)}
-                        style={{ fontSize: 15, marginTop: 4, right: "8px" }}
+                        style={{ fontSize: 15, marginTop: 4 }}
                     >
                         {review.comment}
                     </p>

src/plugins/reviewDB/components/ReviewsView.tsx

@@ -54,12 +54,10 @@ export default function ReviewsView({ userId }: { userId: string; }) {
 
     return (
         <div className="ReviewDB">
-            <>
             <Text
                 tag="h2"
                 variant="eyebrow"
                 style={{
-                        paddingLeft: "0px",
                     marginBottom: "12px",
                     color: "var(--header-primary)"
                 }}
@@ -74,24 +72,22 @@ export default function ReviewsView({ userId }: { userId: string; }) {
                 />
             )}
             {reviews?.length === 0 && (
-                    <Forms.FormText style={{ paddingLeft: "0px", paddingRight: "12px", marginBottom: "12px" }}>
+                <Forms.FormText style={{ padding: "12px", paddingTop: "0px", paddingLeft: "4px", fontWeight: "bold", fontStyle: "italic" }}>
                     Looks like nobody reviewed this user yet. You could be the first!
                 </Forms.FormText>
             )}
             <textarea
-                    className={classes(Classes.textarea, "enter-comment")}
+                className={classes(Classes.textarea.replace("textarea", ""), "enter-comment")}
+                // this produces something like '-_59yqs ...' but since no class exists with that name its fine
                 placeholder={"Review @" + UserStore.getUser(userId)?.username ?? ""}
                 onKeyDown={onKeyPress}
                 style={{
-                        padding: "12px",
+                    marginTop: "6px",
+                    resize: "none",
                     marginBottom: "12px",
-                        color: "var(--text-normal)",
-                        border: "1px solid var(--profile-message-input-border-color)",
-                        fontSize: "14px",
-                        borderRadius: "3px",
+                    overflow: "hidden",
                 }}
             />
-            </>
         </div>
     );
 }

src/plugins/reviewDB/entities/Badge.ts

@@ -0,0 +1,26 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+
+export interface Badge {
+    badge_name: string;
+    badge_description: string;
+    badge_icon: string;
+    redirect_url: string;
+    badge_type: number;
+}

src/plugins/reviewDB/entities/Review.ts

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Badge } from "./Badge";
+
 export interface Review {
     comment: string,
     id: number,
@@ -24,4 +26,5 @@ export interface Review {
     star: number,
     username: string,
     profile_photo: string;
+    badges: Badge[];
 }

src/webpack/common.tsx

@@ -290,3 +290,7 @@ export const ContextMenu = mapMangledModuleLazy('type:"CONTEXT_MENU_OPEN"', {
         options?: { enableSpellCheck?: boolean; }
     ): void;
 };
+
+export const MaskedLinkStore = mapMangledModuleLazy('"MaskedLinkStore"', {
+    openUntrustedLink: filters.byCode(".apply(this,arguments)")
+});