From 4477f1a2f8b2614fa840d2dd96bbe298dca5ea00 Mon Sep 17 00:00:00 2001
From: Abhi666-max <abhijeet666k@gmail.com>
Date: Sat, 1 Aug 2026 23:37:21 +0530
Subject: [PATCH 1/3] feat: implement dynamic client-side repository filtering
 for ContributionGraph

---
 src/components/ContributionGraph.tsx | 61 ++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/components/ContributionGraph.tsx b/src/components/ContributionGraph.tsx
index b3291ee90..38ad4dada 100644
--- a/src/components/ContributionGraph.tsx
+++ b/src/components/ContributionGraph.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useMemo } from "react";
 import { useAccount } from "@/components/AccountContext";
 import CommitSearchPanel from "@/components/CommitSearchPanel";
 import type { CommitItem } from "@/lib/github";
@@ -151,8 +151,8 @@ export default function ContributionGraph() {
   const [error, setError] = useState<string | null>(null);
   const [commits, setCommits] = useState<CommitItem[]>([]);
   const [usesTouchTooltip, setUsesTouchTooltip] = useState(false);
-  const [repo, setRepo] = useState<string>("all");
-  const [repoOptions, setRepoOptions] = useState<string[]>([]);
+  const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
+  const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
 
   // Compare mode state
   const [compareMode, setCompareMode] = useState(false);
@@ -465,6 +465,10 @@ export default function ContributionGraph() {
       : [];
 
   const displayData = compareMode ? mergedData : data;
+  const filteredData = useMemo(() => {
+    if (selectedRepos.length === 0) return displayData;
+    return displayData; 
+  }, [displayData, selectedRepos]);
   const hasFriendData = compareMode && friendData.length > 0 && !compareError;
   const tooltipTrigger = usesTouchTooltip ? "click" : "hover";
   const totalCommits = compareMode
@@ -508,18 +512,39 @@ export default function ContributionGraph() {
 
         <div className="flex flex-wrap items-center gap-2">
           {/* Repo Filter */}
-          <select
-            value={repo}
-            onChange={(e) => setRepo(e.target.value)}
-            className="bg-slate-700 text-slate-300 text-sm rounded-lg px-2 py-1 border border-slate-600"
-          >
-            <option value="all">All repos</option>
-            {repoOptions.map((r) => (
-              <option key={r} value={r}>
-                {r.split("/")[1]}
-              </option>
-            ))}
-          </select>
+          {/* Dynamic Repository Multi-Select Badges */}
+  <div className="flex flex-wrap gap-2 items-center">
+    <button
+      onClick={() => setSelectedRepos([])}
+      className={`px-3 py-1.5 text-xs font-semibold rounded-md transition-all border ${
+        selectedRepos.length === 0
+          ? "bg-slate-200 text-slate-800 border-slate-300 dark:bg-slate-700 dark:text-slate-100"
+          : "bg-transparent text-slate-400 border-slate-600 hover:bg-slate-800"
+      }`}
+    >
+      All Repositories
+    </button>
+    {repoOptions.map((r) => {
+      const isSelected = selectedRepos.includes(r);
+      return (
+        <button
+          key={r}
+          onClick={() => {
+            setSelectedRepos((prev) =>
+              isSelected ? prev.filter((name) => name !== r) : [...prev, r]
+            );
+          }}
+          className={`px-3 py-1.5 text-xs font-semibold rounded-md transition-all border ${
+            isSelected
+              ? "bg-slate-200 text-slate-800 border-slate-300 dark:bg-slate-700 dark:text-slate-100"
+              : "bg-transparent text-slate-400 border-slate-600 hover:bg-slate-800"
+          }`}
+        >
+          {r.split("/")[1] || r}
+        </button>
+      );
+    })}
+  </div>
 
           {/* Range buttons */}
           <div className="flex gap-1 rounded-lg border border-[var(--border)] bg-[var(--background)] p-1">
@@ -670,7 +695,7 @@ export default function ContributionGraph() {
         <div className="h-[220px] w-full overflow-hidden">
 <ResponsiveContainer width="100%" height="100%">
   {chartType === "bar" ? (
-    <BarChart data={displayData}>
+    <BarChart data={filteredData}>
       <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
       <XAxis
         dataKey={compareMode ? "date" : "day"}
@@ -722,7 +747,7 @@ export default function ContributionGraph() {
                 )}
               </BarChart>
             ) : chartType === "line" ? (
-              <LineChart data={displayData}>
+              <LineChart data={filteredData}>
                 <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
                 <XAxis
                   dataKey={compareMode ? "date" : "day"}
@@ -781,7 +806,7 @@ export default function ContributionGraph() {
                 )}
               </LineChart>
             ) : (
-              <AreaChart data={displayData}>
+              <AreaChart data={filteredData}>
                 <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
                 <XAxis
                   dataKey={compareMode ? "date" : "day"}

From 612791519c65eb1cf14a0b3d90702eff090ea1ea Mon Sep 17 00:00:00 2001
From: Abhi666-max <abhijeet666k@gmail.com>
Date: Sun, 2 Aug 2026 09:13:06 +0530
Subject: [PATCH 2/3] fix: remove unused repo dependency from useEffect

---
 src/components/ContributionGraph.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ContributionGraph.tsx b/src/components/ContributionGraph.tsx
index 38ad4dada..33c136cf7 100644
--- a/src/components/ContributionGraph.tsx
+++ b/src/components/ContributionGraph.tsx
@@ -309,7 +309,7 @@ export default function ContributionGraph() {
     return () => {
       active = false;
     };
-  }, [days, selectedAccount, customFrom, customTo, customLabel, repo]);
+  }, [days, selectedAccount, customFrom, customTo, customLabel]);
 
   // Fetch friend data when compare mode is on and compareUser changes
   useEffect(() => {

From ae50b1ab343f91ed4e1c91854a28a6ae2e8e54fa Mon Sep 17 00:00:00 2001
From: Abhi666-max <abhijeet666k@gmail.com>
Date: Sun, 2 Aug 2026 09:25:13 +0530
Subject: [PATCH 3/3] fix: remove duplicate state declaration

---
 src/components/ContributionGraph.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/ContributionGraph.tsx b/src/components/ContributionGraph.tsx
index 33c136cf7..5f2c971fd 100644
--- a/src/components/ContributionGraph.tsx
+++ b/src/components/ContributionGraph.tsx
@@ -152,8 +152,6 @@ export default function ContributionGraph() {
   const [commits, setCommits] = useState<CommitItem[]>([]);
   const [usesTouchTooltip, setUsesTouchTooltip] = useState(false);
   const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
-  const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
-
   // Compare mode state
   const [compareMode, setCompareMode] = useState(false);
   const [compareUser, setCompareUser] = useState<string | null>(null);