From 818f6e9ed6579b81dad422ff0cff2f269ed4f872 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Sat, 29 Nov 2025 22:49:44 +1000
Subject: [PATCH] fix: use catch-all route for clean URLs with scoped package
 names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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] => [...slug]}/page.tsx | 5 +++--
 apps/web/src/app/tool/tool-search/page.tsx           | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)
 rename apps/web/src/app/tool/{[slug] => [...slug]}/page.tsx (98%)

diff --git a/apps/web/src/app/tool/[slug]/page.tsx b/apps/web/src/app/tool/[...slug]/page.tsx
similarity index 98%
rename from apps/web/src/app/tool/[slug]/page.tsx
rename to apps/web/src/app/tool/[...slug]/page.tsx
index 9a8a9f2..4bf5528 100644
--- a/apps/web/src/app/tool/[slug]/page.tsx
+++ b/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(() => {
diff --git a/apps/web/src/app/tool/tool-search/page.tsx b/apps/web/src/app/tool/tool-search/page.tsx
index c9f9234..f54c41b 100644
--- a/apps/web/src/app/tool/tool-search/page.tsx
+++ b/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>