feat(encoders): add URL Encoder/Decoder with support for multiple enc…

[crippledgeek]

This pull request implements the new URL Encoder/Decoder tool as part of the enhanced encoding tools phase. The feature provides a comprehensive solution for encoding and decoding URLs, supporting both component and full URL encoding modes, and offers compatibility with over 80 character encodings. The implementation includes robust validation, user-friendly UI, and ergonomic API design, while following established architectural patterns and maintaining high code quality.

Key changes grouped by theme:

Feature Implementation & API:

• Added the URLEncode namespace to src/lib/encoding.ts, providing async encode and decode functions for URL encoding/decoding, as well as parseQuery and buildQuery utilities. Supports both component and full URL modes and 80+ character encodings, using native browser APIs for UTF-8 and iconv-lite for others. Includes comprehensive error handling and examples.
• Created a detailed feature summary and implementation documentation in docs/feature-1.1-url-encoder-implementation.md, outlining features, validation, UI, API, testing, performance, accessibility, and roadmap integration.

Validation & Error Handling:

• Updated src/lib/validation-schemas.ts to add urlEncoderSchema for form validation, including conditional validation logic for encode/decode modes and a new urlEncodedStringSchema to ensure proper percent-encoding. Exported the URLEncoderForm type.
• Added ENCODE_FAILED error code to ERROR_CODES in src/lib/errors.ts for more precise error reporting during URL encoding failures.

Tool Registration & UI Integration:

• Registered the new URL Encoder/Decoder tool in src/lib/tools.ts, including metadata, navigation route, icon (Link from lucide-react), and descriptive tags for discoverability. [1] [2]

These changes collectively deliver a robust, user-friendly, and extensible URL Encoder/Decoder tool, ready for testing and deployment.…oding modes

Introduce a new /converters/url-encoder tool for URL encoding and decoding.

• Added URLEncoder.tsx page, UI for encoding/decoding URLs, and form validation using zod.
• Implemented URLEncode utility functions in encoding.ts:
  • encode: Encode text as URL (component/full modes).
  • decode: Decode URL-encoded strings.
  • parseQuery: Parse query strings into key-value pairs.
  • buildQuery: Serialize key-value pairs into query strings.
• Updated tools.ts to add the URL Encoder/Decoder to the tools list.
• Integrated route in routeTree.gen.ts for navigation and routing support.
• Enhanced validation by adding URL-specific schemas to validation-schemas.ts.

BREAKING CHANGE: Introduces a new error code (ENCODE_FAILED) in errors.ts, which might affect projects relying on existing enums.

Description

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Code refactoring (no functional changes)
• Performance improvement
• Dependency update

Related Issue

Closes #

Changes Made

Testing

Manual Testing

• Tested on Chrome (latest)
• Tested on Firefox (latest)
• Tested on Safari (latest)
• Tested on Edge (latest)
• Tested on mobile (responsive design)

Functional Testing

• All features work as expected
• Error handling tested
• Edge cases tested (empty input, large input, invalid format)
• Output validation verified

Accessibility Testing

• Keyboard navigation works
• Screen reader tested (if possible)
• Color contrast verified (WCAG 2.1 AA)
• Focus indicators visible

Code Quality Checklist

• Code follows the established patterns in the codebase
• TypeScript types are properly defined (no any types)
• ESLint passes with no warnings
• TypeScript compiler passes with no errors
• Build succeeds (npm run build)
• No console.log statements in production code
• Comments added for complex logic
• No code duplication

Performance Checklist

• Bundle size impact is acceptable (check CI artifacts)
• Heavy dependencies are lazy-loaded if applicable
• Route is code-split (if adding new route)
• Images are optimized (if applicable)
• No performance regressions (check Lighthouse CI results)

Security Checklist

• User input is validated with Zod schemas
• Input size limits enforced (10MB default)
• No use of dangerouslySetInnerHTML
• No use of eval() or Function() constructor
• No hardcoded secrets or credentials

Documentation

• CLAUDE.md updated (if new patterns introduced)
• README.md updated (if user-facing changes)
• Feature documentation added (if new feature)
• Code comments added for complex logic
• API documentation updated (if applicable)

Screenshots / Recordings

Before

After

Deployment Checklist

• This PR can be deployed to production
• Database migrations included (if applicable - N/A for this project)
• Environment variables documented (if added/changed)
• Breaking changes documented (if applicable)

Reviewer Notes

Post-Merge Tasks

• Update docs/feature-phases-quick-reference.md (mark feature as complete)
• Monitor Netlify deployment for errors
• Verify on production URL
• Close related issues

---

Self-Review Checklist (for PR author before requesting review):

• I have reviewed my own code
• I have tested all changes locally
• I have checked that the CI pipeline passes
• I have resolved all merge conflicts
• I have updated the documentation
• This PR is ready for review

[netlify]

✅ Deploy Preview for devkit-app ready!

Name	Link
🔨 Latest commit	1d0f7b3
🔍 Latest deploy log	https://app.netlify.com/projects/devkit-app/deploys/694f7c5546d2930008549017
😎 Deploy Preview	https://deploy-preview-4--devkit-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.