fix: use catch-all route for clean URLs with scoped package names

- Rename [slug] to [...slug] for catch-all routing
- Update tool detail page to join slug segments (e.g., ['@tpmjs', 'text-transformer'] -> '@tpmjs/text-transformer')
- Remove encodeURIComponent from tool search links
- URLs now display as /tool/@tpmjs/text-transformer instead of /tool/%40tpmjs%2Ftext-transformer

This makes URLs cleaner and more readable while maintaining full compatibility with scoped npm package names.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/tool/[...slug]/page.tsx

@@ -71,7 +71,7 @@ interface Tool {
 export default function ToolDetailPage({
   params,
 }: {
-  params: Promise<{ slug: string }>;
+  params: Promise<{ slug: string[] }>;
 }): React.ReactElement {
   const [tool, setTool] = useState<Tool | null>(null);
   const [loading, setLoading] = useState(true);
@@ -79,7 +79,8 @@ export default function ToolDetailPage({
   const [slug, setSlug] = useState<string>('');
 
   useEffect(() => {
-    params.then((p) => setSlug(p.slug));
+    // Join slug array to reconstruct package name (e.g., ['@tpmjs', 'text-transformer'] -> '@tpmjs/text-transformer')
+    params.then((p) => setSlug(p.slug.join('/')));
   }, [params]);
 
   useEffect(() => {

apps/web/src/app/tool/tool-search/page.tsx

@@ -327,7 +327,7 @@ export default function ToolSearchPage(): React.ReactElement {
                   </CardContent>
 
                   <CardFooter>
-                    <Link href={`/tool/${encodeURIComponent(tool.npmPackageName)}`}>
+                    <Link href={`/tool/${tool.npmPackageName}`}>
                       <Button variant="outline" size="sm" className="w-full">
                         View Details
                       </Button>