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

fix: z-index and allow tags

Browse Source
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
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
rounded-sm p-2 w-[200px]"
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 {
word?: string;
tags?: string;
tags?: string[];
limit?: number;
cursor?: number;
}
@ -15,7 +15,11 @@ function makeSearchParams({
}: SearchParams){
const search = new URLSearchParams();
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 (cursor) search.set("cursor", cursor.toString());
return search;

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

@ -13,7 +13,7 @@ export default function Gallery() {
const search = useSearch();
const searchParams = new URLSearchParams(search);
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 cursor = searchParams.get("cursor");
const { data, error, isLoading, size, setSize } = useSearchGalleryInfinite({
@ -27,6 +27,7 @@ export default function Gallery() {
// biome-ignore lint/style/noNonNullAssertion: <explanation>
getScrollElement: () => parentRef.current!,
estimateSize: (index) => {
if (!data) return 8;
const docs = data?.[index];
if (!docs) return 8;
return docs.data.length * (200 + 8) + 37 + 8;
@ -34,10 +35,11 @@ export default function Gallery() {
overscan: 1,
});
const virtualItems = virtualizer.getVirtualItems();
useEffect(() => {
const lastItems = virtualItems.slice(-1);
// console.log(virtualItems);
if (lastItems.some(x => x.index >= size - 1)) {
const last = lastItems[0];
const docs = data?.[last.index];
@ -47,6 +49,10 @@ export default function Gallery() {
}
}, [virtualItems, setSize, size, data]);
useEffect(() => {
virtualizer.measure();
}, [virtualizer, data]);
if (isLoading) {
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}>
<Search />
{(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>}
{tags && <span className="text-primary-foreground ml-4">Tags: <ul className="inline-flex">{
tags.split(",").map(x => <TagBadge tagname={x} key={x} />)}
{tags && <span className="text-primary-foreground ml-4">Tags: <ul className="inline-flex gap-1">{
tags.map(x => <TagBadge tagname={x} key={x} />)}
</ul></span>}
</div>
}