refactor: create shared AppHeader component for consistent navigation across all pages

**Problem:**
- Each page had different header implementations with varying navigation links
- Inconsistent user experience across homepage, tools, playground, and publish pages
- Duplicate header code throughout the application

**Solution:**
- Created `AppHeader` component (apps/web/src/components/AppHeader.tsx) with consistent navigation:
  - TPMJS logo linking to homepage
  - Tools, Playground, and Publish Tool links
  - GitHub icon link
  - Sticky header with medium size
- Updated all pages to use the shared component:
  - apps/web/src/app/page.tsx (homepage)
  - apps/web/src/app/tool/tool-search/page.tsx (tools search)
  - apps/web/src/app/playground/page.tsx (component playground)
  - apps/web/src/app/publish/page.tsx (publish guide)
  - apps/web/src/app/tool/[...slug]/page.tsx (tool detail pages)

**Benefits:**
- Consistent header across all pages
- Single source of truth for navigation
- Easier to maintain and update navigation links
- Improved user experience with predictable navigation

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

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

apps/web/src/components/AppHeader.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { Button } from '@tpmjs/ui/Button/Button';
+import { Header } from '@tpmjs/ui/Header/Header';
+import { Icon } from '@tpmjs/ui/Icon/Icon';
+import Link from 'next/link';
+
+/**
+ * Shared application header used across all pages
+ */
+export function AppHeader(): React.ReactElement {
+  return (
+    <Header
+      title={
+        <Link
+          href="/"
+          className="text-foreground hover:text-foreground text-xl md:text-2xl font-bold uppercase tracking-tight"
+        >
+          TPMJS
+        </Link>
+      }
+      size="md"
+      sticky={true}
+      actions={
+        <div className="flex items-center gap-4">
+          <Link href="/tool/tool-search">
+            <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+              Tools
+            </Button>
+          </Link>
+          <Link href="/playground">
+            <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+              Playground
+            </Button>
+          </Link>
+          <a
+            href="https://github.com/tpmjs/tpmjs"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-foreground hover:text-foreground transition-colors"
+          >
+            <Icon icon="github" size="md" />
+          </a>
+          <Link href="/publish">
+            <Button variant="default" size="sm">
+              Publish Tool
+            </Button>
+          </Link>
+        </div>
+      }
+    />
+  );
+}