forked!!

2025-06-22 12:57:01 -04:00 · 2024-04-17 14:29:47 -04:00 · 2024-04-17 14:29:47 -04:00 · ea7451bcdc
commit ea7451bcdc
parent 538b87062a
326 changed files with 24876 additions and 2280 deletions
--- a/src/plugins/reviewDB/components/MessageButton.tsx
+++ b/src/plugins/reviewDB/components/MessageButton.tsx
@ -83,3 +83,25 @@ export function BlockButton({ onClick, isBlocked }: { onClick(): void; isBlocked
        </Tooltip>
    );
 }
+
+export function ReplyButton({ onClick }: { onClick(): void; }) {
+    return (
+        <Tooltip text="Reply Review">
+            {props => (
+                <div
+                    {...props}
+                    className={iconClasses.button}
+                    onClick={onClick}
+                    role="button"
+                >
+                    <svg width="20" height="20" viewBox="0 0 24 24">
+                        <path
+                            fill="currentColor"
+                            d="M2.3 7.3a1 1 0 0 0 0 1.4l5 5a1 1 0 0 0 1.4-1.4L5.42 9H11a7 7 0 0 1 7 7v4a1 1 0 1 0 2 0v-4a9 9 0 0 0-9-9H5.41l3.3-3.3a1 1 0 0 0-1.42-1.4l-5 5Z"
+                        />
+                    </svg>
+                </div>
+            )}
+        </Tooltip>
+    );
+}
--- a/src/plugins/reviewDB/components/ReviewComponent.tsx
+++ b/src/plugins/reviewDB/components/ReviewComponent.tsx
@ -28,8 +28,9 @@ import { blockUser, deleteReview, reportReview, unblockUser } from "../reviewDbA
 import { settings } from "../settings";
 import { canBlockReviewAuthor, canDeleteReview, canReportReview, cl, showToast } from "../utils";
 import { openBlockModal } from "./BlockedUserModal";
-import { BlockButton, DeleteButton, ReportButton } from "./MessageButton";
+import { BlockButton, DeleteButton, ReplyButton, ReportButton } from "./MessageButton";
 import ReviewBadge from "./ReviewBadge";
