Develop Frontend Components for Project, Package, and Instance Views

README.md

@@ -27,7 +27,13 @@ Orchard is a centralized binary artifact storage system that provides content-ad
 - **S3-Compatible Backend** - Uses MinIO (or any S3-compatible storage) for artifact storage
 - **PostgreSQL Metadata** - Relational database for metadata, access control, and audit trails
 - **REST API** - Full HTTP API for all operations
-- **Web UI** - React-based interface for managing artifacts
+- **Web UI** - React-based interface for managing artifacts with:
+  - Hierarchical navigation (Projects → Packages → Tags/Artifacts)
+  - Search, sort, and filter capabilities on all list views
+  - URL-based state persistence for filters and pagination
+  - Keyboard navigation (Backspace to go up hierarchy)
+  - Copy-to-clipboard for artifact IDs
+  - Responsive design for mobile and desktop
 - **Docker Compose Setup** - Easy local development environment
 - **Helm Chart** - Kubernetes deployment with PostgreSQL, MinIO, and Redis subcharts
 - **Multipart Upload** - Automatic multipart upload for files larger than 100MB
@@ -314,10 +320,21 @@ orchard/
 │   └── requirements.txt
 ├── frontend/
 │   ├── src/
-│   │   ├── components/         # React components
+│   │   ├── components/         # Reusable UI components
+│   │   │   ├── Badge.tsx       # Status/type badges
+│   │   │   ├── Breadcrumb.tsx  # Navigation breadcrumbs
+│   │   │   ├── Card.tsx        # Card containers
+│   │   │   ├── DataTable.tsx   # Sortable data tables
+│   │   │   ├── FilterChip.tsx  # Active filter chips
+│   │   │   ├── Pagination.tsx  # Page navigation
+│   │   │   ├── SearchInput.tsx # Debounced search
+│   │   │   └── SortDropdown.tsx# Sort field selector
 │   │   ├── pages/              # Page components
-│   │   ├── api.ts              # API client
-│   │   ├── types.ts            # TypeScript types
+│   │   │   ├── Home.tsx        # Project list
+│   │   │   ├── ProjectPage.tsx # Package list within project
+│   │   │   └── PackagePage.tsx # Tag/artifact list within package
+│   │   ├── api.ts              # API client with pagination support
+│   │   ├── types.ts            # TypeScript interfaces
 │   │   ├── App.tsx
 │   │   └── main.tsx
 │   ├── index.html