refactor(ui): extract shared SettingsSelect; replace raw <select> (native-cinny audit 6/N)

Extracted the folds-native dropdown (Button+PopOut+Menu) from General.tsx into a
shared components/settings-select/SettingsSelect.tsx, and used it to replace raw
native <select> elements (which render OS-styled and broke under non-default
themes via colorScheme:'dark'):
- Profile "auto-clear after" select
- PushRuleEditor add-rule mode select (dropped the now-unused handleModeChange)

The form-tied timezone <select> in Profile is left for a follow-up (it's wired
to native form submission + a disabled state and needs more care).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/settings/general/General.tsx

@@ -81,6 +81,7 @@ import { useDateFormatItems } from '../../../hooks/useDateFormat';
 import { playCallJoinSound } from '../../../utils/callSounds';
 import { previewRingtone, RINGTONE_OPTIONS } from '../../../utils/ringtones';
 import { DenoiseTester } from './DenoiseTester';
+import { SettingsSelect } from '../../../components/settings-select/SettingsSelect';
 
 type ThemeSelectorProps = {
   themeNames: Record<string, string>;
@@ -169,83 +170,6 @@ function SelectTheme({ disabled }: { disabled?: boolean }) {
   );
 }
 
-type SettingsSelectOption<T extends string> = { value: T; label: string; disabled?: boolean };
-
-function SettingsSelect<T extends string>({
-  value,
-  options,
-  onChange,
-}: {
-  value: T;
-  options: SettingsSelectOption<T>[];
-  onChange: (v: T) => void;
-}) {
-  const [menuCords, setMenuCords] = useState<RectCords>();
-  const selectedLabel = options.find((o) => o.value === value)?.label ?? value;
-
-  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const handleSelect = (v: T) => {
-    onChange(v);
-    setMenuCords(undefined);
-  };
-
-  return (
-    <>
-      <Button
-        size="300"
-        variant="Secondary"
-        outlined
-        fill="Soft"
-        radii="300"
-        after={<Icon size="300" src={Icons.ChevronBottom} />}
-        onClick={handleMenu}
-      >
-        <Text size="T300">{selectedLabel}</Text>
-      </Button>
-      <PopOut
-        anchor={menuCords}
-        offset={5}
-        position="Bottom"
-        align="End"
-        content={
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              onDeactivate: () => setMenuCords(undefined),
-              clickOutsideDeactivates: true,
-              isKeyForward: (evt: KeyboardEvent) =>
-                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
-              isKeyBackward: (evt: KeyboardEvent) =>
-                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
-              escapeDeactivates: stopPropagation,
-            }}
-          >
-            <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-                {options.map((opt) => (
-                  <MenuItem
-                    key={opt.value}
-                    size="300"
-                    variant={opt.value === value ? 'Primary' : 'Surface'}
-                    radii="300"
-                    disabled={opt.disabled}
-                    onClick={() => !opt.disabled && handleSelect(opt.value)}
-                  >
-                    <Text size="T300">{opt.label}</Text>
-                  </MenuItem>
-                ))}
-              </Box>
-            </Menu>
-          </FocusTrap>
-        }
-      />
-    </>
-  );
-}
-
 function SystemThemePreferences() {
   const themeKind = useSystemThemeKind();
   const themeNames = useThemeNames();