GithubRepos: Update for Modal V2 + Fix Star & Buttons

2025-10-30 10:40:22 -04:00 · 2025-10-30 10:40:22 -04:00 · b049ab3f38
commit b049ab3f38
parent 77c84bf202
5 changed files with 50 additions and 33 deletions
--- a/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
+++ b/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
@ -6,8 +6,9 @@

 import { classNameFactory } from "@api/Styles";
 import { BaseText } from "@components/BaseText";
+import { Button, TextButton } from "@components/Button";
 import { openModal } from "@utils/modal";
-import { Button, React, useEffect, UserProfileStore, useState } from "@webpack/common";
+import { React, useEffect, UserProfileStore, useState } from "@webpack/common";

 import { settings } from "..";
 import { fetchReposByUserId, fetchReposByUsername, fetchUserInfo, GitHubUserInfo } from "../githubApi";
@ -15,6 +16,8 @@ import { GitHubRepo } from "../types";
 import { RepoCard } from "./RepoCard";
 import { ReposModal } from "./ReposModal";

+export const cl = classNameFactory("vc-github-repos-");
+
 export function GitHubReposComponent({ id, theme }: { id: string, theme: string; }) {
    const [repos, setRepos] = useState<GitHubRepo[]>([]);
    const [loading, setLoading] = useState(true);
@ -22,8 +25,6 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
    const [userInfo, setUserInfo] = useState<GitHubUserInfo | null>(null);
    const [returnJustButton, setReturnJustButton] = useState(false);

-    const cl = classNameFactory("vc-github-repos-");
-
    const openReposModal = () => {
        if (!userInfo) return;

@ -101,9 +102,8 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
        return (
            <Button
                className={cl("button")}
-                size={Button.Sizes.SMALL}
-                look={Button.Looks.LINK}
-                color={Button.Colors.TRANSPARENT}
+                size="small"
+                variant="secondary"
                onClick={openReposModal}
            >
                Show GitHub Repositories
@ -134,15 +134,13 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
                }
            </div>
            <div className={cl("footer")}>
-                <Button
+                <TextButton
                    className={cl("show-more")}
-                    size={Button.Sizes.SMALL}
-                    look={Button.Looks.LINK}
-                    color={Button.Colors.TRANSPARENT}
+                    color="secondary"
                    onClick={openReposModal}
                >
                    Show More
-                </Button>
+                </TextButton>
            </div>
        </div>
    );
--- a/src/equicordplugins/githubRepos/components/ReposModal.tsx
+++ b/src/equicordplugins/githubRepos/components/ReposModal.tsx
@ -4,12 +4,14 @@
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

+import { Button } from "@components/Button";
 import { HeadingPrimary } from "@components/Heading";
 import { ModalContent, ModalFooter, ModalHeader, ModalRoot } from "@utils/modal";
-import { Button, React } from "@webpack/common";
+import { React } from "@webpack/common";

 import { getLanguageColor } from "../colors";
 import { GitHubRepo } from "../types";
+import { cl } from "./GitHubReposComponent";
 import { Star } from "./Star";

 interface ReposModalProps {
@ -33,18 +35,18 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
    const renderTableRow = (repo: GitHubRepo) => (
        <tr key={repo.id} onClick={() => window.open(repo.html_url, "_blank")}>
            <td>
-                <div className="vc-github-repos-table-name">{repo.name}</div>
+                <div className={cl("table-name")}>{repo.name}</div>
            </td>
            <td>
-                <div className="vc-github-repos-table-description">
+                <div className={cl("table-description")}>
                    {repo.description || ""}
                </div>
            </td>
            <td>
                {repo.language && (
-                    <div className="vc-github-repos-table-language">
+                    <div className={cl("table-language")}>
                        <span
-                            className="vc-github-repos-table-language-color"
+                            className={cl("table-language-color")}
                            style={{ backgroundColor: getLanguageColor(repo.language) }}
                        />
                        <span>{repo.language}</span>
@ -52,8 +54,8 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
                )}
            </td>
            <td>
-                <div className="vc-github-repos-table-stars">
-                    <Star className="vc-github-repos-table-star-icon" />
+                <div className={cl("table-stars")}>
+                    <Star className={cl("table-star-icon")} />
                    <span>{repo.stargazers_count.toLocaleString()}</span>
                </div>
            </td>
@ -61,15 +63,15 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
    );

    return (
-        <ModalRoot className="vc-github-repos-modal" size="large" {...rootProps}>
+        <ModalRoot className={cl("modal")} size="large" {...rootProps}>
            <ModalHeader>
-                <HeadingPrimary className="vc-github-repos-modal-title">
+                <HeadingPrimary className={cl("modal-title")}>
                    {username}'s GitHub Repositories
                </HeadingPrimary>
            </ModalHeader>
-            <ModalContent className="vc-github-repos-modal-content">
-                <div className="vc-github-repos-table-container">
-                    <table className="vc-github-repos-table">
+            <ModalContent className={cl("modal-content")}>
+                <div className={cl("table-container")}>
+                    <table className={cl("table")}>
                        <colgroup>
                            <col style={{ width: "20%" }} />
                            <col style={{ width: "45%" }} />
@ -85,13 +87,15 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
            </ModalContent>
            <ModalFooter>
                <Button
+                    className={cl("modal-footer-github")}
+                    variant="primary"
                    onClick={() => window.open(`https://github.com/${username}?tab=repositories`, "_blank")}
                >
                    View on GitHub
                </Button>
                <Button
-                    color={Button.Colors.TRANSPARENT}
-                    look={Button.Looks.FILLED}
+                    className={cl("modal-footer-close")}
+                    variant="secondary"
                    onClick={rootProps.onClose}
                >
                    Close
--- a/src/equicordplugins/githubRepos/components/Star.tsx
+++ b/src/equicordplugins/githubRepos/components/Star.tsx
@ -15,7 +15,6 @@ export function Star({ className, width = 16, height = 16 }: IconProps) {
            width={width}
            height={height}
            viewBox="0 0 16 16"
-            fill="var(--text-warning)"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z" />
--- a/src/equicordplugins/githubRepos/index.tsx
+++ b/src/equicordplugins/githubRepos/index.tsx
@ -63,18 +63,28 @@ export default definePlugin({
    settings,

    patches: [
+        // User Popout
        {
            find: ".hasAvatarForGuild(null==",
            replacement: {
-                match: /(?<=user:(\i),bio:null==(\i)\?.+?currentUser:\i,guild:\i}\))/,
-                replace: ",$self.ProfilePopoutComponent({ user: $1, displayProfile: $2 })"
+                match: /currentUser:\i,guild:\i\}\)(?=\])/,
+                replace: "$&,$self.ProfilePopoutComponent({ user: arguments[0].user, displayProfile: arguments[0].displayProfile })"
            }
        },
+        // User Profile Modal v1
        {
-            find: "appsConnections,applicationRoleConnection",
+            find: ".connections,userId:",
            replacement: {
-                match: /(?<=user:(\i).{0,15}displayProfile:(\i).*?application\.id\)\)\}\))/,
-                replace: ",$self.ProfilePopoutComponent({ user: $1, displayProfile: $2 })"
+                match: /user:(\i).{0,15}displayProfile:(\i).*?application\.id\)\)\}\)/,
+                replace: "$&,$self.ProfilePopoutComponent({ user: arguments[0].user, displayProfile: arguments[0].displayProfile }),"
+            }
+        },
+        // User Profile Modal v2
+        {
+            find: ".MODAL_V2,onClose:",
+            replacement: {
+                match: /displayProfile:(\i).*?profileAppConnections\}\)\}\)/,
+                replace: "$&,$self.ProfilePopoutComponent({ user: arguments[0].user, displayProfile: $1 }),"
            }
        }
    ],
--- a/src/equicordplugins/githubRepos/styles.css
+++ b/src/equicordplugins/githubRepos/styles.css
@ -28,8 +28,9 @@

 .vc-github-repos-button,
 .vc-github-repos-show-more {
+    color: var(--text-default);
+    background-color: var(--control-background-primary-default);
    width: 100%;
-    border: 1px solid var(--profile-body-divider-color, var(--input-border)) !important;
 }

 .vc-github-repo-card {
@ -180,5 +181,10 @@
 }

 .vc-github-repos-table-star-icon {
-    color: var(--text-warning);
+    color: var(--info-warning-foreground);
+    fill: var(--info-warning-foreground);
 }
+
+.vc-github-repos-modal-footer-close {
+    margin-right: 5px;
+}