fix: swap URL and Short Code inputs order (#10)

[viganogabriele]

Swapped the order of the URL and Short Code inputs in the create dialog to improve UX.
Also moved the error messages to ensure they appear below the correct input fields.

Closes #10

[coderabbitai]

Walkthrough

The create-url-dialog component reorders its form fields, placing Short Code before URL. Input types are reassigned, a validation hint is added to Short Code, and error display is restructured to show validation messages adjacent to their respective fields.

Changes

Cohort / File(s)

Summary

Form field reordering and validation restructuring src/components/create-url-dialog.tsx

Swaps positions of Short Code and URL fields in the form layout. Reassigns input control types: Short Code field now uses type text with placeholder indicating custom code, URL field uses type url with its own placeholder. Adds client-facing validation hint via title attribute on Short Code input. Removes top inline URL error span and introduces separate error spans for Short Code and URL fields positioned immediately after their respective inputs.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title directly matches the main change: swapping the order of URL and Short Code inputs, which aligns with issue #10's objective.
Linked Issues check	✅ Passed	The PR implements the UX decision to swap URL and Short Code input fields as required by issue #10, with error message placement improvements also benefiting UX.
Out of Scope Changes check	✅ Passed	All changes are directly related to reordering the input fields and associated error displays, which is within the scope of issue #10 requirements.

✨ Finishing touches

• 📝 Generate docstrings

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f319fd8 and c91fe4f.

📒 Files selected for processing (1)

• src/components/create-url-dialog.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use 2-space indentation, semicolons as needed, and ES5 trailing commas; configure Biome for auto-formatting on save

Files:

• src/components/create-url-dialog.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Auto-organize imports on save with Biome; exclude shadcn/ui components from Biome formatting

Files:

• src/components/create-url-dialog.tsx

src/components/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/components/**/*.{ts,tsx}: Use shadcn/ui components with 'new-york' style and slate base color
Mark interactive components as client components; use React hooks for state management in client components
Use Sonner for toast notifications with standard error handling patterns
Call /api/urls endpoints directly from frontend components via standard fetch with JSON; handle errors via toast notifications

Files:

• src/components/create-url-dialog.tsx

🧠 Learnings (2)

📚 Learning: 2025-12-05T21:25:30.018Z

Learnt from: CR
Repo: PoliNetworkOrg/polinet.cc PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-05T21:25:30.018Z
Learning: Applies to src/app/[shortCode]/page.tsx : Implement URL redirection via Next.js dynamic routes at `src/app/[shortCode]/page.tsx`

Applied to files:

• src/components/create-url-dialog.tsx

📚 Learning: 2025-12-05T21:25:30.018Z

Learnt from: CR
Repo: PoliNetworkOrg/polinet.cc PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-05T21:25:30.018Z
Learning: Applies to src/lib/url-service.ts : Generate short codes as 8-character nanoids in `UrlService.createShortUrl()`

Applied to files:

• src/components/create-url-dialog.tsx

🧬 Code graph analysis (1)

src/components/create-url-dialog.tsx (2)

src/components/ui/label.tsx (1)

• Label (24-24)

src/components/ui/input.tsx (1)

• Input (23-23)

🔇 Additional comments (3)

src/components/create-url-dialog.tsx (3)

75-83: LGTM! Good UX improvements.

The Short Code field is now positioned first with appropriate type, placeholder, and validation hint. The title attribute on Line 82 is a nice touch that provides users with inline validation guidance.

---

85-90: LGTM! Proper error handling.

The error display for Short Code is correctly implemented with proper accessibility attributes and safe error rendering using optional chaining.

---

92-99: LGTM! URL field correctly repositioned.

The URL field is now properly positioned as the second field with the correct input type and descriptive placeholder.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Inconsistent error handling pattern.

Line 105 displays fields.url.errors directly, while Line 89 uses fields.shortCode.errors?.join(", "). Both fields should handle errors consistently since @conform-to/react typically returns error arrays.

Apply this diff to ensure consistent error handling:

-              {fields.url.errors}
+              {fields.url.errors?.join(", ")}

📝 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

	<span
	id={fields.url.errorId}
	className="text-xs col-start-2 col-span-3 text-red-600 text-center"
	>
	{fields.url.errors}
	</span>
	<span
	id={fields.url.errorId}
	className="text-xs col-start-2 col-span-3 text-red-600 text-center"
	>
	{fields.url.errors?.join(", ")}
	</span>

🤖 Prompt for AI Agents

In src/components/create-url-dialog.tsx around lines 101 to 106, the URL field
error is rendered directly as fields.url.errors but the shortCode field uses
fields.shortCode.errors?.join(", "), so update the URL error rendering to mirror
that pattern: call fields.url.errors?.join(", ") (or fallback to an empty
string) so errors array is joined into a single string for display and
null/undefined is handled safely.