diff --git a/code/frontend/src/app/features/settings/seeker/seeker.component.html b/code/frontend/src/app/features/settings/seeker/seeker.component.html
index 186e8f52..c8666801 100644
--- a/code/frontend/src/app/features/settings/seeker/seeker.component.html
+++ b/code/frontend/src/app/features/settings/seeker/seeker.component.html
@@ -68,10 +68,10 @@
hint="Pause proactive search between these times. Replacement searches keep running. Times follow the container's TZ setting."
helpKey="seeker:quietHoursEnabled" featureId="seeker-quiet-hours" />
@if (seekerForm.quietHoursEnabled().value()) {
-
-
diff --git a/code/frontend/src/app/features/settings/seeker/seeker.component.spec.ts b/code/frontend/src/app/features/settings/seeker/seeker.component.spec.ts
index 7634325c..ef2605f6 100644
--- a/code/frontend/src/app/features/settings/seeker/seeker.component.spec.ts
+++ b/code/frontend/src/app/features/settings/seeker/seeker.component.spec.ts
@@ -705,12 +705,23 @@ describe('SeekerComponent', () => {
it('renders the time inputs only when quiet hours are enabled', () => {
const { fixture, component } = setup();
- expect(fixture.nativeElement.querySelectorAll('input[type="time"]').length).toBe(2);
+ expect(fixture.nativeElement.querySelectorAll('app-time-input').length).toBe(2);
component.seekerForm.quietHoursEnabled().value.set(false);
fixture.detectChanges();
- expect(fixture.nativeElement.querySelectorAll('input[type="time"]').length).toBe(0);
+ expect(fixture.nativeElement.querySelectorAll('app-time-input').length).toBe(0);
+ });
+
+ it('shows the quiet until time as hour and minute selects', () => {
+ const { fixture } = setup();
+
+ const until = Array.from(fixture.nativeElement.querySelectorAll('app-time-input')).find((el) =>
+ (el as HTMLElement).textContent!.includes('Quiet Until'),
+ ) as HTMLElement;
+ const shown = Array.from(until.querySelectorAll('.select-trigger__text')).map((el) => el.textContent!.trim());
+
+ expect(shown).toEqual(['07', '30']);
});
it('marks the form invalid when quiet hours start and end match', () => {
diff --git a/code/frontend/src/app/features/settings/seeker/seeker.component.ts b/code/frontend/src/app/features/settings/seeker/seeker.component.ts
index 3c9fa02e..0ab80913 100644
--- a/code/frontend/src/app/features/settings/seeker/seeker.component.ts
+++ b/code/frontend/src/app/features/settings/seeker/seeker.component.ts
@@ -4,7 +4,7 @@ import { DatePipe } from '@angular/common';
import { PageHeaderComponent } from '@layout/page-header/page-header.component';
import {
CardComponent, ButtonComponent, ToggleComponent,
- SelectComponent, ChipInputComponent, NumberInputComponent, InputComponent,
+ SelectComponent, ChipInputComponent, NumberInputComponent, TimeInputComponent,
EmptyStateComponent, LoadingStateComponent, BadgeComponent,
type SelectOption,
} from '@ui';
@@ -101,7 +101,7 @@ interface InstanceState {
standalone: true,
imports: [
PageHeaderComponent, CardComponent, ButtonComponent,
- ToggleComponent, SelectComponent, ChipInputComponent, NumberInputComponent, InputComponent,
+ ToggleComponent, SelectComponent, ChipInputComponent, NumberInputComponent, TimeInputComponent,
EmptyStateComponent, LoadingStateComponent, BadgeComponent, DatePipe, FormField,
],
templateUrl: './seeker.component.html',