Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
2.0 kB · 63 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import { useCallback, useEffect, useRef } from 'react';import { useNavigate } from 'react-router-dom';import { usePostViewer } from './usePostViewer';import { useNavigationMemory } from './useNavigationMemory';import { lightboxOpenRef } from '../utils/lightboxState';import { usePostLabels } from '../settings/usePostLabels';
import PostThreadInline from './PostThreadInline';import './PostViewerModal.css';
export default function PostViewerModal() { const { activePostUri, mode, close } = usePostViewer(); const navigate = useNavigate(); const { mainContentPath } = useNavigationMemory(); const { t: label } = usePostLabels();
const mainContentPathRef = useRef(mainContentPath); mainContentPathRef.current = mainContentPath;
const isOpen = activePostUri !== null && mode === 'modal';
const handleClose = useCallback(() => { navigate(mainContentPathRef.current, { replace: true }); close(); }, [navigate, close]);
useEffect(() => { if (!isOpen) return; const handler = (e: KeyboardEvent) => { if (e.key === 'Escape' && !lightboxOpenRef.current) handleClose(); }; window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler); }, [isOpen, handleClose]);
useEffect(() => { if (!isOpen) return; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, [isOpen]);
if (!isOpen) return null;
return ( <div className="post-modal-overlay" onClick={handleClose}> <div className="post-modal-content" onClick={(e) => e.stopPropagation()} > <div className="post-modal-header"> <span className="post-modal-title">{label('post', false, true)}</span> <button className="post-modal-close" onClick={handleClose}> ✕ </button> </div> <div className="post-modal-body"> <PostThreadInline key={activePostUri} uri={activePostUri!} /> </div> </div> </div> );}