feat: sync Customization Studio settings to URL for shareability (JhaSourav07#2252)

## Description
This PR adds URL synchronization to the Customization Studio.
Previously, all settings were stored only in component state, meaning
configurations could not be bookmarked or shared. Now, as the user
adjusts any setting, the page URL updates in real-time using
`router.replace`. On page load, the URL search params are read to
restore the previous configuration, making every customization fully
shareable via a single link.

Fixes JhaSourav07#2245 

## Pillar
- [x] 🛠️ Other (Bug fix, refactoring, docs)

**Changes made:**
- Added `useSearchParams` hook to initialize all state from URL params
on mount
- Added `useEffect` to sync state changes to the URL using
`router.replace` with `scroll: false`

## Visual Preview
Before: Changing settings in the Customization Studio never updated the
page URL. Refreshing the page or sharing the link would lose all
configuration.

<img width="1920" height="967"
alt="{98D0A76E-6735-4DFE-A22B-F14D8B863C29}"
src="https://github.com/user-attachments/assets/c9673ec0-08fd-421e-acd1-dd93a862e2fb"
/>

After: The URL updates in real-time as settings change (e.g.
/customize?user=jhasourav07&theme=neon&font=Orbitron). Visiting a shared
URL restores the exact same configuration automatically.


https://github.com/user-attachments/assets/8c8b46df-035f-4b9f-a6d1-09f53ee1cea2

## Checklist
- [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).

Author: JhaSourav07

app/customize/page.test.tsx

@@ -34,6 +34,15 @@ vi.mock('framer-motion', () => ({
   },
 }));
 
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    replace: vi.fn(),
+  }),
+  useSearchParams: () => ({
+    get: () => null,
+  }),
+}));
+
 vi.mock('@/components/InteractiveViewer', () => ({
   default: ({ children, ...props }: MockContainerProps) => <div {...props}>{children}</div>,
 }));

app/customize/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState, type ReactElement } from 'react';
+import { useCallback, useEffect, useRef, useState, Suspense, type ReactElement } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { validateGitHubUsername } from '@/lib/validations';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
@@ -23,7 +24,7 @@ import { getExportSnippet, buildQueryParams } from './utils';
 
 // ─── Main Page ────────────────────────────────────────────────────────────────
 
-export default function CustomizePage(): ReactElement {
+function CustomizePageInner(): ReactElement {
   const [username, setUsername] = useState('');
   const [theme, setTheme] = useState('dark');
   const [bgHex, setBgHex] = useState('');
@@ -56,6 +57,39 @@ export default function CustomizePage(): ReactElement {
   const hasUsername = trimmedUsername.length > 0;
   const isRandomTheme = theme === 'random';
 
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // On mount: initialize state from URL search params
+  /* eslint-disable react-hooks/set-state-in-effect */
+  useEffect(() => {
+    const u = searchParams.get('user') ?? '';
+    const t = searchParams.get('theme') ?? 'dark';
+    setUsername(u);
+    setTheme(t);
+    setBgHex(searchParams.get('bg') ?? '');
+    setAccentHex(searchParams.get('accent') ?? '');
+    setTextHex(searchParams.get('text') ?? '');
+    setScale((searchParams.get('scale') as Scale) ?? 'linear');
+    setSpeed(searchParams.get('speed') ?? '8s');
+    setFont((searchParams.get('font') as Font) ?? 'Inter');
+    setYear(searchParams.get('year') ?? '');
+    setRadius(Number(searchParams.get('radius') ?? 8));
+    setSize((searchParams.get('size') as BadgeSize) ?? 'medium');
+    setHideTitle(searchParams.get('hide_title') === 'true');
+    setHideBackground(searchParams.get('hide_background') === 'true');
+    setHideStats(searchParams.get('hide_stats') === 'true');
+    setViewMode((searchParams.get('view') as ViewMode) ?? 'default');
+    setDeltaFormat((searchParams.get('delta_format') as DeltaFormat) ?? 'percent');
+    setBadgeWidth(searchParams.get('width') ? Number(searchParams.get('width')) : '');
+    setBadgeHeight(searchParams.get('height') ? Number(searchParams.get('height')) : '');
+    setGrace(Number(searchParams.get('grace') ?? 1));
+    setLanguage((searchParams.get('lang') as Language) ?? 'en');
+    setTimezone((searchParams.get('tz') as Timezone) ?? 'UTC');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  /* eslint-enable react-hooks/set-state-in-effect */
+
   useEffect(() => {
     return () => {
       if (copyResetTimeoutRef.current !== null) {
@@ -114,6 +148,12 @@ export default function CustomizePage(): ReactElement {
   });
   const previewSrc = `/api/streak?${queryString}`;
 
+  // On change sync state to URL
+  useEffect(() => {
+    if (!queryString) return;
+    router.replace(`/customize?${queryString}`, { scroll: false });
+  }, [queryString, router]);
+
   useEffect(() => {
     // eslint-disable-next-line react-hooks/set-state-in-effect
     setErrorMessage(null);
@@ -573,3 +613,11 @@ export default function CustomizePage(): ReactElement {
     </div>
   );
 }
+
+export default function CustomizePage(): ReactElement {
+  return (
+    <Suspense fallback={<div className="min-h-screen bg-transparent" />}>
+      <CustomizePageInner />
+    </Suspense>
+  );
+}