Merge branch 'main' into main

Author: ArjinAlbay

next.config.ts

@@ -2,7 +2,16 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   images: {
-    domains: ['avatars.githubusercontent.com'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'avatars.githubusercontent.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'github.com',
+      },
+    ],
   },
 };
 

src/app/api/search/route.ts

@@ -1,10 +1,9 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { useCallback } from "react";
 import Image from "next/image";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -83,23 +82,13 @@ interface UserAnalytics {
 
 export default function SearchPage() {
   const searchParams = useSearchParams();
-  const userParam = searchParams.get("user");
-  const repoParam = searchParams.get("repo");
+  const userParam = searchParams?.get("user");
+  const repoParam = searchParams?.get("repo");
   const { isLoading } = useRequireAuth();
   const { setCurrentQuery, setCurrentSearchType, setSearchModalOpen } =
     useSearchStore();
   const { setOpen } = useSidebarState();
 
-  // Refs for scroll sections
-  const overviewRef = useRef<HTMLDivElement>(null);
-  const behaviorRef = useRef<HTMLDivElement>(null);
-  const starRef = useRef<HTMLDivElement>(null);
-  const codeRef = useRef<HTMLDivElement>(null);
-  const codeReviewRef = useRef<HTMLDivElement>(null);
-  const issueRef = useRef<HTMLDivElement>(null);
-  const monthlyStatsRef = useRef<HTMLDivElement>(null);
-  const contributionActivitiesRef = useRef<HTMLDivElement>(null);
-
   const [searchResults, setSearchResults] = useState<{
     repos: TrendingRepo[];
     users: TopContributor[];
@@ -147,47 +136,62 @@ export default function SearchPage() {
     []
   );
 
-  // Scroll spy effect
+  // Scroll spy effect - ONLY h2 titles matter
   useEffect(() => {
     const handleScroll = throttle(() => {
-      const sections = [
-        { id: "overview", ref: overviewRef },
-        { id: "behavior", ref: behaviorRef },
-        { id: "star", ref: starRef },
-        { id: "code", ref: codeRef },
-        { id: "code-review", ref: codeReviewRef },
-        { id: "issue", ref: issueRef },
-        { id: "monthly-stats", ref: monthlyStatsRef },
-        { id: "contribution-activities", ref: contributionActivitiesRef },
-      ];
-      const scrollPosition = window.scrollY + 200; // 200px offset
-      let currentSection = sections[0].id;
-
-      // En alttaki section'ı bul
-      for (let i = sections.length - 1; i >= 0; i--) {
-        const element = sections[i].ref.current;
-        if (element) {
-          const elementTop = element.offsetTop;
-
-          if (scrollPosition >= elementTop) {
-            currentSection = sections[i].id;
-            break;
-          }
+      const sectionIds = ['overview', 'behavior', 'star', 'code', 'code-review', 'issue', 'monthly-stats', 'contribution-activities'];
+      const headerOffset = 150; // Increased offset
+      let currentActiveSection = 'overview';
+
+      // Check each section's h2 title position
+      for (const sectionId of sectionIds) {
+        const sectionElement = document.getElementById(sectionId);
+        if (!sectionElement) continue;
+
+        const h2Element = sectionElement.querySelector('h2');
+        if (!h2Element) continue;
+
+        const h2Rect = h2Element.getBoundingClientRect();
+
+        // If h2 title is at or above header offset, this section is active
+        if (h2Rect.top <= headerOffset) {
+          currentActiveSection = sectionId;
+        } else {
+          // First h2 that hasn't reached header yet - stop here
+          break;
         }
       }
 
-      setActiveSection(currentSection);
+      // Bottom of page special case
+      if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 50) {
+        currentActiveSection = 'contribution-activities';
+      }
+
+      if (currentActiveSection !== activeSection) {
+        setActiveSection(currentActiveSection);
+      }
     }, 100);
 
     window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll(); // Initial call
+
     return () => window.removeEventListener("scroll", handleScroll);
-  }, [throttle]);
+  }, [activeSection, throttle]);
 
   useEffect(() => {
     if (userParam || repoParam) {
       const query = userParam || repoParam || "";
       const type = userParam ? "users" : "repos";
 
+      // Clear previous state when switching users
+      setUserAnalytics(null);
+      setSearchResults({
+        repos: [],
+        users: [],
+        loading: false,
+        error: null,
+      });
+
       setCurrentQuery(query);
       setCurrentSearchType(type);
       performSearch(query, type);
@@ -236,11 +240,12 @@ export default function SearchPage() {
   };
 
   const loadUserAnalytics = async () => {
+    if (!userParam) return;
+
     setLoadingAnalytics(true);
     try {
-      // User analytics method was removed - no longer available
-      console.log("User analytics feature temporarily disabled");
-      setUserAnalytics(null);
+      const analytics = await githubAPIClient.getUserAnalytics(userParam);
+      setUserAnalytics(analytics);
     } catch (error) {
       console.error("Analytics error:", error);
       // Fallback to null if API fails
@@ -437,7 +442,7 @@ export default function SearchPage() {
               !loadingAnalytics && (
                 <>
                   {/* Overview Section */}
-                  <div id="overview" ref={overviewRef} className="scroll-mt-24">
+                  <div id="overview" className="scroll-mt-20">
                     <div className="flex items-center mb-6">
                       <Eye className="w-6 h-6 mr-2" />
                       <h2 className="text-2xl font-bold">Overview</h2>
@@ -571,8 +576,7 @@ export default function SearchPage() {
                     {/* Behavior Section */}
                     <div
                       id="behavior"
-                      ref={behaviorRef}
-                      className="scroll-mt-24"
+                      className="scroll-mt-20 mt-12"
                     >
                       <div className="flex items-center mb-6">
                         <Activity className="w-6 h-6 mr-2" />
@@ -680,7 +684,7 @@ export default function SearchPage() {
                     </div>
 
                     {/* Star Section */}
-                    <div id="star" ref={starRef} className="scroll-mt-24">
+                    <div id="star" className="scroll-mt-20 mt-12">
                       <div className="flex items-center mb-6">
                         <Star className="w-6 h-6 mr-2" />
                         <h2 className="text-2xl font-bold">Star Activity</h2>
@@ -701,7 +705,7 @@ export default function SearchPage() {
                       </ChartWrapper>
                     </div>
                     {/* Code Section */}
-                    <div id="code" ref={codeRef} className="scroll-mt-24">
+                    <div id="code" className="scroll-mt-20 mt-12">
                       <div className="flex items-center mb-6">
                         <Code className="w-6 h-6 mr-2" />
                         <h2 className="text-2xl font-bold">
@@ -727,8 +731,7 @@ export default function SearchPage() {
                     {/* Code Review Section */}
                     <div
                       id="code-review"
-                      ref={codeReviewRef}
-                      className="scroll-mt-24"
+                      className="scroll-mt-20 mt-12"
                     >
                       <div className="flex items-center mb-6">
                         <GitPullRequest className="w-6 h-6 mr-2" />
@@ -751,7 +754,7 @@ export default function SearchPage() {
                     </div>
 
                     {/* Issue Section */}
-                    <div id="issue" ref={issueRef} className="scroll-mt-24">
+                    <div id="issue" className="scroll-mt-20 mt-12">
                       <div className="flex items-center mb-6">
                         <AlertCircle className="w-6 h-6 mr-2" />
                         <h2 className="text-2xl font-bold">Issues</h2>
@@ -775,8 +778,7 @@ export default function SearchPage() {
                     {/* Monthly Statistics Section */}
                     <div
                       id="monthly-stats"
-                      ref={monthlyStatsRef}
-                      className="scroll-mt-24"
+                      className="scroll-mt-20 mt-12"
                     >
                       <div className="flex items-center mb-6">
                         <Calendar className="w-6 h-6 mr-2" />
@@ -804,8 +806,7 @@ export default function SearchPage() {
                     {/* Contribution Activities Section */}
                     <div
                       id="contribution-activities"
-                      ref={contributionActivitiesRef}
-                      className="scroll-mt-24"
+                      className="scroll-mt-20 mt-12"
                     >
                       <div className="flex items-center mb-6">
                         <Activity className="w-6 h-6 mr-2" />

src/app/api/user/[username]/route.ts

@@ -6,7 +6,7 @@ import { useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { useSidebarState, useAuthStore, useStoreHydration, useActionItemsStore } from '@/stores'
 import { useQuickWinsStore } from '@/stores/quickWins'
-import { ChevronRight, Clock, LogOut, MessageSquare, Sparkles, Star, Target, Zap, Home } from 'lucide-react'
+import { ChevronRight, Clock, LogOut, MessageSquare, Sparkles, Star, Target, Zap, Home, UserCheck, Lightbulb, Wrench } from 'lucide-react'
 import { Badge } from '../ui/badge'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible'
 
@@ -19,7 +19,7 @@ export function Sidebar() {
   const { isConnected, logout } = useAuthStore()
 
   const { getCountByType, loading } = useActionItemsStore()
-  
+
   const { goodIssues, easyFixes, loading: quickWinsLoading } = useQuickWinsStore()
 
   const [actionRequiredOpen, setActionRequiredOpen] = useState(true)
@@ -32,7 +32,7 @@ export function Sidebar() {
     if (type === 'easyFixes') return easyFixes.length
     return getCountByType(type)
   }
-  
+
   const getActionRequiredTotal = () => getBadgeCount('assigned') + getBadgeCount('mentions') + getBadgeCount('stale')
   const getQuickWinsTotal = () => getBadgeCount('goodFirstIssues') + getBadgeCount('easyFixes')
 
@@ -121,7 +121,7 @@ export function Sidebar() {
                         {getActionRequiredTotal()}
                       </Badge>
                     )}
-                  <ChevronRight className={`w-4 h-4 transition-transform ${actionRequiredOpen ? 'rotate-90' : ''}`} />
+                    <ChevronRight className={`w-4 h-4 transition-transform ${actionRequiredOpen ? 'rotate-90' : ''}`} />
                   </div>
                 </CollapsibleTrigger>
 
@@ -135,7 +135,7 @@ export function Sidebar() {
                         : 'text-gray-600 hover:text-blue-600 hover:bg-gray-50 dark:hover:bg-gray-800'
                       }`}
                   >
-                    <Target className="w-4 h-4" />
+                    <UserCheck className="w-4 h-4" />
                     Assigned
                     <Badge
                       variant="outline"
@@ -194,13 +194,13 @@ export function Sidebar() {
                     <Target className="w-5 h-5" />
                     <span>Quick Wins</span>
                   </div>
-                   <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1">
                     {getQuickWinsTotal() > 0 && (
                       <Badge variant="outline" className="text-xs min-w-[1.25rem] h-5 bg-muted/30 border-muted-foreground/20">
                         {getQuickWinsTotal()}
                       </Badge>
                     )}
-                  <ChevronRight className={`w-4 h-4 transition-transform ${quickWinsOpen ? 'rotate-90' : ''}`} />
+                    <ChevronRight className={`w-4 h-4 transition-transform ${quickWinsOpen ? 'rotate-90' : ''}`} />
                   </div>
                 </CollapsibleTrigger>
 
@@ -213,7 +213,7 @@ export function Sidebar() {
                         ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400'
                         : 'text-gray-600 hover:text-blue-600 hover:bg-gray-50 dark:hover:bg-gray-800'
                       }`}>
-                    <Target className="w-4 h-4" />
+                    <Lightbulb className="w-4 h-4" />
                     <span className="font-medium">Good First Issues</span>
                     <Badge
                       variant="outline"
@@ -228,7 +228,7 @@ export function Sidebar() {
                         ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400'
                         : 'text-gray-600 hover:text-blue-600 hover:bg-gray-50 dark:hover:bg-gray-800'
                       }`}>
-                    <Sparkles className="w-4 h-4" />
+                    <Wrench className="w-4 h-4" />
                     <span className="font-medium">Easy Fixes</span>
                     <Badge
                       variant="outline"
@@ -279,7 +279,7 @@ export function Sidebar() {
           </div>
         </div>
 
-        {/* Footer - Logout Button */}              
+        {/* Footer - Logout Button */}
         {hasHydrated && isConnected && (
           <div className="p-4 border-t border-sidebar-border flex-shrink-0">
             <Button

src/app/search/page.tsx

@@ -3,11 +3,8 @@
 import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-
-
 import { useSidebarState } from '@/stores'
 import {
-
     Activity,
     Star,
     Code,
@@ -47,15 +44,19 @@ export function SidebarSearch() {
         return () => window.removeEventListener('activeSectionChange', handleActiveSection as EventListener);
     }, []);
 
-  
+
 
     const mainItems = navigationItems.filter(item => item.section === 'main')
     const analyticsItems = navigationItems.filter(item => item.section === 'analytics')
 
     const scrollToSection = (sectionId: string) => {
         const element = document.getElementById(sectionId);
         if (element) {
-            element.scrollIntoView({ behavior: 'smooth' });
+            // Close sidebar on mobile after navigation
+            if (window.innerWidth < 1024) { // lg breakpoint
+                setOpen(false);
+            }
+            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
     };
 
@@ -124,12 +125,12 @@ export function SidebarSearch() {
                                         className={`
                                             w-full flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors text-sm text-left
                                             ${isActive
-                                                ? 'bg-sidebar-accent text-sidebar-primary font-medium'
+                                                ? 'bg-sidebar-accent text-sidebar-primary font-medium border-l-2 border-blue-500'
                                                 : 'text-sidebar-foreground hover:bg-sidebar-accent/50'
                                             }
                                         `}
                                     >
-                                        <Icon size={16} className="text-muted-foreground" />
+                                        <Icon size={16} className={`${isActive ? 'text-blue-500' : 'text-muted-foreground'}`} />
                                         <span>{item.label}</span>
                                     </button>
                                 )