fix: media infinite should be disabled for dropzone in entities

app/.gitignore

@@ -1,3 +1,4 @@
 playwright-report
 test-results
 bknd.config.*
+app/__test__/helper.d.ts

app/src/modules/Controller.ts

@@ -1,6 +1,7 @@
 import type { App } from "App";
 import { type Context, Hono } from "hono";
 import * as middlewares from "modules/middlewares";
+import type { SafeUser } from "auth";
 
 export type ServerEnv = {
    Variables: {
@@ -10,7 +11,7 @@ export type ServerEnv = {
          resolved: boolean;
          registered: boolean;
          skip: boolean;
-         user?: { id: any; role?: string; [key: string]: any };
+         user?: SafeUser;
       };
       html?: string;
    };

app/src/ui/elements/media/DropzoneContainer.tsx

@@ -11,7 +11,7 @@ import {
    useRef,
    useState,
 } from "react";
-import { useApi, useApiInfiniteQuery, useInvalidate } from "ui/client";
+import { useApi, useApiInfiniteQuery, useApiQuery, useInvalidate } from "ui/client";
 import { useEvent } from "ui/hooks/use-event";
 import { Dropzone, type DropzoneProps, type DropzoneRenderProps, type FileState } from "./Dropzone";
 import { mediaItemsToFileStates } from "./helper";
@@ -20,6 +20,7 @@ import { useInViewport } from "@mantine/hooks";
 export type DropzoneContainerProps = {
    children?: ReactNode;
    initialItems?: MediaFieldSchema[] | false;
+   infinite?: boolean;
    entity?: {
       name: string;
       id: number;
@@ -39,6 +40,7 @@ export function DropzoneContainer({
    query,
    children,
    randomFilename,
+   infinite = false,
    ...props
 }: DropzoneContainerProps) {
    const id = useId();
@@ -54,7 +56,7 @@ export function DropzoneContainer({
    const entity_name = (media?.entity_name ?? "media") as "media";
    //console.log("dropzone:baseUrl", baseUrl);
 
-   const selectApi = (api: Api, page: number) =>
+   const selectApi = (api: Api, page: number = 0) =>
       entity
          ? api.data.readManyByReference(entity.name, entity.id, entity.field, {
               ...query,
@@ -70,7 +72,11 @@ export function DropzoneContainer({
               ...defaultQuery(page),
            });
 
-   const $q = useApiInfiniteQuery(selectApi, {});
+   const $q = infinite
+      ? useApiInfiniteQuery(selectApi, {})
+      : useApiQuery(selectApi, {
+           enabled: initialItems !== false && !initialItems,
+        });
 
    const getUploadInfo = useEvent((file) => {
       const url = entity
@@ -108,11 +114,17 @@ export function DropzoneContainer({
          autoUpload
          initialItems={_initialItems}
          footer={
+            infinite &&
+            "setSize" in $q && (
                <Footer
                   items={_initialItems.length}
-               length={$q._data?.[0]?.body.meta.count ?? 0}
+                  length={Math.min(
+                     $q._data?.[0]?.body.meta.count ?? 0,
+                     _initialItems.length + pageSize,
+                  )}
                   onFirstVisible={() => $q.setSize($q.size + 1)}
                />
+            )
          }
          {...props}
       >
@@ -142,14 +154,14 @@ const Footer = ({ items = 0, length = 0, onFirstVisible }) => {
    const _len = length - items;
    if (_len <= 0) return null;
 
-   return new Array(Math.max(length - items, 0)).fill(0).map((_, i) => (
+   return new Array(Math.max(length - items, 0))
+      .fill(0)
+      .map((_, i) => (
          <div
             key={i}
             ref={i === 0 ? ref : undefined}
             className="w-[49%] md:w-60 bg-muted aspect-square"
-      >
+         />
-         {i === 0 ? (inViewport ? `load ${visible}` : "first") : "other"}
-      </div>
       ));
 };
 

app/src/ui/routes/media/media.index.tsx

@@ -35,7 +35,7 @@ export function MediaIndex() {
    return (
       <AppShell.Scrollable>
          <div className="flex flex-1 p-3">
-            <Media.Dropzone onClick={onClick} />
+            <Media.Dropzone onClick={onClick} infinite />
          </div>
       </AppShell.Scrollable>
    );

app/vite.dev.ts

@@ -66,7 +66,9 @@ export default {
             },
             "sync",
          );
-         await app.build();
+         await app.build({
+            sync: !!(firstStart && example),
+         });
 
          // log routes
          if (firstStart) {