refactor: replace dropdown components with select components across log filter and settings pages

Author: Timothy Dodd

src/LogMkWeb/src/app/_pages/main-log-page/log-filter-controls/log-filter-controls.component.ts

@@ -6,7 +6,7 @@ import { startOfToday, subDays, subHours, subMonths } from 'date-fns'; // Import
 import { LucideAngularModule } from 'lucide-angular';
 
 import { debounceTime } from 'rxjs';
-import { DropdownComponent, ModalContainerService, ToastService } from '@rd-ui';
+import { SelectComponent, ModalContainerService, ToastService } from '@rd-ui';
 import { FilterPresetsModalComponent } from '../../../_components/filter-presets-modal/filter-presets-modal.component';
 import { TimeFilter, TimeFilterDropdownComponent } from '../../../_components/time-filter-dropdown/time-filter-dropdown.component';
 import { AudioService } from '../../../_services/audio.service';
@@ -27,7 +27,7 @@ import { LogFilterState } from '../_services/log-filter-state';
 @Component({
   selector: 'app-log-filter-controls',
   standalone: true,
-  imports: [FormsModule, DropdownComponent, TimeFilterDropdownComponent, LucideAngularModule],
+  imports: [FormsModule, SelectComponent, TimeFilterDropdownComponent, LucideAngularModule],
   template: `
     <div class="compact-toolbar filter-container-base">
       <!-- Search Input -->
@@ -45,7 +45,7 @@ import { LogFilterState } from '../_services/log-filter-state';
 
       <!-- Log Levels Filter -->
       <div class="filter-item">
-        <rd-dropdown
+        <rd-select
           id="log-level-select"
           [items]="logLevels"
           [triState]="true"
@@ -56,12 +56,12 @@ import { LogFilterState } from '../_services/log-filter-state';
           size="compact"
           [ngModel]="logFilterState.triStateLogLevel()"
           (ngModelChange)="logFilterState.triStateLogLevel.set($event)"
-        ></rd-dropdown>
+        ></rd-select>
       </div>
 
       <!-- Pods Filter -->
       <div class="filter-item">
-        <rd-dropdown
+        <rd-select
           id="pod-select"
           [items]="pods()"
           [triState]="true"
@@ -72,7 +72,7 @@ import { LogFilterState } from '../_services/log-filter-state';
           size="compact"
           [ngModel]="logFilterState.triStatePod()"
           (ngModelChange)="logFilterState.triStatePod.set($event)"
-        ></rd-dropdown>
+        ></rd-select>
       </div>
 
       <!-- Time Range Filter -->

src/LogMkWeb/src/app/_pages/settings-page/settings-page.component.html

@@ -69,12 +69,12 @@ <h5>Recent Activity</h5>
                 <div class="purge-action-row">
                   <div class="form-group time-range-group">
                     <label>Time Range</label>
-                    <rd-dropdown
+                    <rd-select
                       [options]="timeRangeOptions"
                       [placeholder]="'Select time range'"
                       [formControl]="timeRangeControl"
                       (selectionChange)="onTimeRangeSelect($event)"
-                    ></rd-dropdown>
+                    ></rd-select>
                   </div>
 
                   <button 

src/LogMkWeb/src/app/_pages/settings-page/settings-page.component.ts

@@ -1,7 +1,7 @@
 import { Component, inject, OnInit, signal } from '@angular/core';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
-import { ConfirmDialogService, DropdownComponent, ToastService } from '@rd-ui';
+import { ConfirmDialogService, SelectComponent, ToastService } from '@rd-ui';
 import { firstValueFrom } from 'rxjs';
 import { WorkQueueComponent } from '../../_components/work-queue/work-queue.component';
 import { LogApiService } from '../../_services/log.api';
@@ -22,7 +22,7 @@ interface TimeRange {
 @Component({
   selector: 'app-settings-page',
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, DropdownComponent, WorkQueueComponent],
+  imports: [FormsModule, ReactiveFormsModule, SelectComponent, WorkQueueComponent],
   templateUrl: './settings-page.component.html',
   styleUrl: './settings-page.component.scss',
 })

src/LogMkWeb/src/rd-ui

@@ -21,7 +21,7 @@
     --rd-border-color: var(--border-color);
     --rd-focus-ring: var(--focus-ring);
     --rd-modal-bg: var(--modal-bg);
-    --rd-dropdown-bg: var(--dropdown-bg);
+    --rd-select-bg: var(--dropdown-bg);
     --rd-shadow-color: rgba(0, 0, 0, 0.3);
     --rd-border-radius: 8px;
     --rd-border-radius-sm: 4px;