Add optional PDF extension checkbox to invoice path generator

[kzuraw]

• Add checkbox control to toggle .pdf extension
• Default state is unchecked (no extension)
• Update path generation logic to conditionally add extension
• Style checkbox to match Apple-inspired design

[claude]

PR Review: Add Optional PDF Extension Checkbox

Summary

This PR adds a checkbox control to the invoice path generator that allows users to optionally include the .pdf extension in the generated filename. The implementation is clean and follows the existing code patterns well.

✅ Strengths

1. Clean Implementation: The checkbox integration is well-implemented with minimal code changes
2. Consistent Styling: The checkbox styling matches the Apple-inspired design system with the #0071e3 accent color
3. Good UX: The default state (unchecked) is a sensible choice, giving users flexibility
4. Event Handling: Properly uses change event for checkbox (vs input for text fields)
5. No Breaking Changes: Existing functionality remains intact

📝 Code Quality

CSS (html/invoice-path-generator.html:66-83)

• Well-structured checkbox styles
• Good use of user-select: none on the label text
• accent-color is a nice modern touch for native checkbox styling

JavaScript (html/invoice-path-generator.html:197-237)

• Logic is simple and correct: const extension = addPdfExtCheckbox.checked ? '.pdf' : '';
• Event listener properly added
• No unexpected side effects

🔍 Observations & Suggestions

Minor: Accessibility

The checkbox label could be improved for accessibility:

<label class="checkbox-label" for="addPdfExt">
  <input type="checkbox" id="addPdfExt">
  <span>Add .pdf extension</span>
</label>

Adding for="addPdfExt" to the label element ensures proper association, though the current implementation with nested input also works.

Minor: Initial State Behavior

The checkbox is unchecked by default. Consider if you want to persist user preference using localStorage:

// On load
const savedPref = localStorage.getItem('addPdfExt');
if (savedPref !== null) {
  addPdfExtCheckbox.checked = savedPref === 'true';
}

// On change
addPdfExtCheckbox.addEventListener('change', () => {
  localStorage.setItem('addPdfExt', addPdfExtCheckbox.checked);
  generatePath();
});

This is optional but might improve UX for repeat users.

🔒 Security

✅ No security concerns. The change only affects client-side string concatenation.

🐛 Potential Issues

✅ No bugs identified. The implementation is solid.

⚡ Performance

✅ No performance concerns. The conditional check adds negligible overhead.

🧪 Testing Recommendations

Manual testing checklist:

• Verify checkbox toggles the extension on/off correctly
• Test with empty/partial form inputs (edge cases)
• Verify copy functionality works with both states
• Test keyboard navigation (Tab to checkbox, Space to toggle)
• Verify visual styling on different browsers

📋 Conclusion

Recommendation: APPROVE ✅

This is a clean, well-implemented feature addition that enhances the tool's flexibility. The code follows repository conventions from CLAUDE.md (vanilla HTML/CSS/JS, client-side only, consistent styling). The suggestions above are minor enhancements, not blockers.

Great work on maintaining code quality and consistency!