424 lines
14 KiB
TypeScript
424 lines
14 KiB
TypeScript
import { Info, Search as SearchIcon, X } from "lucide-react";
|
|
import {
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
type ReactNode,
|
|
type Ref,
|
|
} from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { getJSON, itemsOrEmpty, readJSONCache } from "../api";
|
|
import { langQuery, type Lang } from "../i18n";
|
|
import type { Post, PostListResponse } from "../types/post";
|
|
import { MessageBubble } from "./messageStream/MessageBubble";
|
|
import { postDisplayText, postTitleText } from "./messageStream/utils/postText";
|
|
|
|
type TagItem = {
|
|
name: string;
|
|
count: number;
|
|
};
|
|
|
|
type SearchPanelProps = {
|
|
lang: Lang;
|
|
t: (key: string) => string;
|
|
query: string;
|
|
onQueryChange: (value: string) => void;
|
|
onSearch: () => void;
|
|
variant?: "mobile" | "desktop";
|
|
showInput?: boolean;
|
|
panelRef?: Ref<HTMLDivElement>;
|
|
onResultClick?: () => void;
|
|
};
|
|
|
|
const TAG_SOURCE_LIMIT = 80;
|
|
const TAG_RESULT_LIMIT = 12;
|
|
const SEARCH_PREVIEW_LIMIT = 5;
|
|
const SEARCH_DEBOUNCE_MS = 300;
|
|
|
|
function buildPostsUrl(params: Record<string, string | number | undefined>) {
|
|
const sp = new URLSearchParams();
|
|
Object.entries(params).forEach(([key, value]) => {
|
|
if (value !== undefined && value !== "") sp.set(key, String(value));
|
|
});
|
|
return `/api/posts?${sp.toString()}`;
|
|
}
|
|
|
|
function buildSearchUrl(params: Record<string, string | number | undefined>) {
|
|
const sp = new URLSearchParams();
|
|
Object.entries(params).forEach(([key, value]) => {
|
|
if (value !== undefined && value !== "") sp.set(key, String(value));
|
|
});
|
|
return `/api/posts/search?${sp.toString()}`;
|
|
}
|
|
|
|
function escapeRegex(value: string): string {
|
|
return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
}
|
|
|
|
function highlightText(text: string, query: string): ReactNode {
|
|
const clean = query.trim();
|
|
if (!clean || !text) return text;
|
|
|
|
const parts = text.split(new RegExp(`(${escapeRegex(clean)})`, "gi"));
|
|
return parts.map((part, index) =>
|
|
part.toLowerCase() === clean.toLowerCase() ? (
|
|
<mark
|
|
key={`${part}-${index}`}
|
|
className="rounded bg-ark-gold/20 px-0.5 text-ark-gold"
|
|
>
|
|
{part}
|
|
</mark>
|
|
) : (
|
|
part
|
|
),
|
|
);
|
|
}
|
|
|
|
function snippetFor(post: Post, lang: Lang, query: string): string {
|
|
const text = postDisplayText(post, lang).replace(/\s+/g, " ").trim();
|
|
if (!text) return "";
|
|
|
|
const clean = query.trim().toLowerCase();
|
|
const index = clean ? text.toLowerCase().indexOf(clean) : -1;
|
|
if (index === -1) return text.slice(0, 110);
|
|
|
|
const start = Math.max(0, index - 36);
|
|
const end = Math.min(text.length, index + clean.length + 74);
|
|
return `${start > 0 ? "…" : ""}${text.slice(start, end)}${end < text.length ? "…" : ""}`;
|
|
}
|
|
|
|
function metaFor(post: Post): string {
|
|
const parts = [
|
|
post.categorySlug,
|
|
post.postType,
|
|
...(post.tags ?? []).map((tag) => `#${tag}`),
|
|
post.attachments[0]?.filename,
|
|
].filter(Boolean);
|
|
return parts.slice(0, 4).join(" · ");
|
|
}
|
|
|
|
function extractTags(posts: Post[]): TagItem[] {
|
|
const counts = new Map<string, number>();
|
|
posts.forEach((post) => {
|
|
post.tags?.forEach((tag) => {
|
|
const clean = tag.trim();
|
|
if (!clean) return;
|
|
counts.set(clean, (counts.get(clean) ?? 0) + 1);
|
|
});
|
|
});
|
|
|
|
return [...counts.entries()]
|
|
.map(([name, count]) => ({ name, count }))
|
|
.sort((a, b) => b.count - a.count || a.name.localeCompare(b.name))
|
|
.slice(0, 12);
|
|
}
|
|
|
|
export function SearchPanel({
|
|
lang,
|
|
t,
|
|
query,
|
|
onQueryChange,
|
|
onSearch,
|
|
variant = "mobile",
|
|
showInput = true,
|
|
panelRef,
|
|
onResultClick,
|
|
}: SearchPanelProps) {
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const [tags, setTags] = useState<TagItem[]>([]);
|
|
const [selectedTag, setSelectedTag] = useState("");
|
|
const [tagPosts, setTagPosts] = useState<Post[]>([]);
|
|
const [isTagLoading, setIsTagLoading] = useState(false);
|
|
const [isPostLoading, setIsPostLoading] = useState(false);
|
|
const [previewPosts, setPreviewPosts] = useState<Post[]>([]);
|
|
const [isPreviewLoading, setIsPreviewLoading] = useState(false);
|
|
|
|
const langParam = useMemo(() => langQuery(lang), [lang]);
|
|
const cleanQuery = query.trim();
|
|
|
|
useEffect(() => {
|
|
if (!showInput) return;
|
|
// Avoid scroll-into-view: browsers default-scroll the focused element
|
|
// into the viewport, which moves the underlying page when the search
|
|
// overlay opens from a scrolled position. `preventScroll` keeps the page
|
|
// exactly where it was.
|
|
inputRef.current?.focus({ preventScroll: true });
|
|
}, [showInput]);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
const tagsUrl = buildPostsUrl({
|
|
lang: langParam,
|
|
sort: "latest",
|
|
limit: TAG_SOURCE_LIMIT,
|
|
});
|
|
const cachedTags = readJSONCache<PostListResponse>(tagsUrl);
|
|
if (cachedTags) setTags(extractTags(itemsOrEmpty(cachedTags.items)));
|
|
|
|
setIsTagLoading(!cachedTags);
|
|
getJSON<PostListResponse>(tagsUrl)
|
|
.then((res) => {
|
|
if (cancelled) return;
|
|
setTags(extractTags(itemsOrEmpty(res.items)));
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled && !cachedTags) setTags([]);
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setIsTagLoading(false);
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [langParam]);
|
|
|
|
useEffect(() => {
|
|
if (selectedTag && selectedTag !== cleanQuery) {
|
|
setSelectedTag("");
|
|
setTagPosts([]);
|
|
}
|
|
}, [cleanQuery, selectedTag]);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
const q = cleanQuery;
|
|
if (!q) {
|
|
setPreviewPosts([]);
|
|
setIsPreviewLoading(false);
|
|
return;
|
|
}
|
|
|
|
const searchUrl = buildSearchUrl({
|
|
lang: langParam,
|
|
q,
|
|
limit: SEARCH_PREVIEW_LIMIT,
|
|
});
|
|
const cachedPosts = readJSONCache<PostListResponse>(searchUrl);
|
|
if (cachedPosts) setPreviewPosts(itemsOrEmpty(cachedPosts.items));
|
|
|
|
setIsPreviewLoading(!cachedPosts);
|
|
const timer = window.setTimeout(() => {
|
|
getJSON<PostListResponse>(searchUrl)
|
|
.then((res) => {
|
|
if (!cancelled) setPreviewPosts(itemsOrEmpty(res.items));
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled && !cachedPosts) setPreviewPosts([]);
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setIsPreviewLoading(false);
|
|
});
|
|
}, SEARCH_DEBOUNCE_MS);
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
window.clearTimeout(timer);
|
|
};
|
|
}, [cleanQuery, langParam]);
|
|
|
|
const showTagPosts = (tag: string) => {
|
|
// Tapping the active tag again clears it (toggle) instead of staying stuck.
|
|
if (selectedTag === tag) {
|
|
setSelectedTag("");
|
|
setTagPosts([]);
|
|
onQueryChange("");
|
|
return;
|
|
}
|
|
setSelectedTag(tag);
|
|
onQueryChange(tag);
|
|
const searchUrl = buildSearchUrl({
|
|
lang: langParam,
|
|
q: tag,
|
|
limit: TAG_RESULT_LIMIT,
|
|
});
|
|
const cachedPosts = readJSONCache<PostListResponse>(searchUrl);
|
|
if (cachedPosts) {
|
|
setTagPosts(
|
|
itemsOrEmpty(cachedPosts.items).filter((post) =>
|
|
post.tags?.some((postTag) => postTag.trim() === tag),
|
|
),
|
|
);
|
|
}
|
|
|
|
setIsPostLoading(!cachedPosts);
|
|
getJSON<PostListResponse>(searchUrl)
|
|
.then((res) => {
|
|
const exactMatches = itemsOrEmpty(res.items).filter((post) =>
|
|
post.tags?.some((postTag) => postTag.trim() === tag),
|
|
);
|
|
setTagPosts(exactMatches);
|
|
})
|
|
.catch(() => {
|
|
if (!cachedPosts) setTagPosts([]);
|
|
})
|
|
.finally(() => setIsPostLoading(false));
|
|
};
|
|
|
|
const panelClassName =
|
|
variant === "desktop"
|
|
? "ark-header-menu-enter fixed left-1/2 top-[72px] z-50 max-h-[min(70dvh,640px)] w-[min(720px,calc(100vw-3rem))] -translate-x-1/2 overflow-y-auto overscroll-contain rounded-3xl border border-white/10 bg-[#0f0f13] shadow-2xl shadow-black/60"
|
|
: "ark-header-menu-enter fixed inset-x-0 bottom-0 top-[64px] z-50 overflow-y-auto overscroll-contain bg-[#0f0f13] md:hidden";
|
|
const innerClassName =
|
|
variant === "desktop"
|
|
? "px-5 pb-6 pt-4"
|
|
: "border-t border-white/10 px-5 pb-6 pt-3 max-[360px]:px-3";
|
|
|
|
return (
|
|
<div ref={panelRef} className={panelClassName}>
|
|
<div className={innerClassName}>
|
|
{showInput ? (
|
|
<>
|
|
<div className="flex h-12 items-center gap-2">
|
|
<div className="flex h-11 min-w-0 flex-1 items-center gap-2 rounded-full bg-[#191921] px-3 shadow-[0_0_0_2px_rgba(245,180,53,0.12)] ring-1 ring-inset ring-ark-gold">
|
|
<SearchIcon size={18} className="shrink-0 text-ark-gold" />
|
|
<input
|
|
ref={inputRef}
|
|
value={query}
|
|
onChange={(e) => onQueryChange(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && onSearch()}
|
|
placeholder={t("searchPanelPlaceholder")}
|
|
className="min-w-0 flex-1 bg-transparent text-base text-neutral-100 outline-none placeholder:text-[#777985]"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => onQueryChange("")}
|
|
className="shrink-0 rounded-full p-1 text-neutral-500 hover:bg-white/5 hover:text-neutral-200"
|
|
aria-label={t("clear")}
|
|
>
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onSearch}
|
|
className="h-10 shrink-0 rounded-full bg-ark-gold px-3 text-sm font-bold text-[#111114] transition hover:bg-ark-gold2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
|
|
>
|
|
{t("searchSubmit")}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-1 flex items-center gap-1.5 pl-3 text-[12px] leading-4 text-[#777985]">
|
|
<Info size={14} className="shrink-0" />
|
|
<span>{t("searchPanelHint")}</span>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="mb-4 flex items-center gap-1.5 pl-1 text-[12px] leading-4 text-[#777985]">
|
|
<Info size={14} className="shrink-0" />
|
|
<span>{t("searchPanelHint")}</span>
|
|
</div>
|
|
)}
|
|
|
|
{cleanQuery ? (
|
|
<section className={showInput ? "mt-5" : "mt-0"}>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h2 className="border-l-4 border-ark-gold pl-3 text-base font-bold text-neutral-100">
|
|
{t("related")}
|
|
</h2>
|
|
{isPreviewLoading ? (
|
|
<span className="text-xs text-neutral-500">…</span>
|
|
) : null}
|
|
</div>
|
|
|
|
{previewPosts.length > 0 ? (
|
|
<div className="flex flex-col gap-2">
|
|
{previewPosts.map((post) => {
|
|
const title =
|
|
postTitleText(post, lang) ||
|
|
post.attachments[0]?.filename ||
|
|
post.id;
|
|
const snippet = snippetFor(post, lang, cleanQuery);
|
|
const meta = metaFor(post);
|
|
return (
|
|
<Link
|
|
key={post.id}
|
|
to={`/browse?post=${encodeURIComponent(post.id)}`}
|
|
onClick={onResultClick}
|
|
className="block rounded-2xl border border-white/10 bg-[#191921] px-4 py-3 transition hover:border-ark-gold/60 hover:bg-[#22232D] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
|
|
>
|
|
<div className="line-clamp-2 text-sm font-semibold leading-5 text-neutral-100">
|
|
{highlightText(title, cleanQuery)}
|
|
</div>
|
|
{meta ? (
|
|
<div className="mt-1 line-clamp-1 text-[12px] leading-4 text-[#A8A9AE]">
|
|
{highlightText(meta, cleanQuery)}
|
|
</div>
|
|
) : null}
|
|
{snippet ? (
|
|
<div className="mt-1 line-clamp-2 text-[13px] leading-[18px] text-neutral-400">
|
|
{highlightText(snippet, cleanQuery)}
|
|
</div>
|
|
) : null}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
) : !isPreviewLoading ? (
|
|
<p className="py-3 text-sm text-neutral-500">{t("noResults")}</p>
|
|
) : null}
|
|
</section>
|
|
) : null}
|
|
|
|
<section className={cleanQuery ? "mt-6" : showInput ? "mt-5" : "mt-0"}>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h2 className="border-l-4 border-ark-gold pl-3 text-base font-bold text-neutral-100">
|
|
{t("currentTags")}
|
|
</h2>
|
|
</div>
|
|
|
|
{isTagLoading ? (
|
|
<div className="py-3 text-sm text-neutral-500">{t("loading")}</div>
|
|
) : tags.length > 0 ? (
|
|
<div className="flex flex-wrap gap-2">
|
|
{tags.map((tag) => {
|
|
const active = selectedTag === tag.name;
|
|
return (
|
|
<button
|
|
key={tag.name}
|
|
type="button"
|
|
onClick={() => showTagPosts(tag.name)}
|
|
className={`rounded-full border px-3 py-1.5 text-xs font-bold transition ${
|
|
active
|
|
? "border-ark-gold bg-ark-gold/15 text-ark-gold"
|
|
: "border-white/10 bg-[#232329] text-neutral-200 hover:border-ark-gold/60 hover:text-ark-gold"
|
|
}`}
|
|
>
|
|
#{tag.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="py-3 text-sm text-neutral-500">
|
|
{t("noTagsAvailable")}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{selectedTag ? (
|
|
<section className="mt-6">
|
|
<h2 className="mb-3 border-l-4 border-ark-gold pl-3 text-base font-bold text-neutral-100">
|
|
{t("tagPostsTitle").replace("{{tag}}", selectedTag)}
|
|
</h2>
|
|
{isPostLoading ? (
|
|
<div className="py-4 text-center text-xs text-neutral-500">…</div>
|
|
) : tagPosts.length > 0 ? (
|
|
<div className="flex flex-col gap-3">
|
|
{tagPosts.map((post) => (
|
|
<MessageBubble key={post.id} post={post} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="py-6 text-center text-sm text-neutral-400">
|
|
{t("noTagPosts")}
|
|
</p>
|
|
)}
|
|
</section>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|