Persist background settings in links

[rowkav09]

Summary by CodeRabbit

• New Features
  • Added support for saving and restoring background settings through the URL.
  • Validates background types and settings, including color formats and numeric ranges.
  • Automatically falls back to safe values when invalid background configuration is provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
halftone	Ready	Preview	Aug 8, 2026 3:59pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The page now validates background configuration from the bg URL parameter, restores valid settings during hydration, and serializes current settings back to the URL when they change.

Changes

Background URL State

Layer / File(s)	Summary
Validated background URL synchronization src/app/page.tsx	parseBackgroundConfig validates background types and colors, clamps numeric values, and handles malformed JSON. URL hydration applies valid configurations. URL serialization and effect dependencies now include backgroundConfig.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested labels: feature

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: persisting background settings in shared links.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/app/page.tsx`:
- Around line 95-99: Replace the truthiness-based Number(...) || fallback
expressions in the config restoration logic with finite-number validation that
preserves valid zero values and clamps them normally. Apply this to
gradientAngle, gradientMidpoint, radialCenterX, radialCenterY, and radialSpread;
reject or explicitly parse non-numeric JSON values, while retaining each
DEFAULT_BACKGROUND_CONFIG fallback for invalid inputs.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 08e84973-ee03-453b-b1fb-7ad88a28be96

📥 Commits

Reviewing files that changed from the base of the PR and between 1d0be51 and 53681e2.

📒 Files selected for processing (1)

• src/app/page.tsx

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Preserve valid zero values before clamping.

Number(...) || fallback treats 0 as missing. A shared link with gradientAngle: 0, gradientMidpoint: 0, radialCenterX: 0, or radialCenterY: 0 restores the default instead of the saved value. radialSpread: 0 becomes 100 instead of being clamped to the minimum 10.

Use a finite-number check that does not use truthiness. Reject non-number JSON values or parse them explicitly.

Proposed fix

+const finiteNumberOrDefault = (value: unknown, fallback: number) =>
+  typeof value === "number" && Number.isFinite(value) ? value : fallback;
+
-    config.gradientAngle = clampNumber(Number(config.gradientAngle) || DEFAULT_BACKGROUND_CONFIG.gradientAngle, 0, 360);
-    config.gradientMidpoint = clampNumber(Number(config.gradientMidpoint) || DEFAULT_BACKGROUND_CONFIG.gradientMidpoint, 0, 1);
-    config.radialCenterX = clampNumber(Number(config.radialCenterX) || DEFAULT_BACKGROUND_CONFIG.radialCenterX, 0, 100);
-    config.radialCenterY = clampNumber(Number(config.radialCenterY) || DEFAULT_BACKGROUND_CONFIG.radialCenterY, 0, 100);
-    config.radialSpread = clampNumber(Number(config.radialSpread) || DEFAULT_BACKGROUND_CONFIG.radialSpread, 10, 200);
+    config.gradientAngle = clampNumber(finiteNumberOrDefault(config.gradientAngle, DEFAULT_BACKGROUND_CONFIG.gradientAngle), 0, 360);
+    config.gradientMidpoint = clampNumber(finiteNumberOrDefault(config.gradientMidpoint, DEFAULT_BACKGROUND_CONFIG.gradientMidpoint), 0, 1);
+    config.radialCenterX = clampNumber(finiteNumberOrDefault(config.radialCenterX, DEFAULT_BACKGROUND_CONFIG.radialCenterX), 0, 100);
+    config.radialCenterY = clampNumber(finiteNumberOrDefault(config.radialCenterY, DEFAULT_BACKGROUND_CONFIG.radialCenterY), 0, 100);
+    config.radialSpread = clampNumber(finiteNumberOrDefault(config.radialSpread, DEFAULT_BACKGROUND_CONFIG.radialSpread), 10, 200);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	config.gradientAngle = clampNumber(Number(config.gradientAngle) || DEFAULT_BACKGROUND_CONFIG.gradientAngle, 0, 360);
	config.gradientMidpoint = clampNumber(Number(config.gradientMidpoint) || DEFAULT_BACKGROUND_CONFIG.gradientMidpoint, 0, 1);
	config.radialCenterX = clampNumber(Number(config.radialCenterX) || DEFAULT_BACKGROUND_CONFIG.radialCenterX, 0, 100);
	config.radialCenterY = clampNumber(Number(config.radialCenterY) || DEFAULT_BACKGROUND_CONFIG.radialCenterY, 0, 100);
	config.radialSpread = clampNumber(Number(config.radialSpread) || DEFAULT_BACKGROUND_CONFIG.radialSpread, 10, 200);
	const finiteNumberOrDefault = (value: unknown, fallback: number) =>
	typeof value === "number" && Number.isFinite(value) ? value : fallback;
	config.gradientAngle = clampNumber(finiteNumberOrDefault(config.gradientAngle, DEFAULT_BACKGROUND_CONFIG.gradientAngle), 0, 360);
	config.gradientMidpoint = clampNumber(finiteNumberOrDefault(config.gradientMidpoint, DEFAULT_BACKGROUND_CONFIG.gradientMidpoint), 0, 1);
	config.radialCenterX = clampNumber(finiteNumberOrDefault(config.radialCenterX, DEFAULT_BACKGROUND_CONFIG.radialCenterX), 0, 100);
	config.radialCenterY = clampNumber(finiteNumberOrDefault(config.radialCenterY, DEFAULT_BACKGROUND_CONFIG.radialCenterY), 0, 100);
	config.radialSpread = clampNumber(finiteNumberOrDefault(config.radialSpread, DEFAULT_BACKGROUND_CONFIG.radialSpread), 10, 200);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/page.tsx` around lines 95 - 99, Replace the truthiness-based
Number(...) || fallback expressions in the config restoration logic with
finite-number validation that preserves valid zero values and clamps them
normally. Apply this to gradientAngle, gradientMidpoint, radialCenterX,
radialCenterY, and radialSpread; reject or explicitly parse non-numeric JSON
values, while retaining each DEFAULT_BACKGROUND_CONFIG fallback for invalid
inputs.