From 617d2d32b3d7ff337910b3b2b8ad79cd1b9b2ab8 Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
Date: Tue, 16 Apr 2024 22:18:49 +0900
Subject: [PATCH] fix: z-index and allow tags

---
 .../client/src/components/gallery/TagInput.tsx   |  2 +-
 packages/client/src/hook/useSearchGallery.ts     |  8 ++++++--
 packages/client/src/page/galleryPage.tsx         | 16 +++++++++++-----
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/gallery/TagInput.tsx b/packages/client/src/components/gallery/TagInput.tsx
index 7a06e08..23774fb 100644
--- a/packages/client/src/components/gallery/TagInput.tsx
+++ b/packages/client/src/components/gallery/TagInput.tsx
@@ -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 }}
diff --git a/packages/client/src/hook/useSearchGallery.ts b/packages/client/src/hook/useSearchGallery.ts
index 043c5e8..b8c1a7f 100644
--- a/packages/client/src/hook/useSearchGallery.ts
+++ b/packages/client/src/hook/useSearchGallery.ts
@@ -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;
diff --git a/packages/client/src/page/galleryPage.tsx b/packages/client/src/page/galleryPage.tsx
index e58f755..ceb52d2 100644
--- a/packages/client/src/page/galleryPage.tsx
+++ b/packages/client/src/page/galleryPage.tsx
@@ -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>
         }