+import { ReviewsInputComponent } from "./ReviewsView";

 export default LazyComponent(() => {
    // this is terrible, blame mantika
@ -50,8 +51,11 @@ export default LazyComponent(() => {

    const dateFormat = new Intl.DateTimeFormat();

-    return function ReviewComponent({ review, refetch, profileId }: { review: Review; refetch(): void; profileId: string; }) {
+    return function ReviewComponent({ review, refetch, profileId, isReply = false }: { review: Review; refetch(): void; profileId: string; isReply?: boolean; }) {
        const [showAll, setShowAll] = useState(false);
+        const [replying, setReplying] = useState(false);
+
+        const refresh = () => { refetch(); setReplying(false); };

        function openModal() {
            openUserProfile(review.sender.discordID);
@ -69,7 +73,7 @@ export default LazyComponent(() => {
                    } else {
                        deleteReview(review.id).then(res => {
                            if (res) {
-                                refetch();
+                                refresh();
                            }
                        });
                    }
@ -117,75 +121,89 @@ export default LazyComponent(() => {
        }

        return (
-            <div className={classes(cl("review"), cozyMessage, wrapper, message, groupStart, cozy)} style={
-                {
-                    marginLeft: "0px",
-                    paddingLeft: "52px", // wth is this
-                    // nobody knows anymore
-                }
-            }>
+            <>
+                <div className={classes(cl("review-container"), cozyMessage, wrapper, message, groupStart, cozy, isReply ? cl("reply") : cl("review"))} style={
+                    {
+                        marginLeft: "0px",
+                        paddingLeft: "52px", // wth is this
+                        // nobody knows anymore
+                    }
+                }>
+                    {isReply && <div className={cl("reply-line")} />}

-                <img
-                    className={classes(avatar, clickable)}
-                    onClick={openModal}
-                    src={review.sender.profilePhoto || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
-                    style={{ left: "0px", zIndex: 0 }}
-                />
-                <div style={{ display: "inline-flex", justifyContent: "center", alignItems: "center" }}>
-                    <span
-                        className={classes(clickable, username)}
-                        style={{ color: "var(--channels-default)", fontSize: "14px" }}
-                        onClick={() => openModal()}
-                    >
-                        {review.sender.username}
-                    </span>
+                    <>
+                        <img style={{ left: "0px", zIndex: 0 }}
+                            className={classes(avatar, clickable, cl("avatar"))}
+                            onClick={openModal}
+                            src={review.sender.profilePhoto || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
+                        />

-                    {review.type === ReviewType.System && (
-                        <span
-                            className={classes(botTag.botTagVerified, botTag.botTagRegular, botTag.botTag, botTag.px, botTag.rem)}
-                            style={{ marginLeft: "4px" }}>
-                            <span className={botTag.botText}>
-                                System
+                        <div className={cl("white-line")} />
+
+                        <div style={{ display: "inline-flex", justifyContent: "center", alignItems: "center" }}>
+                            <span
+                                className={classes(clickable, username)}
+                                style={{ color: "var(--channels-default)", fontSize: "14px" }}
+                                onClick={() => openModal()}
+                            >
+                                {review.sender.username}
                            </span>
-                        </span>
-                    )}
-                </div>
-                {isAuthorBlocked && (
-                    <ReviewBadge
-                        name="You have blocked this user"
-                        description="You have blocked this user"
-                        icon="/assets/aaee57e0090991557b66.svg"
-                        type={0}
-                        onClick={() => openBlockModal()}
-                    />
-                )}
-                {review.sender.badges.map(badge => <ReviewBadge {...badge} />)}
-
-                {
-                    !settings.store.hideTimestamps && review.type !== ReviewType.System && (
-                        <Timestamp timestamp={new Date(review.timestamp * 1000)} >
-                            {dateFormat.format(review.timestamp * 1000)}
-                        </Timestamp>)
-                }
-
-                <div className={cl("review-comment")}>
-                    {(review.comment.length > 200 && !showAll)
-                        ? [Parser.parseGuildEventDescription(review.comment.substring(0, 200)), "...", <br />, (<a onClick={() => setShowAll(true)}>Read more</a>)]
-                        : Parser.parseGuildEventDescription(review.comment)}
-                </div>
-
-                {review.id !== 0 && (
-                    <div className={classes(container, isHeader, buttons)} style={{
-                        padding: "0px",
-                    }}>
-                        <div className={classes(buttonClasses.wrapper, buttonsInner)} >
-                            {canReportReview(review) && <ReportButton onClick={reportRev} />}
-                            {canBlockReviewAuthor(profileId, review) && <BlockButton isBlocked={isAuthorBlocked} onClick={blockReviewSender} />}
-                            {canDeleteReview(profileId, review) && <DeleteButton onClick={delReview} />}
+                            {review.type === ReviewType.System && (
+                                <span
+                                    className={classes(botTag.botTagVerified, botTag.botTagRegular, botTag.botTag, botTag.px, botTag.rem)}
+                                    style={{ marginLeft: "4px" }}>
+                                    <span className={botTag.botText}>
+                                        System
+                                    </span>
+                                </span>
+                            )}
                        </div>
-                    </div>
-                )}
-            </div>
+
+                        {isAuthorBlocked && (
+                            <ReviewBadge
+                                name="You have blocked this user"
+                                description="You have blocked this user"
+                                icon="/assets/aaee57e0090991557b66.svg"
+                                type={0}
+                                onClick={() => openBlockModal()}
+                            />
+                        )}
+                        {review.sender.badges.map(badge => <ReviewBadge {...badge} />)}
+
+                        {
+                            !settings.store.hideTimestamps && review.type !== ReviewType.System && (
+                                <Timestamp timestamp={new Date(review.timestamp * 1000)} >
+                                    {dateFormat.format(review.timestamp * 1000)}
+                                </Timestamp>)
+                        }
+
+                        <div className={cl("review-comment")}>
+                            {(review.comment.length > 200 && !showAll)
+                                ? [Parser.parseGuildEventDescription(review.comment.substring(0, 200)), "...", <br />, (<a onClick={() => setShowAll(true)}>Read more</a>)]
+                                : Parser.parseGuildEventDescription(review.comment)}
+                        </div>
+                        {review.id !== 0 && (
+                            <div className={classes(container, isHeader, cl("buttons"))} style={{
+                                padding: "0px",
+                            }}>
+                                <div className={classes(buttonClasses.wrapper, buttonsInner)} >
+                                    {canReportReview(review) && <ReportButton onClick={reportRev} />}
+                                    {canBlockReviewAuthor(profileId, review) && <BlockButton isBlocked={isAuthorBlocked} onClick={blockReviewSender} />}
+                                    {canDeleteReview(profileId, review) && <DeleteButton onClick={delReview} />}
+                                    {!isReply && <ReplyButton onClick={() => setReplying(!replying)} />}
+                                </div>
+                            </div>
+                        )}
+                    </>
+
+                    {
+                        review.replies?.map(r => (
+                            <ReviewComponent review={r} refetch={refresh} profileId={profileId} isReply={true} />
+                        ))
+                    }
+                    {replying && <ReviewsInputComponent repliesTo={review.id} discordId={profileId} name={review.sender.username} isAuthor={false} refetch={refresh} />}
+                </div>
+            </>
        );
    };
 });
--- a/src/plugins/reviewDB/components/ReviewsView.tsx
+++ b/src/plugins/reviewDB/components/ReviewsView.tsx
@ -120,7 +120,7 @@ function ReviewList({ refetch, reviews, hideOwnReview, profileId }: { refetch():
 }


-export function ReviewsInputComponent({ discordId, isAuthor, refetch, name }: { discordId: string, name: string; isAuthor: boolean; refetch(): void; }) {
+export function ReviewsInputComponent({ discordId, isAuthor, refetch, name, repliesTo }: { discordId: string, name: string; isAuthor: boolean; refetch(): void; repliesTo?: number; }) {
    const { token } = Auth;
    const editorRef = useRef<any>(null);
    const inputType = ChatInputTypes.FORM;
@ -142,9 +142,10 @@ export function ReviewsInputComponent({ discordId, isAuthor, refetch, name }: {
                    placeholder={
                        !token
                            ? "You need to authorize to review users!"
-                            : isAuthor
-                                ? `Update review for @${name}`
-                                : `Review @${name}`
+                            : repliesTo ? `Reply to @${name}`
+                                : isAuthor
+                                    ? `Update review for @${name}`
+                                    : `Review @${name}`
                    }
                    type={inputType}
                    disableThemedBackground={true}
@ -152,9 +153,12 @@ export function ReviewsInputComponent({ discordId, isAuthor, refetch, name }: {
                    textValue=""
                    onSubmit={
                        async res => {
+                            // I know this naming is deranged, but for compatibility it has to stay this way
+
                            const response = await addReview({
                                userid: discordId,
                                comment: res.value,
+                                repliesto: repliesTo,
                            });

                            if (response) {
--- a/src/plugins/reviewDB/entities.ts
+++ b/src/plugins/reviewDB/entities.ts
@ -97,4 +97,5 @@ export interface Review {
    sender: ReviewAuthor,
    timestamp: number;
    type?: ReviewType;
+    replies?: Review[];
 }
--- a/src/plugins/reviewDB/settings.tsx
+++ b/src/plugins/reviewDB/settings.tsx
@ -69,7 +69,6 @@ export const settings = definePluginSettings({
                >
                    Support ReviewDB development
                </Button>
-
                <Button onClick={async () => {
                    let url = "https://reviewdb.mantikafasi.dev";
                    const token = await getToken();
--- a/src/plugins/reviewDB/style.css
+++ b/src/plugins/reviewDB/style.css
@ -1,4 +1,9 @@
-[class|="section"]:not([class|="lastSection"]) + .vc-rdb-view {
+:root {
+    --vc-rdb-avatar-size: 40px;
+    --vc-rdb-spacing-size: 8px;
+}
+
+[class|="section"]:not([class|="lastSection"])+.vc-rdb-view {
    margin-top: 12px;
 }

@ -16,13 +21,13 @@
    border: 1px solid var(--profile-message-input-border-color);
 }

-.vc-rdb-modal-footer > div {
+.vc-rdb-modal-footer>div {
    width: 100%;
    margin: 6px 16px;
 }

 /* When input becomes disabled(while sending review), input adds unneccesary padding to left, this prevents it */
-.vc-rdb-input > div > div {
+.vc-rdb-input>div>div {
    padding-left: 0 !important;
 }

@ -58,13 +63,13 @@
    margin-top: 16px;
 }

-.vc-rdb-review {
-    padding-top: 8px !important;
-    padding-bottom: 8px !important;
+.vc-rdb-review-container {
+    padding-top: var(--vc-rdb-spacing-size) !important;
+    padding-bottom: var(--vc-rdb-spacing-size) !important;
    padding-right: 32px !important;
 }

-.vc-rdb-review:hover {
+.vc-rdb-review-container:hover {
    background: var(--background-message-hover) !important;
    border-radius: 8px;
 }
@ -76,7 +81,7 @@
 .vc-rdb-review-comment {
    overflow-y: hidden;
    margin-top: 1px;
-    margin-bottom: 8px;
+    margin-bottom: var(--vc-rdb-spacing-size);
    color: var(--text-normal);
    font-size: 15px;
 }
@ -138,3 +143,45 @@
 .vc-rdb-block-modal-unblock {
    cursor: pointer;
 }
+
+.vc-rdb-avatar {
+    z-index: 1 !important;
+}
+
+.vc-rdb-white-line {
+    position: absolute;
+    left: calc(var(--vc-rdb-avatar-size) / 2);
+    top: calc(var(--vc-rdb-avatar-size) + 2 * var(--vc-rdb-spacing-size));
+    width: 2px;
+    height: calc(100% - var(--vc-rdb-avatar-size) - 4 * var(--vc-rdb-spacing-size) - 2px);
+    ;
+    border-left: 3px solid gray;
+}
+
+.vc-rdb-reply-line {
+    position: relative;
+    border: 3px solid gray;
+    border-top: none;
+    border-right: none;
+    border-bottom-left-radius: 20px;
+    height: calc(8px);
+    width: calc(24px);
+    top: calc(var(--vc-rdb-avatar-size) / 2 + 4px);
+    left: calc(var(--vc-rdb-avatar-size) * -2 - 4px);
+}
+
+.vc-rdb-profile-photo-container {
+    position: relative;
+}
+
+.vc-rdb-buttons {
+    opacity: 0;
+}
+
+.vc-rdb-reply:hover>.vc-rdb-buttons {
+    opacity: 1;
+}
+
+.vc-rdb-review:hover>.vc-rdb-buttons {
+    opacity: 1;
+}