Jannis Braun
b194cc1915
- Add "Discover People" section to Add Friend tab with user cards, mutual counts, and inline actions - Add discoverStore for fetching/searching discoverable users across local and federated instances - Add PrivacyPanel to user settings with discoverability toggle - Add is_discoverable column to users table with migration - Fix "Send Friend Request" button vertical alignment using transform centering
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useAuthStore } from '../../../stores/authStore';
|
|
import { api } from '../../../api/client';
|
|
import { Toggle } from '../../ui/Toggle';
|
|
|
|
export function PrivacyPanel() {
|
|
const user = useAuthStore((s) => s.user);
|
|
const setUser = useAuthStore((s) => s.setUser);
|
|
const [discoverable, setDiscoverable] = useState(user?.discoverable !== false);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setDiscoverable(user?.discoverable !== false);
|
|
}, [user?.discoverable]);
|
|
|
|
const handleToggle = async (enabled: boolean) => {
|
|
setDiscoverable(enabled);
|
|
setSaving(true);
|
|
try {
|
|
const updated = await api.users.update({ discoverable: enabled });
|
|
setUser(updated);
|
|
} catch {
|
|
// Revert on failure
|
|
setDiscoverable(!enabled);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<div>
|
|
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
|
|
Discovery
|
|
</div>
|
|
<div className="rounded-lg bg-white/[0.03] border border-white/[0.04] p-3.5">
|
|
<div className="flex items-center justify-between py-1">
|
|
<div className="flex-1 mr-4">
|
|
<div className="text-sm text-txt-primary">Allow others to find my profile</div>
|
|
<div className="text-xs text-txt-tertiary mt-0.5">
|
|
When enabled, your profile appears in Discover People. Others can always add you by exact username.
|
|
</div>
|
|
</div>
|
|
<Toggle enabled={discoverable} onChange={handleToggle} />
|
|
</div>
|
|
{saving && (
|
|
<div className="text-xs text-txt-tertiary mt-2">Saving...</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|