feat: create a separate url for comparison mode and add a share button to it (JhaSourav07#2064)

## Description
Previously on entering comparison mode there was no new route created.
this PR fixes that and creates a new route for comparison.
Previously when the user refreshes the page they exit from comparison
mode now due to new route that is prevented.


Fixes JhaSourav07#1717 

## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview
BEFORE

<img width="1920" height="1200" alt="Screenshot 2026-05-31 155050"
src="https://github.com/user-attachments/assets/9ed8866c-bbc0-40f3-bc0d-a9c7ea53283b"
/>

AFTER

<img width="1920" height="1200" alt="Screenshot 2026-05-31 155028"
src="https://github.com/user-attachments/assets/a6d1d37a-57f3-4134-83de-639c223ee842"
/>


## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [ ] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have started the repo.
- [x] I have made sure that i have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/(root)/dashboard/[username]/page.tsx

@@ -63,6 +63,7 @@ export default async function DashboardPage({
   params: Promise<{ username: string }>;
   searchParams: Promise<{
     refresh?: string;
+    compare?: string;
     year?: string;
     month?: string;
     from?: string;
@@ -72,6 +73,7 @@ export default async function DashboardPage({
   const { username } = await params;
   const resolvedSearchParams = await searchParams;
   const bypassCache = resolvedSearchParams?.refresh === 'true';
+  const compareUsername = resolvedSearchParams?.compare;
   const period = resolveDashboardPeriod({
     year: resolvedSearchParams?.year,
     month: resolvedSearchParams?.month,
@@ -90,10 +92,11 @@ export default async function DashboardPage({
     });
   } catch (error) {
     if (error instanceof Error && error.message.includes('not found')) {
-      // Smart Redirect: If the GraphQL "user" query fails, check if it's actually an Organization
       let fallbackProfile;
       try {
-        fallbackProfile = await fetchUserProfile(username, { bypassCache });
+        fallbackProfile = await fetchUserProfile(username, {
+          bypassCache,
+        });
       } catch {
         return notFound();
       }
@@ -105,5 +108,24 @@ export default async function DashboardPage({
     throw error;
   }
 
-  return <DashboardClient initialData={data} username={username} period={period} />;
+  let compareData = null;
+
+  if (compareUsername && compareUsername.toLowerCase() !== username.toLowerCase()) {
+    try {
+      compareData = await getFullDashboardData(compareUsername, {
+        bypassCache,
+      });
+    } catch {
+      compareData = null;
+    }
+  }
+
+  return (
+    <DashboardClient
+      initialData={data}
+      username={username}
+      compareData={compareData}
+      period={period}
+    />
+  );
 }

components/dashboard/DashboardClient.tsx

@@ -22,6 +22,7 @@ import RepositoryGraph from './RepositoryGraph';
 import ComparisonStatsCard from './ComparisonStatsCard';
 import RadarChart from './RadarChart';
 import GrowthTrendChart from './GrowthTrendChart';
+import { useRouter } from 'next/navigation';
 import ProfileOptimizerModal from './ProfileOptimizerModal';
 import ResumeProfileSection from './ResumeProfileSection';
 import type { DashboardPeriod } from '@/utils/dashboardPeriod';
@@ -78,6 +79,7 @@ interface DashboardData {
 interface DashboardClientProps {
   initialData: DashboardData;
   username: string;
+  compareData?: DashboardData | null;
   period: DashboardPeriod;
 }
 
@@ -322,14 +324,20 @@ function getPersonalityTags(
 // DashboardClient Component
 // ------------------------------------------------------------
 
-export default function DashboardClient({ initialData, username, period }: DashboardClientProps) {
-  const [secondUserData, setSecondUserData] = useState<DashboardData | null>(null);
-  const [isCompareMode, setIsCompareMode] = useState(false);
+export default function DashboardClient({
+  initialData,
+  username,
+  compareData = null,
+  period,
+}: DashboardClientProps) {
+  const [secondUserData, setSecondUserData] = useState<DashboardData | null>(compareData);
+  const [isCompareMode, setIsCompareMode] = useState(Boolean(compareData));
   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);
+  const router = useRouter();
 
   const modalRef = useRef<HTMLDivElement>(null);
   const compareInputRef = useRef<HTMLInputElement>(null);
@@ -425,6 +433,9 @@ export default function DashboardClient({ initialData, username, period }: Dashb
       const data = await res.json();
       setSecondUserData(data);
       setIsCompareMode(true);
+
+      router.replace(`/dashboard/${username}?compare=${data.profile.username}`);
+
       setIsModalOpen(false);
       toast.success(`Comparing ${username} vs ${data.profile.username}`);
     } catch (err: unknown) {
@@ -439,9 +450,33 @@ export default function DashboardClient({ initialData, username, period }: Dashb
   const handleExitCompare = () => {
     setIsCompareMode(false);
     setSecondUserData(null);
+
+    router.replace(`/dashboard/${username}`);
+
     toast.info('Returned to single profile view');
   };
 
+  const handleShareComparison = async () => {
+    if (!secondUserData) return;
+
+    const compareUrl = `${window.location.origin}/dashboard/${username}?compare=${secondUserData.profile.username}`;
+
+    try {
+      if (navigator.share) {
+        await navigator.share({
+          title: `${username} vs ${secondUserData.profile.username}`,
+          text: 'Check out this GitHub profile comparison',
+          url: compareUrl,
+        });
+      } else {
+        await navigator.clipboard.writeText(compareUrl);
+        toast.success('Comparison link copied!');
+      }
+    } catch {
+      // user cancelled share dialog
+    }
+  };
+
   // ------------------------------------------------------------
   // Compare Mode Statistics Calculations
   // ------------------------------------------------------------
@@ -563,6 +598,16 @@ export default function DashboardClient({ initialData, username, period }: Dashb
               </button>
             </>
           )}
+          {isCompareMode && secondUserData && (
+            <button
+              onClick={handleShareComparison}
+              className="flex items-center gap-2 rounded-xl border border-black/10 dark:border-[rgba(255,255,255,0.15)] bg-blue-600 hover:bg-blue-700 px-4 py-2 text-sm font-semibold text-white transition-all duration-200 active:scale-[0.98]"
+            >
+              <Share2 size={16} />
+              Share Comparison
+            </button>
+          )}
+
           <RefreshButton username={username} />
           <button
             onClick={() => {