Add Media.Dropzone and Media.Preview as isolated elements

Introduce `Media.*` to modularize and customize file upload handling. Refactor media-related components to improve usability, add max item limits, overwrite support, and event callbacks.

app/src/ui/routes/media/_media.root.tsx

@@ -1,16 +1,12 @@
 import { IconPhoto } from "@tabler/icons-react";
-import type { MediaFieldSchema } from "modules";
 import { TbSettings } from "react-icons/tb";
-import { useApi, useBaseUrl, useEntityQuery } from "ui/client";
 import { useBknd } from "ui/client/BkndProvider";
 import { IconButton } from "ui/components/buttons/IconButton";
 import { Empty } from "ui/components/display/Empty";
 import { Link } from "ui/components/wouter/Link";
+import { Media } from "ui/elements";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
-import { useEvent } from "ui/hooks/use-event";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
-import { Dropzone, type FileState } from "ui/modules/media/components/dropzone/Dropzone";
-import { mediaItemsToFileStates } from "ui/modules/media/helper";
 import { useLocation } from "wouter";
 
 export function MediaRoot({ children }) {
@@ -63,35 +59,11 @@ export function MediaRoot({ children }) {
 // @todo: add infinite load
 export function MediaEmpty() {
    useBrowserTitle(["Media"]);
-   const baseUrl = useBaseUrl();
-   const api = useApi();
-   const $q = useEntityQuery("media", undefined, { limit: 50 });
-
-   const getUploadInfo = useEvent((file) => {
-      return {
-         url: api.media.getFileUploadUrl(file),
-         headers: api.media.getUploadHeaders(),
-         method: "POST"
-      };
-   });
-
-   const handleDelete = useEvent(async (file: FileState) => {
-      return api.media.deleteFile(file.path);
-   });
-
-   const media = ($q.data || []) as MediaFieldSchema[];
-   const initialItems = mediaItemsToFileStates(media, { baseUrl });
 
    return (
       <AppShell.Scrollable>
          <div className="flex flex-1 p-3">
-            <Dropzone
-               key={$q.isLoading ? "loaded" : "initial"}
-               getUploadInfo={getUploadInfo}
-               handleDelete={handleDelete}
-               autoUpload
-               initialItems={initialItems}
-            />
+            <Media.Dropzone />
          </div>
       </AppShell.Scrollable>
    );

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

@@ -11,6 +11,7 @@ import FlowFormTest from "../../routes/test/tests/flow-form-test";
 import ModalTest from "../../routes/test/tests/modal-test";
 import QueryJsonFormTest from "../../routes/test/tests/query-jsonform";
 import DropdownTest from "./tests/dropdown-test";
+import DropzoneElementTest from "./tests/dropzone-element-test";
 import EntityFieldsForm from "./tests/entity-fields-form";
 import FlowsTest from "./tests/flows-test";
 import JsonFormTest from "./tests/jsonform-test";
@@ -41,7 +42,8 @@ const tests = {
    AppShellAccordionsTest,
    SwaggerTest,
    SWRAndAPI,
-   SwrAndDataApi
+   SwrAndDataApi,
+   DropzoneElementTest
 } as const;
 
 export default function TestRoutes() {

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

@@ -0,0 +1,78 @@
+import { type DropzoneRenderProps, Media } from "ui/elements";
+import { Scrollable } from "ui/layouts/AppShell/AppShell";
+
+export default function DropzoneElementTest() {
+   return (
+      <Scrollable>
+         <div className="flex flex-col w-full h-full p-4 gap-4">
+            <div>
+               <b>Dropzone User Avatar 1 (fully customized)</b>
+               <Media.Dropzone
+                  entity={{ name: "users", id: 1, field: "avatar" }}
+                  maxItems={1}
+                  overwrite
+               >
+                  {(props) => <CustomUserAvatarDropzone {...props} />}
+               </Media.Dropzone>
+            </div>
+
+            <div>
+               <b>Dropzone User Avatar 1 (overwrite)</b>
+               <Media.Dropzone
+                  entity={{ name: "users", id: 1, field: "avatar" }}
+                  maxItems={1}
+                  overwrite
+               />
+            </div>
+
+            <div>
+               <b>Dropzone User Avatar 1</b>
+               <Media.Dropzone entity={{ name: "users", id: 1, field: "avatar" }} maxItems={1} />
+            </div>
+
+            <div>
+               <b>Dropzone Container blank w/ query</b>
+               <Media.Dropzone query={{ limit: 2 }} />
+            </div>
+
+            <div>
+               <b>Dropzone Container blank</b>
+               <Media.Dropzone />
+            </div>
+
+            <div>
+               <b>Dropzone Post 12</b>
+               <Media.Dropzone entity={{ name: "posts", id: 12, field: "images" }} />
+            </div>
+         </div>
+      </Scrollable>
+   );
+}
+
+function CustomUserAvatarDropzone({
+   wrapperRef,
+   inputProps,
+   state: { files, isOver, isOverAccepted, showPlaceholder },
+   actions: { openFileInput }
+}: DropzoneRenderProps) {
+   const file = files[0];
+
+   return (
+      <div
+         ref={wrapperRef}
+         className="size-32 rounded-full border border-gray-200 flex justify-center items-center leading-none overflow-hidden"
+      >
+         <div className="hidden">
+            <input {...inputProps} />
+         </div>
+         {showPlaceholder && <>{isOver && isOverAccepted ? "let it drop" : "drop here"}</>}
+         {file && (
+            <Media.Preview
+               file={file}
+               className="object-cover w-full h-full"
+               onClick={openFileInput}
+            />
+         )}
+      </div>
+   );
+}