feat: add mobile search panel
This commit is contained in:
TerryM
215
src/components/SearchPanel.tsx
Normal file
215
src/components/SearchPanel.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import { Info, Search as SearchIcon, X } from "lucide-react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { getJSON, itemsOrEmpty } from "../api";
|
||||
import { langQuery, type Lang } from "../i18n";
|
||||
import type { Post, PostListResponse } from "../types/post";
|
||||
import { MessageBubble } from "./messageStream/MessageBubble";
|
||||
|
||||
type TagItem = {
|
||||
name: string;
|
||||
count: number;
|
||||
};
|
||||
|
||||
type SearchPanelProps = {
|
||||
lang: Lang;
|
||||
t: (key: string) => string;
|
||||
query: string;
|
||||
onQueryChange: (value: string) => void;
|
||||
onSearch: () => void;
|
||||
};
|
||||
|
||||
const TAG_SOURCE_LIMIT = 80;
|
||||
const TAG_RESULT_LIMIT = 12;
|
||||
|
||||
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 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,
|
||||
}: 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 langParam = useMemo(() => langQuery(lang), [lang]);
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsTagLoading(true);
|
||||
getJSON<PostListResponse>(
|
||||
buildPostsUrl({
|
||||
lang: langParam,
|
||||
sort: "latest",
|
||||
limit: TAG_SOURCE_LIMIT,
|
||||
}),
|
||||
)
|
||||
.then((res) => {
|
||||
if (cancelled) return;
|
||||
setTags(extractTags(itemsOrEmpty(res.items)));
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setTags([]);
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setIsTagLoading(false);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [langParam]);
|
||||
|
||||
const showTagPosts = (tag: string) => {
|
||||
setSelectedTag(tag);
|
||||
onQueryChange(tag);
|
||||
setIsPostLoading(true);
|
||||
getJSON<PostListResponse>(
|
||||
buildSearchUrl({ lang: langParam, q: tag, limit: TAG_RESULT_LIMIT }),
|
||||
)
|
||||
.then((res) => {
|
||||
const exactMatches = itemsOrEmpty(res.items).filter((post) =>
|
||||
post.tags?.some((postTag) => postTag.trim() === tag),
|
||||
);
|
||||
setTagPosts(exactMatches);
|
||||
})
|
||||
.catch(() => setTagPosts([]))
|
||||
.finally(() => setIsPostLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-x-0 bottom-0 top-[64px] z-50 overflow-y-auto bg-[#0f0f13] md:hidden">
|
||||
<div className="border-t border-white/10 px-5 pb-6 pt-3 max-[360px]:px-3">
|
||||
<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 border border-ark-gold bg-[#191921] px-3 shadow-[0_0_0_2px_rgba(245,180,53,0.12)]">
|
||||
<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-sm 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-start gap-1.5 text-[11px] leading-4 text-[#777985]">
|
||||
<Info size={15} className="mt-0.5 shrink-0" />
|
||||
<span>{t("searchPanelHint")}</span>
|
||||
</div>
|
||||
|
||||
<section className="mt-5">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user