packages/client/package.json

@@ -17,7 +17,6 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tanstack/react-virtual": "^3.2.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "dbtype": "workspace:*",

packages/client/src/components/gallery/GalleryCard.tsx

@@ -4,7 +4,6 @@ import TagBadge from "@/components/gallery/TagBadge.tsx";
 import { Fragment, useLayoutEffect, useRef, useState } from "react";
 import { LazyImage } from "./LazyImage.tsx";
 import StyledLink from "./StyledLink.tsx";
-import React from "react";
 
 function clipTagsWhenOverflow(tags: string[], limit: number) {
     let l = 0;
@@ -18,7 +17,7 @@ function clipTagsWhenOverflow(tags: string[], limit: number) {
     return tags;
 }
 
-function GalleryCardImpl({
+export function GalleryCard({
     doc: x
 }: { doc: Document; }) {
     const ref = useRef<HTMLUListElement>(null);
@@ -86,5 +85,3 @@ function GalleryCardImpl({
         </div>
     </Card>;
 }
-
-export const GalleryCard = React.memo(GalleryCardImpl);

packages/client/src/components/layout/layout.tsx

@@ -40,7 +40,7 @@ export default function Layout({ children }: LayoutProps) {
             <ResizablePanel minSize={minSize} collapsible maxSize={minSize}>
                 <NavList />
             </ResizablePanel>
-            <ResizableHandle withHandle className="z-20" />
+            <ResizableHandle withHandle />
             <ResizablePanel >
                 {children}
             </ResizablePanel>

packages/client/src/components/layout/nav.tsx

@@ -32,7 +32,7 @@ export function NavItem({
 export function NavList() {
     const loginInfo = useLogin();
 
-    return <aside className="h-dvh flex flex-col">
+    return <aside className="h-screen flex flex-col">
         <nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
             <NavItem icon={<MagnifyingGlassIcon className="h-5 w-5" />} to="/search" name="Search" />
             <NavItem icon={<ActivityLogIcon className="h-5 w-5" />} to="/tags" name="Tags" />

packages/client/src/hook/fetcher.ts

@@ -1,20 +1,7 @@
-export const BASE_API_URL = import.meta.env.VITE_API_URL ?? window.location.origin;
+export const BASE_API_URL = 'http://localhost:5173/';
 
-export function makeApiUrl(pathnameAndQueryparam: string) {
-    return new URL(pathnameAndQueryparam, BASE_API_URL).toString();
-}
-
-export class ApiError extends Error {
-    constructor(public readonly status: number, message: string) {
-        super(message);
-    }
-}
-
-export async function fetcher(url: string, init?: RequestInit) {
-    const u = makeApiUrl(url);
-    const res = await fetch(u, init);
-    if (!res.ok) {
-        throw new ApiError(res.status, await res.text());
-    }
+export async function fetcher(url: string) {
+    const u = new URL(url, BASE_API_URL);
+    const res = await fetch(u);
     return res.json();
 }

packages/client/src/hook/useDifference.ts

@@ -14,7 +14,7 @@ export function useDifferenceDoc() {
 }
 
 export async function commit(path: string, type: string) {
-    const data = await fetcher("/api/diff/commit", {
+    const res = await fetch("/api/diff/commit", {
         method: "POST",
         body: JSON.stringify([{ path, type }]),
         headers: {
@@ -22,11 +22,11 @@ export async function commit(path: string, type: string) {
         },
     });
     mutate("/api/diff/list");
-    return data;
+    return res.ok;
 }
 
 export async function commitAll(type: string) {
-    const data = await fetcher("/api/diff/commitall", {
+    const res = await fetch("/api/diff/commitall", {
         method: "POST",
         body: JSON.stringify({ type }),
         headers: {
@@ -34,5 +34,5 @@ export async function commitAll(type: string) {
         },
     });
     mutate("/api/diff/list");
-    return data;
+    return res.ok;
 }

packages/client/src/hook/useSearchGallery.ts

@@ -1,7 +1,6 @@
 import useSWRInifinite from "swr/infinite";
 import type { Document } from "dbtype/api";
 import { fetcher } from "./fetcher";
-import useSWR from "swr";
 
 interface SearchParams {
     word?: string;
@@ -10,33 +9,24 @@ interface SearchParams {
     cursor?: number;
 }
 
-function makeSearchParams({
+export function useSearchGallery({
     word, tags, limit, cursor,
-}: SearchParams){
-    const search = new URLSearchParams();
-    if (word) search.set("word", word);
-    if (tags) search.set("allow_tag", tags);
-    if (limit) search.set("limit", limit.toString());
-    if (cursor) search.set("cursor", cursor.toString());
-    return search;
-}
+}: SearchParams) {
     
-export function useSearchGallery(searchParams: SearchParams = {}) {
-    return useSWR<Document[]>(`/api/doc/search?${makeSearchParams(searchParams).toString()}`, fetcher);
-}
-
-export function useSearchGalleryInfinite(searchParams: SearchParams = {}) {
     return useSWRInifinite<
     {
         data: Document[];
         nextCursor: number | null;
-        startCursor: number | null;
         hasMore: boolean;
     }
     >((index, previous) => {
         if (!previous && index > 0) return null;
         if (previous && !previous.hasMore) return null;
-        const search = makeSearchParams(searchParams)
+        const search = new URLSearchParams();
+        if (word) search.set("word", word);
+        if (tags) search.set("allow_tag", tags);
+        if (limit) search.set("limit", limit.toString());
+        if (cursor) search.set("cursor", cursor.toString());
         if (index === 0) {
             return `/api/doc/search?${search.toString()}`;
         }
@@ -45,11 +35,9 @@ export function useSearchGalleryInfinite(searchParams: SearchParams = {}) {
         search.set("cursor", last.id.toString());
         return `/api/doc/search?${search.toString()}`;
     }, async (url) => {
-        const limit = searchParams.limit;
         const res = await fetcher(url);
         return {
             data: res,
-            startCursor: res.length === 0 ? null : res[0].id,
             nextCursor: res.length === 0 ? null : res[res.length - 1].id,
             hasMore: limit ? res.length === limit : (res.length === 20),
         };

packages/client/src/page/differencePage.tsx

@@ -26,7 +26,7 @@ export function DifferencePage() {
             <Card>
                 <CardHeader className="relative">
                     <Button className="absolute right-2 top-8" variant="ghost"
-                        onClick={() => {commitAll("comic")}}
+                        onClick={() => commitAll("comic")}
                     >Commit All</Button>
                     <CardTitle className="text-2xl">Difference</CardTitle>
                     <CardDescription>Scanned Files List</CardDescription>
@@ -45,7 +45,8 @@ export function DifferencePage() {
                                         <Button
                                             className="flex-none ml-2"
                                             variant="outline"
-                                            onClick={() => {commit(y.path, y.type)}}>
+                                            onClick={() => commit(y.path, y.type)}
+                                        >
                                             Commit
                                         </Button>
                                     </div>

packages/client/src/page/galleryPage.tsx

@@ -2,12 +2,10 @@ import { useLocation, useSearch } from "wouter";
 import { Button } from "@/components/ui/button.tsx";
 import { GalleryCard } from "@/components/gallery/GalleryCard.tsx";
 import TagBadge from "@/components/gallery/TagBadge.tsx";
-import { useSearchGalleryInfinite } from "../hook/useSearchGallery.ts";
+import { useSearchGallery } from "../hook/useSearchGallery.ts";
 import { Spinner } from "../components/Spinner.tsx";
 import TagInput from "@/components/gallery/TagInput.tsx";
-import { useEffect, useRef, useState } from "react";
-import { Separator } from "@/components/ui/separator.tsx";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useState } from "react";
 
 export default function Gallery() {
     const search = useSearch();
@@ -16,36 +14,11 @@ export default function Gallery() {
     const tags = searchParams.get("allow_tag") ?? undefined;
     const limit = searchParams.get("limit");
     const cursor = searchParams.get("cursor");
-    const { data, error, isLoading, size, setSize } = useSearchGalleryInfinite({
+    const { data, error, isLoading, size, setSize } = useSearchGallery({
         word, tags,
         limit: limit ? Number.parseInt(limit) : undefined,
         cursor: cursor ? Number.parseInt(cursor) : undefined
     });
-    const parentRef = useRef<HTMLDivElement>(null);
-    const virtualizer = useVirtualizer({
-        count: size,
-        // biome-ignore lint/style/noNonNullAssertion: <explanation>
-        getScrollElement: () => parentRef.current!,
-        estimateSize: (index) => {
-            const docs = data?.[index];
-            if (!docs) return 8;
-            return docs.data.length * (200 + 8) + 37 + 8;
-        },
-        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];
-            if (docs?.hasMore) {
-                setSize(size + 1);
-            }
-        }
-    }, [virtualItems, setSize, size, data]);
 
     if (isLoading) {
         return <div className="p-4">Loading...</div>
@@ -53,59 +26,36 @@ export default function Gallery() {
     if (error) {
         return <div className="p-4">Error: {String(error)}</div>
     }
-    if (!data) {
-        return <div className="p-4">No data</div>
-    }
-
 
     const isLoadingMore = data && size > 0 && (data[size - 1] === undefined);
     const isReachingEnd = data && data[size - 1]?.hasMore === false;
 
-    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-screen items-start content-start">
         <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">
                 {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} />)}
-                </ul></span>}
+                {tags && <span className="text-primary-foreground ml-4">Tags: <ul className="inline-flex">{tags.split(",").map(x => <TagBadge tagname={x} key={x} />)}</ul></span>}
             </div>
         }
-        {data?.length === 0 && <div className="p-4 text-3xl">No results</div>}
-        <div className="w-full relative"
-            style={{ height: virtualizer.getTotalSize() }}>
-            {// TODO: date based grouping
-                virtualItems.map((item) => {
-                    const isLoaderRow = item.index === size - 1 && isLoadingMore;
-                    if (isLoaderRow) {
-                        return <div key={item.index} className="w-full flex justify-center top-0 left-0 absolute"
-                            style={{
-                                height: `${item.size}px`,
-                                transform: `translateY(${item.start}px)`
-                            }}>
-                            <Spinner />
-                        </div>;
-                    }
-                    const docs = data[item.index];
-                    if (!docs) return null;
-                    return <div className="w-full grid gap-2 content-start top-0 left-0 absolute mb-2" key={item.index}
-                        style={{
-                            height: `${item.size}px`,
-                            transform: `translateY(${item.start}px)`
-                        }}>
-                        {docs.startCursor && <div>
-                            <h3 className="text-3xl">Start with {docs.startCursor}</h3>
-                            <Separator />
-                        </div>}
-                        {docs?.data?.map((x) => {
-                            return (
-                                <GalleryCard doc={x} key={x.id} />
-                            );
-                        })}
-                    </div>
-                })
-            }
-        </div>
+        {
+            data?.length === 0 && <div className="p-4 text-3xl">No results</div>
+        }
+        {
+            // TODO: date based grouping 
+            data?.map((docs) => {
+                return docs.data.map((x) => {
+                    return (
+                        <GalleryCard doc={x} key={x.id} />
+                    );
+                });
+            })
+        }
+        {
+            <Button className="w-full" onClick={() => setSize(size + 1)}
+                disabled={isReachingEnd || isLoadingMore}
+            > {isLoadingMore && <Spinner className="mr-1" />}{size + 1} Load more</Button>
+        }
     </div>
     );
 }
@@ -120,7 +70,7 @@ function Search() {
         <TagInput className="flex-1" input={word} onInputChange={setWord}
             tags={tags} onTagsChange={setTags}
         />
-        <Button className="flex-none" onClick={() => {
+        <Button className="flex-none" onClick={()=>{
             const params = new URLSearchParams();
             if (tags.length > 0) {
                 for (const tag of tags) {

packages/client/src/page/settingPage.tsx

@@ -1,4 +1,5 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useEffect } from "react";
 import { type TernaryDarkMode, useTernaryDarkMode, useMediaQuery } from "usehooks-ts";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@/components/ui/label";

packages/client/src/state/user.ts

@@ -1,5 +1,5 @@
 import { atom, useAtomValue, setAtomValue } from "../lib/atom.ts";
-import { makeApiUrl } from "../hook/fetcher.ts";
+import { BASE_API_URL } from "../hook/fetcher.ts";
 
 type LoginLocalStorage = {
 	username: string;
@@ -24,7 +24,7 @@ function getUserSessions() {
 }
 
 export async function refresh() {
-	const u = makeApiUrl("/api/user/refresh");
+	const u = new URL("/api/user/refresh", BASE_API_URL);
     const res = await fetch(u, {
         method: "POST",
 		credentials: "include",
@@ -50,7 +50,7 @@ export async function refresh() {
 }
 
 export const doLogout = async () => {
-	const u = makeApiUrl("/api/user/logout");
+	const u = new URL("/api/user/logout", BASE_API_URL);
 	const req = await fetch(u, {
 		method: "POST",
 		credentials: "include",
@@ -81,7 +81,7 @@ export const doLogin = async (userLoginInfo: {
 	username: string;
 	password: string;
 }): Promise<string | LoginLocalStorage> => {
-	const u = makeApiUrl("/api/user/login");
+	const u = new URL("/api/user/login", BASE_API_URL);
 	const res = await fetch(u, {
 		method: "POST",
 		body: JSON.stringify(userLoginInfo),

packages/server/src/db/doc.ts

@@ -61,10 +61,10 @@ class SqliteDocumentAccessor implements DocumentAccessor {
 		return await this.kysely.transaction().execute(async (trx) => {
 			const { tags, additional, ...rest } = c;
 			const id_lst = await trx.insertInto("document").values({
-				additional: JSON.stringify(additional),
-				created_at: Date.now(),
-				...rest,
-			})
+					additional: JSON.stringify(additional),
+					created_at: Date.now(),
+					...rest,
+				})
 				.returning("id")
 				.executeTakeFirst() as { id: number };
 			const id = id_lst.id;
@@ -150,7 +150,7 @@ class SqliteDocumentAccessor implements DocumentAccessor {
 			.selectFrom("document")
 			.selectAll()
 			.$if(allow_tag.length > 0, (qb) => {
-				return allow_tag.reduce((prevQb, tag, index) => {
+				return allow_tag.reduce((prevQb ,tag, index) => {
 					return prevQb.innerJoin(`doc_tag_relation as tags_${index}`, `tags_${index}.doc_id`, "document.id")
 						.where(`tags_${index}.tag_name`, "=", tag);
 				}, qb) as unknown as typeof qb;
@@ -161,16 +161,11 @@ class SqliteDocumentAccessor implements DocumentAccessor {
 			.$if(!use_offset && cursor !== undefined, (qb) => qb.where("id", "<", cursor as number))
 			.limit(limit)
 			.$if(eager_loading, (qb) => {
-				return qb.select(eb =>
-					eb.selectFrom(e =>
-						e.selectFrom("doc_tag_relation")
-							.select(["doc_tag_relation.tag_name"])
-							.whereRef("document.id", "=", "doc_tag_relation.doc_id")
-							.as("agg")
-					).select(e => e.fn.agg<string>("json_group_array", ["agg.tag_name"])
-						.as("tags_list")
-					).as("tags")
-				)
+				return qb.select(eb => jsonArrayFrom(
+					eb.selectFrom("doc_tag_relation")
+						.select(["doc_tag_relation.tag_name"])
+						.whereRef("document.id", "=", "doc_tag_relation.doc_id")
+				).as("tags")).withPlugin(new MyParseJSONResultsPlugin("tags"))
 			})
 			.orderBy("id", "desc")
 			.execute();
@@ -178,7 +173,7 @@ class SqliteDocumentAccessor implements DocumentAccessor {
 			...x,
 			content_hash: x.content_hash ?? "",
 			additional: x.additional !== null ? (JSON.parse(x.additional)) : {},
-			tags: JSON.parse(x.tags ?? "[]"), //?.map((x: { tag_name: string }) => x.tag_name) ?? [],
+			tags: x.tags?.map((x: { tag_name: string }) => x.tag_name) ?? [],
 		}));
 	}
 	async findByPath(path: string, filename?: string): Promise<Document[]> {

pnpm-lock.yaml

@@ -32,9 +32,6 @@ importers:
       '@radix-ui/react-tooltip':
         specifier: ^1.0.7
         version: 1.0.7(@types/react-dom@18.2.22)(@types/react@18.2.71)(react-dom@18.2.0)(react@18.2.0)
-      '@tanstack/react-virtual':
-        specifier: ^3.2.1
-        version: 3.2.1(react-dom@18.2.0)(react@18.2.0)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -1789,21 +1786,6 @@ packages:
       defer-to-connect: 2.0.1
     dev: true
 
-  /@tanstack/react-virtual@3.2.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-i9Nt0ssIh2bSjomJZlr6Iq5usT/9+ewo2/fKHRNk6kjVKS8jrhXbnO8NEawarCuBx/efv0xpoUUKKGxa0cQb4Q==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@tanstack/virtual-core': 3.2.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
-  /@tanstack/virtual-core@3.2.1:
-    resolution: {integrity: sha512-nO0d4vRzsmpBQCJYyClNHPPoUMI4nXNfrm6IcCRL33ncWMoNVpURh9YebEHPw8KrtsP2VSJIHE4gf4XFGk1OGg==}
-    dev: false
-
   /@tokenizer/token@0.3.0:
     resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
     dev: true