- Redesign AccountPage with tabbed interface (Profile, Privacy & rCards, Settings) - Add RCardPrivacySettings component with granular privacy controls - Create RCardManagement component for creating and editing rCards - Extend notification types with privacy settings and rCard structures - Implement privacy levels: none, limited, moderate, intimate - Add location sharing controls with auto-deletion settings - Include data sharing sliders for articles, proposals, offers/wants, gratitude - Support re-sharing controls with hop limits - Enable trust settings (key recovery buddy, circles trusted connection) - Add default rCard categories with customized privacy defaults - Support custom rCard creation with icons and colors - Include comprehensive privacy preview and management interface Features: - Granular privacy control per relationship type (rCard) - Visual privacy level sliders matching the provided design - Custom rCard creation with icon and color selection - Default privacy templates optimized for relationship types - Real-time privacy setting updates - Professional UI matching app design patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>main
Oliver Sylvester-Bradley
2 months ago
parent
142920b264
commit
570f6dba11
@ -0,0 +1,314 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { |
||||||
|
Dialog, |
||||||
|
DialogTitle, |
||||||
|
DialogContent, |
||||||
|
DialogActions, |
||||||
|
Button, |
||||||
|
TextField, |
||||||
|
Box, |
||||||
|
Typography, |
||||||
|
Avatar, |
||||||
|
Grid, |
||||||
|
IconButton, |
||||||
|
Card, |
||||||
|
CardContent, |
||||||
|
Chip, |
||||||
|
} from '@mui/material'; |
||||||
|
import { |
||||||
|
Business, |
||||||
|
PersonOutline, |
||||||
|
Groups, |
||||||
|
FamilyRestroom, |
||||||
|
Favorite, |
||||||
|
Home, |
||||||
|
Work, |
||||||
|
School, |
||||||
|
LocalHospital, |
||||||
|
Sports, |
||||||
|
Close, |
||||||
|
Edit, |
||||||
|
Delete, |
||||||
|
} from '@mui/icons-material'; |
||||||
|
import type { RCardWithPrivacy } from '../../types/notification'; |
||||||
|
import { DEFAULT_PRIVACY_SETTINGS } from '../../types/notification'; |
||||||
|
|
||||||
|
interface RCardManagementProps { |
||||||
|
open: boolean; |
||||||
|
onClose: () => void; |
||||||
|
onSave: (rCard: RCardWithPrivacy) => void; |
||||||
|
onDelete?: (rCardId: string) => void; |
||||||
|
editingRCard?: RCardWithPrivacy; |
||||||
|
} |
||||||
|
|
||||||
|
const AVAILABLE_ICONS = [ |
||||||
|
{ name: 'Business', icon: <Business />, label: 'Business' }, |
||||||
|
{ name: 'PersonOutline', icon: <PersonOutline />, label: 'Person' }, |
||||||
|
{ name: 'Groups', icon: <Groups />, label: 'Groups' }, |
||||||
|
{ name: 'FamilyRestroom', icon: <FamilyRestroom />, label: 'Family' }, |
||||||
|
{ name: 'Favorite', icon: <Favorite />, label: 'Heart' }, |
||||||
|
{ name: 'Home', icon: <Home />, label: 'Home' }, |
||||||
|
{ name: 'Work', icon: <Work />, label: 'Work' }, |
||||||
|
{ name: 'School', icon: <School />, label: 'School' }, |
||||||
|
{ name: 'LocalHospital', icon: <LocalHospital />, label: 'Medical' }, |
||||||
|
{ name: 'Sports', icon: <Sports />, label: 'Sports' }, |
||||||
|
]; |
||||||
|
|
||||||
|
const AVAILABLE_COLORS = [ |
||||||
|
'#2563eb', // Blue
|
||||||
|
'#10b981', // Green
|
||||||
|
'#8b5cf6', // Purple
|
||||||
|
'#f59e0b', // Orange
|
||||||
|
'#ef4444', // Red
|
||||||
|
'#ec4899', // Pink
|
||||||
|
'#06b6d4', // Cyan
|
||||||
|
'#84cc16', // Lime
|
||||||
|
'#f97316', // Orange-red
|
||||||
|
'#6366f1', // Indigo
|
||||||
|
]; |
||||||
|
|
||||||
|
const RCardManagement = ({
|
||||||
|
open,
|
||||||
|
onClose,
|
||||||
|
onSave,
|
||||||
|
onDelete,
|
||||||
|
editingRCard
|
||||||
|
}: RCardManagementProps) => { |
||||||
|
const [formData, setFormData] = useState({ |
||||||
|
name: editingRCard?.name || '', |
||||||
|
description: editingRCard?.description || '', |
||||||
|
color: editingRCard?.color || AVAILABLE_COLORS[0], |
||||||
|
icon: editingRCard?.icon || 'PersonOutline', |
||||||
|
}); |
||||||
|
|
||||||
|
const [errors, setErrors] = useState<Record<string, string>>({}); |
||||||
|
|
||||||
|
const handleSubmit = () => { |
||||||
|
const newErrors: Record<string, string> = {}; |
||||||
|
|
||||||
|
if (!formData.name.trim()) { |
||||||
|
newErrors.name = 'Name is required'; |
||||||
|
} |
||||||
|
|
||||||
|
if (!formData.description.trim()) { |
||||||
|
newErrors.description = 'Description is required'; |
||||||
|
} |
||||||
|
|
||||||
|
if (Object.keys(newErrors).length > 0) { |
||||||
|
setErrors(newErrors); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const rCardData: RCardWithPrivacy = { |
||||||
|
id: editingRCard?.id || `custom-${Date.now()}`, |
||||||
|
name: formData.name.trim(), |
||||||
|
description: formData.description.trim(), |
||||||
|
color: formData.color, |
||||||
|
icon: formData.icon, |
||||||
|
isDefault: editingRCard?.isDefault || false, |
||||||
|
createdAt: editingRCard?.createdAt || new Date(), |
||||||
|
updatedAt: new Date(), |
||||||
|
privacySettings: editingRCard?.privacySettings || { ...DEFAULT_PRIVACY_SETTINGS }, |
||||||
|
}; |
||||||
|
|
||||||
|
onSave(rCardData); |
||||||
|
handleClose(); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleClose = () => { |
||||||
|
setFormData({ |
||||||
|
name: '', |
||||||
|
description: '', |
||||||
|
color: AVAILABLE_COLORS[0], |
||||||
|
icon: 'PersonOutline', |
||||||
|
}); |
||||||
|
setErrors({}); |
||||||
|
onClose(); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleDelete = () => { |
||||||
|
if (editingRCard && onDelete) { |
||||||
|
onDelete(editingRCard.id); |
||||||
|
handleClose(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const getIconComponent = (iconName: string) => { |
||||||
|
const iconData = AVAILABLE_ICONS.find(icon => icon.name === iconName); |
||||||
|
return iconData?.icon || <PersonOutline />; |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth> |
||||||
|
<DialogTitle> |
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
||||||
|
<Typography variant="h6"> |
||||||
|
{editingRCard ? 'Edit Relationship Card' : 'Create New Relationship Card'} |
||||||
|
</Typography> |
||||||
|
<IconButton onClick={handleClose} size="small"> |
||||||
|
<Close /> |
||||||
|
</IconButton> |
||||||
|
</Box> |
||||||
|
</DialogTitle> |
||||||
|
|
||||||
|
<DialogContent> |
||||||
|
<Box sx={{ pt: 2 }}> |
||||||
|
{/* Preview */} |
||||||
|
<Card variant="outlined" sx={{ mb: 3, bgcolor: 'grey.50' }}> |
||||||
|
<CardContent sx={{ textAlign: 'center', py: 3 }}> |
||||||
|
<Typography variant="subtitle2" color="text.secondary" sx={{ mb: 2 }}> |
||||||
|
Preview |
||||||
|
</Typography> |
||||||
|
<Avatar |
||||||
|
sx={{
|
||||||
|
bgcolor: formData.color,
|
||||||
|
width: 64,
|
||||||
|
height: 64,
|
||||||
|
mx: 'auto',
|
||||||
|
mb: 2
|
||||||
|
}} |
||||||
|
> |
||||||
|
{getIconComponent(formData.icon)} |
||||||
|
</Avatar> |
||||||
|
<Typography variant="h6" sx={{ fontWeight: 600 }}> |
||||||
|
{formData.name || 'rCard Name'} |
||||||
|
</Typography> |
||||||
|
<Typography variant="body2" color="text.secondary"> |
||||||
|
{formData.description || 'rCard description'} |
||||||
|
</Typography> |
||||||
|
{editingRCard?.isDefault && ( |
||||||
|
<Chip label="Default" size="small" variant="outlined" sx={{ mt: 1 }} /> |
||||||
|
)} |
||||||
|
</CardContent> |
||||||
|
</Card> |
||||||
|
|
||||||
|
{/* Form Fields */} |
||||||
|
<Grid container spacing={3}> |
||||||
|
<Grid size={{ xs: 12 }}> |
||||||
|
<TextField |
||||||
|
fullWidth |
||||||
|
label="rCard Name" |
||||||
|
value={formData.name} |
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))} |
||||||
|
error={!!errors.name} |
||||||
|
helperText={errors.name} |
||||||
|
placeholder="e.g., Close Friends, Work Colleagues, Gym Buddies" |
||||||
|
/> |
||||||
|
</Grid> |
||||||
|
|
||||||
|
<Grid size={{ xs: 12 }}> |
||||||
|
<TextField |
||||||
|
fullWidth |
||||||
|
multiline |
||||||
|
rows={3} |
||||||
|
label="Description" |
||||||
|
value={formData.description} |
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))} |
||||||
|
error={!!errors.description} |
||||||
|
helperText={errors.description} |
||||||
|
placeholder="Describe the type of relationship and what you'll share with this group" |
||||||
|
/> |
||||||
|
</Grid> |
||||||
|
|
||||||
|
{/* Icon Selection */} |
||||||
|
<Grid size={{ xs: 12 }}> |
||||||
|
<Typography variant="subtitle2" sx={{ mb: 2 }}> |
||||||
|
Choose an Icon |
||||||
|
</Typography> |
||||||
|
<Grid container spacing={1}> |
||||||
|
{AVAILABLE_ICONS.map((iconData) => ( |
||||||
|
<Grid size="auto" key={iconData.name}> |
||||||
|
<Card |
||||||
|
variant="outlined" |
||||||
|
sx={{ |
||||||
|
cursor: 'pointer', |
||||||
|
border: formData.icon === iconData.name ? 2 : 1, |
||||||
|
borderColor: formData.icon === iconData.name ? 'primary.main' : 'divider', |
||||||
|
'&:hover': { borderColor: 'primary.main' }, |
||||||
|
}} |
||||||
|
onClick={() => setFormData(prev => ({ ...prev, icon: iconData.name }))} |
||||||
|
> |
||||||
|
<CardContent sx={{ p: 2, textAlign: 'center', minWidth: 80 }}> |
||||||
|
<Box sx={{ color: formData.color, mb: 1 }}> |
||||||
|
{iconData.icon} |
||||||
|
</Box> |
||||||
|
<Typography variant="caption"> |
||||||
|
{iconData.label} |
||||||
|
</Typography> |
||||||
|
</CardContent> |
||||||
|
</Card> |
||||||
|
</Grid> |
||||||
|
))} |
||||||
|
</Grid> |
||||||
|
</Grid> |
||||||
|
|
||||||
|
{/* Color Selection */} |
||||||
|
<Grid size={{ xs: 12 }}> |
||||||
|
<Typography variant="subtitle2" sx={{ mb: 2 }}> |
||||||
|
Choose a Color |
||||||
|
</Typography> |
||||||
|
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}> |
||||||
|
{AVAILABLE_COLORS.map((color) => ( |
||||||
|
<Box |
||||||
|
key={color} |
||||||
|
sx={{ |
||||||
|
width: 40, |
||||||
|
height: 40, |
||||||
|
borderRadius: '50%', |
||||||
|
bgcolor: color, |
||||||
|
cursor: 'pointer', |
||||||
|
border: formData.color === color ? 3 : 2, |
||||||
|
borderColor: formData.color === color ? 'grey.800' : 'grey.300', |
||||||
|
'&:hover': { borderColor: 'grey.600' }, |
||||||
|
}} |
||||||
|
onClick={() => setFormData(prev => ({ ...prev, color }))} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</Box> |
||||||
|
</Grid> |
||||||
|
</Grid> |
||||||
|
|
||||||
|
{/* Default rCard Warning */} |
||||||
|
{editingRCard?.isDefault && ( |
||||||
|
<Box sx={{ mt: 3, p: 2, bgcolor: 'warning.50', borderRadius: 1, border: 1, borderColor: 'warning.200' }}> |
||||||
|
<Typography variant="body2" color="warning.dark"> |
||||||
|
<strong>Note:</strong> This is a default rCard. You can edit its name, description, and appearance,
|
||||||
|
but it cannot be deleted. |
||||||
|
</Typography> |
||||||
|
</Box> |
||||||
|
)} |
||||||
|
</Box> |
||||||
|
</DialogContent> |
||||||
|
|
||||||
|
<DialogActions sx={{ p: 3 }}> |
||||||
|
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}> |
||||||
|
<Box> |
||||||
|
{editingRCard && !editingRCard.isDefault && onDelete && ( |
||||||
|
<Button |
||||||
|
color="error" |
||||||
|
startIcon={<Delete />} |
||||||
|
onClick={handleDelete} |
||||||
|
> |
||||||
|
Delete rCard |
||||||
|
</Button> |
||||||
|
)} |
||||||
|
</Box> |
||||||
|
<Box sx={{ display: 'flex', gap: 1 }}> |
||||||
|
<Button onClick={handleClose}> |
||||||
|
Cancel |
||||||
|
</Button> |
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleSubmit} |
||||||
|
startIcon={editingRCard ? <Edit /> : undefined} |
||||||
|
> |
||||||
|
{editingRCard ? 'Save Changes' : 'Create rCard'} |
||||||
|
</Button> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
</DialogActions> |
||||||
|
</Dialog> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default RCardManagement; |
||||||
@ -0,0 +1,349 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { |
||||||
|
Card, |
||||||
|
CardContent, |
||||||
|
Typography, |
||||||
|
Box, |
||||||
|
Switch, |
||||||
|
FormControlLabel, |
||||||
|
Select, |
||||||
|
MenuItem, |
||||||
|
FormControl, |
||||||
|
InputLabel, |
||||||
|
Slider, |
||||||
|
Divider, |
||||||
|
Chip, |
||||||
|
alpha, |
||||||
|
} from '@mui/material'; |
||||||
|
import { |
||||||
|
Security, |
||||||
|
LocationOn, |
||||||
|
Share, |
||||||
|
Refresh, |
||||||
|
VpnKey, |
||||||
|
} from '@mui/icons-material'; |
||||||
|
import type { RCardWithPrivacy, PrivacyLevel, LocationSharingLevel } from '../../types/notification'; |
||||||
|
|
||||||
|
interface RCardPrivacySettingsProps { |
||||||
|
rCard: RCardWithPrivacy; |
||||||
|
onUpdate: (updatedRCard: RCardWithPrivacy) => void; |
||||||
|
} |
||||||
|
|
||||||
|
const RCardPrivacySettings = ({ rCard, onUpdate }: RCardPrivacySettingsProps) => { |
||||||
|
const [settings, setSettings] = useState(rCard.privacySettings); |
||||||
|
|
||||||
|
const handleSettingChange = ( |
||||||
|
category: string, |
||||||
|
field: string, |
||||||
|
value: any |
||||||
|
) => { |
||||||
|
const newSettings = { ...settings }; |
||||||
|
|
||||||
|
if (category === 'dataSharing') { |
||||||
|
(newSettings.dataSharing as any)[field] = value; |
||||||
|
} else if (category === 'reSharing') { |
||||||
|
(newSettings.reSharing as any)[field] = value; |
||||||
|
} else { |
||||||
|
(newSettings as any)[field] = value; |
||||||
|
} |
||||||
|
|
||||||
|
setSettings(newSettings); |
||||||
|
|
||||||
|
const updatedRCard = { |
||||||
|
...rCard, |
||||||
|
privacySettings: newSettings, |
||||||
|
updatedAt: new Date(), |
||||||
|
}; |
||||||
|
|
||||||
|
onUpdate(updatedRCard); |
||||||
|
}; |
||||||
|
|
||||||
|
const getPrivacyLevelColor = (level: PrivacyLevel) => { |
||||||
|
switch (level) { |
||||||
|
case 'none': return '#94a3b8'; |
||||||
|
case 'limited': return '#3b82f6'; |
||||||
|
case 'moderate': return '#f59e0b'; |
||||||
|
case 'intimate': return '#ef4444'; |
||||||
|
default: return '#3b82f6'; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const getPrivacyLevelLabel = (level: PrivacyLevel) => { |
||||||
|
switch (level) { |
||||||
|
case 'none': return 'None'; |
||||||
|
case 'limited': return 'Limited'; |
||||||
|
case 'moderate': return 'Moderate'; |
||||||
|
case 'intimate': return 'Intimate'; |
||||||
|
default: return 'Limited'; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const PrivacySlider = ({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
description
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
value: PrivacyLevel;
|
||||||
|
onChange: (value: PrivacyLevel) => void; |
||||||
|
description?: string; |
||||||
|
}) => { |
||||||
|
const levels: PrivacyLevel[] = ['none', 'limited', 'moderate', 'intimate']; |
||||||
|
const currentIndex = levels.indexOf(value); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Box sx={{ mb: 4 }}> |
||||||
|
<Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 1 }}> |
||||||
|
{label} |
||||||
|
</Typography> |
||||||
|
{description && ( |
||||||
|
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}> |
||||||
|
{description} |
||||||
|
</Typography> |
||||||
|
)} |
||||||
|
<Box sx={{ px: 2 }}> |
||||||
|
<Slider |
||||||
|
value={currentIndex} |
||||||
|
onChange={(_, newValue) => onChange(levels[newValue as number])} |
||||||
|
min={0} |
||||||
|
max={3} |
||||||
|
step={1} |
||||||
|
marks={levels.map((level, index) => ({ |
||||||
|
value: index, |
||||||
|
label: getPrivacyLevelLabel(level), |
||||||
|
}))} |
||||||
|
sx={{ |
||||||
|
color: getPrivacyLevelColor(value), |
||||||
|
'& .MuiSlider-markLabel': { |
||||||
|
fontSize: '0.75rem', |
||||||
|
fontWeight: currentIndex === levels.indexOf(value) ? 600 : 400, |
||||||
|
color: currentIndex === levels.indexOf(value) ? getPrivacyLevelColor(value) : 'text.secondary', |
||||||
|
}, |
||||||
|
'& .MuiSlider-track': { |
||||||
|
border: 'none', |
||||||
|
height: 8, |
||||||
|
}, |
||||||
|
'& .MuiSlider-thumb': { |
||||||
|
height: 20, |
||||||
|
width: 20, |
||||||
|
backgroundColor: getPrivacyLevelColor(value), |
||||||
|
'&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': { |
||||||
|
boxShadow: `0px 0px 0px 8px ${alpha(getPrivacyLevelColor(value), 0.16)}`, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Card> |
||||||
|
<CardContent sx={{ p: 3 }}> |
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}> |
||||||
|
<Security color="primary" /> |
||||||
|
<Typography variant="h6" sx={{ fontWeight: 600 }}> |
||||||
|
Privacy Settings for {rCard.name} |
||||||
|
</Typography> |
||||||
|
<Chip
|
||||||
|
label={rCard.isDefault ? 'Default' : 'Custom'}
|
||||||
|
size="small"
|
||||||
|
variant="outlined" |
||||||
|
color={rCard.isDefault ? 'default' : 'primary'} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
|
||||||
|
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}> |
||||||
|
Configure what information is shared with contacts assigned to this rCard category. |
||||||
|
</Typography> |
||||||
|
|
||||||
|
{/* Key Recovery & Trust Settings */} |
||||||
|
<Box sx={{ mb: 4 }}> |
||||||
|
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}> |
||||||
|
<VpnKey fontSize="small" /> |
||||||
|
Trust & Recovery |
||||||
|
</Typography> |
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}> |
||||||
|
<FormControlLabel |
||||||
|
control={ |
||||||
|
<Switch |
||||||
|
checked={settings.keyRecoveryBuddy} |
||||||
|
onChange={(e) => handleSettingChange('general', 'keyRecoveryBuddy', e.target.checked)} |
||||||
|
/> |
||||||
|
} |
||||||
|
label={ |
||||||
|
<Box> |
||||||
|
<Typography variant="body2" sx={{ fontWeight: 500 }}> |
||||||
|
Key Recovery Buddy |
||||||
|
</Typography> |
||||||
|
<Typography variant="caption" color="text.secondary"> |
||||||
|
Allow contacts in this category to help recover your account |
||||||
|
</Typography> |
||||||
|
</Box> |
||||||
|
} |
||||||
|
/> |
||||||
|
|
||||||
|
<FormControlLabel |
||||||
|
control={ |
||||||
|
<Switch |
||||||
|
checked={settings.circlesTrustedConnection} |
||||||
|
onChange={(e) => handleSettingChange('general', 'circlesTrustedConnection', e.target.checked)} |
||||||
|
/> |
||||||
|
} |
||||||
|
label={ |
||||||
|
<Box> |
||||||
|
<Typography variant="body2" sx={{ fontWeight: 500 }}> |
||||||
|
Circles Trusted Connection |
||||||
|
</Typography> |
||||||
|
<Typography variant="caption" color="text.secondary"> |
||||||
|
Include these contacts in your trusted circle |
||||||
|
</Typography> |
||||||
|
</Box> |
||||||
|
} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
|
||||||
|
<Divider sx={{ my: 3 }} /> |
||||||
|
|
||||||
|
{/* Location Sharing */} |
||||||
|
<Box sx={{ mb: 4 }}> |
||||||
|
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}> |
||||||
|
<LocationOn fontSize="small" /> |
||||||
|
Location Sharing |
||||||
|
</Typography> |
||||||
|
|
||||||
|
<FormControl fullWidth sx={{ mb: 2 }}> |
||||||
|
<InputLabel>Location Sharing Level</InputLabel> |
||||||
|
<Select |
||||||
|
value={settings.locationSharing} |
||||||
|
label="Location Sharing Level" |
||||||
|
onChange={(e) => handleSettingChange('general', 'locationSharing', e.target.value as LocationSharingLevel)} |
||||||
|
> |
||||||
|
<MenuItem value="never">Never</MenuItem> |
||||||
|
<MenuItem value="limited">Limited (On Request)</MenuItem> |
||||||
|
<MenuItem value="always">Always</MenuItem> |
||||||
|
</Select> |
||||||
|
</FormControl> |
||||||
|
|
||||||
|
{settings.locationSharing !== 'never' && ( |
||||||
|
<Box> |
||||||
|
<Typography variant="body2" sx={{ mb: 1 }}> |
||||||
|
Auto-delete location after: {settings.locationDeletionHours} hours |
||||||
|
</Typography> |
||||||
|
<Slider |
||||||
|
value={settings.locationDeletionHours} |
||||||
|
onChange={(_, value) => handleSettingChange('general', 'locationDeletionHours', value)} |
||||||
|
min={1} |
||||||
|
max={48} |
||||||
|
step={1} |
||||||
|
marks={[ |
||||||
|
{ value: 1, label: '1h' }, |
||||||
|
{ value: 8, label: '8h' }, |
||||||
|
{ value: 24, label: '24h' }, |
||||||
|
{ value: 48, label: '48h' }, |
||||||
|
]} |
||||||
|
sx={{ color: 'primary.main', mt: 2 }} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
)} |
||||||
|
</Box> |
||||||
|
|
||||||
|
<Divider sx={{ my: 3 }} /> |
||||||
|
|
||||||
|
{/* Data Sharing */} |
||||||
|
<Box sx={{ mb: 4 }}> |
||||||
|
<Typography variant="h6" sx={{ fontWeight: 600, mb: 3, display: 'flex', alignItems: 'center', gap: 1 }}> |
||||||
|
<Share fontSize="small" /> |
||||||
|
Data Sharing |
||||||
|
</Typography> |
||||||
|
|
||||||
|
<PrivacySlider |
||||||
|
label="Articles" |
||||||
|
value={settings.dataSharing.articles} |
||||||
|
onChange={(value) => handleSettingChange('dataSharing', 'articles', value)} |
||||||
|
description="Control who can see your shared articles and reading preferences" |
||||||
|
/> |
||||||
|
|
||||||
|
<PrivacySlider |
||||||
|
label="Proposals" |
||||||
|
value={settings.dataSharing.proposals} |
||||||
|
onChange={(value) => handleSettingChange('dataSharing', 'proposals', value)} |
||||||
|
description="Manage visibility of your project proposals and business ideas" |
||||||
|
/> |
||||||
|
|
||||||
|
<PrivacySlider |
||||||
|
label="Offers & Wants" |
||||||
|
value={settings.dataSharing.offersAndWants} |
||||||
|
onChange={(value) => handleSettingChange('dataSharing', 'offersAndWants', value)} |
||||||
|
description="Set who can see what you're offering or looking for" |
||||||
|
/> |
||||||
|
|
||||||
|
<PrivacySlider |
||||||
|
label="Gratitude" |
||||||
|
value={settings.dataSharing.gratitude} |
||||||
|
onChange={(value) => handleSettingChange('dataSharing', 'gratitude', value)} |
||||||
|
description="Control sharing of appreciation and gratitude posts" |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
|
||||||
|
<Divider sx={{ my: 3 }} /> |
||||||
|
|
||||||
|
{/* Re-sharing Settings */} |
||||||
|
<Box sx={{ mb: 2 }}> |
||||||
|
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}> |
||||||
|
<Refresh fontSize="small" /> |
||||||
|
Re-sharing |
||||||
|
</Typography> |
||||||
|
|
||||||
|
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}> |
||||||
|
Allow your shared content to be forwarded through your network |
||||||
|
</Typography> |
||||||
|
|
||||||
|
<FormControlLabel |
||||||
|
control={ |
||||||
|
<Switch |
||||||
|
checked={settings.reSharing.enabled} |
||||||
|
onChange={(e) => handleSettingChange('reSharing', 'enabled', e.target.checked)} |
||||||
|
/> |
||||||
|
} |
||||||
|
label="Enable re-sharing of aggregated data" |
||||||
|
sx={{ mb: 3 }} |
||||||
|
/> |
||||||
|
|
||||||
|
{settings.reSharing.enabled && ( |
||||||
|
<Box> |
||||||
|
<Typography variant="body2" sx={{ mb: 2 }}> |
||||||
|
Maximum sharing hops: {settings.reSharing.maxHops} |
||||||
|
</Typography> |
||||||
|
<Slider |
||||||
|
value={settings.reSharing.maxHops} |
||||||
|
onChange={(_, value) => handleSettingChange('reSharing', 'maxHops', value)} |
||||||
|
min={0} |
||||||
|
max={5} |
||||||
|
step={1} |
||||||
|
marks={[ |
||||||
|
{ value: 0, label: '0' }, |
||||||
|
{ value: 1, label: '1' }, |
||||||
|
{ value: 2, label: '2' }, |
||||||
|
{ value: 3, label: '3' }, |
||||||
|
{ value: 4, label: '4' }, |
||||||
|
{ value: 5, label: '5' }, |
||||||
|
]} |
||||||
|
sx={{ color: 'primary.main' }} |
||||||
|
/> |
||||||
|
<Typography variant="caption" color="text.secondary"> |
||||||
|
Your data can be shared up to {settings.reSharing.maxHops} connections away from you |
||||||
|
</Typography> |
||||||
|
</Box> |
||||||
|
)} |
||||||
|
</Box> |
||||||
|
</CardContent> |
||||||
|
</Card> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default RCardPrivacySettings; |
||||||
Loading…
Reference in new issue