Skip to content

Update documentation and implement Dark Mode toggle#5

Merged
crippledgeek merged 4 commits into
masterfrom
feature/ux/darmode
Jan 4, 2026
Merged

Update documentation and implement Dark Mode toggle#5
crippledgeek merged 4 commits into
masterfrom
feature/ux/darmode

Conversation

@crippledgeek
Copy link
Copy Markdown
Owner

Description

This pull request updates documentation and implements a Dark Mode toggle in the desktop navigation.

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

  • Updated README.md with new features, version upgrades, and roadmap progress.
  • Integrated a Dark Mode toggle into the Header component for desktop navigation.
  • Added comprehensive documentation for Feature 3.1: Dark Mode.
  • Updated architecture and roadmap documentation to include the URL Encoder/Decoder tool and Phase 1 progress.

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

  • Documentation changes include new Dark Mode and URL Encoder/Decoder details.
  • Verify consistency of the Dark Mode toggle experience across browsers and devices.

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

- Updated `architecture-and-feature-roadmap.md` to reflect the completion of the URL Encoder/Decoder as part of Phase 1.
- Added detailed documentation on the new `useFormHelpers` and `Tool Registry` patterns.
- Outlined the features, performance, and implementation notes of the URL Encoder/Decoder tool.
- Revised the architectural overview and roadmap progress to include the fourth converter tool.

**BREAKING CHANGE:** Document version updated from 1.0 to 1.1, signaling significant changes in roadmap progress and supporting features.
- Documented the completion of **Feature 3.1: Dark Mode** in `feature-3.1-dark-mode-implementation.md`.
- Included detailed sections such as file changes, API design, implementation patterns, performance characteristics, testing procedures, and roadmap updates.
- Highlighted accessibility improvements, browser compatibility, and UX-focused details such as persistence and preference detection.
- Introduced a reusable context provider pattern applicable to future stateful features like Conversion History (Feature 3.2) and Favorites/Bookmarks (Feature 3.3).

BREAKING CHANGE: Updates `CLAUDE.md` with new sections documenting the Dark Mode system, reinforcing a consistent documentation strategy across features.
- Updated the `Header` component to include the Dark Mode toggle alongside the desktop navigation.
- Refactored the layout to improve accessibility and consistency across device sizes.
- Consolidated toggle and navigation logic within a unified `flex` container.

No breaking changes.
- Updated technology badges to reflect upgraded versions: TypeScript 5.9, React 19, and Vite 7.
- Enhanced features section with updated details, including 80+ encoding support, Dark Mode integration, and WCAG-compliant accessibility improvements.
- Overhauled technology stack list with additional dependencies: `Class Variance Authority`, `Zod`, and updated React Aria Components.
- Revised roadmap to show completed and in-progress tasks, such as history tracking and bookmark functionality.
- Aligned feature descriptions for greater clarity and user focus.

No breaking changes.
@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 4, 2026

Deploy Preview for devkit-app ready!

Name Link
🔨 Latest commit 1105cef
🔍 Latest deploy log https://app.netlify.com/projects/devkit-app/deploys/6959b2ee75adf300080b0a6c
😎 Deploy Preview https://deploy-preview-5--devkit-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@crippledgeek crippledgeek merged commit 87ae3a1 into master Jan 4, 2026
6 checks passed
@crippledgeek crippledgeek deleted the feature/ux/darmode branch January 4, 2026 00:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant