From 5a7289e6c758c8ec1811c2051a4753cbfdee16b9 Mon Sep 17 00:00:00 2001
From: panbread <93918332+Panniku@users.noreply.github.com>
Date: Sun, 6 Apr 2025 22:23:23 +0400
Subject: [PATCH]  fix(githubRepos): refactor and compactify (#219)

---
 .../components/GitHubReposComponent.tsx       |  55 +++---
 .../githubRepos/components/RepoCard.tsx       |  83 ++++++---
 .../githubRepos/components/Star.tsx           |   2 +-
 src/equicordplugins/githubRepos/index.tsx     |   7 +-
 src/equicordplugins/githubRepos/styles.css    | 158 ++++--------------
 src/equicordplugins/githubRepos/types.ts      |   1 -
 6 files changed, 127 insertions(+), 179 deletions(-)

diff --git a/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx b/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
index 34b40495..15ecd326 100644
--- a/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
+++ b/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Flex } from "@components/Flex";
+import { classNameFactory } from "@api/Styles";
 import { openModal } from "@utils/modal";
-import { React, useEffect, UserProfileStore, useState } from "@webpack/common";
+import { Button, React, Text, useEffect, UserProfileStore, useState } from "@webpack/common";
 
 import { settings } from "..";
 import { fetchReposByUserId, fetchReposByUsername, fetchUserInfo, GitHubUserInfo } from "../githubApi";
@@ -21,6 +21,8 @@ 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;
 
@@ -86,51 +88,60 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
         fetchData();
     }, [id]);
 
-    if (loading) return <div className="vc-github-repos-loading">Loading repositories...</div>;
-    if (error) return <div className="vc-github-repos-error">Error: {error}</div>;
+    if (loading) return <Text variant="text-xs/semibold" className={cl("loading")} style={{ color: "var(--header-secondary)" }}>
+        Loading repositories...</Text>;
+
+    if (error) return <Text variant="text-xs/semibold" className={cl("error")} style={{ color: "var(--text-danger)" }}>
+        Error: {error}</Text>;
+
     if (!repos.length) return null;
 
     if (returnJustButton) {
         return (
-            <button
-                className="vc-github-button"
+            <Button
+                className={cl("button")}
+                size={Button.Sizes.SMALL}
+                look={Button.Looks.OUTLINED}
+                color={Button.Colors.TRANSPARENT}
                 onClick={openReposModal}
             >
                 Show GitHub Repositories
-            </button>
+            </Button>
         );
     }
 
-    const topRepos = repos.slice(0, 3);
+    const topRepos = repos.slice(0, 4);
 
     return (
-        <div className="vc-github-repos-container">
-            <div className="vc-github-repos-header">
+        <div className={cl("container")}>
+            <Text variant="text-xs/semibold" className={cl("header")} style={{ color: "var(--header-secondary)" }}>
                 GitHub Repositories
                 {userInfo && (
-                    <span className="vc-github-repos-count">
-                        {` (${topRepos.length}/${userInfo.totalRepos})`}
+                    <span className={cl("count")} style={{ color: "var(--text-muted)" }}>
+                        {` (Showing only top ${topRepos.length}/${userInfo.totalRepos})`}
                     </span>
                 )}
-            </div>
-            <Flex className="vc-github-repos-list" flexDirection="column">
+            </Text>
+            <div className={cl("list")}>
                 {topRepos.map(repo => (
                     <RepoCard
                         key={repo.id}
                         repo={repo}
-                        theme={theme}
                         showStars={settings.store.showStars}
                         showLanguage={settings.store.showLanguage}
-                    />
-                ))}
-            </Flex>
-            <div className="vc-github-repos-footer">
-                <button
-                    className="vc-github-repos-show-more"
+                    />))
+                }
+            </div>
+            <div className={cl("footer")}>
+                <Button
+                    className={cl("show-more")}
+                    size={Button.Sizes.SMALL}
+                    look={Button.Looks.OUTLINED}
+                    color={Button.Colors.TRANSPARENT}
                     onClick={openReposModal}
                 >
                     Show More
-                </button>
+                </Button>
             </div>
         </div>
     );
diff --git a/src/equicordplugins/githubRepos/components/RepoCard.tsx b/src/equicordplugins/githubRepos/components/RepoCard.tsx
index aa10f24e..41cf494a 100644
--- a/src/equicordplugins/githubRepos/components/RepoCard.tsx
+++ b/src/equicordplugins/githubRepos/components/RepoCard.tsx
@@ -4,23 +4,45 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Flex } from "@components/Flex";
-import { React } from "@webpack/common";
+import { classNameFactory } from "@api/Styles";
+import { React, Text, Tooltip } from "@webpack/common";
 
 import { getLanguageColor } from "../colors";
 import { RepoCardProps } from "../types";
 import { Star } from "./Star";
 
