Andrei
c27f72e41d
Improved the settings page by removing individual save buttons from each preference component and adding unified save buttons per section: ## Changes Made ### Component Updates - **TimeZoneSelector**: Converted to controlled component with value/onChange props * Removed internal state management and save button * Removed success/error alerts (now handled by parent) * Added auto-detect as simple button without save - **TimeFormatSelector**: Converted to controlled component with value/onChange props * Removed internal state management and save button * Removed success/error alerts (now handled by parent) * Simplified to just radio buttons with preview ### Settings Page Improvements - Added timezone and timeFormat to local state - Created separate save handlers: * `handleSaveProfile` - for name/email changes * `handleSavePreferences` - for timezone and time format - Three clear sections with dedicated save buttons: 1. **Profile Information** → "Save Profile" button 2. **Preferences** (Language, Units, Timezone, Time Format) → "Save Preferences" button 3. **Notifications** → "Save Notification Settings" button ### User Experience Benefits - Clearer separation between different types of settings - Single save action per logical section instead of multiple buttons - Consistent save pattern across all settings cards - Reduced visual clutter with fewer buttons on page - Better organization: related settings grouped with one save action Files changed: 3 files (TimeZoneSelector, TimeFormatSelector, settings page) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import {
|
|
Box,
|
|
FormControl,
|
|
RadioGroup,
|
|
FormControlLabel,
|
|
Radio,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import { Schedule } from '@mui/icons-material';
|
|
import { useAuth } from '@/lib/auth/AuthContext';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
|
|
interface TimeFormatSelectorProps {
|
|
value: '12h' | '24h';
|
|
onChange: (timeFormat: '12h' | '24h') => void;
|
|
}
|
|
|
|
export function TimeFormatSelector({ value, onChange }: TimeFormatSelectorProps) {
|
|
const { user } = useAuth();
|
|
const { t } = useTranslation('settings');
|
|
|
|
// Initialize with user's time format on mount
|
|
useEffect(() => {
|
|
if (user?.preferences?.timeFormat && !value) {
|
|
onChange(user.preferences.timeFormat);
|
|
}
|
|
}, [user?.preferences?.timeFormat]);
|
|
|
|
const currentTime = new Date();
|
|
const preview12h = currentTime.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
hour12: true,
|
|
});
|
|
const preview24h = currentTime.toLocaleTimeString('en-US', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false,
|
|
});
|
|
|
|
return (
|
|
<Box>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
|
|
<Schedule color="action" />
|
|
<Typography variant="subtitle1" fontWeight="600">
|
|
Time Format
|
|
</Typography>
|
|
</Box>
|
|
|
|
<FormControl component="fieldset">
|
|
<RadioGroup
|
|
value={value || user?.preferences?.timeFormat || '12h'}
|
|
onChange={(e) => onChange(e.target.value as '12h' | '24h')}
|
|
>
|
|
<FormControlLabel
|
|
value="12h"
|
|
control={<Radio />}
|
|
label={
|
|
<Box>
|
|
<Typography variant="body1">12-hour format</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Example: {preview12h}
|
|
</Typography>
|
|
</Box>
|
|
}
|
|
/>
|
|
<FormControlLabel
|
|
value="24h"
|
|
control={<Radio />}
|
|
label={
|
|
<Box>
|
|
<Typography variant="body1">24-hour format</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Example: {preview24h}
|
|
</Typography>
|
|
</Box>
|
|
}
|
|
/>
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Box>
|
|
);
|
|
}
|