JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

wip: all images page with virtualization

Browse Source
This commit is contained in:
John Costa
2025-07-21 15:36:24 +01:00
parent 68010503ab
commit 7d9845737e
6 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/bun.lock
View File

@ -8,6 +8,7 @@
"@kobalte/tailwindcss": "^0.9.0",
"@solidjs/router": "^0.15.3",
"@tabler/icons-solidjs": "^3.34.0",
"@tanstack/solid-virtual": "^3.13.12",
"@tauri-apps/api": "^2.6.0",
"@tauri-apps/plugin-dialog": "~2.3.0",
"@tauri-apps/plugin-fs": "~2.4.0",
@ -275,6 +276,10 @@
"@tabler/icons-solidjs": ["@tabler/icons-solidjs@3.34.0", "", { "dependencies": { "@tabler/icons": "3.34.0" }, "peerDependencies": { "solid-js": "^1.4.7" } }, "sha512-O6RI1dz4o2MhsyMUk4tELySY25deyB+cHsREwQdYynB+8K9CncVgi9vlpG7lE14lmJ64edduDpCkMxqKdev5jQ=="],
"@tanstack/solid-virtual": ["@tanstack/solid-virtual@3.13.12", "", { "dependencies": { "@tanstack/virtual-core": "3.13.12" }, "peerDependencies": { "solid-js": "^1.3.0" } }, "sha512-0dS8GkBTmbuM9cUR6Jni0a45eJbd32CAEbZj8HrZMWIj3lu974NpGz5ywcomOGJ9GdeHuDaRzlwtonBbKV1ihQ=="],
"@tanstack/virtual-core": ["@tanstack/virtual-core@3.13.12", "", {}, "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA=="],
"@tauri-apps/api": ["@tauri-apps/api@2.6.0", "", {}, "sha512-hRNcdercfgpzgFrMXWwNDBN0B7vNzOzRepy6ZAmhxi5mDLVPNrTpo9MGg2tN/F7JRugj4d2aF7E1rtPXAHaetg=="],
"@tauri-apps/cli": ["@tauri-apps/cli@2.6.2", "", { "optionalDependencies": { "@tauri-apps/cli-darwin-arm64": "2.6.2", "@tauri-apps/cli-darwin-x64": "2.6.2", "@tauri-apps/cli-linux-arm-gnueabihf": "2.6.2", "@tauri-apps/cli-linux-arm64-gnu": "2.6.2", "@tauri-apps/cli-linux-arm64-musl": "2.6.2", "@tauri-apps/cli-linux-riscv64-gnu": "2.6.2", "@tauri-apps/cli-linux-x64-gnu": "2.6.2", "@tauri-apps/cli-linux-x64-musl": "2.6.2", "@tauri-apps/cli-win32-arm64-msvc": "2.6.2", "@tauri-apps/cli-win32-ia32-msvc": "2.6.2", "@tauri-apps/cli-win32-x64-msvc": "2.6.2" }, "bin": { "tauri": "tauri.js" } }, "sha512-s1/eyBHxk0wG1blLeOY2IDjgZcxVrkxU5HFL8rNDwjYGr0o7yr3RAtwmuUPhz13NO+xGAL1bJZaLFBdp+5joKg=="],

1
frontend/package.json
View File

@ -18,6 +18,7 @@
"@kobalte/tailwindcss": "^0.9.0",
"@solidjs/router": "^0.15.3",
"@tabler/icons-solidjs": "^3.34.0",
"@tanstack/solid-virtual": "^3.13.12",
"@tauri-apps/api": "^2.6.0",
"@tauri-apps/plugin-dialog": "~2.3.0",
"@tauri-apps/plugin-fs": "~2.4.0",

2
frontend/src/App.tsx
View File

@ -8,6 +8,7 @@ import {
Settings,
Entity,
SearchPage,
AllImages,
} from "./pages";
import { SearchImageContextProvider } from "@contexts/SearchImageContext";
import { WithNotifications } from "@contexts/Notifications";
@ -31,6 +32,7 @@ export const App = () => {
<Route path="/" component={WithTopbarAndDock}>
<Route path="/" component={FrontPage} />
<Route path="/search" component={SearchPage} />
<Route path="/all-images" component={AllImages} />
<Route path="/image/:imageId" component={ImagePage} />
<Route path="/entity/:entityId" component={Entity} />
<Route path="/gallery/:entity" component={Gallery} />

2
frontend/src/components/app-wrapper/dock.tsx
View File

@ -11,7 +11,7 @@ export const Dock: Component = () => {
<A href="/search" class="w-full flex justify-center items-center">
<IconSearch />
</A>
<A href="/" class="w-full flex justify-center items-center">
<A href="/all-images" class="w-full flex justify-center items-center">
<IconPhoto />
</A>
</div>

29
frontend/src/pages/all-images/index.tsx Normal file
View File

@ -0,0 +1,29 @@
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { Component, For } from "solid-js";
import { createVirtualizer } from "@tanstack/solid-virtual";
import { ImageComponent } from "@components/image";
export const AllImages: Component = () => {
let scrollRef: HTMLDivElement | undefined;
const { userImages } = useSearchImageContext();
const rowVirtualizer = createVirtualizer({
count: userImages().length,
estimateSize: () => 400 / 3,
getScrollElement: () => scrollRef!,
overscan: 3,
});
return (
<div ref={scrollRef} class="flex flex-col gap-4 h-[1200px] overflow-y-auto">
<div
class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4`}
>
<For each={rowVirtualizer.getVirtualItems()}>
{(item) => <ImageComponent ID={userImages()[item.index].ImageID} />}
</For>
</div>
</div>
);
};

1
frontend/src/pages/index.ts
View File

@ -5,3 +5,4 @@ export * from "./settings";
export * from "./login";
export * from "./entity";
export * from "./search";
export * from "./all-images";