Retro Bulletin Board Systems on atproto. Web app and TUI.
lazy mirror of alyraffauf/atbbs
atbbs.xyz
forums
python
tui
atproto
bbs
web: cleanup dropdowns
+10
-17
+4
-6
web/src/components/DialBBS.tsx
+4
-6
web/src/components/DialBBS.tsx
···
49
49
resolved,
50
50
);
51
51
52
-
const dropdown = useDropdown(visibleSuggestions.length);
52
+
const dropdown = useDropdown(visibleSuggestions.length, (index) =>
53
+
navigate(visibleSuggestions[index].to),
54
+
);
53
55
const dropdownOpen = dropdown.focused && visibleSuggestions.length > 0;
54
56
55
57
function onSubmit(event: SyntheticEvent) {
···
72
74
<div
73
75
onFocus={dropdown.onFocus}
74
76
onBlur={dropdown.onBlur}
75
-
onKeyDown={(event) =>
76
-
dropdown.onKeyDown(event, (index) =>
77
-
navigate(visibleSuggestions[index].to),
78
-
)
79
-
}
77
+
onKeyDown={dropdown.onKeyDown}
80
78
>
81
79
<form onSubmit={onSubmit} className="flex flex-col sm:flex-row gap-2">
82
80
<HandleInput
+2
-5
web/src/hooks/useDropdown.ts
+2
-5
web/src/hooks/useDropdown.ts
···
2
2
3
3
import { useRef, useState } from "react";
4
4
5
-
export function useDropdown(optionCount: number) {
5
+
export function useDropdown(optionCount: number, onSelect: (index: number) => void) {
6
6
const [focused, setFocused] = useState(false);
7
7
const [activeIndex, setActiveIndex] = useState(-1);
8
8
const blurTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
···
19
19
}, 150);
20
20
}
21
21
22
-
function onKeyDown(
23
-
event: React.KeyboardEvent,
24
-
onSelect: (index: number) => void,
25
-
) {
22
+
function onKeyDown(event: React.KeyboardEvent) {
26
23
if (optionCount === 0 || !focused) return;
27
24
28
25
if (event.key === "ArrowDown") {
+4
-6
web/src/pages/Login.tsx
+4
-6
web/src/pages/Login.tsx
···
12
12
const [error, setError] = useState<string | null>(null);
13
13
const [busy, setBusy] = useState(false);
14
14
const matches = useHandleSearch(handle);
15
-
const dropdown = useDropdown(matches.length);
15
+
const dropdown = useDropdown(matches.length, (index) =>
16
+
selectHandle(matches[index].handle),
17
+
);
16
18
usePageTitle("Login — atbbs");
17
19
18
20
async function onSubmit(event: SyntheticEvent) {
···
66
68
<div
67
69
onFocus={dropdown.onFocus}
68
70
onBlur={dropdown.onBlur}
69
-
onKeyDown={(event) =>
70
-
dropdown.onKeyDown(event, (index) =>
71
-
selectHandle(matches[index].handle),
72
-
)
73
-
}
71
+
onKeyDown={dropdown.onKeyDown}
74
72
className="mb-6"
75
73
>
76
74
<form onSubmit={onSubmit} className="flex gap-2">