forked from
pds.ls/pdsls
atmosphere explorer
floating filter collection input
+26
-27
+26
-27
src/views/repo.tsx
+26
-27
src/views/repo.tsx
···
9
9
createSignal,
10
10
ErrorBoundary,
11
11
For,
12
-
onMount,
13
12
Show,
14
13
Suspense,
15
14
} from "solid-js";
···
29
28
removeNotification,
30
29
updateNotification,
31
30
} from "../components/notification.jsx";
32
-
import { TextInput } from "../components/text-input.jsx";
33
31
import Tooltip from "../components/tooltip.jsx";
34
32
import {
35
33
didDocCache,
···
53
51
const [didDoc, setDidDoc] = createSignal<DidDocument>();
54
52
const [nsids, setNsids] = createSignal<Record<string, { hidden: boolean; nsids: string[] }>>();
55
53
const [filter, setFilter] = createSignal<string>();
56
-
const [showFilter, setShowFilter] = createSignal(false);
57
54
const [validHandles, setValidHandles] = createStore<Record<string, boolean>>({});
58
55
const [rotationKeys, setRotationKeys] = createSignal<Array<string>>([]);
59
56
let rpc: Client;
···
328
325
</Show>
329
326
<MenuProvider>
330
327
<DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-sm p-1.5">
331
-
<Show
332
-
when={!error() && (!location.hash || location.hash.startsWith("#collections"))}
333
-
>
334
-
<ActionMenu
335
-
label="Filter collections"
336
-
icon="lucide--filter"
337
-
onClick={() => setShowFilter(!showFilter())}
338
-
/>
339
-
</Show>
340
328
<CopyMenu content={params.repo!} label="Copy DID" icon="lucide--copy" />
341
329
<NavMenu
342
330
href={`/jetstream?dids=${params.repo}`}
···
423
411
</ErrorBoundary>
424
412
</Show>
425
413
<Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
426
-
<Show when={showFilter()}>
427
-
<TextInput
428
-
name="filter"
429
-
placeholder="Filter collections"
430
-
onInput={(e) => setFilter(e.currentTarget.value.toLowerCase())}
431
-
class="grow"
432
-
ref={(node) => {
433
-
onMount(() => node.focus());
434
-
}}
435
-
/>
436
-
</Show>
437
-
<div
438
-
class="flex flex-col text-sm wrap-anywhere"
439
-
classList={{ "-mt-1": !showFilter() }}
440
-
>
414
+
<div class="flex flex-col pb-16 text-sm wrap-anywhere">
441
415
<Show
442
416
when={Object.keys(nsids() ?? {}).length != 0}
443
417
fallback={<span class="mt-3 text-center text-base">No collections found.</span>}
···
647
621
)}
648
622
</Show>
649
623
</Show>
624
+
</div>
625
+
</div>
626
+
</Show>
627
+
628
+
<Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
629
+
<div class="fixed bottom-12 z-10 w-full max-w-lg">
630
+
<div
631
+
class="dark:bg-dark-200 dark:shadow-dark-700 mx-3 flex cursor-text items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 shadow-md dark:border-neutral-700"
632
+
onClick={(e) => {
633
+
const input = e.currentTarget.querySelector("input");
634
+
input?.focus();
635
+
}}
636
+
>
637
+
<span class="iconify lucide--filter text-neutral-500 dark:text-neutral-400"></span>
638
+
<input
639
+
type="text"
640
+
spellcheck={false}
641
+
autocapitalize="off"
642
+
autocomplete="off"
643
+
class="grow py-2.5 select-none placeholder:text-sm focus:outline-none"
644
+
name="filter"
645
+
placeholder="Filter collections..."
646
+
value={filter() ?? ""}
647
+
onInput={(e) => setFilter(e.currentTarget.value.toLowerCase())}
648
+
/>
650
649
</div>
651
650
</div>
652
651
</Show>