From b0cb5b70d042dd36ec79462397a85fe9f184d235 Mon Sep 17 00:00:00 2001
From: SaelixCode <dev@saelix.com>
Date: Fri, 3 Jul 2026 13:17:54 -0400
Subject: [PATCH] fix: replace Timeline/All tasks buttons with SegmentedControl

The two loose Button elements had indistinguishable selected/unselected
states (secondary vs ghost). Replaced with the SegmentedControl component
already used elsewhere on the same page, which has a clear active
highlight indicator.
---
 .../components/ScheduledOperationsView.tsx    | 28 ++++++-------------
 .../ScheduledOperationsView.test.tsx          | 18 ++++++------
 2 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/ScheduledOperationsView.tsx b/frontend/src/components/ScheduledOperationsView.tsx
index aa6ac329..0eb5dc2b 100644
--- a/frontend/src/components/ScheduledOperationsView.tsx
+++ b/frontend/src/components/ScheduledOperationsView.tsx
@@ -484,26 +484,14 @@ export default function ScheduledOperationsView({ filterNodeId, onClearFilter, p
               <CardTitle>Scheduled Operations</CardTitle>
             </div>
             <div className="flex items-center gap-2">
-              <div className="inline-flex items-center rounded-md border border-card-border bg-card p-0.5 shadow-btn-glow">
-                <Button
-                  variant={view === 'timeline' ? 'secondary' : 'ghost'}
-                  size="sm"
-                  className="h-7 px-2.5 gap-1.5"
-                  onClick={() => setView('timeline')}
-                >
-                  <CalendarClock className="w-3.5 h-3.5" strokeWidth={1.5} />
-                  <span className="text-xs">Timeline</span>
-                </Button>
-                <Button
-                  variant={view === 'table' ? 'secondary' : 'ghost'}
-                  size="sm"
-                  className="h-7 px-2.5 gap-1.5"
-                  onClick={() => setView('table')}
-                >
-                  <Table2 className="w-3.5 h-3.5" strokeWidth={1.5} />
-                  <span className="text-xs">All tasks</span>
-                </Button>
-              </div>
+              <SegmentedControl<'timeline' | 'table'>
+                value={view}
+                options={[
+                  { value: 'timeline', label: 'Timeline', icon: CalendarClock },
+                  { value: 'table', label: 'All tasks', icon: Table2 },
+                ]}
+                onChange={(v) => setView(v)}
+              />
               <Button variant="outline" size="sm" onClick={fetchTasks} disabled={loading}>
                 <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} strokeWidth={1.5} />
                 Refresh
diff --git a/frontend/src/components/__tests__/ScheduledOperationsView.test.tsx b/frontend/src/components/__tests__/ScheduledOperationsView.test.tsx
index efd62ba0..b6624c72 100644
--- a/frontend/src/components/__tests__/ScheduledOperationsView.test.tsx
+++ b/frontend/src/components/__tests__/ScheduledOperationsView.test.tsx
@@ -77,7 +77,7 @@ describe('ScheduledOperationsView', () => {
     tasksFixture = [makeTask({ id: 7, name: 'nightly-prune' })];
     render(<ScheduledOperationsView />);
 
-    await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
+    await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
     expect(await screen.findByText('nightly-prune')).toBeInTheDocument();
   });
 
@@ -88,7 +88,7 @@ describe('ScheduledOperationsView', () => {
     ];
     render(<ScheduledOperationsView />);
 
-    await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
+    await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
     await screen.findByText('recurring-task');
 
     // A single One-shot chip, scoped to the one-shot row.
@@ -107,7 +107,7 @@ describe('ScheduledOperationsView', () => {
     tasksFixture = [makeTask({ id: 1, name: 'failed-one-shot', delete_after_run: 1, last_status: 'failure' })];
     render(<ScheduledOperationsView />);
 
-    await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
+    await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
     const chip = await screen.findByText('One-shot');
     expect(chip).toHaveAttribute('title', expect.stringContaining('kept after a failed run'));
   });
@@ -136,7 +136,7 @@ describe('ScheduledOperationsView', () => {
     })];
     render(<ScheduledOperationsView />);
 
-    await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
+    await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
     await userEvent.click(await screen.findByTitle('Edit'));
     await waitFor(() => expect(screen.getAllByRole('combobox')[2]).toHaveTextContent('web'));
   });
@@ -168,7 +168,7 @@ describe('ScheduledOperationsView', () => {
     const onClearFilter = vi.fn();
     render(<ScheduledOperationsView filterNodeId={2} onClearFilter={onClearFilter} />);
 
-    await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
+    await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
     expect(await screen.findByText('edge-task')).toBeInTheDocument();
     expect(screen.queryByText('hub-task')).not.toBeInTheDocument();
 
@@ -503,7 +503,7 @@ describe('ScheduledOperationsView', () => {
     })];
     render(<ScheduledOperationsView />);
 
-    await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
+    await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
     await userEvent.click(await screen.findByTitle('Edit'));
     await userEvent.click(screen.getAllByRole('combobox')[0]);
     await userEvent.click(await screen.findByRole('button', { name: 'Create Fleet Snapshot' }));
@@ -639,7 +639,7 @@ describe('ScheduledOperationsView', () => {
       tasksFixture = [makeTask({ id: 5, name: 'daily-prune', cron_expression: '0 3 * * *', delete_after_run: 0 })];
       render(<ScheduledOperationsView />);
 
-      await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
+      await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
       await userEvent.click(await screen.findByTitle('Edit'));
 
       expect(screen.getByRole('radio', { name: 'Simple' })).toHaveAttribute('aria-checked', 'true');
@@ -657,7 +657,7 @@ describe('ScheduledOperationsView', () => {
       })];
       render(<ScheduledOperationsView />);
 
-      await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
+      await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
       await userEvent.click(await screen.findByTitle('Edit'));
       await userEvent.click(screen.getByRole('button', { name: 'Update' }));
 
@@ -674,7 +674,7 @@ describe('ScheduledOperationsView', () => {
       tasksFixture = [makeTask({ id: 6, name: 'every-15', cron_expression: '*/15 * * * *' })];
       render(<ScheduledOperationsView />);
 
-      await userEvent.click(await screen.findByRole('button', { name: /All tasks/ }));
+      await userEvent.click(await screen.findByRole('radio', { name: /All tasks/ }));
       await userEvent.click(await screen.findByTitle('Edit'));
 
       expect(screen.getByRole('radio', { name: 'Advanced' })).toHaveAttribute('aria-checked', 'true');