vielle.dev
forked from
pds.ls/pdsls
atproto explorer
jetstream sticky form
handle.invalid
+9
-11
src/views/stream.tsx
+9
-11
src/views/stream.tsx
···
3
3
import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
4
4
import { Button } from "../components/button";
5
5
import { JSONValue } from "../components/json";
6
+
import { StickyOverlay } from "../components/sticky";
6
7
import { TextInput } from "../components/text-input";
7
8
8
9
const LIMIT = 25;
···
167
168
Firehose
168
169
</A>
169
170
</div>
170
-
<form
171
-
ref={formRef}
172
-
class="dark:bg-dark-500 sticky top-0 z-5 flex w-screen flex-col items-center bg-neutral-100 px-4 text-sm"
173
-
>
174
-
<div class="flex w-[22rem] flex-col gap-2 py-3 sm:w-[24rem]">
171
+
<StickyOverlay>
172
+
<form ref={formRef} class="flex w-[22rem] flex-col gap-1 text-sm sm:w-[24rem]">
175
173
<Show when={!connected()}>
176
-
<label class="flex items-center justify-end gap-x-2">
174
+
<label class="flex items-center justify-end gap-x-1">
177
175
<span class="min-w-[5rem]">Instance</span>
178
176
<TextInput
179
177
name="instance"
···
187
185
/>
188
186
</label>
189
187
<Show when={streamType === StreamType.JETSTREAM}>
190
-
<label class="flex items-center justify-end gap-x-2">
188
+
<label class="flex items-center justify-end gap-x-1">
191
189
<span class="min-w-[5rem]">Collections</span>
192
190
<textarea
193
191
name="collections"
···
199
197
</label>
200
198
</Show>
201
199
<Show when={streamType === StreamType.JETSTREAM}>
202
-
<label class="flex items-center justify-end gap-x-2">
200
+
<label class="flex items-center justify-end gap-x-1">
203
201
<span class="min-w-[5rem]">DIDs</span>
204
202
<textarea
205
203
name="dids"
···
210
208
/>
211
209
</label>
212
210
</Show>
213
-
<label class="flex items-center justify-end gap-x-2">
211
+
<label class="flex items-center justify-end gap-x-1">
214
212
<span class="min-w-[5rem]">Cursor</span>
215
213
<TextInput
216
214
name="cursor"
···
253
251
{connected() ? "Disconnect" : "Connect"}
254
252
</Button>
255
253
</div>
256
-
</div>
257
-
</form>
254
+
</form>
255
+
</StickyOverlay>
258
256
<Show when={notice().length}>
259
257
<div class="text-red-500 dark:text-red-400">{notice()}</div>
260
258
</Show>