Fix critical nesting error and stabilization of Tools Page

Author: abusufyan-netizen

app/tools/page.tsx

@@ -1,18 +1,18 @@
 'use client'
 
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 import Link from 'next/link'
-import { 
+import {
   FileJson, Key, FileText, Link as LinkIcon, AlignLeft, Palette,
   Hash, Type, Clock, Binary, Shield, Code, Ruler, Shuffle, FileCode, Globe,
-  Search, Filter, Laptop, Zap, Settings, Layout, Layers, Code2, Star
+  Search, Filter, Laptop, Zap, Settings, Layout, Layers, Code2
 } from 'lucide-react'
 
 const tools = [
   // Formatters
   { name: 'Professional JSON Formatter', description: 'Enterprise-grade JSON formatting, validation, and beautification', icon: FileJson, href: '/tools/json-formatter', color: 'from-blue-500 to-blue-700', category: 'Formatters' },
   { name: 'JS Code Minifier', description: 'High-performance JavaScript compression for production deployment', icon: Code2, href: '/tools/js-minifier', color: 'from-yellow-500 to-yellow-700', category: 'Formatters' },
-  
+
   // Generators
   { name: 'Secure Password Generator', description: 'US-standard cryptographically secure password generation tool', icon: Key, href: '/tools/password-generator', color: 'from-indigo-500 to-indigo-700', category: 'Generators' },
   { name: 'UUID/GUID Generator', description: 'Instant RFC-compliant unique identifier generation', icon: Shuffle, href: '/tools/uuid-generator', color: 'from-lime-600 to-lime-800', category: 'Generators' },
@@ -24,7 +24,7 @@ const tools = [
   { name: 'JSON-LD Schema Generator', description: 'Build structured data schema for Google Rich Results', icon: Code, href: '/tools/schema-generator', color: 'from-emerald-600 to-emerald-800', category: 'SEO', releaseDate: '2026-05-07' },
   { name: 'WCAG Color Contrast Checker', description: 'Verify ADA and WCAG 2.1 accessibility compliance', icon: Palette, href: '/tools/color-contrast', color: 'from-pink-500 to-pink-700', category: 'Design', releaseDate: '2026-05-08' },
   { name: 'Markdown to HTML Converter', description: 'Convert documentation to clean, semantic HTML code', icon: FileCode, href: '/tools/markdown-converter', color: 'from-violet-500 to-violet-700', category: 'Formatters', releaseDate: '2026-05-09' },
-  
+
   // Converters
   { name: 'Base64 Data Converter', description: 'Secure encoding and decoding of Base64 data strings', icon: FileText, href: '/tools/base64-encoder', color: 'from-purple-500 to-purple-700', category: 'Converters' },
   { name: 'URL Percent Encoder', description: 'Safe URL encoding for special characters and parameters', icon: LinkIcon, href: '/tools/url-encoder', color: 'from-emerald-500 to-emerald-700', category: 'Converters' },
@@ -33,7 +33,7 @@ const tools = [
   { name: 'CSS Unit Converter Pro', description: 'Calculate px, rem, em, and vh units for responsive design', icon: Ruler, href: '/tools/css-unit-converter', color: 'from-fuchsia-500 to-fuchsia-700', category: 'Converters' },
   { name: 'Text Case Converter', description: 'Transform text into Uppercase, Lowercase, and Title Case', icon: Type, href: '/tools/case-converter', color: 'from-cyan-500 to-cyan-700', category: 'Converters' },
   { name: 'HTML Entity Encoder', description: 'Convert special characters into secure HTML entities', icon: Code, href: '/tools/html-encoder', color: 'from-violet-500 to-violet-700', category: 'Converters' },
-  
+
   // Utilities
   { name: 'Design Color Picker', description: 'Visual color selection with HEX and RGB export', icon: Palette, href: '/tools/color-picker', color: 'from-pink-500 to-pink-700', category: 'Utilities' },
   { name: 'Technical Word Counter', description: 'Accurate word, character, and sentence analysis', icon: Hash, href: '/tools/word-counter', color: 'from-teal-500 to-teal-700', category: 'Utilities' },
@@ -48,7 +48,7 @@ export default function ToolsPage() {
   const [favorites, setFavorites] = useState<string[]>([])
 
   const today = useMemo(() => new Date().toISOString().split('T')[0], [])
-  
+
   useEffect(() => {
     const saved = localStorage.getItem('wtk_favorites')
     if (saved) setFavorites(JSON.parse(saved))
@@ -57,10 +57,10 @@ export default function ToolsPage() {
   const toggleFavorite = (e: React.MouseEvent, href: string) => {
     e.preventDefault()
     e.stopPropagation()
-    const newFavorites = favorites.includes(href) 
+    const newFavorites = favorites.includes(href)
       ? favorites.filter(id => id !== href)
       : [...favorites, href]
-    
+
     setFavorites(newFavorites)
     localStorage.setItem('wtk_favorites', JSON.stringify(newFavorites))
   }
@@ -78,8 +78,8 @@ export default function ToolsPage() {
 
   const filteredTools = useMemo(() => {
     return visibleTools.filter(tool => {
-      const matchesSearch = tool.name.toLowerCase().includes(search.toLowerCase()) || 
-                           tool.description.toLowerCase().includes(search.toLowerCase())
+      const matchesSearch = tool.name.toLowerCase().includes(search.toLowerCase()) ||
+        tool.description.toLowerCase().includes(search.toLowerCase())
       const matchesCategory = activeCategory === 'All' || tool.category === activeCategory
       return matchesSearch && matchesCategory
     })
@@ -117,11 +117,10 @@ export default function ToolsPage() {
                 <button
                   key={cat}
                   onClick={() => setActiveCategory(cat)}
-                  className={`px-6 py-4 rounded-2xl font-bold whitespace-nowrap transition-all duration-300 ${
-                    activeCategory === cat
-                      ? 'bg-blue-600 text-white shadow-lg shadow-blue-200 dark:shadow-none'
-                      : 'bg-white dark:bg-slate-900 text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 border border-gray-100 dark:border-slate-800'
-                  }`}
+                  className={`px-6 py-4 rounded-2xl font-bold whitespace-nowrap transition-all duration-300 ${activeCategory === cat
+                    ? 'bg-blue-600 text-white shadow-lg shadow-blue-200 dark:shadow-none'
+                    : 'bg-white dark:bg-slate-900 text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-800 border border-gray-100 dark:border-slate-800'
+                    }`}
                 >
                   {cat}
                 </button>
@@ -132,7 +131,7 @@ export default function ToolsPage() {
 
         {/* AdSense Slot */}
         <div className="max-w-3xl mx-auto mb-12 min-h-[90px] flex items-center justify-center">
-           {/* AdSense Leaderboard */}
+          {/* AdSense Leaderboard */}
         </div>
 
         {/* Favorites Section */}
@@ -144,69 +143,73 @@ export default function ToolsPage() {
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
               {favoriteTools.map((tool) => (
-                <Link 
-                  key={`fav-${tool.href}`}
-                  href={tool.href}
-                  className="group bg-white dark:bg-slate-900 rounded-3xl border border-gray-100 dark:border-slate-800 p-8 hover:shadow-2xl dark:hover:shadow-blue-900/10 hover:-translate-y-1.5 transition-all duration-300 flex flex-col h-full relative"
-                >
+                <div key={`fav-${tool.href}`} className="relative group">
                   <button 
                     onClick={(e) => toggleFavorite(e, tool.href)}
-                    className="absolute top-6 right-6 p-2 rounded-full bg-yellow-50 dark:bg-yellow-900/20 text-yellow-500 hover:scale-110 transition-transform z-10"
+                    className="absolute top-6 right-6 p-2 rounded-full bg-yellow-50 dark:bg-yellow-900/20 text-yellow-500 hover:scale-110 transition-transform z-20"
+                    title="Remove from favorites"
                   >
                     <Star className="w-5 h-5 fill-current" />
                   </button>
-                  <div className={`w-14 h-14 bg-gradient-to-br ${tool.color} rounded-2xl flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-300`}>
-                    <tool.icon className="w-7 h-7 text-white" />
-                  </div>
-                  <div className="mb-4">
-                    <span className="text-[10px] font-bold uppercase tracking-widest text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 px-2 py-1 rounded mb-2 inline-block">
-                      {tool.category}
-                    </span>
-                    <h3 className="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{tool.name}</h3>
-                  </div>
-                  <p className="text-sm text-gray-500 dark:text-slate-400 mb-6 leading-relaxed flex-grow">{tool.description}</p>
-                </Link>
+                  <Link
+                    href={tool.href}
+                    className="flex flex-col h-full bg-white dark:bg-slate-900 rounded-3xl border border-gray-100 dark:border-slate-800 p-8 hover:shadow-2xl dark:hover:shadow-blue-900/10 hover:-translate-y-1.5 transition-all duration-300"
+                  >
+                    <div className={`w-14 h-14 bg-gradient-to-br ${tool.color} rounded-2xl flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-300`}>
+                      <tool.icon className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="mb-4">
+                      <span className="text-[10px] font-bold uppercase tracking-widest text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 px-2 py-1 rounded mb-2 inline-block">
+                        {tool.category}
+                      </span>
+                      <h3 className="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{tool.name}</h3>
+                    </div>
+                    <p className="text-sm text-gray-500 dark:text-slate-400 mb-6 leading-relaxed flex-grow">{tool.description}</p>
+                  </Link>
+                </div>
               ))}
             </div>
             <div className="mt-12 border-b border-gray-100 dark:border-slate-800"></div>
           </div>
         )}
-        
+
         {/* Tools Grid */}
         {filteredTools.length > 0 ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
             {filteredTools.map((tool) => (
-              <Link 
-                key={tool.href}
-                href={tool.href}
-                className="group bg-white dark:bg-slate-900 rounded-3xl border border-gray-100 dark:border-slate-800 p-8 hover:shadow-2xl dark:hover:shadow-blue-900/10 hover:-translate-y-1.5 transition-all duration-300 flex flex-col h-full relative"
-              >
+              <div key={tool.href} className="relative group">
                 <button 
                   onClick={(e) => toggleFavorite(e, tool.href)}
-                  className={`absolute top-6 right-6 p-2 rounded-full transition-all z-10 ${
+                  className={`absolute top-6 right-6 p-2 rounded-full transition-all z-20 ${
                     favorites.includes(tool.href) 
                       ? 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-500' 
                       : 'bg-gray-50 dark:bg-slate-800 text-gray-300 dark:text-slate-600 hover:text-yellow-500'
                   }`}
+                  title={favorites.includes(tool.href) ? "Remove from favorites" : "Add to favorites"}
                 >
                   <Star className={`w-5 h-5 ${favorites.includes(tool.href) ? 'fill-current' : ''}`} />
                 </button>
-                <div className={`w-14 h-14 bg-gradient-to-br ${tool.color} rounded-2xl flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-300`}>
-                  <tool.icon className="w-7 h-7 text-white" />
-                </div>
-                <div className="mb-4">
-                  <span className="text-[10px] font-bold uppercase tracking-widest text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 px-2 py-1 rounded mb-2 inline-block">
-                    {tool.category}
-                  </span>
-                  <h3 className="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{tool.name}</h3>
-                </div>
-                <p className="text-sm text-gray-500 dark:text-slate-400 mb-6 leading-relaxed flex-grow">{tool.description}</p>
-                <div className="flex items-center justify-between pt-4 border-t border-gray-50 dark:border-slate-800">
-                  <span className="text-sm font-bold text-blue-600 dark:text-blue-400 flex items-center gap-1 group-hover:gap-2 transition-all">
-                    Launch Tool <Zap className="w-4 h-4 fill-current" />
-                  </span>
-                </div>
-              </Link>
+                <Link 
+                  href={tool.href}
+                  className="flex flex-col h-full bg-white dark:bg-slate-900 rounded-3xl border border-gray-100 dark:border-slate-800 p-8 hover:shadow-2xl dark:hover:shadow-blue-900/10 hover:-translate-y-1.5 transition-all duration-300"
+                >
+                  <div className={`w-14 h-14 bg-gradient-to-br ${tool.color} rounded-2xl flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-300`}>
+                    <tool.icon className="w-7 h-7 text-white" />
+                  </div>
+                  <div className="mb-4">
+                    <span className="text-[10px] font-bold uppercase tracking-widest text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 px-2 py-1 rounded mb-2 inline-block">
+                      {tool.category}
+                    </span>
+                    <h3 className="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{tool.name}</h3>
+                  </div>
+                  <p className="text-sm text-gray-500 dark:text-slate-400 mb-6 leading-relaxed flex-grow">{tool.description}</p>
+                  <div className="flex items-center justify-between pt-4 border-t border-gray-50 dark:border-slate-800">
+                    <span className="text-sm font-bold text-blue-600 dark:text-blue-400 flex items-center gap-1 group-hover:gap-2 transition-all">
+                      Launch Tool <Zap className="w-4 h-4 fill-current" />
+                    </span>
+                  </div>
+                </Link>
+              </div>
             ))}
           </div>
         ) : (