forked from
pds.ls/pdsls
atproto explorer
fix stream view scrolling
+78
-73
+78
-73
src/views/stream.tsx
+78
-73
src/views/stream.tsx
···
148
148
onCleanup(() => socket?.close());
149
149
150
150
return (
151
-
<div class="mt-2 flex flex-col items-center gap-y-3">
151
+
<div class="mt-2 flex flex-col items-center">
152
152
<div class="flex gap-2 text-sm">
153
153
<A
154
154
class="flex items-center gap-1 border-b-2 p-1"
···
167
167
Firehose
168
168
</A>
169
169
</div>
170
-
<form ref={formRef} class="flex flex-col gap-y-2 text-sm">
171
-
<Show when={!connected()}>
172
-
<label class="flex items-center justify-end gap-x-2">
173
-
<span>Instance</span>
174
-
<TextInput
175
-
name="instance"
176
-
value={
177
-
searchParams.instance ??
178
-
(streamType === StreamType.JETSTREAM ?
179
-
"wss://jetstream1.us-east.bsky.network/subscribe"
180
-
: "wss://bsky.network")
181
-
}
182
-
class="w-16rem"
183
-
/>
184
-
</label>
185
-
<Show when={streamType === StreamType.JETSTREAM}>
170
+
<form
171
+
ref={formRef}
172
+
class="z-5 dark:bg-dark-500/70 backdrop-blur-xs sticky top-0 flex w-screen flex-col items-center bg-neutral-100/70 px-4 text-sm"
173
+
>
174
+
<div class="flex flex-col gap-2 py-3">
175
+
<Show when={!connected()}>
186
176
<label class="flex items-center justify-end gap-x-2">
187
-
<span>Collections</span>
188
-
<textarea
189
-
name="collections"
190
-
spellcheck={false}
191
-
placeholder="Comma-separated list of collections"
192
-
value={searchParams.collections ?? ""}
193
-
class="w-16rem dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900/80 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-neutral-900 dark:focus:outline-neutral-200"
177
+
<span>Instance</span>
178
+
<TextInput
179
+
name="instance"
180
+
value={
181
+
searchParams.instance ??
182
+
(streamType === StreamType.JETSTREAM ?
183
+
"wss://jetstream1.us-east.bsky.network/subscribe"
184
+
: "wss://bsky.network")
185
+
}
186
+
class="w-16rem"
194
187
/>
195
188
</label>
196
-
</Show>
197
-
<Show when={streamType === StreamType.JETSTREAM}>
189
+
<Show when={streamType === StreamType.JETSTREAM}>
190
+
<label class="flex items-center justify-end gap-x-2">
191
+
<span>Collections</span>
192
+
<textarea
193
+
name="collections"
194
+
spellcheck={false}
195
+
placeholder="Comma-separated list of collections"
196
+
value={searchParams.collections ?? ""}
197
+
class="w-16rem dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900/80 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-neutral-900 dark:focus:outline-neutral-200"
198
+
/>
199
+
</label>
200
+
</Show>
201
+
<Show when={streamType === StreamType.JETSTREAM}>
202
+
<label class="flex items-center justify-end gap-x-2">
203
+
<span>DIDs</span>
204
+
<textarea
205
+
name="dids"
206
+
spellcheck={false}
207
+
placeholder="Comma-separated list of DIDs"
208
+
value={searchParams.dids ?? ""}
209
+
class="w-16rem dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900/80 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-neutral-900 dark:focus:outline-neutral-200"
210
+
/>
211
+
</label>
212
+
</Show>
198
213
<label class="flex items-center justify-end gap-x-2">
199
-
<span>DIDs</span>
200
-
<textarea
201
-
name="dids"
202
-
spellcheck={false}
203
-
placeholder="Comma-separated list of DIDs"
204
-
value={searchParams.dids ?? ""}
205
-
class="w-16rem dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900/80 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-neutral-900 dark:focus:outline-neutral-200"
214
+
<span>Cursor</span>
215
+
<TextInput
216
+
name="cursor"
217
+
placeholder="Leave empty for live-tail"
218
+
value={searchParams.cursor ?? ""}
219
+
class="w-16rem"
206
220
/>
207
221
</label>
222
+
<Show when={streamType === StreamType.JETSTREAM}>
223
+
<div class="flex items-center justify-end gap-x-1">
224
+
<input
225
+
type="checkbox"
226
+
name="allEvents"
227
+
id="allEvents"
228
+
checked={searchParams.allEvents === "on" ? true : false}
229
+
onChange={(e) => setAllEvents(e.currentTarget.checked)}
230
+
/>
231
+
<label for="allEvents" class="select-none">
232
+
Show account and identity events
233
+
</label>
234
+
</div>
235
+
</Show>
208
236
</Show>
209
-
<label class="flex items-center justify-end gap-x-2">
210
-
<span>Cursor</span>
211
-
<TextInput
212
-
name="cursor"
213
-
placeholder="Leave empty for live-tail"
214
-
value={searchParams.cursor ?? ""}
215
-
class="w-16rem"
216
-
/>
217
-
</label>
218
-
<Show when={streamType === StreamType.JETSTREAM}>
219
-
<div class="flex items-center justify-end gap-x-1">
220
-
<input
221
-
type="checkbox"
222
-
name="allEvents"
223
-
id="allEvents"
224
-
checked={searchParams.allEvents === "on" ? true : false}
225
-
onChange={(e) => setAllEvents(e.currentTarget.checked)}
226
-
/>
227
-
<label for="allEvents" class="select-none">
228
-
Show account and identity events
229
-
</label>
237
+
<Show when={connected()}>
238
+
<div class="break-anywhere flex flex-col gap-1">
239
+
<For each={parameters()}>
240
+
{(param) => (
241
+
<Show when={param.param}>
242
+
<div class="flex">
243
+
<div class="min-w-6rem font-semibold">{param.name}</div>
244
+
{param.param}
245
+
</div>
246
+
</Show>
247
+
)}
248
+
</For>
230
249
</div>
231
250
</Show>
232
-
</Show>
233
-
<Show when={connected()}>
234
-
<div class="break-anywhere flex flex-col gap-1">
235
-
<For each={parameters()}>
236
-
{(param) => (
237
-
<Show when={param.param}>
238
-
<div class="flex">
239
-
<div class="min-w-6rem font-semibold">{param.name}</div>
240
-
{param.param}
241
-
</div>
242
-
</Show>
243
-
)}
244
-
</For>
251
+
<div class="flex justify-end">
252
+
<Button onClick={() => connectSocket(new FormData(formRef))}>
253
+
{connected() ? "Disconnect" : "Connect"}
254
+
</Button>
245
255
</div>
246
-
</Show>
247
-
<div class="flex justify-end">
248
-
<Button onClick={() => connectSocket(new FormData(formRef))}>
249
-
{connected() ? "Disconnect" : "Connect"}
250
-
</Button>
251
256
</div>
252
257
</form>
253
258
<Show when={notice().length}>
254
259
<div class="text-red-500 dark:text-red-400">{notice()}</div>
255
260
</Show>
256
-
<div class="break-anywhere md:w-screen-md divide-y-0.5 flex h-screen w-full flex-col gap-2 divide-neutral-500 overflow-auto whitespace-pre-wrap pl-4 font-mono text-sm">
261
+
<div class="break-anywhere md:w-screen-md divide-y-0.5 flex w-full flex-col gap-2 divide-neutral-500 whitespace-pre-wrap px-4 font-mono text-sm">
257
262
<For each={records().toReversed()}>
258
263
{(rec) => (
259
264
<div class="pb-2">