fix(onboarding): replace internal boot native selects (#1942)

## Summary

This PR replaces the onboarding flow's remaining native dropdowns with
the shared `Select` component from `@unraid/ui`, fixes the resulting
select handler typing, and aligns the onboarding select trigger styling
with the rest of the form in dark mode.

The work is targeted at the black-theme report where dropdowns in
onboarding were either unreadable for some users or visually
inconsistent with adjacent inputs.

## Work Intent

Onboarding color fixes.

## Problem

The onboarding flow still had a few browser-native `<select>` elements
in the internal boot step. That left the open dropdown menu styling up
to the browser and operating system, which can produce theme mismatches
that are hard to reproduce locally.

After moving those controls to the shared `Select` component, another
issue became obvious: the shared trigger defaults looked darker than the
surrounding onboarding inputs in dark mode, so the controls still felt
visually off even though the popup rendering problem was addressed.

## What Changed

- replaced the native selects in `OnboardingInternalBootStep` with
`@unraid/ui` `Select`
- converted slot-count, device, and boot-size options into typed
`SelectItemType[]` item lists
- preserved existing step behavior by wiring explicit update handlers
back into the same refs and validation flow
- normalized emitted select values through a shared helper so the
onboarding step stays type-safe with the shared component event contract
- updated the internal boot step test to stub the shared `Select`
component without depending on portal rendering
- applied onboarding-specific `Select` trigger styling in
`OnboardingInternalBootStep` so internal boot dropdowns match nearby
inputs in dark mode
- applied the same onboarding-specific `Select` trigger styling in
`OnboardingCoreSettingsStep` so timezone, language, and theme selectors
match the rest of the onboarding form

## Why This Approach

Using the same shared `Select` component already used elsewhere in
onboarding gives us control over menu rendering and theme tokens instead
of relying on browser-native popup behavior.

Keeping the dark-mode styling override local to onboarding lets us make
these selects visually match the onboarding form without changing the
shared `Select` component globally.

## Verification

Passed in this worktree:

- `pnpm --dir web type-check`
- `pnpm --dir api type-check`
- `pnpm --dir web lint`
- `pnpm --filter ./api lint`
- `pnpm --dir web test`
- `pnpm --filter ./api test`
- `pnpm --dir web test OnboardingInternalBootStep.test.ts`
- `pnpm --dir web test OnboardingCoreSettingsStep.test.ts`

## Notes

- dependencies were installed in this worktree so hooks and checks could
run normally
- the first commit on this branch was created before install and used
`--no-verify` because `lint-staged` was unavailable in the fresh
worktree at that point
- no production app or dev server was started or restarted


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Onboarding boot, device, and preset selections now use a consistent
Select component for improved UI consistency and interaction handling.
* Select styling consolidated for time zone, language, and theme
controls for uniform appearance and focus behavior.

* **Tests**
* Test harness updated with a functional mock Select that supports item
rendering and selection change propagation.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: Ajit-Mehrotra

web/__test__/components/Onboarding/OnboardingInternalBootStep.test.ts

@@ -61,6 +61,28 @@ vi.mock('@unraid/ui', () => ({
     template:
       '<button data-testid="brand-button" :disabled="disabled" @click="$emit(\'click\')">{{ text }}</button>',
   },
+  Select: {
+    props: ['modelValue', 'items', 'disabled', 'placeholder'],
+    emits: ['update:modelValue'],
+    template: `
+      <select
+        data-testid="select"
+        :disabled="disabled"
+        :value="modelValue ?? ''"
+        @change="$emit('update:modelValue', $event.target.value)"
+      >
+        <option v-if="placeholder" value="">{{ placeholder }}</option>
+        <option
+          v-for="item in items"
+          :key="item.value"
+          :value="item.value"
+          :disabled="item.disabled"
+        >
+          {{ item.label }}
+        </option>
+      </select>
+    `,
+  },
 }));
 
 vi.mock('@vue/apollo-composable', () => ({

web/src/components/Onboarding/steps/OnboardingCoreSettingsStep.vue

@@ -356,6 +356,8 @@ const languageItems = computed(() => {
 });
 
 const isLanguageDisabled = computed(() => isLanguagesLoading.value || !!languagesQueryError.value);
+const onboardingSelectClasses =
+  'w-full border-muted bg-bg text-highlighted data-[placeholder]:text-muted focus:ring-primary focus:ring-offset-0';
 
 const handleSubmit = async () => {
   if (serverNameValidation.value || serverDescriptionValidation.value) {
@@ -506,7 +508,7 @@ const isBusy = computed(() => isSaving.value || (props.isSavingStep ?? false));
             v-model="selectedTimeZone"
             :items="timeZoneItems"
             :placeholder="t('onboarding.coreSettings.selectTimezonePlaceholder')"
-            class="w-full"
+            :class="onboardingSelectClasses"
             :disabled="isBusy"
             size="lg"
           />
@@ -523,7 +525,7 @@ const isBusy = computed(() => isSaving.value || (props.isSavingStep ?? false));
             :placeholder="
               isLanguagesLoading ? t('common.loading') : t('onboarding.coreSettings.selectLanguage')
             "
-            class="w-full"
+            :class="onboardingSelectClasses"
             :disabled="isBusy || isLanguageDisabled"
             size="lg"
           />
@@ -582,7 +584,7 @@ const isBusy = computed(() => isSaving.value || (props.isSavingStep ?? false));
             <Select
               v-model="selectedTheme"
               :items="themeItems"
-              class="w-full"
+              :class="onboardingSelectClasses"
               :disabled="isBusy"
               size="lg"
             />

web/src/components/Onboarding/steps/OnboardingInternalBootStep.vue

@@ -10,7 +10,7 @@ import {
   ChevronRightIcon,
   ExclamationTriangleIcon,
 } from '@heroicons/vue/24/solid';
-import { BrandButton } from '@unraid/ui';
+import { BrandButton, Select } from '@unraid/ui';
 import { REFRESH_INTERNAL_BOOT_CONTEXT_MUTATION } from '@/components/Onboarding/graphql/refreshInternalBootContext.mutation';
 import { useOnboardingDraftStore } from '@/components/Onboarding/store/onboardingDraft';
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
@@ -20,6 +20,7 @@ import type {
   OnboardingBootMode,
   OnboardingInternalBootSelection,
 } from '@/components/Onboarding/store/onboardingDraft';
+import type { SelectItemType } from '@unraid/ui';
 import type { GetInternalBootContextQuery } from '~/composables/gql/graphql';
 
 import { GetInternalBootContextDocument } from '~/composables/gql/graphql';
@@ -397,6 +398,24 @@ const visiblePresetOptions = computed(() => {
   }));
 });
 
+const slotCountItems = computed<SelectItemType[]>(() =>
+  slotOptions.value.map((option) => ({
+    value: option,
+    label: String(option),
+  }))
+);
+
+const bootSizePresetItems = computed<SelectItemType[]>(() => [
+  ...visiblePresetOptions.value.map((option) => ({
+    value: option.value,
+    label: option.label,
+  })),
+  {
+    value: 'custom',
+    label: t('onboarding.internalBootStep.bootSize.custom'),
+  },
+]);
+
 const bootSizeMiB = computed(() => {
   if (bootSizePreset.value === 'custom') {
     const sizeGb = Number.parseInt(customBootSizeGb.value, 10);
@@ -497,6 +516,48 @@ const isDeviceDisabled = (deviceId: string, index: number) => {
   );
 };
 
+const getDeviceSelectItems = (index: number): SelectItemType[] =>
+  deviceOptions.value.map((option) => ({
+    value: option.value,
+    label: option.label,
+    disabled: isDeviceDisabled(option.value, index),
+  }));
+
+const toSelectString = (value: unknown): string => {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (typeof value === 'number' || typeof value === 'bigint') {
+    return String(value);
+  }
+
+  return '';
+};
+
+const handleSlotCountChange = (value: unknown) => {
+  const parsedValue =
+    typeof value === 'number'
+      ? value
+      : typeof value === 'bigint'
+        ? Number(value)
+        : Number.parseInt(toSelectString(value), 10);
+  if (Number.isFinite(parsedValue) && parsedValue >= 1 && parsedValue <= 2) {
+    slotCount.value = parsedValue;
+  }
+};
+
+const handleDeviceSelection = (index: number, value: unknown) => {
+  selectedDevices.value[index] = toSelectString(value);
+};
+
+const handleBootSizePresetChange = (value: unknown) => {
+  bootSizePreset.value = toSelectString(value);
+};
+
+const onboardingSelectClasses =
+  'w-full border-muted bg-bg text-highlighted data-[placeholder]:text-muted focus:ring-primary focus:ring-offset-0';
+
 const buildValidatedSelection = (): OnboardingInternalBootSelection | null => {
   const normalizedPoolName = poolName.value.trim();
   if (!normalizedPoolName) {
@@ -793,13 +854,13 @@ const primaryButtonText = computed(() => t('onboarding.internalBootStep.actions.
             <span class="text-muted text-sm font-medium">
               {{ t('onboarding.internalBootStep.fields.slots') }}
             </span>
-            <select
-              v-model.number="slotCount"
-              class="border-muted bg-bg focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+            <Select
+              :model-value="slotCount"
+              :items="slotCountItems"
+              :class="onboardingSelectClasses"
               :disabled="isBusy"
-            >
-              <option v-for="option in slotOptions" :key="option" :value="option">{{ option }}</option>
-            </select>
+              @update:model-value="handleSlotCountChange"
+            />
           </label>
         </div>
 
@@ -811,21 +872,14 @@ const primaryButtonText = computed(() => t('onboarding.internalBootStep.actions.
             <label class="text-muted text-sm font-medium">{{
               t('onboarding.internalBootStep.fields.deviceSlot', { index })
             }}</label>
-            <select
-              v-model="selectedDevices[index - 1]"
-              class="border-muted bg-bg focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+            <Select
+              :model-value="selectedDevices[index - 1] || undefined"
+              :items="getDeviceSelectItems(index - 1)"
+              :placeholder="t('onboarding.internalBootStep.fields.selectDevice')"
+              :class="onboardingSelectClasses"
               :disabled="isBusy"
-            >
-              <option value="">{{ t('onboarding.internalBootStep.fields.selectDevice') }}</option>
-              <option
-                v-for="option in deviceOptions"
-                :key="option.value"
-                :value="option.value"
-                :disabled="isDeviceDisabled(option.value, index - 1)"
-              >
-                {{ option.label }}
-              </option>
-            </select>
+              @update:model-value="handleDeviceSelection(index - 1, $event)"
+            />
           </div>
         </div>
 
@@ -834,16 +888,13 @@ const primaryButtonText = computed(() => t('onboarding.internalBootStep.actions.
             <span class="text-muted text-sm font-medium">
               {{ t('onboarding.internalBootStep.fields.bootReservedSize') }}
             </span>
-            <select
-              v-model="bootSizePreset"
-              class="border-muted bg-bg focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+            <Select
+              :model-value="bootSizePreset"
+              :items="bootSizePresetItems"
+              :class="onboardingSelectClasses"
               :disabled="isBusy"
-            >
-              <option v-for="option in visiblePresetOptions" :key="option.value" :value="option.value">
-                {{ option.label }}
-              </option>
-              <option value="custom">{{ t('onboarding.internalBootStep.bootSize.custom') }}</option>
-            </select>
+              @update:model-value="handleBootSizePresetChange"
+            />
           </label>
 
           <label class="space-y-2">