feat: Add smooth page animations and improve Top Active Projects algorithm

- Add page-level staggered animations to PipelinesTab
  - Header animation (100ms delay)
  - Sidebar slide from left (200ms delay)
  - Content slide from right (300ms delay)
  - Statistics cards scale animation (400ms delay)
  - Chart scale animation (500ms delay)
  - Filters fade in (600ms delay)
  - Pipeline cards fade in (700ms delay)

- Enhance project list in PipelinesTab
  - Add project avatars to list items
  - Add gradient background for selected state
  - Add pulsing orange indicator for active project
  - Improve hover effects with scale transform

- Optimize Top Active Projects algorithm
  - Increase pipeline data collection from 10 to ALL projects
  - Increase pipelines per project from 5 to 10
  - Increase total pipelines tracked from 15 to 50
  - Add two-tier sorting: by count (primary), then by last activity (secondary)
  - Add last activity timestamp tracking for each project
  - More accurate ranking of most active projects

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: ismoilovdevml

src/app/login/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { LogIn, Eye, EyeOff, AlertCircle } from 'lucide-react';
+import { LogIn, Eye, EyeOff, AlertCircle, GitBranch, Activity, Zap } from 'lucide-react';
 import axios from 'axios';
 
 export default function LoginPage() {
@@ -12,6 +12,12 @@ export default function LoginPage() {
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  // Mounting animation
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   // Check if already logged in
   useEffect(() => {
@@ -55,31 +61,49 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-zinc-950 via-zinc-900 to-orange-950 flex items-center justify-center p-4">
-      <div className="w-full max-w-md">
+    <div className="min-h-screen bg-gradient-to-br from-zinc-950 via-zinc-900 to-orange-950 flex items-center justify-center p-4 relative overflow-hidden">
+      {/* Animated Background Elements */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 -left-20 w-72 h-72 bg-orange-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '4s' }} />
+        <div className="absolute bottom-1/4 -right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '6s', animationDelay: '1s' }} />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-purple-500/5 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '8s', animationDelay: '2s' }} />
+      </div>
+
+      {/* Floating Icons */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-20">
+        <GitBranch className="absolute top-20 left-20 w-8 h-8 text-orange-400 animate-float" style={{ animationDelay: '0s', animationDuration: '6s' }} />
+        <Activity className="absolute top-40 right-32 w-10 h-10 text-blue-400 animate-float" style={{ animationDelay: '1s', animationDuration: '7s' }} />
+        <Zap className="absolute bottom-32 left-32 w-6 h-6 text-purple-400 animate-float" style={{ animationDelay: '2s', animationDuration: '5s' }} />
+        <GitBranch className="absolute bottom-20 right-20 w-7 h-7 text-orange-400 animate-float" style={{ animationDelay: '3s', animationDuration: '8s' }} />
+      </div>
+
+      <div className={`w-full max-w-md relative z-10 transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
         {/* Logo & Title */}
-        <div className="text-center mb-8">
-          <div className="inline-flex items-center justify-center w-16 h-16 bg-orange-500 rounded-2xl mb-4 shadow-lg shadow-orange-500/20">
-            <LogIn className="w-8 h-8 text-white" />
+        <div className={`text-center mb-8 transition-all duration-700 delay-100 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'}`}>
+          <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-orange-500 to-orange-600 rounded-3xl mb-6 shadow-2xl shadow-orange-500/30 relative group hover:scale-110 transition-transform duration-300">
+            <div className="absolute inset-0 bg-gradient-to-br from-orange-400 to-orange-600 rounded-3xl blur-xl opacity-50 group-hover:opacity-75 transition-opacity" />
+            <LogIn className="w-10 h-10 text-white relative z-10 group-hover:rotate-12 transition-transform duration-300" />
           </div>
-          <h1 className="text-3xl font-bold text-white mb-2">GitLab CI/CD Dashboard</h1>
-          <p className="text-zinc-400">Sign in to your account</p>
+          <h1 className="text-4xl font-bold text-white mb-3 bg-gradient-to-r from-white to-zinc-300 bg-clip-text text-transparent">
+            GitLab CI/CD Dashboard
+          </h1>
+          <p className="text-zinc-400 text-lg">Sign in to your account</p>
         </div>
 
         {/* Login Form */}
-        <div className="bg-zinc-900 rounded-2xl shadow-xl border border-zinc-800 p-8">
+        <div className={`bg-zinc-900/80 backdrop-blur-xl rounded-3xl shadow-2xl border border-zinc-800/50 p-8 transition-all duration-700 delay-200 hover:border-zinc-700/50 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
           <form onSubmit={handleLogin} className="space-y-6">
             {/* Error Message */}
             {error && (
-              <div className="bg-red-950 border border-red-900 rounded-lg p-4 flex items-center gap-3">
-                <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0" />
+              <div className="bg-red-950/50 backdrop-blur-sm border border-red-900/50 rounded-xl p-4 flex items-center gap-3 animate-shake">
+                <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 animate-pulse" />
                 <p className="text-sm text-red-400">{error}</p>
               </div>
             )}
 
             {/* Username */}
-            <div>
-              <label htmlFor="username" className="block text-sm font-medium text-zinc-300 mb-2">
+            <div className="group">
+              <label htmlFor="username" className="block text-sm font-medium text-zinc-300 mb-2 group-focus-within:text-orange-400 transition-colors">
                 Username
               </label>
               <input
@@ -89,13 +113,13 @@ export default function LoginPage() {
                 onChange={(e) => setUsername(e.target.value)}
                 placeholder="Enter your username"
                 required
-                className="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all"
+                className="w-full px-4 py-3.5 bg-zinc-800/50 backdrop-blur-sm border border-zinc-700/50 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent focus:bg-zinc-800 transition-all duration-300 hover:border-zinc-600"
               />
             </div>
 
             {/* Password */}
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium text-zinc-300 mb-2">
+            <div className="group">
+              <label htmlFor="password" className="block text-sm font-medium text-zinc-300 mb-2 group-focus-within:text-orange-400 transition-colors">
                 Password
               </label>
               <div className="relative">
@@ -106,12 +130,12 @@ export default function LoginPage() {
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="Enter your password"
                   required
-                  className="w-full px-4 py-3 pr-12 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all"
+                  className="w-full px-4 py-3.5 pr-12 bg-zinc-800/50 backdrop-blur-sm border border-zinc-700/50 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent focus:bg-zinc-800 transition-all duration-300 hover:border-zinc-600"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-white transition-colors"
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-orange-400 transition-all duration-200 hover:scale-110"
                 >
                   {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                 </button>
@@ -122,27 +146,77 @@ export default function LoginPage() {
             <button
               type="submit"
               disabled={loading || !username || !password}
-              className="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-orange-500/20 hover:shadow-orange-500/40"
+              className="group relative w-full bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold py-3.5 rounded-xl transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-orange-500/30 hover:shadow-orange-500/50 hover:scale-[1.02] active:scale-[0.98] overflow-hidden"
             >
-              {loading ? 'Signing in...' : 'Sign In'}
+              <div className="absolute inset-0 bg-gradient-to-r from-orange-400 to-orange-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              <div className="relative flex items-center justify-center gap-2">
+                {loading ? (
+                  <>
+                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                    <span>Signing in...</span>
+                  </>
+                ) : (
+                  <>
+                    <LogIn className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                    <span>Sign In</span>
+                  </>
+                )}
+              </div>
             </button>
           </form>
 
           {/* Info */}
-          <div className="mt-6 pt-6 border-t border-zinc-800">
+          <div className="mt-6 pt-6 border-t border-zinc-800/50">
             <p className="text-sm text-zinc-500 text-center">
               Default credentials are set in your environment variables
             </p>
           </div>
         </div>
 
         {/* Footer */}
-        <div className="mt-8 text-center">
+        <div className={`mt-8 text-center transition-all duration-700 delay-300 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
           <p className="text-sm text-zinc-600">
             Built with ❤️ using Next.js & TypeScript
           </p>
         </div>
       </div>
+
+      <style jsx>{`
+        @keyframes float {
+          0%, 100% {
+            transform: translateY(0px) translateX(0px);
+          }
+          25% {
+            transform: translateY(-20px) translateX(10px);
+          }
+          50% {
+            transform: translateY(-10px) translateX(-10px);
+          }
+          75% {
+            transform: translateY(-30px) translateX(5px);
+          }
+        }
+
+        @keyframes shake {
+          0%, 100% {
+            transform: translateX(0);
+          }
+          10%, 30%, 50%, 70%, 90% {
+            transform: translateX(-4px);
+          }
+          20%, 40%, 60%, 80% {
+            transform: translateX(4px);
+          }
+        }
+
+        .animate-float {
+          animation: float 6s ease-in-out infinite;
+        }
+
+        .animate-shake {
+          animation: shake 0.5s ease-in-out;
+        }
+      `}</style>
     </div>
   );
 }

src/components/Overview.tsx

@@ -53,9 +53,10 @@ export default function Overview() {
       setActivePipelines(pipelines);
       setStats(pipelineStats);
 
-      // Load recent pipelines and active jobs
-      const recentPromises = projects.slice(0, 10).map(project =>
-        api.getPipelines(project.id, 1, 5).catch(() => [])
+      // Load recent pipelines from ALL projects for accurate Top Active Projects
+      // Increase to get better pipeline count statistics
+      const recentPromises = projects.map(project =>
+        api.getPipelines(project.id, 1, 10).catch(() => [])
       );
       const allRecent = await Promise.all(recentPromises);
 
@@ -65,7 +66,7 @@ export default function Overview() {
       const recent = allRecent
         .flat()
         .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
-        .slice(0, 15);
+        .slice(0, 50);  // Keep more pipelines for accurate counting
       setRecentPipelines(recent);
 
       // Load active jobs from running pipelines
@@ -132,28 +133,46 @@ export default function Overview() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [autoRefresh, refreshInterval]);
 
-  // Top projects by pipeline count
+  // Top projects by total pipeline run count (most active)
   const topProjects = useMemo(() => {
     interface ProjectCount {
       project: typeof projects[0];
       count: number;
+      lastActivity: string;
     }
     const projectPipelineCounts = new Map<number, ProjectCount>();
 
+    // Count all recent pipelines per project
     recentPipelines.forEach(pipeline => {
       const project = projects.find(p => p.id === pipeline.project_id);
       if (project) {
         const existing = projectPipelineCounts.get(project.id);
         if (existing) {
           existing.count++;
+          // Keep track of latest activity
+          if (new Date(pipeline.updated_at) > new Date(existing.lastActivity)) {
+            existing.lastActivity = pipeline.updated_at;
+          }
         } else {
-          projectPipelineCounts.set(project.id, { project, count: 1 });
+          projectPipelineCounts.set(project.id, {
+            project,
+            count: 1,
+            lastActivity: pipeline.updated_at
+          });
         }
       }
     });
 
+    // Sort by pipeline count (descending), then by last activity (most recent first)
     return Array.from(projectPipelineCounts.values())
-      .sort((a, b) => b.count - a.count)
+      .sort((a, b) => {
+        // Primary sort: by count (higher first)
+        if (b.count !== a.count) {
+          return b.count - a.count;
+        }
+        // Secondary sort: by last activity (more recent first)
+        return new Date(b.lastActivity).getTime() - new Date(a.lastActivity).getTime();
+      })
       .slice(0, 5);
   }, [recentPipelines, projects]);