From a87e28709a1103695b04768ddc19e7d142b7377b Mon Sep 17 00:00:00 2001 From: MasterPepe <56143265+Accentaro@users.noreply.github.com> Date: Wed, 21 Jan 2026 18:10:09 +0000 Subject: [PATCH] Added "repositories" tab in ModalV2 Profile (#665) * Added "repositories" tab in ModalV2 Profile * Add showRepositoryTab setting toggle * fixes --------- Co-authored-by: Accentaro Co-authored-by: thororen1234 <78185467+thororen1234@users.noreply.github.com> --- .../components/GitHubReposComponent.tsx | 46 +++++++----- .../githubRepos/components/RepoCard.tsx | 11 ++- .../githubRepos/components/ReposModal.tsx | 2 +- src/equicordplugins/githubRepos/index.tsx | 44 ++++++++++- src/equicordplugins/githubRepos/styles.css | 73 ++++++++++++++++--- 5 files changed, 138 insertions(+), 38 deletions(-) diff --git a/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx b/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx index 4abb1a1b1..ea9e1e775 100644 --- a/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx +++ b/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx @@ -15,7 +15,7 @@ import { cl, settings } from ".."; import { RepoCard } from "./RepoCard"; import { ReposModal } from "./ReposModal"; -export function GitHubReposComponent({ id, theme }: { id: string, theme: string; }) { +export function GitHubReposComponent({ id, theme, variant = "popout" }: { id: string, theme: string; variant?: "popout" | "tab"; }) { const [repos, setRepos] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -64,7 +64,7 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string; const githubId = githubConnection.id; - if (!settings.store.showInMiniProfile) setReturnJustButton(true); + if (!settings.store.showInMiniProfile && variant !== "tab") setReturnJustButton(true); // Try to fetch by ID first, fall back to username const reposById = await fetchReposByUserId(githubId); @@ -87,11 +87,15 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string; fetchData(); }, [id]); - if (loading) return - Loading repositories...; + if (loading) return; + + Loading repositories... + ; - if (error) return - Error: {error}; + if (error) return; + + Error: {error} + ; if (!repos.length) return null; @@ -108,15 +112,18 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string; ); } - const topRepos = repos.slice(0, 4); + const topRepos = variant === "tab" ? repos : repos.slice(0, 4); return ( -
+
GitHub Repositories {userInfo && ( - {` (Showing only top ${topRepos.length}/${userInfo.totalRepos})`} + {variant === "tab" + ? ` (${repos.length})` + : ` (Showing only top ${topRepos.length}/${userInfo.totalRepos})` + } )} @@ -127,18 +134,21 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string; repo={repo} showStars={settings.store.showStars} showLanguage={settings.store.showLanguage} + variant={variant} />)) }
-
- - Show More - -
+ {variant !== "tab" && ( +
+ + Show More + +
+ )}
); } diff --git a/src/equicordplugins/githubRepos/components/RepoCard.tsx b/src/equicordplugins/githubRepos/components/RepoCard.tsx index 601448e81..f4a4c0c50 100644 --- a/src/equicordplugins/githubRepos/components/RepoCard.tsx +++ b/src/equicordplugins/githubRepos/components/RepoCard.tsx @@ -12,7 +12,7 @@ import { React, Tooltip } from "@webpack/common"; import { cl } from ".."; import { Star } from "./Star"; -export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) { +export function RepoCard({ repo, showStars, showLanguage, variant }: RepoCardProps & { variant?: "popout" | "tab"; }) { const handleClick = () => window.open(repo.html_url, "_blank"); const renderStars = () => { @@ -20,7 +20,7 @@ export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) { return (
- + {repo.stargazers_count.toLocaleString()}
); @@ -56,12 +56,14 @@ export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) { className={cl("language-color")} style={{ backgroundColor: getLanguageColor(repo.language) }} /> - {repo.language} + {repo.language} {renderStars()} ); }; + const cardProps = variant === "tab" ? { onClick: handleClick } : {}; + return ( <> {repo.description ? ( @@ -70,6 +72,7 @@ export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) {
@@ -82,7 +85,7 @@ export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) { )} ) : ( -
+
{repo.name} diff --git a/src/equicordplugins/githubRepos/components/ReposModal.tsx b/src/equicordplugins/githubRepos/components/ReposModal.tsx index bd5a19c36..36bcc0902 100644 --- a/src/equicordplugins/githubRepos/components/ReposModal.tsx +++ b/src/equicordplugins/githubRepos/components/ReposModal.tsx @@ -55,7 +55,7 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
- + {repo.stargazers_count.toLocaleString()}
diff --git a/src/equicordplugins/githubRepos/index.tsx b/src/equicordplugins/githubRepos/index.tsx index 631af9577..b2075995c 100644 --- a/src/equicordplugins/githubRepos/index.tsx +++ b/src/equicordplugins/githubRepos/index.tsx @@ -36,6 +36,11 @@ export const settings = definePluginSettings({ description: "Show full ui in the mini profile instead of just a button", default: true }, + showRepositoryTab: { + type: OptionType.BOOLEAN, + description: "Show repositories tab in profile modal (hides button in connections when enabled)", + default: true + }, }); const getProfileThemeProps = findByCodeLazy(".getPreviewThemeColors", "primaryColor:"); @@ -58,10 +63,24 @@ const ProfilePopoutComponent = ErrorBoundary.wrap( } ); +const ProfileRepositoriesTab = ErrorBoundary.wrap( + (props: { user: User; displayProfile?: any; }) => { + return ( + + ); + }, + { noop: true } +); + export default definePlugin({ name: "GitHubRepos", description: "Displays a user's public GitHub repositories in their profile", - authors: [EquicordDevs.talhakf, EquicordDevs.Panniku], + authors: [EquicordDevs.talhakf, EquicordDevs.Panniku, EquicordDevs.benjii], settings, patches: [ @@ -86,9 +105,28 @@ export default definePlugin({ find: ".MODAL_V2,onClose:", replacement: { match: /displayProfile:(\i).*?profileAppConnections\}\)\}\)/, - replace: "$&,$self.ProfilePopoutComponent({ user: arguments[0].user, displayProfile: $1 })," + replace: "$&,$self.ProfilePopoutComponent({ user: arguments[0].user, displayProfile: $1 }),", + predicate: () => !settings.store.showRepositoryTab, + } + }, + // User Profile Modal v2 tab bar + { + find: "#{intl::USER_PROFILE_ACTIVITY}", + replacement: { + match: /\.MUTUAL_GUILDS\}\)\)(?=,(\i))/, + replace: '$&,$1.push({text:"GitHub",section:"GITHUB"})', + predicate: () => settings.store.showRepositoryTab, + } + }, + // User Profile Modal v2 tab content + { + find: ".WIDGETS?", + replacement: { + match: /(\i)===\i\.\i\.WISHLIST/, + replace: '$1==="GITHUB"?$self.ProfileRepositoriesTab(arguments[0]):$&' } } ], - ProfilePopoutComponent + ProfilePopoutComponent, + ProfileRepositoriesTab }); diff --git a/src/equicordplugins/githubRepos/styles.css b/src/equicordplugins/githubRepos/styles.css index cf84c74e4..fdfe19b34 100644 --- a/src/equicordplugins/githubRepos/styles.css +++ b/src/equicordplugins/githubRepos/styles.css @@ -10,11 +10,13 @@ gap: 16px; } -/* stylelint-disable-next-line selector-class-pattern */ -.biteSize_c0bea0 .vc-github-repos-list { - display: flex; - flex-direction: column; - gap: 12px; +.vc-github-repos-star-icon { + color: var(--text-status-idle); + fill: var(--text-status-idle); +} + +.vc-github-repos-lang-name { + font-size: 12px; } .vc-github-repos-footer { @@ -67,7 +69,7 @@ } .vc-github-repos-modal { - width: 90%; + width: 100%; max-width: 900px; background-color: var(--background-base-lower); } @@ -76,7 +78,6 @@ color: var(--text-strong); font-size: 20px; font-weight: 600; - margin: 0; } .vc-github-repos-modal-content { @@ -182,11 +183,6 @@ text-align: center; } -.vc-github-repos-table-star-icon { - color: var(--text-status-idle); - fill: var(--text-status-idle); -} - .vc-github-repos-modal-footer-close { margin-right: 5px; } @@ -209,6 +205,7 @@ .vc-github-repos-loading { color: var(--text-default); + margin-top: 10px; } .vc-github-repos-count { @@ -217,6 +214,7 @@ .vc-github-repos-error { color: var(--text-feedback-critical); + margin-top: 10px; } .vc-github-repos-link { @@ -242,4 +240,55 @@ .vc-github-repos-header-stars { width: 10% +} + +/* Tab variant styles */ + +.vc-github-repos-container.vc-github-repos-tab { + margin-top: 10px; + padding: 8px 12px; + height: 97%; + width: 100%; + box-sizing: border-box; + display: grid; + grid-template-rows: auto 1fr; + gap: 4px; + overflow: hidden; + position: relative; +} + +.vc-github-repos-container.vc-github-repos-tab .vc-github-repos-list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 4px; + overflow: hidden scroll; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thin-thumb) var(--scrollbar-thin-track); + align-content: start; +} + +.vc-github-repos-container.vc-github-repos-tab .vc-github-repos-card { + padding: 4px 6px; + cursor: pointer; +} + +.vc-github-repos-container.vc-github-repos-tab .vc-github-repos-language-color { + width: 8px; + height: 8px; +} + +.vc-github-repos-container.vc-github-repos-tab .vc-github-repos-name { + font-size: 14px; + line-height: 1.1; +} + +.vc-github-repos-container.vc-github-repos-tab .vc-github-repos-language, +.vc-github-repos-container.vc-github-repos-tab .vc-github-repos-stars { + font-size: 11px; + line-height: 1.1; + gap: 3px; +} + +.vc-github-repos-container.vc-github-repos-tab .vc-github-repos-star-icon, +.vc-github-repos-container.vc-github-repos-tab .vc-github-repos-stars { + margin-left: 2px; } \ No newline at end of file