fix(frontend): sanitize customize numeric url params (JhaSourav07#3133)

## Description

Fixes JhaSourav07#3070

This fixes the Customize page hydration path for numeric URL params. The
page was reading `radius`, `width`, `height`, and `grace` with
`Number(...)`, so malformed values like `radius=abc` or `width=NaN`
could become `NaN` in component state and then leak into the generated
badge URL.

I added a small numeric search-param reader that only accepts finite
integers inside the expected UI ranges, then falls back to the same
defaults the page already used. This keeps the customizer usable when
someone lands on a malformed shared URL instead of hydrating broken
control state.

## Pillar

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

## What changed

- Sanitized `radius`, `width`, `height`, and `grace` while reading
Customize URL params.
- Preserved valid values and existing fallback behavior.
- Added a regression test for malformed numeric query params so `NaN`
does not appear in the generated URL snippet.

## GSSoC 2026

This PR is raised as part of GSSoC 2026. Please add the relevant GSSoC
label if it is not applied automatically.

## Visual Preview

N/A — this is a URL state handling fix for the Customize controls.

## Validation

```bash
npm run test -- app/customize/page.test.tsx
npm run format
npm run format:check
npm run lint
npm run typecheck
npm run test -- services/github/refresh-rate-limiter.massive-scaling.test.ts
```

`npm run lint` passes with existing warnings outside this change. A full
`npm run test` hit unrelated timing thresholds in
`services/github/refresh-rate-limiter.massive-scaling.test.ts`;
rerunning that file in isolation passed.

## 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.
- [x] My commits follow the Conventional Commits format.
- [x] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have starred 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 quality standard.

Author: JhaSourav07

app/customize/page.test.tsx

@@ -14,11 +14,22 @@ type MockContainerProps = HTMLAttributes<HTMLElement> & {
 
 type MockControlsPanelProps = {
   username: string;
-  timezone: string;
+  radius: number;
   onUsernameChange: (value: string) => void;
+};
+
+type MockAdvancedSettingsPanelProps = {
+  timezone: string;
+  badgeWidth: number | '';
+  badgeHeight: number | '';
+  grace: number;
   onTimezoneChange: (value: string) => void;
 };
 
+const mockSearchParams = vi.hoisted(() => ({
+  values: new Map<string, string>(),
+}));
+
 vi.mock('next/link', () => ({
   default: ({ href, children, ...props }: MockLinkProps) => (
     <a href={href} {...props}>
@@ -39,7 +50,7 @@ vi.mock('next/navigation', () => ({
     replace: vi.fn(),
   }),
   useSearchParams: () => ({
-    get: () => null,
+    get: (key: string) => mockSearchParams.values.get(key) ?? null,
   }),
 }));
 
@@ -48,33 +59,39 @@ vi.mock('@/components/InteractiveViewer', () => ({
 }));
 
 vi.mock('./components/ControlsPanel', () => ({
-  ControlsPanel: ({ username, onUsernameChange }: MockControlsPanelProps) => (
+  ControlsPanel: ({ username, radius, onUsernameChange }: MockControlsPanelProps) => (
     <div>
       <input
         aria-label="Mock username"
         value={username}
         onChange={(event) => onUsernameChange(event.currentTarget.value)}
       />
+      <output aria-label="Mock radius">{String(radius)}</output>
     </div>
   ),
 }));
 
 vi.mock('./components/AdvancedSettingsPanel', () => ({
   AdvancedSettingsPanel: ({
     timezone,
+    badgeWidth,
+    badgeHeight,
+    grace,
     onTimezoneChange,
-  }: {
-    timezone: string;
-    onTimezoneChange: (value: string) => void;
-  }) => (
-    <select
-      aria-label="Mock timezone"
-      value={timezone}
-      onChange={(event) => onTimezoneChange(event.currentTarget.value)}
-    >
-      <option value="UTC">UTC</option>
-      <option value="Asia/Kolkata">Asia/Kolkata</option>
-    </select>
+  }: MockAdvancedSettingsPanelProps) => (
+    <div>
+      <select
+        aria-label="Mock timezone"
+        value={timezone}
+        onChange={(event) => onTimezoneChange(event.currentTarget.value)}
+      >
+        <option value="UTC">UTC</option>
+        <option value="Asia/Kolkata">Asia/Kolkata</option>
+      </select>
+      <output aria-label="Mock badge width">{String(badgeWidth)}</output>
+      <output aria-label="Mock badge height">{String(badgeHeight)}</output>
+      <output aria-label="Mock grace">{String(grace)}</output>
+    </div>
   ),
 }));
 
@@ -86,6 +103,7 @@ vi.mock('./components/ExportPanel', () => ({
 
 describe('CustomizePage timezone query params', () => {
   beforeEach(() => {
+    mockSearchParams.values.clear();
     global.fetch = vi.fn().mockResolvedValue({
       ok: true,
       text: async () => '<svg></svg>',
@@ -126,4 +144,26 @@ describe('CustomizePage timezone query params', () => {
     expect(snippet).toContain('user=octocat');
     expect(snippet).toContain('tz=Asia%2FKolkata');
   });
+
+  it('falls back when numeric URL params are malformed', () => {
+    mockSearchParams.values.set('user', 'octocat');
+    mockSearchParams.values.set('radius', 'abc');
+    mockSearchParams.values.set('width', 'NaN');
+    mockSearchParams.values.set('height', 'nope');
+    mockSearchParams.values.set('grace', 'bad');
+
+    render(<CustomizePage />);
+
+    expect(screen.getByLabelText('Mock radius').textContent).toBe('8');
+    expect(screen.getByLabelText('Mock badge width').textContent).toBe('');
+    expect(screen.getByLabelText('Mock badge height').textContent).toBe('');
+    expect(screen.getByLabelText('Mock grace').textContent).toBe('1');
+
+    const snippet = screen.getByLabelText('Mock export snippet').textContent;
+    expect(snippet).toContain('user=octocat');
+    expect(snippet).not.toContain('radius=NaN');
+    expect(snippet).not.toContain('width=NaN');
+    expect(snippet).not.toContain('height=NaN');
+    expect(snippet).not.toContain('grace=NaN');
+  });
 });

app/customize/page.tsx

@@ -23,6 +23,27 @@ import type {
 import { useDebounce } from '@/hooks/useDebounce';
 import { getExportSnippet, buildQueryParams } from './utils';
 
+function readNumericSearchParam(
+  searchParams: URLSearchParams,
+  key: string,
+  fallback: number | '',
+  min?: number,
+  max?: number
+): number | '' {
+  const raw = searchParams.get(key);
+  if (!raw) return fallback;
+
+  const parsed = Number(raw);
+  if (!Number.isFinite(parsed) || !Number.isInteger(parsed)) {
+    return fallback;
+  }
+
+  if (min !== undefined && parsed < min) return fallback;
+  if (max !== undefined && parsed > max) return fallback;
+
+  return parsed;
+}
+
 // ─── Main Page ────────────────────────────────────────────────────────────────
 
 function CustomizePageInner(): ReactElement {
@@ -76,16 +97,16 @@ function CustomizePageInner(): ReactElement {
     setSpeed(searchParams.get('speed') ?? '8s');
     setFont((searchParams.get('font') as Font) ?? 'Inter');
     setYear(searchParams.get('year') ?? '');
-    setRadius(Number(searchParams.get('radius') ?? 8));
+    setRadius(readNumericSearchParam(searchParams, 'radius', 8, 0, 50) as number);
     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));
+    setBadgeWidth(readNumericSearchParam(searchParams, 'width', '', 100, 1200));
+    setBadgeHeight(readNumericSearchParam(searchParams, 'height', '', 80, 800));
+    setGrace(readNumericSearchParam(searchParams, 'grace', 1, 0, 7) as number);
     setLanguage((searchParams.get('lang') as Language) ?? 'en');
     setTimezone((searchParams.get('tz') as Timezone) ?? 'UTC');
     // eslint-disable-next-line react-hooks/exhaustive-deps