Merge pull request #27 from ArjinAlbay/claude/user-hover-card-scoring-01REMSaoZ3VK6uVAFhJsa6vM

feat: implement user hover card with open source scoring system

Author: ArjinAlbay

src/components/quick-wins/columns.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { ExternalLink, Calendar, ListPlus, X, MessageCircle, Star, AlertCircle } from "lucide-react";
 import type { GitHubIssue } from "@/types/quickWins";
+import { UserHoverCard } from "@/components/ui/user-hover-card";
 
 interface CreateColumnsOptions {
   onAddToKanban?: (issue: GitHubIssue) => void;
@@ -239,17 +240,19 @@ export const createColumns = (options?: CreateColumnsOptions): ColumnDef<GitHubI
     cell: ({ row }) => {
       const author = row.original.author;
       return (
-        <div className="flex items-center gap-2">
-          <Avatar className="size-6">
-            <AvatarImage src={author.avatar_url} alt={author.login} />
-            <AvatarFallback className="text-xs">
-              {author.login.charAt(0).toUpperCase()}
-            </AvatarFallback>
-          </Avatar>
-          <span className="text-sm text-gray-600 truncate max-w-20">
-            {author.login}
-          </span>
-        </div>
+        <UserHoverCard username={author.login} showScore={true}>
+          <div className="flex items-center gap-2 cursor-pointer">
+            <Avatar className="size-6">
+              <AvatarImage src={author.avatar_url} alt={author.login} />
+              <AvatarFallback className="text-xs">
+                {author.login.charAt(0).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <span className="text-sm text-gray-600 truncate max-w-20 hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
+              {author.login}
+            </span>
+          </div>
+        </UserHoverCard>
       );
     },
     enableSorting: false,

src/stores/index.ts

@@ -6,6 +6,7 @@ import { useDataCacheStore } from "./cache";
 import { useAppStore } from "./app";
 import { useFavoritesStore } from "./favorites";
 import { useNavigationStore } from "./navigation";
+import { useUserScoresStore } from "./userScores";
 export { useAuthStore } from "./auth";
 export { usePreferencesStore } from "./preferences";
 export { useSearchStore } from "./search";
@@ -15,6 +16,7 @@ export { useActionItemsStore } from "./actionItems";
 export { useKanbanStore } from "./kanban";
 export { useFavoritesStore } from "./favorites";
 export { useNavigationStore } from "./navigation";
+export { useUserScoresStore } from "./userScores";
 
 // ============ HYDRATION HOOK ============
 
@@ -33,6 +35,7 @@ const hydrateStores = async () => {
       useDataCacheStore.persist.rehydrate(),
       useFavoritesStore.persist.rehydrate(),
       useNavigationStore.persist.rehydrate(),
+      useUserScoresStore.persist.rehydrate(),
     ]);
     isHydrated = true;
   })();

src/stores/userScores.ts

@@ -0,0 +1,138 @@
+import { create } from "zustand";
+import { persist, subscribeWithSelector } from "zustand/middleware";
+import type { UserScore, UserScoreCacheEntry } from "@/types/github";
+import { githubAPIClient } from "@/lib/api/github-api-client";
+
+interface UserScoresState {
+  scores: Map<string, UserScoreCacheEntry>;
+  isHydrated: boolean;
+
+  getScore: (username: string) => UserScore | null;
+  fetchScore: (username: string) => Promise<UserScore | null>;
+  clearScore: (username: string) => void;
+  clearAllScores: () => void;
+  hydrate: () => void;
+}
+
+const CACHE_DURATION = 30 * 60 * 1000;
+
+function calculateScore(commits: number, prs: number, stars: number): number {
+  return commits * 2 + prs * 5 + stars;
+}
+
+function calculateLevel(score: number): "beginner" | "intermediate" | "advanced" | "expert" | "master" {
+  if (score >= 1000) return "master";
+  if (score >= 500) return "expert";
+  if (score >= 250) return "advanced";
+  if (score >= 100) return "intermediate";
+  return "beginner";
+}
+
+export const useUserScoresStore = create<UserScoresState>()(
+  subscribeWithSelector(
+    persist(
+      (set, get) => ({
+        scores: new Map(),
+        isHydrated: false,
+
+        getScore: (username: string) => {
+          const cached = get().scores.get(username);
+          if (!cached) return null;
+
+          const now = Date.now();
+          if (now - cached.fetchedAt > CACHE_DURATION) {
+            return null;
+          }
+
+          return cached.score;
+        },
+
+        fetchScore: async (username: string) => {
+          const cached = get().getScore(username);
+          if (cached) return cached;
+
+          try {
+            const contributions = await githubAPIClient.getUserContributions(username);
+            const score = calculateScore(
+              contributions.commits,
+              contributions.prs,
+              contributions.stars
+            );
+            const level = calculateLevel(score);
+
+            const userScore: UserScore = {
+              username,
+              score,
+              contributions,
+              calculatedAt: new Date().toISOString(),
+              level,
+            };
+
+            const cacheEntry: UserScoreCacheEntry = {
+              username,
+              score: userScore,
+              fetchedAt: Date.now(),
+            };
+
+            set((state) => {
+              const newScores = new Map(state.scores);
+              newScores.set(username, cacheEntry);
+              return { scores: newScores };
+            });
+
+            return userScore;
+          } catch (error) {
+            console.error(`Failed to fetch score for ${username}:`, error);
+            return null;
+          }
+        },
+
+        clearScore: (username: string) => {
+          set((state) => {
+            const newScores = new Map(state.scores);
+            newScores.delete(username);
+            return { scores: newScores };
+          });
+        },
+
+        clearAllScores: () => {
+          set({ scores: new Map() });
+        },
+
+        hydrate: () => {
+          set({ isHydrated: true });
+        },
+      }),
+      {
+        name: "user-scores-storage",
+        onRehydrateStorage: () => (state) => {
+          state?.hydrate();
+        },
+        storage: {
+          getItem: (name) => {
+            const str = localStorage.getItem(name);
+            if (!str) return null;
+            const data = JSON.parse(str);
+            return {
+              state: {
+                ...data.state,
+                scores: new Map(Object.entries(data.state.scores || {})),
+              },
+            };
+          },
+          setItem: (name, value) => {
+            const scoresObj = Object.fromEntries(value.state.scores || new Map());
+            const data = {
+              state: {
+                ...value.state,
+                scores: scoresObj,
+              },
+            };
+            localStorage.setItem(name, JSON.stringify(data));
+          },
+          removeItem: (name) => localStorage.removeItem(name),
+        },
+      }
+    )
+  )
+);

src/types/github.ts

@@ -346,3 +346,23 @@ export type GitHubUserType = "User" | "Organization";
 export type GitHubRepoVisibility = "public" | "private";
 export type GitHubIssueState = "open" | "closed";
 export type GitHubPRState = "open" | "closed" | "merged";
+
+export interface UserContributions {
+  commits: number;
+  prs: number;
+  stars: number;
+}
+
+export interface UserScore {
+  username: string;
+  score: number;
+  contributions: UserContributions;
+  calculatedAt: string;
+  level: "beginner" | "intermediate" | "advanced" | "expert" | "master";
+}
+
+export interface UserScoreCacheEntry {
+  username: string;
+  score: UserScore;
+  fetchedAt: number;
+}

src/types/index.ts

@@ -61,6 +61,9 @@ export type {
   GitHubCommit,
   ContributorWithRepos,
   GitHubIssue,
+  UserContributions,
+  UserScore,
+  UserScoreCacheEntry,
 } from "./github";
 
 export type ValueOf<T> = T[keyof T];