feat: Implement end-to-end encrypted chat with new API routes, crypto utilities, and UI components.
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
@@ -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
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user