forked from
pds.ls/pdsls
atmosphere explorer
rework search shortcut behavior
+26
-8
+25
-5
src/components/search.tsx
+25
-5
src/components/search.tsx
···
1
1
import { Client, simpleFetchHandler } from "@atcute/client";
2
2
import { Nsid } from "@atcute/lexicons";
3
-
import { A, useLocation, useNavigate } from "@solidjs/router";
4
-
import { createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js";
3
+
import { A, useNavigate } from "@solidjs/router";
4
+
import {
5
+
createEffect,
6
+
createResource,
7
+
createSignal,
8
+
For,
9
+
onCleanup,
10
+
onMount,
11
+
Show,
12
+
} from "solid-js";
5
13
import { isTouchDevice } from "../layout";
6
14
import { resolveLexiconAuthority } from "../utils/api";
7
15
import { appHandleLink, appList, appName, AppUrl } from "../utils/app-urls";
···
38
46
39
47
if ((ev.ctrlKey || ev.metaKey) && ev.key == "k") {
40
48
ev.preventDefault();
41
-
setShowSearch(!showSearch());
49
+
50
+
if (showSearch()) {
51
+
const searchInput = document.querySelector("#input") as HTMLInputElement;
52
+
if (searchInput && document.activeElement !== searchInput) {
53
+
searchInput.focus();
54
+
} else {
55
+
setShowSearch(false);
56
+
}
57
+
} else {
58
+
setShowSearch(true);
59
+
}
42
60
} else if (ev.key == "Escape") {
43
61
ev.preventDefault();
44
62
setShowSearch(false);
···
71
89
});
72
90
73
91
onMount(() => {
74
-
if (useLocation().pathname !== "/") searchInput.focus();
75
-
76
92
const handlePaste = (e: ClipboardEvent) => {
77
93
if (e.target === searchInput) return;
78
94
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
···
83
99
84
100
window.addEventListener("paste", handlePaste);
85
101
onCleanup(() => window.removeEventListener("paste", handlePaste));
102
+
});
103
+
104
+
createEffect(() => {
105
+
if (showSearch()) searchInput.focus();
86
106
});
87
107
88
108
const fetchTypeahead = async (input: string) => {
+1
-3
src/layout.tsx
+1
-3
src/layout.tsx
···
128
128
<span>PDSls</span>
129
129
</A>
130
130
<div class="dark:bg-dark-300/60 relative flex items-center gap-0.5 rounded-lg bg-neutral-50/60 px-1 py-0.5">
131
-
<Show when={location.pathname !== "/"}>
132
-
<SearchButton />
133
-
</Show>
131
+
<SearchButton />
134
132
<Show when={hasUserScope("create")}>
135
133
<RecordEditor create={true} />
136
134
</Show>