Resolve upstream conflicts and fix CI formatting

Author: TanmayNelge

app/api/streak/route.test.ts

@@ -122,12 +122,21 @@ describe('GET /api/streak', () => {
 
       expect(response.status).toBe(400);
       const body = await response.json();
-      expect(response.status).toBe(400);
       expect(body.error).toBe('Invalid parameters');
       expect(body.details).not.toBeNull();
       expect(typeof body.details).toBe('object');
       expect(Array.isArray(body.details)).toBe(false);
     });
+    it('returns 400 when org parameter contains spaces and invalid characters', async () => {
+      const response = await GET(
+        makeRequest({ user: 'octocat', org: 'invalid_org_name_with_spaces' })
+      );
+
+      expect(response.status).toBe(400);
+      const body = await response.json();
+      expect(body.details.fieldErrors.org[0]).toBe('Invalid organization name format');
+      expect(getOrgDashboardData).not.toHaveBeenCalled();
+    });
 
     it('does not hit the GitHub API at all when user is missing', async () => {
       await GET(makeRequest());

app/customize/page.test.tsx

@@ -1,6 +1,6 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
 import CustomizePage from './page';
 
 type MockLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
@@ -76,26 +76,41 @@ vi.mock('./components/ExportPanel', () => ({
 }));
 
 describe('CustomizePage timezone query params', () => {
-  it('omits the default UTC timezone from export snippets', () => {
+  beforeEach(() => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      text: async () => '<svg></svg>',
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('omits the default UTC timezone from export snippets', async () => {
     render(<CustomizePage />);
 
-    fireEvent.change(screen.getByLabelText('Mock username'), {
-      target: { value: 'octocat' },
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText('Mock username'), {
+        target: { value: 'octocat' },
+      });
     });
 
     const snippet = screen.getByLabelText('Mock export snippet').textContent;
     expect(snippet).toContain('user=octocat');
     expect(snippet).not.toContain('tz=');
   });
 
-  it('adds a selected non-default timezone to export snippets', () => {
+  it('adds a selected non-default timezone to export snippets', async () => {
     render(<CustomizePage />);
 
-    fireEvent.change(screen.getByLabelText('Mock username'), {
-      target: { value: 'octocat' },
-    });
-    fireEvent.change(screen.getByLabelText('Mock timezone'), {
-      target: { value: 'Asia/Kolkata' },
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText('Mock username'), {
+        target: { value: 'octocat' },
+      });
+      fireEvent.change(screen.getByLabelText('Mock timezone'), {
+        target: { value: 'Asia/Kolkata' },
+      });
     });
 
     const snippet = screen.getByLabelText('Mock export snippet').textContent;

app/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { trackUser } from '@/utils/tracking';
-import type { ReactNode } from 'react';
+import InteractiveViewer from '@/components/InteractiveViewer';
+
 import Link from 'next/link';
 import { useRef, useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -11,7 +12,7 @@ import { CustomizeCTA } from './components/CustomizeCTA';
 import { useRecentSearches } from '@/hooks/useRecentSearches';
 import { useDebounce } from '@/hooks/useDebounce';
 import { Footer } from '@/app/components/Footer';
-import InteractiveViewer from '@/components/InteractiveViewer';
+
 import { FeatureCard, FeatureCardsSection } from '@/components/FeatureCards';
 import { DiscordButton } from '@/components/DiscordButton';
 
@@ -140,6 +141,39 @@ export default function LandingPage() {
     setTimeout(() => setCopied(false), 50000);
   };
 
+  const handleRotate3D = (dx: number, dy: number) => {
+    const towersGroup = document.getElementById('cp-towers');
+    if (!towersGroup) return;
+
+    // Remove any transition so dragging feels instant and responsive
+    towersGroup.style.transition = 'none';
+
+    let currentX = 0;
+    let currentY = 0;
+
+    const transformStr = towersGroup.style.transform;
+    if (transformStr) {
+      const matchX = transformStr.match(/rotateX\(([-0-9.]+)deg\)/);
+      const matchY = transformStr.match(/rotateY\(([-0-9.]+)deg\)/);
+      if (matchX) currentX = parseFloat(matchX[1]);
+      if (matchY) currentY = parseFloat(matchY[1]);
+    }
+
+    const newX = currentX - dy * 0.5;
+    const newY = currentY + dx * 0.5;
+
+    towersGroup.style.transform = `translate(0px, 20px) rotateX(${newX}deg) rotateY(${newY}deg)`;
+  };
+
+  const handleReset3D = () => {
+    const towersGroup = document.getElementById('cp-towers');
+    if (towersGroup) {
+      // Apply a smooth transition for the reset
+      towersGroup.style.transition = 'transform 1.2s cubic-bezier(0.16, 1, 0.3, 1)';
+      towersGroup.style.transform = '';
+    }
+  };
+
   return (
     <div className="min-h-screen overflow-x-hidden bg-transparent font-sans text-black dark:text-white selection:bg-black/20 dark:selection:bg-white/20">
       <div className="pointer-events-none fixed inset-0 overflow-hidden">
@@ -308,7 +342,12 @@ export default function LandingPage() {
 
           <div className="group relative mt-10">
             <div className="absolute -inset-1 rounded-[2.5rem] bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 opacity-50 blur-2xl transition duration-1000 group-hover:opacity-100" />
-            <div className="relative flex min-h-[480px] md:min-h-[520px] items-center justify-center overflow-visible rounded-3xl border border-black/5 bg-white/50 p-8 backdrop-blur-xl shadow-2xl dark:border-white/10 dark:bg-[#0a0a0a]/80">
+            <InteractiveViewer
+              className="relative flex min-h-[480px] md:min-h-[520px] items-center justify-center overflow-visible rounded-3xl border border-black/5 bg-white/50 p-8 backdrop-blur-xl shadow-2xl dark:border-white/10 dark:bg-[#0a0a0a]/80"
+              is3DMode={true}
+              onRotate3D={handleRotate3D}
+              onReset3D={handleReset3D}
+            >
               {hasUsername ? (
                 <div className="w-full flex items-center justify-center">
                   {svgState === 'loading' && (
@@ -370,7 +409,7 @@ export default function LandingPage() {
                   </p>
                 </div>
               )}
-            </div>
+            </InteractiveViewer>
           </div>
         </section>
 

components/DiscordButton.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef, useState, useEffect } from 'react';
-import { motion, useAnimation } from 'framer-motion';
+import { motion } from 'framer-motion';
 import gsap from 'gsap';
 
 export function DiscordButton() {

components/InteractiveViewer.tsx

@@ -82,11 +82,17 @@ export const formatDate = (dateStr: string): string => {
 interface InteractiveViewerProps {
   children: ReactNode;
   className?: string;
+  is3DMode?: boolean;
+  onRotate3D?: (dx: number, dy: number) => void;
+  onReset3D?: () => void;
 }
 
 export default function InteractiveViewer({
   children,
   className = '',
+  is3DMode = false,
+  onRotate3D,
+  onReset3D,
 }: InteractiveViewerProps): ReactElement {
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
@@ -191,7 +197,13 @@ export default function InteractiveViewer({
     if (isDragging.current) {
       const dx = e.clientX - lastMousePos.current.x;
       const dy = e.clientY - lastMousePos.current.y;
-      setPan((p) => ({ x: p.x + dx, y: p.y + dy }));
+
+      if (is3DMode && onRotate3D) {
+        onRotate3D(dx, dy);
+      } else {
+        setPan((p) => ({ x: p.x + dx, y: p.y + dy }));
+      }
+
       lastMousePos.current = { x: e.clientX, y: e.clientY };
       // Hide tooltip during active drag/pan
       activeTooltipRef.current = null;
@@ -285,6 +297,14 @@ export default function InteractiveViewer({
     }
   };
 
+  const handleDoubleClick = (): void => {
+    if (is3DMode && onReset3D) {
+      onReset3D();
+    }
+    setPan({ x: 0, y: 0 });
+    setZoom(1);
+  };
+
   return (
     <div
       ref={containerRef}
@@ -298,6 +318,7 @@ export default function InteractiveViewer({
       onPointerLeave={handlePointerLeave}
       onWheel={handleWheel}
       onKeyDown={handleKeyDown}
+      onDoubleClick={handleDoubleClick}
       style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
     >
       {/* ── Parallax background layer ──────────────────────────────────────────

components/dashboard/DashboardClient.tsx

@@ -21,6 +21,7 @@ import RepositoryGraph from './RepositoryGraph';
 import ComparisonStatsCard from './ComparisonStatsCard';
 import RadarChart from './RadarChart';
 import GrowthTrendChart from './GrowthTrendChart';
+import ProfileOptimizerModal from './ProfileOptimizerModal';
 
 // Define the dashboard data structure
 interface DashboardData {
@@ -321,6 +322,7 @@ export default function DashboardClient({ initialData, username }: DashboardClie
   const [secondUserData, setSecondUserData] = useState<DashboardData | null>(null);
   const [isCompareMode, setIsCompareMode] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isOptimizerOpen, setIsOptimizerOpen] = useState(false);
   const [secondUsernameInput, setSecondUsernameInput] = useState('');
   const [isLoadingSecond, setIsLoadingSecond] = useState(false);
   const [compareError, setCompareError] = useState<string | null>(null);
@@ -476,12 +478,34 @@ export default function DashboardClient({ initialData, username }: DashboardClie
         </div>
         <div className="flex gap-4 flex-wrap">
           {!isCompareMode && (
-            <button
-              onClick={handleOpenModal}
-              className="flex items-center gap-2 rounded-xl border border-black/10 dark:border-[rgba(255,255,255,0.15)] bg-black dark:bg-[#111] hover:bg-zinc-800 dark:hover:bg-zinc-900 px-4 py-2 text-sm font-semibold text-white dark:text-white transition-all duration-200 active:scale-[0.98]"
-            >
-              Compare Profile
-            </button>
+            <>
+              <button
+                onClick={() => setIsOptimizerOpen(true)}
+                className="flex items-center gap-2 rounded-xl border border-black/10 dark:border-[rgba(255,255,255,0.15)] bg-black dark:bg-[#111] hover:bg-zinc-800 dark:hover:bg-zinc-900 px-4 py-2 text-sm font-semibold text-white dark:text-white transition-all duration-200 active:scale-[0.98]"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
+                  <polyline points="16 7 22 7 22 13"></polyline>
+                </svg>
+                Profile Optimizer
+              </button>
+              <button
+                onClick={handleOpenModal}
+                className="flex items-center gap-2 rounded-xl border border-black/10 dark:border-[rgba(255,255,255,0.15)] bg-black dark:bg-[#111] hover:bg-zinc-800 dark:hover:bg-zinc-900 px-4 py-2 text-sm font-semibold text-white dark:text-white transition-all duration-200 active:scale-[0.98]"
+              >
+                Compare Profile
+              </button>
+            </>
           )}
           <RefreshButton username={username} />
           <button
@@ -1057,6 +1081,12 @@ export default function DashboardClient({ initialData, username }: DashboardClie
           </div>
         )}
       </AnimatePresence>
+
+      <ProfileOptimizerModal
+        isOpen={isOptimizerOpen}
+        onClose={() => setIsOptimizerOpen(false)}
+        userData={initialData}
+      />
     </div>
   );
 }