feat: consolidate Code Formatter and JSON Tools into Code & JSON Tools

- Renamed and combined the Code Formatter and JSON Tools components into a single Code & JSON Tools component for improved functionality.
- Updated routing in App.tsx to reflect the new consolidated component.
- Modified Sidebar to display the new Code & JSON Tools entry with updated descriptions.
- Enhanced SEO metadata for the new component, ensuring accurate representation and keywords for better discoverability.
- Improved JWTDecoder component with auto-decoding feature and debounced input handling for better user experience.

Author: 0xdps

src/App.tsx

@@ -11,8 +11,7 @@ const TextUtilities = lazy(() => import('./pages/TextUtilities'))
 const GeneratorToolkit = lazy(() => import('./pages/GeneratorToolkit'))
 const HashVerify = lazy(() => import('./pages/HashVerify'))
 const JWTDecoder = lazy(() => import('./pages/JWTDecoder'))
-const CodeFormatter = lazy(() => import('./pages/CodeFormatter'))
-const JSONTools = lazy(() => import('./pages/JSONTools'))
+const CodeAndJSONTools = lazy(() => import('./pages/CodeAndJSONTools'))
 const RegexTester = lazy(() => import('./pages/RegexTester'))
 const CodeDiff = lazy(() => import('./pages/CodeDiff'))
 const ColorPicker = lazy(() => import('./pages/ColorPicker'))
@@ -48,8 +47,9 @@ function App() {
                         <Route path="/generators" element={<GeneratorToolkit />} />
                         <Route path="/hash-verify" element={<HashVerify />} />
                         <Route path="/jwt-decoder" element={<JWTDecoder />} />
-                        <Route path="/code-formatter" element={<CodeFormatter />} />
-                        <Route path="/json-tools" element={<JSONTools />} />
+                        <Route path="/code-formatter" element={<CodeAndJSONTools />} />
+                        <Route path="/json-tools" element={<CodeAndJSONTools />} />
+                        <Route path="/code-json-tools" element={<CodeAndJSONTools />} />
                         <Route path="/regex-tester" element={<RegexTester />} />
                         <Route path="/code-diff" element={<CodeDiff />} />
                         <Route path="/color-picker" element={<ColorPicker />} />

src/components/Sidebar.tsx

@@ -22,8 +22,7 @@ const tools = [
     {
         category: 'Code & Development',
         items: [
-            { name: 'Code Formatter', path: '/code-formatter', icon: '✨', description: 'Beautify/minify code' },
-            { name: 'JSON Tools', path: '/json-tools', icon: '📋', description: 'Diff, Path evaluator' },
+            { name: 'Code & JSON Tools', path: '/code-formatter', icon: '✨', description: 'Format code & JSON tools' },
             { name: 'Regex Tester', path: '/regex-tester', icon: '🔎', description: 'Test & build patterns' },
             { name: 'Text Diff', path: '/code-diff', icon: '🔀', description: 'Compare text/files' },
         ],

src/config/seoConfig.ts

@@ -71,21 +71,29 @@ export const toolsMetadata: Record<string, ToolMeta> = {
         toolName: 'JWT Decoder',
         toolDescription: 'Decode and inspect JWT tokens with timestamp analysis using Developer Utilities Tool - privacy-focused, free, and instant.'
     },
+    codeAndJsonTools: {
+        title: 'Code & JSON Tools | Code Formatter, JSON Validator, JSONPath & Diff - Developer Utilities Tool',
+        description: 'Format code (HTML, CSS, JavaScript) and manipulate JSON (format, validate, JSONPath query, diff) in one unified workspace. Free, privacy-first developer tools.',
+        keywords: ['code formatter', 'json tools', 'beautify code', 'javascript formatter', 'json formatter', 'html formatter', 'css formatter', 'json validator', 'jsonpath', 'json diff', 'code beautifier', 'Developer Utilities Tool', 'online code formatter', 'privacy-first code tools'],
+        canonical: '/code-formatter',
+        toolName: 'Code & JSON Tools',
+        toolDescription: 'Format code and manipulate JSON in a unified workspace with Developer Utilities Tool - privacy-focused, free, and instant.'
+    },
     codeFormatter: {
-        title: 'Code Formatter | Beautify JavaScript, JSON, HTML, CSS Online - Developer Utilities Tool',
-        description: 'Format and beautify code online with Developer Utilities Tool. Supports JavaScript, JSON, HTML, CSS, and more. Free, privacy-first code formatter with syntax highlighting and indentation options.',
-        keywords: ['code formatter', 'beautify code', 'javascript formatter', 'json formatter', 'html formatter', 'css formatter', 'code beautifier', 'Developer Utilities Tool', 'online code formatter', 'privacy-first code tools'],
+        title: 'Code & JSON Tools | Code Formatter, JSON Validator, JSONPath & Diff - Developer Utilities Tool',
+        description: 'Format code (HTML, CSS, JavaScript) and manipulate JSON (format, validate, JSONPath query, diff) in one unified workspace. Free, privacy-first developer tools.',
+        keywords: ['code formatter', 'json tools', 'beautify code', 'javascript formatter', 'json formatter', 'html formatter', 'css formatter', 'json validator', 'jsonpath', 'json diff', 'code beautifier', 'Developer Utilities Tool', 'online code formatter', 'privacy-first code tools'],
         canonical: '/code-formatter',
-        toolName: 'Code Formatter',
-        toolDescription: 'Format and beautify code with syntax highlighting using Developer Utilities Tool - privacy-focused, free, and instant.'
+        toolName: 'Code & JSON Tools',
+        toolDescription: 'Format code and manipulate JSON in a unified workspace with Developer Utilities Tool - privacy-focused, free, and instant.'
     },
     jsonTools: {
-        title: 'JSON Tools | JSON Validator, Formatter & Editor Online - Developer Utilities Tool',
-        description: 'Validate, format, and edit JSON online with Developer Utilities Tool. Real-time JSON syntax validation with error highlighting. Free, privacy-first JSON tools for developers.',
-        keywords: ['json validator', 'json formatter', 'json editor', 'json parser', 'json tools', 'validate json', 'format json', 'Developer Utilities Tool', 'online json tools', 'privacy-first json validator'],
+        title: 'Code & JSON Tools | Code Formatter, JSON Validator, JSONPath & Diff - Developer Utilities Tool',
+        description: 'Format code (HTML, CSS, JavaScript) and manipulate JSON (format, validate, JSONPath query, diff) in one unified workspace. Free, privacy-first developer tools.',
+        keywords: ['code formatter', 'json tools', 'beautify code', 'javascript formatter', 'json formatter', 'html formatter', 'css formatter', 'json validator', 'jsonpath', 'json diff', 'code beautifier', 'Developer Utilities Tool', 'online code formatter', 'privacy-first code tools'],
         canonical: '/json-tools',
-        toolName: 'JSON Tools',
-        toolDescription: 'Validate, format, and manipulate JSON data with Developer Utilities Tool - privacy-focused, free, and instant.'
+        toolName: 'Code & JSON Tools',
+        toolDescription: 'Format code and manipulate JSON in a unified workspace with Developer Utilities Tool - privacy-focused, free, and instant.'
     },
     regexTester: {
         title: 'Regex Tester | Test Regular Expressions Online | RegEx Tool - Developer Utilities Tool',