feat: Implement end-to-end encrypted chat with new API routes, crypto utilities, and UI components.

This commit is contained in:
Christopher
2026-01-27 17:59:08 -08:00
parent 5903022f8a
commit 9ee0cbbb9a
20 changed files with 1715 additions and 1525 deletions
+10 -10
View File
@@ -26,7 +26,7 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!password.trim()) {
setError('Please enter your password');
return;
@@ -37,7 +37,7 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
try {
await unlockIdentity(password);
// Success! Call the onUnlock callback if provided
if (onUnlock) {
onUnlock();
@@ -70,7 +70,7 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 1000,
zIndex: 99999,
padding: '16px'
}}
onClick={handleCancel}
@@ -110,10 +110,10 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
{/* Form */}
<form onSubmit={handleSubmit}>
<div style={{ marginBottom: '16px' }}>
<label
<label
htmlFor="unlock-password"
style={{
display: 'block',
style={{
display: 'block',
marginBottom: '8px',
fontSize: '14px',
fontWeight: 500,
@@ -181,7 +181,7 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
type="submit"
disabled={isUnlocking || !password.trim()}
className="btn btn-primary"
style={{
style={{
flex: 1,
display: 'flex',
alignItems: 'center',
@@ -211,9 +211,9 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
</form>
{/* Info Note */}
<p style={{
fontSize: '12px',
color: 'var(--foreground-tertiary)',
<p style={{
fontSize: '12px',
color: 'var(--foreground-tertiary)',
marginTop: '16px',
marginBottom: 0,
lineHeight: 1.4
+10 -1
View File
@@ -4,9 +4,10 @@ import { usePathname } from 'next/navigation';
import { Sidebar } from './Sidebar';
import { RightSidebar } from './RightSidebar';
import { useAuth } from '@/lib/contexts/AuthContext';
import { IdentityUnlockPrompt } from './IdentityUnlockPrompt';
export function LayoutWrapper({ children }: { children: React.ReactNode }) {
const { loading } = useAuth();
const { loading, showUnlockPrompt, setShowUnlockPrompt } = useAuth();
const pathname = usePathname();
// Paths that should NOT have the app layout
@@ -56,6 +57,14 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
{children}
</main>
{!hideRightSidebar && <RightSidebar />}
{/* Global Identity Unlock Prompt */}
{showUnlockPrompt && (
<IdentityUnlockPrompt
onUnlock={() => setShowUnlockPrompt(false)}
onCancel={() => setShowUnlockPrompt(false)}
/>
)}
</div>
);
}
+18 -24
View File
@@ -11,6 +11,7 @@ import { useToast } from '@/lib/contexts/ToastContext';
import { VideoEmbed } from '@/components/VideoEmbed';
import BlurredVideo from '@/components/BlurredVideo';
import { formatFullHandle, NODE_DOMAIN } from '@/lib/utils/handle';
import { signedAPI } from '@/lib/api/signed-fetch';
// Component for link preview image that hides on error
function LinkPreviewImage({ src, alt }: { src: string; alt: string }) {
@@ -43,7 +44,7 @@ interface PostCardProps {
}
export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide, isDetail, showThread = true, isThreadParent, parentPostAuthorId }: PostCardProps) {
const { user: currentUser } = useAuth();
const { user: currentUser, did, handle: currentUserHandle } = useAuth();
const { showToast } = useToast();
const router = useRouter();
const [liked, setLiked] = useState(post.isLiked || false);
@@ -113,14 +114,16 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
e.stopPropagation();
if (reporting) return;
const reason = window.prompt('Why are you reporting this post?');
if (!reason) return;
if (!reason || !did || !currentUserHandle) return;
setReporting(true);
try {
const res = await fetch('/api/reports', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ targetType: 'post', targetId: post.id, reason }),
});
const res = await signedAPI.report(
'post',
post.id,
reason,
did,
currentUserHandle
);
if (!res.ok) {
if (res.status === 401) {
showToast('Please log in to report.', 'error');
@@ -141,11 +144,10 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
e.stopPropagation();
if (deleting) return;
if (!window.confirm('Are you sure you want to delete this post? This action cannot be undone.')) return;
if (!did || !currentUserHandle) return;
setDeleting(true);
try {
const res = await fetch(`/api/posts/${post.id}`, {
method: 'DELETE',
});
const res = await signedAPI.deletePost(post.id, did, currentUserHandle);
if (res.ok) {
onDelete?.(post.id);
} else {
@@ -164,15 +166,13 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
e.stopPropagation();
setShowMenu(false);
if (!currentUser) {
if (!currentUser || !did || !currentUserHandle) {
showToast('Please log in to block users', 'error');
return;
}
try {
const res = await fetch(`/api/users/${post.author.handle}/block`, {
method: 'POST',
});
const res = await signedAPI.blockUser(post.author.handle, did, currentUserHandle);
if (res.ok) {
showToast(`Blocked @${post.author.handle}`, 'success');
onHide?.(post.id);
@@ -189,7 +189,7 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
e.stopPropagation();
setShowMenu(false);
if (!currentUser) {
if (!currentUser || !did || !currentUserHandle) {
showToast('Please log in to mute users', 'error');
return;
}
@@ -197,9 +197,7 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
// For now, muting a user is the same as blocking but with different messaging
// Could be expanded to just hide posts without breaking follows
try {
const res = await fetch(`/api/users/${post.author.handle}/block`, {
method: 'POST',
});
const res = await signedAPI.blockUser(post.author.handle, did, currentUserHandle);
if (res.ok) {
showToast(`Muted @${post.author.handle}`, 'success');
onHide?.(post.id);
@@ -216,7 +214,7 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
e.stopPropagation();
setShowMenu(false);
if (!currentUser) {
if (!currentUser || !did || !currentUserHandle) {
showToast('Please log in to mute nodes', 'error');
return;
}
@@ -232,11 +230,7 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
}
try {
const res = await fetch('/api/settings/muted-nodes', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ domain: nodeDomain }),
});
const res = await signedAPI.muteNode(nodeDomain, did, currentUserHandle);
if (res.ok) {
showToast(`Muted node: ${nodeDomain}`, 'success');
onHide?.(post.id);
+14 -21
View File
@@ -8,17 +8,16 @@ import { useAuth } from '@/lib/contexts/AuthContext';
import { HomeIcon, SearchIcon, BellIcon, UserIcon, ShieldIcon, SettingsIcon, BotIcon } from './Icons';
import { formatFullHandle } from '@/lib/utils/handle';
import { LogOut, Settings2, Lock, Unlock } from 'lucide-react';
import { IdentityUnlockPrompt } from './IdentityUnlockPrompt';
// import { IdentityUnlockPrompt } from './IdentityUnlockPrompt'; // Moved to LayoutWrapper
export function Sidebar() {
const { user, isAdmin, logout, isIdentityUnlocked } = useAuth();
const { user, isAdmin, logout, isIdentityUnlocked, setShowUnlockPrompt } = useAuth();
const pathname = usePathname();
const router = useRouter();
const [customLogoUrl, setCustomLogoUrl] = useState<string | null | undefined>(undefined);
const [unreadCount, setUnreadCount] = useState(0);
const [unreadChatCount, setUnreadChatCount] = useState(0);
const [loggingOut, setLoggingOut] = useState(false);
const [showUnlockPrompt, setShowUnlockPrompt] = useState(false);
useEffect(() => {
fetch('/api/node')
@@ -190,7 +189,7 @@ export function Sidebar() {
<div style={{ color: 'var(--foreground-tertiary)', fontSize: '13px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{formatFullHandle(user.handle)}</div>
</div>
</div>
{/* Identity Status Indicator */}
<div
onClick={() => {
@@ -206,8 +205,8 @@ export function Sidebar() {
padding: '10px 12px',
marginBottom: '12px',
borderRadius: '8px',
background: isIdentityUnlocked
? 'rgba(34, 197, 94, 0.1)'
background: isIdentityUnlocked
? 'rgba(34, 197, 94, 0.1)'
: 'rgba(251, 191, 36, 0.1)',
border: isIdentityUnlocked
? '1px solid rgba(34, 197, 94, 0.2)'
@@ -232,8 +231,8 @@ export function Sidebar() {
<Lock size={16} style={{ color: 'rgb(251, 191, 36)', flexShrink: 0 }} />
)}
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{
fontSize: '13px',
<div style={{
fontSize: '13px',
fontWeight: 500,
color: isIdentityUnlocked ? 'rgb(34, 197, 94)' : 'rgb(251, 191, 36)',
overflow: 'hidden',
@@ -242,20 +241,20 @@ export function Sidebar() {
}}>
{isIdentityUnlocked ? 'Identity Unlocked' : 'Identity Locked'}
</div>
<div style={{
fontSize: '11px',
<div style={{
fontSize: '11px',
color: 'var(--foreground-tertiary)',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}}>
{isIdentityUnlocked
? 'You can perform actions'
{isIdentityUnlocked
? 'You can perform actions'
: 'Click to unlock'}
</div>
</div>
</div>
<button
onClick={handleLogout}
disabled={loggingOut}
@@ -273,14 +272,8 @@ export function Sidebar() {
</button>
</div>
)}
{/* Identity Unlock Prompt Modal */}
{showUnlockPrompt && (
<IdentityUnlockPrompt
onUnlock={() => setShowUnlockPrompt(false)}
onCancel={() => setShowUnlockPrompt(false)}
/>
)}
{/* Identity Unlock Prompt Modal is now handled in LayoutWrapper */}
</aside>
);
}