proxmox: use canonical FilterSegmentedControl for backups view toggle

Replace the bespoke FilterButtonGroup variant="segmented" Date/Coverage
toggle with the canonical FilterSegmentedControl template used by the
other view toggles (GroupedTableModeSegmentedControl,
MetricDisplayModeSegmentedControl), so the surface matches the shared
compact segmented-control look instead of a one-off style.

frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx

@@ -4,7 +4,7 @@ import CalendarIcon from 'lucide-solid/icons/calendar';
 import ShieldCheckIcon from 'lucide-solid/icons/shield-check';
 import { useSearchParams } from '@solidjs/router';
 import { FilterBar, type FilterDef, type FilterSelectOption } from '@/components/shared/FilterBar';
-import { FilterButtonGroup, type FilterOption } from '@/components/shared/FilterButtonGroup';
+import { FilterSegmentedControl } from '@/components/shared/FilterToolbar';
 import { useBreakpoint } from '@/hooks/useBreakpoint';
 import { apiFetch } from '@/utils/apiClient';
 import {
@@ -66,11 +66,6 @@ import { ProxmoxRecoverableTable } from './ProxmoxRecoverableTable';
 
 type BackupView = 'date' | 'coverage';
 
-const BACKUP_VIEW_OPTIONS: FilterOption<BackupView>[] = [
-  { value: 'date', label: 'By date', compactLabel: 'Date', icon: CalendarIcon },
-  { value: 'coverage', label: 'Coverage', icon: ShieldCheckIcon },
-];
-
 async function fetchPVEBackups(): Promise<PVEBackupsPayload> {
   const response = await apiFetch('/api/backups/pve');
   if (!response.ok) {
@@ -527,13 +522,32 @@ export const ProxmoxBackupsTable: Component<{
             />
           </Show>
 
-          <FilterButtonGroup
-            options={BACKUP_VIEW_OPTIONS}
+          <FilterSegmentedControl
+            aria-label="Backups view"
             value={view()}
-            onChange={setView}
-            ariaLabel="Backups view"
-            variant="segmented"
-            class="inline-flex w-fit"
+            onChange={(value) => setView(value as BackupView)}
+            options={[
+              {
+                value: 'date',
+                title: 'Backups by date',
+                label: (
+                  <>
+                    <CalendarIcon class="h-3 w-3" />
+                    By date
+                  </>
+                ),
+              },
+              {
+                value: 'coverage',
+                title: 'Backups by workload coverage',
+                label: (
+                  <>
+                    <ShieldCheckIcon class="h-3 w-3" />
+                    Coverage
+                  </>
+                ),
+              },
+            ]}
           />
 
           <Show when={view() === 'date' && recoveryModel().recoverableArtifacts.length > 0}>

frontend-modern/src/features/proxmox/__tests__/ProxmoxBackupsTable.test.tsx

@@ -221,10 +221,10 @@ describe('ProxmoxBackupsTable', () => {
     await screen.findAllByText('pbs-docker');
 
     expect(proxmoxBackupsTableSource).toContain(
-      "import { FilterButtonGroup, type FilterOption } from '@/components/shared/FilterButtonGroup';",
+      "import { FilterSegmentedControl } from '@/components/shared/FilterToolbar';",
     );
-    expect(proxmoxBackupsTableSource).toContain('<FilterButtonGroup');
-    expect(proxmoxBackupsTableSource).toContain('variant="segmented"');
+    expect(proxmoxBackupsTableSource).toContain('<FilterSegmentedControl');
+    expect(proxmoxBackupsTableSource).not.toContain('variant="segmented"');
     expect(proxmoxBackupsTableSource).not.toContain('const viewButtonClass');
     expect(proxmoxBackupsTableSource).not.toContain(
       'inline-flex items-center gap-1 rounded-md border border-border bg-surface p-1',