tests: add keywords test

app/src/app/packages/category/[categoryName]/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import React from "react";
+import { useParams } from "next/navigation";
+import CategoryPackages from "../../../../pages/CategoryPackages";
+
+export default function CategoryPage() {
+  const params = useParams();
+  const categoryName = decodeURIComponent(params.categoryName as string);
+
+  return <CategoryPackages categoryName={categoryName} />;
+}

app/src/features/detail/components/PackageSidebar.tsx

@@ -11,6 +11,7 @@ import {
   ListItem,
   Link,
   Typography,
+  Chip,
 } from "@mui/material";
 import { FullPackage } from "../hooks/usePackageDetail";
 import "./PackageSidebar.css";
@@ -20,6 +21,8 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import DescriptionIcon from "@mui/icons-material/Description";
 import HomeIcon from "@mui/icons-material/Home";
 import LinkIcon from "@mui/icons-material/Link";
+import LocalOfferIcon from "@mui/icons-material/LocalOffer";
+import LabelIcon from "@mui/icons-material/Label";
 
 interface PackageSidebarProps {
   data: FullPackage | null;
@@ -79,6 +82,77 @@ const PackageSidebar = ({ data, loading, error }: PackageSidebarProps) => {
           </Box>
         </Box>
 
+        {/* Categories Section */}
+        {data.categories && data.categories.length > 0 && (
+          <Box sx={{ mb: 2 }}>
+            <Box display="flex" alignItems="center" mb={1}>
+              <LabelIcon fontSize="small" className="sidebar-icon" style={{ marginRight: 8, color: '#b0b0b0' }} />
+              <Typography variant="h6" className="sidebar-section-heading">
+                Categories
+              </Typography>
+            </Box>
+            <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+              {data.categories.map((category) => (
+                <Chip
+                  key={category}
+                  label={category}
+                  size="small"
+                  variant="outlined"
+                  color="primary"
+                  sx={{ 
+                    fontSize: "0.75rem",
+                    cursor: "pointer",
+                    "&:hover": {
+                      backgroundColor: "primary.main",
+                      color: "white",
+                    }
+                  }}
+                  onClick={() => {
+                    window.location.href = `/packages/category/${encodeURIComponent(category)}`;
+                  }}
+                />
+              ))}
+            </Box>
+          </Box>
+        )}
+
+        {/* Keywords Section */}
+        {data.keywords && data.keywords.length > 0 && (
+          <Box sx={{ mb: 2 }}>
+            <Box display="flex" alignItems="center" mb={1}>
+              <LocalOfferIcon fontSize="small" className="sidebar-icon" style={{ marginRight: 8, color: '#b0b0b0' }} />
+              <Typography variant="h6" className="sidebar-section-heading">
+                Keywords
+              </Typography>
+            </Box>
+            <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+              {data.keywords.map((keyword) => (
+                <Chip
+                  key={keyword}
+                  label={keyword}
+                  size="small"
+                  variant="outlined"
+                  color="secondary"
+                  sx={{ 
+                    fontSize: "0.75rem",
+                    cursor: "pointer",
+                    "&:hover": {
+                      backgroundColor: "secondary.main",
+                      color: "white",
+                    }
+                  }}
+                  onClick={() => {
+                    const newParams = new URLSearchParams();
+                    newParams.set("query", keyword);
+                    newParams.set("page", "1");
+                    window.location.href = `/?${newParams.toString()}`;
+                  }}
+                />
+              ))}
+            </Box>
+          </Box>
+        )}
+
         {data.repository && (
           <div className="sidebar-link-item">
             <Typography variant="h6" className="sidebar-section-heading">

app/src/features/detail/hooks/usePackageDetail.ts

@@ -20,6 +20,8 @@ export interface FullPackage {
   urls: string[];
   readme: string | null;
   license: string | null;
+  categories: string[];
+  keywords: string[];
 }
 
 const usePackageDetail = (packageName: string, version?: string) => {