A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Reader: hide social actions when the companion Bluesky post is gone
The action bar rendered whenever a document carried a bskyPostRef, which
only proves the reference exists — not that the post it points at is still
live. A deleted post left Like/Repost/Quote/Reply buttons and a dead thread
link that couldn't work.
Add a client-side presence gate to the PostActions island: signed-in readers
learn the post is gone from the authenticated getPosts (a null result), and
signed-out readers from a new unauthenticated fetchPostExists() against the
public AppView. The gate is optimistic (shows by default, hides only on a
definitive 'gone') so a transient error never hides a live post. When gone,
the whole block renders nothing — buttons, note, and thread link.
author
Jeremy Herve
date
(Jun 10, 2026, 3:15 PM +0200)
commit
5ede0ead
5ede0ead4cccc153c832a0d083426a57632932ea
parent
8f34577a
8f34577a9aa54b829676c5244e1d9dffe7215c3e
+232
-8
+116
src/components/PostActions.presence.test.tsx
+116
src/components/PostActions.presence.test.tsx
···
1
+
import { describe, it, expect, vi, beforeEach } from 'vitest';
2
+
import { act, createElement } from 'react';
3
+
import { createRoot } from 'react-dom/client';
4
+
import type { Agent } from '@atproto/api';
5
+
6
+
( globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean } ).IS_REACT_ACT_ENVIRONMENT = true;
7
+
8
+
// Mock the orchestration layer so we control whether the companion post "exists".
9
+
const { fetchPostState, fetchPostExists } = vi.hoisted( () => ( {
10
+
fetchPostState: vi.fn(),
11
+
fetchPostExists: vi.fn(),
12
+
} ) );
13
+
vi.mock( '../lib/social/interactions', () => ( { fetchPostState, fetchPostExists } ) );
14
+
15
+
import { ActionsGate } from './PostActions';
16
+
import { AuthContext, type AuthContextValue } from '../lib/auth/AuthProvider';
17
+
18
+
const PROPS = { postUri: 'at://did:plc:writer/app.bsky.feed.post/3kpost', postCid: 'bafypost' };
19
+
20
+
function authValue( overrides: Partial< AuthContextValue > ): AuthContextValue {
21
+
return {
22
+
status: 'signed-out',
23
+
agent: null,
24
+
did: null,
25
+
handle: null,
26
+
displayName: null,
27
+
avatar: null,
28
+
pdsUrl: null,
29
+
error: null,
30
+
signIn: async () => {},
31
+
signOut: async () => {},
32
+
...overrides,
33
+
};
34
+
}
35
+
36
+
/** Mount ActionsGate under a hand-rolled auth context and flush its effects. */
37
+
async function mountGate( auth: Partial< AuthContextValue > ): Promise< { html: string; cleanup: () => void } > {
38
+
const container = document.createElement( 'div' );
39
+
document.body.appendChild( container );
40
+
const root = createRoot( container );
41
+
await act( async () => {
42
+
root.render(
43
+
createElement(
44
+
AuthContext.Provider,
45
+
{ value: authValue( auth ) },
46
+
createElement( ActionsGate, PROPS )
47
+
)
48
+
);
49
+
} );
50
+
return {
51
+
html: container.innerHTML,
52
+
cleanup: () => {
53
+
root.unmount();
54
+
container.remove();
55
+
},
56
+
};
57
+
}
58
+
59
+
beforeEach( () => {
60
+
fetchPostState.mockReset();
61
+
fetchPostExists.mockReset();
62
+
} );
63
+
64
+
describe( 'PostActions presence gate', () => {
65
+
it( 'renders nothing when the companion post is gone (signed in)', async () => {
66
+
fetchPostState.mockResolvedValue( null ); // getPosts found no post
67
+
const { html, cleanup } = await mountGate( {
68
+
status: 'signed-in',
69
+
agent: {} as Agent,
70
+
did: 'did:plc:reader',
71
+
handle: 'reader.test',
72
+
} );
73
+
expect( html ).toBe( '' );
74
+
cleanup();
75
+
} );
76
+
77
+
it( 'renders nothing when the companion post is gone (signed out)', async () => {
78
+
fetchPostExists.mockResolvedValue( false ); // public AppView says: deleted
79
+
const { html, cleanup } = await mountGate( { status: 'signed-out' } );
80
+
expect( html ).toBe( '' );
81
+
cleanup();
82
+
} );
83
+
84
+
it( 'keeps the action bar when the post exists (signed in)', async () => {
85
+
fetchPostState.mockResolvedValue( {
86
+
likeCount: 0,
87
+
repostCount: 0,
88
+
replyCount: 0,
89
+
viewerLikeUri: null,
90
+
viewerRepostUri: null,
91
+
} );
92
+
const { html, cleanup } = await mountGate( {
93
+
status: 'signed-in',
94
+
agent: {} as Agent,
95
+
did: 'did:plc:reader',
96
+
handle: 'reader.test',
97
+
} );
98
+
expect( html ).toContain( 'Like' );
99
+
expect( html ).toContain( 'Reply' );
100
+
cleanup();
101
+
} );
102
+
103
+
it( 'keeps the sign-in prompt when the post exists (signed out)', async () => {
104
+
fetchPostExists.mockResolvedValue( true );
105
+
const { html, cleanup } = await mountGate( { status: 'signed-out' } );
106
+
expect( html ).toContain( 'Sign in to react' );
107
+
cleanup();
108
+
} );
109
+
110
+
it( 'keeps the action bar when existence is undetermined (signed out, network error → fail open)', async () => {
111
+
fetchPostExists.mockResolvedValue( null );
112
+
const { html, cleanup } = await mountGate( { status: 'signed-out' } );
113
+
expect( html ).toContain( 'Sign in to react' );
114
+
cleanup();
115
+
} );
116
+
} );
+37
-8
src/components/PostActions.tsx
+37
-8
src/components/PostActions.tsx
···
9
9
postReply,
10
10
postQuote,
11
11
fetchPostState,
12
+
fetchPostExists,
12
13
type PostState,
13
14
} from '../lib/social/interactions';
14
15
import {
···
46
47
const subject: StrongRef = { uri: postUri, cid: postCid };
47
48
48
49
const [ state, setState ] = useState< PostState | null >( null );
50
+
// Whether the companion Bluesky post still exists. Optimistic: we show the bar and only
51
+
// hide it once a read confirms the post is gone — a transient error must never hide a
52
+
// live post, and this keeps the common (post present) case flicker-free.
53
+
const [ present, setPresent ] = useState( true );
49
54
const [ busy, setBusy ] = useState< null | 'like' | 'repost' >( null );
50
55
const [ composer, setComposer ] = useState< Composer >( null );
51
56
const [ text, setText ] = useState( '' );
···
60
65
mounted.current = false;
61
66
}, [] );
62
67
63
-
// Load counts + viewer state once signed in (and refresh after each write).
68
+
// Resolve the companion post once auth settles: signed-in readers get counts + viewer
69
+
// state from an authenticated read (a `null` result means the post is gone); signed-out
70
+
// readers get an unauthenticated existence check (only a definitive `false` hides the
71
+
// bar — `true`/`null` keep it, so a transient error fails open).
64
72
useEffect( () => {
65
-
if ( status !== 'signed-in' || ! agent ) {
66
-
return;
73
+
if ( status === 'loading' ) {
74
+
return; // wait for auth before choosing the read path
67
75
}
68
76
let cancelled = false;
69
-
fetchPostState( agent, postUri )
70
-
.then( ( next ) => ! cancelled && next && setState( next ) )
71
-
.catch( () => {
72
-
/* counts are best-effort; the action buttons still work */
73
-
} );
77
+
if ( status === 'signed-in' && agent ) {
78
+
fetchPostState( agent, postUri )
79
+
.then( ( next ) => {
80
+
if ( cancelled ) {
81
+
return;
82
+
}
83
+
if ( next ) {
84
+
setState( next );
85
+
} else {
86
+
setPresent( false ); // getPosts found no post → deleted/unindexed
87
+
}
88
+
} )
89
+
.catch( () => {
90
+
/* counts are best-effort; fail open — the action buttons still work */
91
+
} );
92
+
} else {
93
+
fetchPostExists( postUri )
94
+
.then( ( exists ) => ! cancelled && exists === false && setPresent( false ) )
95
+
.catch( () => {} );
96
+
}
74
97
return () => {
75
98
cancelled = true;
76
99
};
···
158
181
159
182
if ( status === 'loading' ) {
160
183
return <div className="post-actions post-actions--loading">Loading actions…</div>;
184
+
}
185
+
186
+
// The companion post is gone — there's no live Bluesky thread to act on, so render
187
+
// nothing rather than buttons / a sign-in prompt / a dead thread link that won't work.
188
+
if ( ! present ) {
189
+
return null;
161
190
}
162
191
163
192
const threadUrl = bskyPostWebUrl( postUri );