feat(hk): expand search and add operational user overview
This commit is contained in:
Simo committed
1 parent
27447ce029
commit
89526af344
44 files changed
+3740
-416
No files matched your search
@@ -18,18 +18,21 @@ import {
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { useDebounce } from "@/hooks/use-debounce";
|
||||
import {
|
||||
type AdminNavigationOptions,
|
||||
visibleAdminNavigation,
|
||||
} from "@/lib/admin-navigation";
|
||||
import { AdminSearchRequest } from "@/lib/admin-search-request";
|
||||
|
||||
type SearchResult = AdminSearchResult;
|
||||
|
||||
type SearchResponse = {
|
||||
ok: boolean;
|
||||
results: SearchResult[];
|
||||
partial?: boolean;
|
||||
};
|
||||
|
||||
export function SearchDialog({
|
||||
@@ -56,8 +59,9 @@ export function SearchDialog({
|
||||
const [results, setResults] = useState<SearchResult[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [failed, setFailed] = useState(false);
|
||||
const [partial, setPartial] = useState(false);
|
||||
const debouncedQuery = useDebounce(query, 250);
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
const requestRef = useRef(new AdminSearchRequest());
|
||||
|
||||
const groupLabels: Record<string, string> = {
|
||||
users: t("users"),
|
||||
@@ -66,19 +70,22 @@ export function SearchDialog({
|
||||
guilds: t("guilds"),
|
||||
shop: t("shop"),
|
||||
rareValues: t("rareValues"),
|
||||
furniture: t("furniture"),
|
||||
catalog: t("catalog"),
|
||||
tickets: t("tickets"),
|
||||
};
|
||||
|
||||
const fetchResults = useCallback(async (q: string) => {
|
||||
abortRef.current?.abort();
|
||||
requestRef.current.cancel();
|
||||
setFailed(false);
|
||||
setPartial(false);
|
||||
setResults([]);
|
||||
if (q.length < 2) {
|
||||
if (!canSearchRecords(q)) {
|
||||
setResults([]);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const controller = new AbortController();
|
||||
abortRef.current = controller;
|
||||
const controller = requestRef.current.start();
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/search?q=${encodeURIComponent(q)}`, {
|
||||
@@ -86,28 +93,30 @@ export function SearchDialog({
|
||||
});
|
||||
if (!res.ok) throw new Error("Search request failed");
|
||||
const data: SearchResponse = await res.json();
|
||||
if (abortRef.current !== controller || controller.signal.aborted) return;
|
||||
if (data.ok) setResults(data.results);
|
||||
else setFailed(true);
|
||||
if (!requestRef.current.accepts(controller)) return;
|
||||
if (data.ok) {
|
||||
setResults(data.results);
|
||||
setPartial(Boolean(data.partial));
|
||||
} else setFailed(true);
|
||||
} catch (error) {
|
||||
if (error instanceof DOMException && error.name === "AbortError") return;
|
||||
if (abortRef.current === controller) {
|
||||
if (requestRef.current.accepts(controller)) {
|
||||
setResults([]);
|
||||
setFailed(true);
|
||||
}
|
||||
} finally {
|
||||
if (abortRef.current === controller) setLoading(false);
|
||||
if (requestRef.current.accepts(controller)) setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
if (!open || query !== debouncedQuery) return;
|
||||
fetchResults(debouncedQuery);
|
||||
return () => abortRef.current?.abort();
|
||||
}, [debouncedQuery, fetchResults, open]);
|
||||
return () => requestRef.current.cancel();
|
||||
}, [debouncedQuery, fetchResults, open, query]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => abortRef.current?.abort();
|
||||
return () => requestRef.current.cancel();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -121,8 +130,29 @@ export function SearchDialog({
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, []);
|
||||
|
||||
function handleQueryChange(value: string) {
|
||||
requestRef.current.cancel();
|
||||
setQuery(value.slice(0, 64));
|
||||
setResults([]);
|
||||
setFailed(false);
|
||||
setPartial(false);
|
||||
setLoading(canSearchRecords(value));
|
||||
}
|
||||
|
||||
function handleOpenChange(next: boolean) {
|
||||
if (!next) {
|
||||
requestRef.current.cancel();
|
||||
setQuery("");
|
||||
setResults([]);
|
||||
setFailed(false);
|
||||
setPartial(false);
|
||||
setLoading(false);
|
||||
}
|
||||
setOpen(next);
|
||||
}
|
||||
|
||||
function handleSelect(url: string) {
|
||||
setOpen(false);
|
||||
handleOpenChange(false);
|
||||
setQuery("");
|
||||
setResults([]);
|
||||
router.push(url);
|
||||
@@ -132,19 +162,18 @@ export function SearchDialog({
|
||||
const pages = getPages(query.trim().toLocaleLowerCase()).slice(0, 8);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<button
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogTrigger
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
aria-label={t("placeholder")}
|
||||
className="flex items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-1.5 text-xs text-[var(--admin-text-muted)] hover:border-[var(--admin-accent)]/40 hover:text-[var(--admin-text)] transition-colors cursor-pointer"
|
||||
>
|
||||
<SearchIcon size={14} />
|
||||
<span className="hidden sm:inline">{t("placeholder")}</span>
|
||||
<kbd className="pointer-events-none hidden sm:inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-60">
|
||||
⌘K
|
||||
Ctrl/⌘ K
|
||||
</kbd>
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-lg p-0 gap-0 overflow-hidden">
|
||||
<DialogTitle className="sr-only">{t("placeholder")}</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
@@ -157,21 +186,33 @@ export function SearchDialog({
|
||||
<CommandInput
|
||||
placeholder={t("placeholder")}
|
||||
value={query}
|
||||
onValueChange={setQuery}
|
||||
onValueChange={handleQueryChange}
|
||||
aria-label={t("placeholder")}
|
||||
maxLength={64}
|
||||
className="h-12"
|
||||
/>
|
||||
<CommandList className="max-h-[400px]">
|
||||
{loading && query.length >= 2 ? (
|
||||
{loading && canSearchRecords(query) ? (
|
||||
<div className="py-6 text-center text-sm text-muted-foreground">
|
||||
…
|
||||
</div>
|
||||
) : null}
|
||||
{!loading && !failed && (
|
||||
{!loading && !failed && !partial && canSearchRecords(query) && (
|
||||
<CommandEmpty>{t("noResults")}</CommandEmpty>
|
||||
)}
|
||||
{failed && (
|
||||
{!canSearchRecords(query) && (
|
||||
<p className="p-4 text-sm text-muted-foreground">{t("hint")}</p>
|
||||
)}
|
||||
{(failed || partial) && (
|
||||
<p role="alert" className="p-4 text-sm">
|
||||
{t("loadError")}
|
||||
{t(partial ? "partialError" : "loadError")}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fetchResults(query)}
|
||||
className="ml-2 underline"
|
||||
>
|
||||
{t("retry")}
|
||||
</button>
|
||||
</p>
|
||||
)}
|
||||
{pages.length > 0 && (
|
||||
@@ -200,7 +241,9 @@ export function SearchDialog({
|
||||
onSelect={() => handleSelect(item.url)}
|
||||
className="flex flex-col items-start gap-0.5 py-2"
|
||||
>
|
||||
<span className="text-sm font-medium">{item.title}</span>
|
||||
<span className="w-full min-w-0 truncate text-sm font-medium">
|
||||
{item.title}
|
||||
</span>
|
||||
{item.subtitle ? (
|
||||
<span className="text-xs text-muted-foreground truncate w-full">
|
||||
{item.subtitle}
|
||||
@@ -217,6 +260,11 @@ export function SearchDialog({
|
||||
);
|
||||
}
|
||||
|
||||
function canSearchRecords(value: string) {
|
||||
const q = value.trim();
|
||||
return q.length >= 2 || /^[1-9]$/.test(q);
|
||||
}
|
||||
|
||||
function groupResults(results: SearchResult[]) {
|
||||
const grouped: Record<string, SearchResult[]> = {};
|
||||
for (const r of results) {
|
||||
|
||||
Reference in new issue
Block a user