forked from
pds.ls/pdsls
atmosphere explorer
add filter shortcut
+25
+25
src/views/repo.tsx
+25
src/views/repo.tsx
···
9
9
createSignal,
10
10
ErrorBoundary,
11
11
For,
12
+
onCleanup,
13
+
onMount,
12
14
Show,
13
15
Suspense,
14
16
} from "solid-js";
···
62
64
} | null>(null);
63
65
let rpc: Client;
64
66
let pds: string;
67
+
let filterInputRef: HTMLInputElement | undefined;
65
68
const did = params.repo!;
66
69
67
70
// Handle scrolling to a collection group when hash is like #collections:app.bsky
···
74
77
if (element) element.scrollIntoView({ behavior: "instant", block: "start" });
75
78
});
76
79
}
80
+
});
81
+
82
+
onMount(() => {
83
+
const handleKeyDown = (e: KeyboardEvent) => {
84
+
if (
85
+
e.key === "/" &&
86
+
!["INPUT", "TEXTAREA"].includes((e.target as HTMLElement)?.tagName) &&
87
+
!document.querySelector("[data-modal]")
88
+
) {
89
+
e.preventDefault();
90
+
filterInputRef?.focus();
91
+
}
92
+
};
93
+
94
+
document.addEventListener("keydown", handleKeyDown);
95
+
onCleanup(() => document.removeEventListener("keydown", handleKeyDown));
77
96
});
78
97
79
98
const RepoTab = (props: {
···
754
773
>
755
774
<span class="iconify lucide--filter text-neutral-500 dark:text-neutral-400"></span>
756
775
<input
776
+
ref={filterInputRef}
757
777
type="text"
758
778
spellcheck={false}
759
779
autocapitalize="off"
···
764
784
value={filter() ?? ""}
765
785
onInput={(e) => setFilter(e.currentTarget.value.toLowerCase())}
766
786
/>
787
+
<Show when={!filter()}>
788
+
<kbd class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 font-mono text-xs text-neutral-400 select-none dark:border-neutral-600 dark:bg-neutral-700">
789
+
/
790
+
</kbd>
791
+
</Show>
767
792
</div>
768
793
</div>
769
794
</Show>