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/account/Profile.tsx

@@ -30,6 +30,7 @@ import {
 } from 'folds';
 import { Method } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
+import { SettingsSelect } from '../../../components/settings-select/SettingsSelect';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
@@ -544,35 +545,12 @@ function ProfileStatus() {
           <Text size="T200" style={{ opacity: 0.6, whiteSpace: 'nowrap', flexShrink: 0 }}>
             Auto-clear after:
           </Text>
-          <select
+          <SettingsSelect
             value={clearAfter}
-            onChange={(e) => setClearAfter(e.target.value)}
+            options={CLEAR_AFTER_OPTIONS}
+            onChange={setClearAfter}
             aria-label="Auto-clear status after"
-            style={{
-              background: color.SurfaceVariant.Container,
-              border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
-              borderRadius: config.radii.R300,
-              color: color.SurfaceVariant.OnContainer,
-              colorScheme: 'dark',
-              fontSize: '0.82rem',
-              padding: `${config.space.S100} ${config.space.S200}`,
-              cursor: 'pointer',
-              outline: 'none',
-            }}
-          >
-            {CLEAR_AFTER_OPTIONS.map((opt) => (
-              <option
-                key={opt.value}
-                value={opt.value}
-                style={{
-                  background: color.SurfaceVariant.Container,
-                  color: color.SurfaceVariant.OnContainer,
-                }}
-              >
-                {opt.label}
-              </option>
-            ))}
-          </select>
+          />
         </Box>
         {(presence?.status || statusMsg) && (
           <Button