Replace project cards with sortable data table on Home page

frontend/src/pages/PackagePage.tsx

@@ -5,7 +5,6 @@ import { listTags, getDownloadUrl, getPackage, getMyProjectAccess, UnauthorizedE
 import { Breadcrumb } from '../components/Breadcrumb';
 import { Badge } from '../components/Badge';
 import { SearchInput } from '../components/SearchInput';
-import { SortDropdown, SortOption } from '../components/SortDropdown';
 import { FilterChip, FilterChipGroup } from '../components/FilterChip';
 import { DataTable } from '../components/DataTable';
 import { Pagination } from '../components/Pagination';
@@ -14,11 +13,6 @@ import { useAuth } from '../contexts/AuthContext';
 import './Home.css';
 import './PackagePage.css';
 
-const SORT_OPTIONS: SortOption[] = [
-  { value: 'name', label: 'Name' },
-  { value: 'created_at', label: 'Created' },
-];
-
 function formatBytes(bytes: number): string {
   if (bytes === 0) return '0 B';
   const k = 1024;
@@ -164,8 +158,9 @@ function PackagePage() {
     updateParams({ search: value, page: '1' });
   };
 
-  const handleSortChange = (newSort: string, newOrder: 'asc' | 'desc') => {
-    updateParams({ sort: newSort, order: newOrder, page: '1' });
+  const handleSortChange = (columnKey: string) => {
+    const newOrder = columnKey === sort ? (order === 'asc' ? 'desc' : 'asc') : 'asc';
+    updateParams({ sort: columnKey, order: newOrder, page: '1' });
   };
 
   const handlePageChange = (newPage: number) => {
@@ -198,19 +193,19 @@ function PackagePage() {
       ),
     },
     {
-      key: 'size',
+      key: 'artifact_size',
       header: 'Size',
       render: (t: TagDetail) => <span>{formatBytes(t.artifact_size)}</span>,
     },
     {
-      key: 'content_type',
+      key: 'artifact_content_type',
       header: 'Type',
       render: (t: TagDetail) => (
         <span className="content-type">{t.artifact_content_type || '-'}</span>
       ),
     },
     {
-      key: 'original_name',
+      key: 'artifact_original_name',
       header: 'Filename',
       className: 'cell-truncate',
       render: (t: TagDetail) => (
@@ -376,7 +371,6 @@ function PackagePage() {
           placeholder="Filter tags..."
           className="list-controls__search"
         />
-        <SortDropdown options={SORT_OPTIONS} value={sort} order={order} onChange={handleSortChange} />
       </div>
 
       {hasActiveFilters && (
@@ -385,25 +379,21 @@ function PackagePage() {
         </FilterChipGroup>
       )}
 
-      <DataTable
-        data={tags}
-        columns={columns}
-        keyExtractor={(t) => t.id}
-        emptyMessage={
-          hasActiveFilters
-            ? 'No tags match your filters. Try adjusting your search.'
-            : 'No tags yet. Upload an artifact with a tag to create one!'
-        }
-        onSort={(key) => {
-          if (key === sort) {
-            handleSortChange(key, order === 'asc' ? 'desc' : 'asc');
-          } else {
-            handleSortChange(key, 'asc');
+      <div className="data-table--responsive">
+        <DataTable
+          data={tags}
+          columns={columns}
+          keyExtractor={(t) => t.id}
+          emptyMessage={
+            hasActiveFilters
+              ? 'No tags match your filters. Try adjusting your search.'
+              : 'No tags yet. Upload an artifact with a tag to create one!'
           }
-        }}
-        sortKey={sort}
-        sortOrder={order}
-      />
+          onSort={handleSortChange}
+          sortKey={sort}
+          sortOrder={order}
+        />
+      </div>
 
       {pagination && pagination.total_pages > 1 && (
         <Pagination