feat: migrate CI to pnpm and add Breadcrumb component

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v2
         with:
           version: 10
 
@@ -39,9 +39,39 @@ jobs:
       - name: Run ESLint
         run: pnpm run lint
 
+  test:
+    name: Run Tests
+    needs: lint
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 10
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run tests
+        run: pnpm run test
+
   build:
     name: Build Application
-    needs: lint
+    needs: test
     runs-on: ubuntu-latest
     defaults:
       run:
@@ -52,7 +82,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v2
         with:
           version: 10
 

frontend/src/components/common/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,82 @@
+import type { ReactElement } from 'react';
+import { Link } from 'react-router-dom';
+import type { BreadcrumbItem, BreadcrumbProps } from './types';
+
+const DEFAULT_MOBILE_COLLAPSE_AT = 4;
+
+function Breadcrumb({
+  items,
+  current,
+  separator = '/',
+  className = '',
+  mobileCollapseAt = DEFAULT_MOBILE_COLLAPSE_AT,
+}: BreadcrumbProps): ReactElement {
+  const hasCurrentItem = items.some((item) => item.label === current);
+  const breadcrumbItems: BreadcrumbItem[] = hasCurrentItem
+    ? items
+    : [...items, { label: current }];
+
+  const mobileItems =
+    breadcrumbItems.length > mobileCollapseAt
+      ? [breadcrumbItems[0], { label: '...' }, breadcrumbItems[breadcrumbItems.length - 1]]
+      : breadcrumbItems;
+
+  const renderItem = (item: BreadcrumbItem, isCurrentPage: boolean) => {
+    if (isCurrentPage) {
+      return (
+        <span aria-current="page" className="text-text-primary font-semibold">
+          {item.label}
+        </span>
+      );
+    }
+
+    if (!item.href) {
+      return <span className="text-text-secondary">{item.label}</span>;
+    }
+
+    return (
+      <Link to={item.href} className="text-text-secondary hover:text-[#62ffff] transition-colors">
+        {item.label}
+      </Link>
+    );
+  };
+
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="hidden sm:flex items-center flex-wrap gap-y-1 text-sm font-medium">
+        {breadcrumbItems.map((item, index) => {
+          const isCurrentPage = item.label === current;
+
+          return (
+            <li key={`${item.label}-${index}`} className="flex items-center min-w-0">
+              {index > 0 && <span className="mx-2 text-text-secondary/70">{separator}</span>}
+              <span className="truncate max-w-[180px]">{renderItem(item, isCurrentPage)}</span>
+            </li>
+          );
+        })}
+      </ol>
+
+      <ol className="flex sm:hidden items-center text-sm font-medium min-w-0">
+        {mobileItems.map((item, index) => {
+          const isCurrentPage = item.label === current;
+          const isCollapsedToken = item.label === '...';
+
+          return (
+            <li key={`${item.label}-${index}`} className="flex items-center min-w-0">
+              {index > 0 && <span className="mx-2 text-text-secondary/70">{separator}</span>}
+              {isCollapsedToken ? (
+                <span className="text-text-secondary" aria-hidden="true">
+                  ...
+                </span>
+              ) : (
+                <span className="truncate max-w-[120px]">{renderItem(item, isCurrentPage)}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+export default Breadcrumb;

frontend/src/components/common/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './types';

frontend/src/components/common/Breadcrumb/types.ts

@@ -0,0 +1,12 @@
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  current: string;
+  separator?: '/' | '>';
+  className?: string;
+  mobileCollapseAt?: number;
+}

frontend/src/components/index.ts

@@ -6,6 +6,8 @@ export { default as DataTable } from './common/DataTable';
 export type { DataTableProps, ColumnDef, PaginationConfig, DataTableEmptyState, SortDirection } from './common/DataTable';
 export { default as Pagination } from './common/Pagination';
 export type { PaginationProps } from './common/Pagination';
+export { default as Breadcrumb } from './common/Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './common/Breadcrumb';
 
 // Reusable UI primitives
 export { default as Button } from './Button';