-export function RepoCard({ repo, theme, showStars, showLanguage }: RepoCardProps) {
+export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) {
     const handleClick = () => window.open(repo.html_url, "_blank");
 
+    const cl = classNameFactory("vc-github-repo-");
+
     const renderStars = () => {
         if (!showStars) return null;
 
         return (
-            <div className="vc-github-repo-stars">
-                <Star className="vc-github-repo-star-icon" />
-                {repo.stargazers_count.toLocaleString()}
+            <div className={cl("stars")}>
+                <Star className={cl("stars-icon")} />
+                <Text variant="text-sm/normal" style={{ color: "var(--text-muted)" }}>{repo.stargazers_count.toLocaleString()}</Text>
+            </div>
+        );
+    };
+
+    const renderLink = () => {
+        return (
+            <div onClick={handleClick}>
+                <svg
+                    className={cl("link")}
+                    aria-hidden="true"
+                    role="img"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    style={{ cursor: "pointer" }}>
+                    <path fill="var(--interactive-normal)" d="M8 5a1 1 0 0 0 0 2h7.59L5.29 17.3a1 1 0 1 0 1.42 1.4L17 8.42V16a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H8Z">
+                    </path>
+                </svg>
             </div>
         );
     };
@@ -29,30 +51,47 @@ export function RepoCard({ repo, theme, showStars, showLanguage }: RepoCardProps
         if (!showLanguage || !repo.language) return null;
 
         return (
-            <div className="vc-github-repo-language">
+            <div className={cl("language")}>
                 <span
-                    className="vc-github-repo-language-color"
+                    className={cl("language-color")}
                     style={{ backgroundColor: getLanguageColor(repo.language) }}
                 />
-                {repo.language}
-            </div>
+                <Text variant="text-sm/normal" style={{ color: "var(--text-muted)" }}>{repo.language}</Text>
+                {renderStars()}
+            </div >
         );
     };
 
     return (
-        <div className="vc-github-repo-card" onClick={handleClick}>
-            <Flex className="vc-github-repo-header">
-                <div className="vc-github-repo-name">{repo.name}</div>
-                {renderStars()}
-            </Flex>
-
-            {repo.description && (
-                <div className="vc-github-repo-description">
-                    {repo.description}
+        <>
+            {repo.description ? (
+                <Tooltip text={repo.description} key={repo.id}>
+                    {({ onMouseLeave, onMouseEnter }) => (
+                        <div className={cl("card")}
+                            onMouseLeave={onMouseLeave}
+                            onMouseEnter={onMouseEnter}
+                        >
+                            <div className={cl("header")}>
+                                <Text variant="text-sm/medium" className={cl("name")} style={{ color: "var(--interactive-active)" }}>
+                                    {repo.name}
+                                </Text>
+                                {renderLink()}
+                            </div>
+                            {renderLanguage()}
+                        </div>
+                    )}
+                </Tooltip>
+            ) : (
+                <div className={cl("card")}>
+                    <div className={cl("header")}>
+                        <Text variant="text-sm/medium" className={cl("name")} style={{ color: "var(--interactive-active)" }}>
+                            {repo.name}
+                        </Text>
+                        {renderLink()}
+                    </div>
+                    {renderLanguage()}
                 </div>
             )}
-
-            {renderLanguage()}
-        </div>
+        </>
     );
 }
diff --git a/src/equicordplugins/githubRepos/components/Star.tsx b/src/equicordplugins/githubRepos/components/Star.tsx
index 4686520d..9bb4de40 100644
--- a/src/equicordplugins/githubRepos/components/Star.tsx
+++ b/src/equicordplugins/githubRepos/components/Star.tsx
@@ -15,7 +15,7 @@ export function Star({ className, width = 16, height = 16 }: IconProps) {
             width={width}
             height={height}
             viewBox="0 0 16 16"
-            fill="currentColor"
+            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" />
diff --git a/src/equicordplugins/githubRepos/index.tsx b/src/equicordplugins/githubRepos/index.tsx
index 1c081048..7faa03c9 100644
--- a/src/equicordplugins/githubRepos/index.tsx
+++ b/src/equicordplugins/githubRepos/index.tsx
@@ -12,7 +12,7 @@ import { EquicordDevs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByCodeLazy } from "@webpack";
-import { React } from "@webpack/common";
+import { React, Text } from "@webpack/common";
 import { User } from "discord-types/general";
 
 import { GitHubReposComponent } from "./components/GitHubReposComponent";
@@ -55,7 +55,8 @@ const ProfilePopoutComponent = ErrorBoundary.wrap(
         noop: true,
         onError: err => {
             logger.error("Error in profile popout component", err);
-            return null;
+            return <Text variant="text-xs/semibold" className="vc-github-repos-error" style={{ color: "var(--text-danger)" }}>
+                Error, Failed to render GithubRepos</Text>;
         }
     }
 );
@@ -63,7 +64,7 @@ const ProfilePopoutComponent = ErrorBoundary.wrap(
 export default definePlugin({
     name: "GitHubRepos",
     description: "Displays a user's public GitHub repositories in their profile",
-    authors: [EquicordDevs.talhakf],
+    authors: [EquicordDevs.talhakf, EquicordDevs.Panniku],
     settings,
 
     patches: [
diff --git a/src/equicordplugins/githubRepos/styles.css b/src/equicordplugins/githubRepos/styles.css
index d7a9e9b7..8a17a754 100644
--- a/src/equicordplugins/githubRepos/styles.css
+++ b/src/equicordplugins/githubRepos/styles.css
@@ -1,157 +1,55 @@
 .vc-github-repos-container {
-    margin-top: 16px;
-    padding: 16px;
-    border-radius: 8px;
-    border: 1px solid var(--background-modifier-accent);
-    background-color: transparent;
-    max-height: 500px;
     display: flex;
     flex-direction: column;
-}
-
-.vc-github-repos-header {
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 12px;
-    color: var(--header-primary);
-    display: flex;
-    align-items: center;
-}
-
-.vc-github-repos-count {
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--text-muted);
-    margin-left: 4px;
+    gap: 8px;
 }
 
 .vc-github-repos-list {
-    gap: 8px;
-    overflow-y: auto;
-    max-height: 400px;
-    padding-right: 8px;
-    margin-right: -8px;
-    scrollbar-width: thin;
-    flex: 1;
+    display: grid;
+    grid-template-columns: 260px 260px;
+    grid-gap: 16px;
 }
 
-.vc-github-repos-list::-webkit-scrollbar {
-    width: 8px;
-}
-
-.vc-github-repos-list::-webkit-scrollbar-track {
-    background: var(--scrollbar-thin-track);
-    border-radius: 10px;
-}
-
-.vc-github-repos-list::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thin-thumb);
-    border-radius: 10px;
-}
-
-.vc-github-repos-list::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-thin-thumb-hover);
+/* stylelint-disable-next-line selector-class-pattern */
+.biteSize_c0bea0 .vc-github-repos-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 
 .vc-github-repos-footer {
-    margin-top: 12px;
-    text-align: center;
-    padding-top: 8px;
-    border-top: 1px solid var(--background-modifier-accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2px;
+    padding-top: 12px;
+    border-top: 1px solid
+        var(--profile-body-divider-color, var(--background-modifier-accent));
 }
 
-.vc-github-repos-view-all {
-    color: var(--text-link);
-    font-size: 14px;
-    text-decoration: none;
-}
-
-.vc-github-repos-view-all:hover {
-    text-decoration: underline;
-}
-
-.vc-github-button,
+.vc-github-repos-button,
 .vc-github-repos-show-more {
-    background-color: transparent;
-    color: var(--text-normal);
-    border: 1px solid var(--background-modifier-accent);
-    border-radius: 3px;
-    padding: 6px 12px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-}
-
-.vc-github-button:hover,
-.vc-github-repos-show-more:hover {
-    background-color: var(--background-modifier-hover);
-    border-color: var(--background-modifier-selected);
-}
-
-.vc-github-repos-loading,
-.vc-github-repos-error {
-    color: var(--text-normal);
-    font-size: 14px;
-    margin: 8px 0;
-}
-
-.vc-github-repos-error {
-    color: var(--text-danger);
+    width: 100%;
+    border: 1px solid
+        var(--profile-body-divider-color, var(--background-modifier-accent)) !important;
 }
 
 .vc-github-repo-card {
-    padding: 12px;
-    border-radius: 6px;
-    border: 1px solid var(--background-modifier-accent);
-    background-color: transparent;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-}
-
-.vc-github-repo-card:hover {
-    background-color: var(--background-modifier-hover);
-    border-color: var(--background-modifier-selected);
+    padding: 8px;
+    border-radius: var(--radius-xs);
+    border: 1px solid
+        var(--profile-body-divider-color, var(--background-modifier-accent));
 }
 
 .vc-github-repo-header {
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 6px;
-}
-
-.vc-github-repo-name {
-    font-weight: 600;
-    color: var(--header-primary);
     display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.vc-github-repo-fork-icon {
-    color: var(--text-muted);
+    justify-content: space-between;
 }
 
 .vc-github-repo-stars {
     display: flex;
     align-items: center;
     gap: 4px;
-    color: var(--text-muted);
-    font-size: 14px;
-}
-
-.vc-github-repo-star-icon {
-    color: var(--text-warning);
-}
-
-.vc-github-repo-description {
-    color: var(--text-normal);
-    font-size: 14px;
-    margin-bottom: 8px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
 }
 
 .vc-github-repo-language {
@@ -163,9 +61,9 @@
 }
 
 .vc-github-repo-language-color {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
+    width: var(--size-sm);
+    height: var(--size-sm);
+    border-radius: var(--radius-round);
     display: inline-block;
 }
 
diff --git a/src/equicordplugins/githubRepos/types.ts b/src/equicordplugins/githubRepos/types.ts
index 00353b1d..3cbdc4e6 100644
--- a/src/equicordplugins/githubRepos/types.ts
+++ b/src/equicordplugins/githubRepos/types.ts
@@ -22,7 +22,6 @@ export interface IconProps {
 
 export interface RepoCardProps {
     repo: GitHubRepo;
-    theme: string;
     showStars: boolean;
     showLanguage: boolean;
 }