diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx index 898642bd28..a133b79407 100644 --- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx +++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx @@ -11,9 +11,11 @@ import { Card } from '@/components/shared/Card'; import { EmptyState } from '@/components/shared/EmptyState'; import { SectionHeader } from '@/components/shared/SectionHeader'; import { showTooltip, hideTooltip } from '@/components/shared/Tooltip'; +import { ColumnPicker } from '@/components/shared/ColumnPicker'; import type { BackupType, GuestType, UnifiedBackup } from '@/types/backups'; import { usePersistentSignal } from '@/hooks/usePersistentSignal'; import { useDebouncedValue } from '@/hooks/useDebouncedValue'; +import { useColumnVisibility, type ColumnDef } from '@/hooks/useColumnVisibility'; import { logger } from '@/utils/logger'; type BackupSortKey = keyof Pick< @@ -162,6 +164,31 @@ const UnifiedBackups: Component = () => { false, // Default to absolute time ); + // Column visibility definitions for the backup table + const BACKUP_COLUMNS: ColumnDef[] = [ + { id: 'vmid', label: 'VMID/ID', priority: 'essential' }, + { id: 'type', label: 'Type', priority: 'essential' }, + { id: 'name', label: 'Name', priority: 'essential' }, + { id: 'node', label: 'Node', priority: 'essential' }, + { id: 'owner', label: 'Owner', priority: 'secondary', toggleable: true }, + { id: 'backupTime', label: 'Time', priority: 'essential' }, + { id: 'size', label: 'Size', priority: 'secondary', toggleable: true }, + { id: 'backupType', label: 'Backup Type', priority: 'essential' }, + { id: 'storage', label: 'Location', priority: 'secondary', toggleable: true }, + { id: 'verified', label: 'Verified', priority: 'secondary', toggleable: true }, + { id: 'comment', label: 'Comment', priority: 'supplementary', toggleable: true }, + { id: 'details', label: 'Details', priority: 'essential' }, + ]; + + // Column visibility with persistence - hide less useful columns by default + const columnVisibility = useColumnVisibility( + STORAGE_KEYS.BACKUPS_HIDDEN_COLUMNS, + BACKUP_COLUMNS, + ['comment'] // Comment hidden by default (often empty) + ); + const visibleColumns = columnVisibility.visibleColumns; + const isColumnVisible = (id: string) => visibleColumns().some(col => col.id === id); + // Helper functions const getDaySuffix = (day: number) => { if (day >= 11 && day <= 13) return 'th'; @@ -456,6 +483,7 @@ const UnifiedBackups: Component = () => { protected: backup.protected || false, encrypted: isEncrypted, owner: backup.owner, + comment: backup.comment, }); }); @@ -2003,6 +2031,16 @@ const UnifiedBackups: Component = () => { setUseRelativeTime={setUseRelativeTime} /> + {/* Column Visibility Toggle */} +