monoid
/
ionian
1
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

fix: z-index and allow tags

This commit is contained in:
monoid 2024-04-16 22:18:49 +09:00
parent 9ea7f880f3
commit 617d2d32b3
3 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/gallery/TagInput.tsx
View File

@ -155,7 +155,7 @@ export default function TagInput({
{ {
openInfo && <div openInfo && <div
ref={autocompleteRef} ref={autocompleteRef}
className="absolute z-10 shadow-md bg-popover text-popover-foreground className="absolute z-20 shadow-md bg-popover text-popover-foreground
border border
rounded-sm p-2 w-[200px]" rounded-sm p-2 w-[200px]"
style={{ top: openInfo.top, left: openInfo.left }} style={{ top: openInfo.top, left: openInfo.left }}

8
packages/client/src/hook/useSearchGallery.ts
View File

@ -5,7 +5,7 @@ import useSWR from "swr";
interface SearchParams { interface SearchParams {
word?: string; word?: string;
tags?: string; tags?: string[];
limit?: number; limit?: number;
cursor?: number; cursor?: number;
} }
@ -15,7 +15,11 @@ function makeSearchParams({
}: SearchParams){ }: SearchParams){
const search = new URLSearchParams(); const search = new URLSearchParams();
if (word) search.set("word", word); if (word) search.set("word", word);
if (tags) search.set("allow_tag", tags); if (tags) {
for (const tag of tags){
search.append("allow_tag", tag);
}
}
if (limit) search.set("limit", limit.toString()); if (limit) search.set("limit", limit.toString());
if (cursor) search.set("cursor", cursor.toString()); if (cursor) search.set("cursor", cursor.toString());
return search; return search;

16
packages/client/src/page/galleryPage.tsx
View File

@ -13,7 +13,7 @@ export default function Gallery() {
const search = useSearch(); const search = useSearch();
const searchParams = new URLSearchParams(search); const searchParams = new URLSearchParams(search);
const word = searchParams.get("word") ?? undefined; const word = searchParams.get("word") ?? undefined;
const tags = searchParams.get("allow_tag") ?? undefined; const tags = searchParams.getAll("allow_tag") ?? undefined;
const limit = searchParams.get("limit"); const limit = searchParams.get("limit");
const cursor = searchParams.get("cursor"); const cursor = searchParams.get("cursor");
const { data, error, isLoading, size, setSize } = useSearchGalleryInfinite({ const { data, error, isLoading, size, setSize } = useSearchGalleryInfinite({
@ -27,6 +27,7 @@ export default function Gallery() {
// biome-ignore lint/style/noNonNullAssertion: <explanation> // biome-ignore lint/style/noNonNullAssertion: <explanation>
getScrollElement: () => parentRef.current!, getScrollElement: () => parentRef.current!,
estimateSize: (index) => { estimateSize: (index) => {
if (!data) return 8;
const docs = data?.[index]; const docs = data?.[index];
if (!docs) return 8; if (!docs) return 8;
return docs.data.length * (200 + 8) + 37 + 8; return docs.data.length * (200 + 8) + 37 + 8;
@ -34,10 +35,11 @@ export default function Gallery() {
overscan: 1, overscan: 1,
}); });
const virtualItems = virtualizer.getVirtualItems(); const virtualItems = virtualizer.getVirtualItems();
useEffect(() => { useEffect(() => {
const lastItems = virtualItems.slice(-1); const lastItems = virtualItems.slice(-1);
// console.log(virtualItems);
if (lastItems.some(x => x.index >= size - 1)) { if (lastItems.some(x => x.index >= size - 1)) {
const last = lastItems[0]; const last = lastItems[0];
const docs = data?.[last.index]; const docs = data?.[last.index];
@ -47,6 +49,10 @@ export default function Gallery() {
} }
}, [virtualItems, setSize, size, data]); }, [virtualItems, setSize, size, data]);
useEffect(() => {
virtualizer.measure();
}, [virtualizer, data]);
if (isLoading) { if (isLoading) {
return <div className="p-4">Loading...</div> return <div className="p-4">Loading...</div>
} }
@ -62,10 +68,10 @@ export default function Gallery() {
return (<div className="p-4 grid gap-2 overflow-auto h-dvh items-start content-start" ref={parentRef}> return (<div className="p-4 grid gap-2 overflow-auto h-dvh items-start content-start" ref={parentRef}>
<Search /> <Search />
{(word || tags) && {(word || tags) &&
<div className="bg-primary rounded-full p-1 sticky top-0 shadow-md z-20"> <div className="bg-primary rounded-full p-1 sticky top-0 shadow-md z-10">
{word && <span className="text-primary-foreground ml-4">Search: {word}</span>} {word && <span className="text-primary-foreground ml-4">Search: {word}</span>}
{tags && <span className="text-primary-foreground ml-4">Tags: <ul className="inline-flex">{ {tags && <span className="text-primary-foreground ml-4">Tags: <ul className="inline-flex gap-1">{
tags.split(",").map(x => <TagBadge tagname={x} key={x} />)} tags.map(x => <TagBadge tagname={x} key={x} />)}
</ul></span>} </ul></span>}
</div> </div>
} }