Replace project cards with sortable data table on Home page

- Replace card grid with DataTable for better handling of large project lists
- Add sortable columns: Name, Created, Updated (click header to sort)
- Show lock icon for private projects in Name column
- Display Access column with badges for authenticated users
- Add onRowClick prop to DataTable for row navigation
- Make table responsive with horizontal scroll on small screens
- Increase Home page container width to 1200px
- Keep existing visibility filter and pagination working

frontend/src/components/DataTable.tsx

@@ -18,6 +18,7 @@ interface DataTableProps<T> {
   onSort?: (key: string) => void;
   sortKey?: string;
   sortOrder?: 'asc' | 'desc';
+  onRowClick?: (item: T) => void;
 }
 
 export function DataTable<T>({
@@ -29,6 +30,7 @@ export function DataTable<T>({
   onSort,
   sortKey,
   sortOrder,
+  onRowClick,
 }: DataTableProps<T>) {
   if (data.length === 0) {
     return (
@@ -71,7 +73,11 @@ export function DataTable<T>({
         </thead>
         <tbody>
           {data.map((item) => (
-            <tr key={keyExtractor(item)}>
+            <tr
+              key={keyExtractor(item)}
+              onClick={() => onRowClick?.(item)}
+              className={onRowClick ? 'data-table__row--clickable' : ''}
+            >
               {columns.map((column) => (
                 <td key={column.key} className={column.className}>
                   {column.render(item)}