add media detail dialog and infinite loading

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

@@ -1,13 +1,14 @@
 import { IconPhoto } from "@tabler/icons-react";
 import { useBknd } from "ui/client/BkndProvider";
 import { Empty } from "ui/components/display/Empty";
-import { Media } from "ui/elements";
+import { type FileState, Media } from "ui/elements";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
 import { useLocation } from "wouter";
+import { bkndModals } from "ui/modals";
 
 export function MediaIndex() {
-   const { app, config } = useBknd();
+   const { config } = useBknd();
    const [, navigate] = useLocation();
    useBrowserTitle(["Media"]);
 
@@ -25,10 +26,16 @@ export function MediaIndex() {
       );
    }
 
+   const onClick = (file: FileState) => {
+      bkndModals.open(bkndModals.ids.mediaInfo, {
+         file,
+      });
+   };
+
    return (
       <AppShell.Scrollable>
          <div className="flex flex-1 p-3">
-            <Media.Dropzone />
+            <Media.Dropzone onClick={onClick} />
          </div>
       </AppShell.Scrollable>
    );

app/src/ui/routes/test/tests/dropzone-element-test.tsx

@@ -19,7 +19,7 @@ export default function DropzoneElementTest() {
                </Media.Dropzone>
             </div>
 
-            <div>
+            {/*<div>
                <b>Dropzone User Avatar 1 (overwrite)</b>
                <Media.Dropzone
                   entity={{ name: "users", id: 1, field: "avatar" }}
@@ -36,7 +36,7 @@ export default function DropzoneElementTest() {
             <div>
                <b>Dropzone Container blank w/ query</b>
                <Media.Dropzone query={{ limit: 2 }} />
-            </div>
+            </div>*/}
 
             <div>
                <b>Dropzone Container blank</b>