fix(ui): timezone picker uses folds SettingsSelect (native-cinny audit 7/N)

Replaced the last raw native <select> (Profile timezone, colorScheme:'dark')
with SettingsSelect. Added an optional `disabled` prop to SettingsSelect for
the saving state. handleSubmit reads the `timezone` state (not the native form
field) so submission is unaffected; the now-unused handleSelectChange was
removed. No raw <select> elements remain in the settings UI.

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

src/app/components/settings-select/SettingsSelect.tsx

@@ -18,11 +18,13 @@ export function SettingsSelect<T extends string>({
   value,
   options,
   onChange,
+  disabled,
   'aria-label': ariaLabel,
 }: {
   value: T;
   options: SettingsSelectOption<T>[];
   onChange: (v: T) => void;
+  disabled?: boolean;
   'aria-label'?: string;
 }) {
   const [menuCords, setMenuCords] = useState<RectCords>();
@@ -47,6 +49,7 @@ export function SettingsSelect<T extends string>({
         radii="300"
         after={<Icon size="300" src={Icons.ChevronBottom} />}
         onClick={handleMenu}
+        disabled={disabled}
         aria-label={ariaLabel}
         aria-haspopup="menu"
         aria-expanded={!!menuCords}

src/app/features/settings/account/Profile.tsx

@@ -759,10 +759,6 @@ function ProfileTimezone() {
   );
   const saving = saveState.status === AsyncStatus.Loading;
 
-  const handleSelectChange = (evt: React.ChangeEvent<HTMLSelectElement>) => {
-    setTimezone(evt.currentTarget.value);
-  };
-
   const handleReset = () => {
     setTimezone(savedTimezone);
   };
@@ -791,39 +787,16 @@ function ProfileTimezone() {
       <Box direction="Column" grow="Yes" gap="100">
         <Box as="form" onSubmit={handleSubmit} gap="200" alignItems="Center" aria-disabled={saving}>
           <Box grow="Yes" direction="Column">
-            <select
+            <SettingsSelect
-              name="timezoneInput"
-              aria-label="Timezone"
               value={timezone}
-              onChange={handleSelectChange}
+              options={[
+                { value: '', label: '— select timezone —' },
+                ...COMMON_TIMEZONES.map((tz) => ({ value: tz, label: tz })),
+              ]}
+              onChange={setTimezone}
               disabled={saving}
-              style={{
+              aria-label="Timezone"
-                background: color.SurfaceVariant.Container,
+            />
-                border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
-                borderRadius: config.radii.R300,
-                color: color.SurfaceVariant.OnContainer,
-                colorScheme: 'dark',
-                fontSize: '0.875rem',
-                padding: `${config.space.S200} ${config.space.S300}`,
-                width: '100%',
-                cursor: 'pointer',
-                outline: 'none',
-              }}
-            >
-              <option value="">— select timezone —</option>
-              {COMMON_TIMEZONES.map((tz) => (
-                <option
-                  key={tz}
-                  value={tz}
-                  style={{
-                    background: color.SurfaceVariant.Container,
-                    color: color.SurfaceVariant.OnContainer,
-                  }}
-                >
-                  {tz}
-                </option>
-              ))}
-            </select>
           </Box>
           {hasChanges && !saving && (
             <IconButton