Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
1.3 kB · 40 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041import { useCallback, useRef } from 'react';import { useNavigate } from 'react-router-dom';import { usePostViewer } from './usePostViewer';import { useNavigationMemory } from './useNavigationMemory';import { usePostLabels } from '../settings/usePostLabels';import PostThreadInline from './PostThreadInline';import './PostViewerSide.css';
export default function PostViewerSide() { 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 === 'side';
const handleClose = useCallback(() => { navigate(mainContentPathRef.current, { replace: true }); close(); }, [navigate, close]);
if (!isOpen) return null;
return ( <div className="post-side-panel open"> <div className="post-side-header"> <span className="post-side-title">{label('post', false, true)}</span> <button className="post-side-close" onClick={handleClose}> ✕ </button> </div> <div className="post-side-body"> <PostThreadInline key={activePostUri} uri={activePostUri!} /> </div> </div> );}