feat: add Base64 encoder/decoder tool

[saishreeanand05]

Description

Adds a Base64 Encoder / Decoder tool to the application.

This PR introduces utility functions for Base64 encoding and decoding, along with a dedicated UI page to allow users to encode text into Base64 or decode Base64 strings directly in the browser. All processing is performed client-side to maintain user privacy.

Changes

• Added encodeBase64 and decodeBase64 utilities in src/utils/base64Utils.ts
• Added unit tests in src/__tests__/base64Utils.test.ts
• Created Base64Tool page for encoding and decoding Base64
• Added copy and download functionality for the output
• Ensured Unicode and emoji support using UTF-8 encoding

---

Type of Change

• 🐛 Bug fix
• ✨ New feature
• 📝 Documentation update
• ♻️ Refactor
• 🎨 Style / UI update

---

Checklist

• My code follows the project's style and conventions
• I have tested my changes locally
• All existing tests pass (npx vitest run)
• I have added tests for new utilities (if applicable)
• The build succeeds (npm run build)
• This works client-side only — no server calls

---

Screenshots (if UI change)

[vercel]

@saishreeanand05 is attempting to deploy a commit to the sg172003's projects Team on Vercel.

A member of the Team first needs to authorize it.

[sg172003]

Great work on the implementation! A few things to fix before this can be merged:

1. Missing entry in Navbar allTools
The Base64 tool is missing from allTools in src/components/Navbar.tsx. Without this, the tool won't appear in the search bar or nav links.

Please add this entry to the allTools array:

{ to: '/base64', label: 'Base64 Encoder / Decoder', description: 'Encode text to Base64 or decode Base64 strings in your browser' },

The navLinks array derives from allTools automatically so that will update too.

2. Duplicate wrapper div in Base64Tool.tsx
In the header section there is a redundant nested div — the inner div is identical to the outer and serves no purpose. Please remove the inner wrapper div to clean up the JSX structure.

3. Missing test case in base64Utils.test.ts
The test suite is missing a whitespace handling test for decodeBase64. Real-world JWTs and Base64 strings often get copied with trailing spaces or newlines. Please add:

it('handles whitespace around Base64 input', () => {
expect(decodeBase64(' SGVsbG8gV29ybGQ= '.trim())).toBe('Hello World');
});

Once all three are addressed the PR is good to merge.

[saishreeanand05]

Thanks for the review! I've addressed all the requested changes:

1. Added Base64 tool entry to allTools in Navbar
2. Removed the redundant nested div in the header
3. Added whitespace handling test for decodeBase64

Also updated decodeBase64 to trim input before processing so it handles real-world copied Base64 strings correctly.

Let me know if anything else needs improvement!

[sg172003]

Almost there, good progress! Just two small things left:

1. Wrong test folder — the file landed in src/tests/ but the project
   uses src/__tests__/. Can you move base64Utils.test.ts there to keep
   things consistent with the other test files?

2. The tsconfig.app.json change needs to be reverted — adding
   vitest/globals to the production TS config leaks test types into the
   app build. The other test files in this project use explicit imports
   (import { describe, it, expect } from 'vitest') which is the right
   approach. Please remove that line and use explicit imports in the new
   test file too.

Everything else looks solid — once these two are sorted we're good to merge! 🙌

[saishreeanand05]

Thanks for the review!

I've addressed the requested changes:

• Ensured test file is in src/tests
• Reverted tsconfig changes and used explicit Vitest imports

All tests are passing and build succeeds.

Please take another look.