Add drag-and-drop file upload and macro settings enhancements

### Changes Made
- Added a new SVG asset (`download-solid.svg`) to `src/assets`.
- Updated `main.js`:
  - Added a new template `SETTINGS_MENU_MACRO`.
  - Improved drag-and-drop file upload handling with visual feedback.
  - Enhanced macro functionality with custom drag-and-drop events on hotbar macros.
  - Adjusted `registerSettings` function to include macro menu registration.
- Updated `module.json`:
  - Added macro pack support under `packs` for "asc-asset-manager-macros."
- Created new binary files for macro pack (`asc-asset-manager-macros`).
- Improved CSS styling:
  - Added `.dragover` class for better drag-and-drop UI feedback.
  - Updated styles to include `asc-asset-manager` context.
- Updated `upload-choose.hbs` and `upload-form.hbs`:
  - Added `moduleId` class context.
  - Enhanced `upload-form` with an image preview section.
- Added a new template (`settings-menu-macro.hbs`) for macro-related UI.
- Improved logging and hooks for better event tracking and debugging.

This commit enhances functionality, user experience, and modularity for managing assets.

src/main.js

@@ -7,7 +7,8 @@ export class AscAssetManager {
   static ID = 'asc-asset-manager'
   static TEMPLATES = {
     UPLOAD_CHOOSE:`modules/${this.ID}/templates/upload-choose.hbs`,
-    UPLOAD_FORM:`modules/${this.ID}/templates/upload-form.hbs`
+    UPLOAD_FORM:`modules/${this.ID}/templates/upload-form.hbs`,
+    SETTINGS_MENU_MACRO:`modules/${this.ID}/templates/settings-menu-macro.hbs`
   }
 
   static getDirectory () {
@@ -34,14 +35,17 @@ export class AscAssetManager {
   }
 }
 
+Hooks.on('init', ()=>CONFIG.debug.hooks = true)
+
 Hooks.on("ready", function() {
   AscAssetManager.log(false, "Deno nodule reody")
-  registerSettings(AscAssetManager.ID);
+  registerSettings(AscAssetManager);
 });
 
-Hooks.on("ascAssetManager.renderUploadChoose", () => {
-  renderTemplate(AscAssetManager.TEMPLATES.UPLOAD_CHOOSE).then((content)=>{
-    new Dialog({
+Hooks.on("ascAssetManager.renderUploadChoose", (data={}) => {
+  let {files} = data
+  renderTemplate(AscAssetManager.TEMPLATES.UPLOAD_CHOOSE, {moduleId: AscAssetManager.ID}).then((content)=>{
+    const dialog = new Dialog({
       title: "Choose",
       content: content,
       buttons: [],
@@ -51,19 +55,23 @@ Hooks.on("ascAssetManager.renderUploadChoose", () => {
         const fileInput = html.find("#file-input");
         const form = html.find("form")
 
+        if (files) {
+          fileInput.val(files)
+        }
+
          // Handle drag-and-drop events
          uploadArea.on("dragover", (event) => {
           event.preventDefault();
-          uploadArea.css("background-color", "#e0f7fa");
+          uploadArea.addClass('dragover')
         });
 
         uploadArea.on("dragleave", () => {
-          uploadArea.css("background-color", "");
+          uploadArea.removeClass('dragover')
         });
 
         uploadArea.on("drop", (event) => {
           event.preventDefault();
-          uploadArea.css("background-color", "");
+          // uploadArea.css("background-color", "");
           const files = event.originalEvent.dataTransfer.files;
           if (files.length > 0) {
             AscAssetManager.log(false, 'file dropped change')
@@ -73,7 +81,9 @@ Hooks.on("ascAssetManager.renderUploadChoose", () => {
               dataTransfer.items.add(file); // Add the first dropped file
             }
             fileInput.files = dataTransfer.files;
-            fileInput.trigger('change')
+            for (let file of fileInput.files) {
+              Hooks.callAll("ascAssetManager.renderUploadForm", {file})
+            }
           }
         });
 
@@ -83,22 +93,56 @@ Hooks.on("ascAssetManager.renderUploadChoose", () => {
            uploadArea.find("p").text(`Selected file: ${Array.from(files).map(f=>f.name).join(', ')}`);
            
         })
-        form.on('submit', (event) => {
-          for (let file of fileInput.files) {
-            Hooks.callAll("ascAssetManager.renderUploadForm", {file})
-          }
-        })
-        
       }
     }).render(true) 
   })
 })
 
-Hooks.on("ascAssetManager.renderUploadForm", (data)=>{
-  const templateData = {fileCategories: AscAssetManager.fileCategories, fileTags: AscAssetManager.fileTags}
+Hooks.on("renderHotbar", ({macros}, html) => {
+  // Find macro on the hotbar
+  for (let macro_item of macros) {
+    const {macro} = macro_item
+    if (macro?.command?.includes("ascAssetManager.renderUploadChoose")) {
+      AscAssetManager.log(false, `Found macro with command: ${macro.name}`);
+
+      // Find the corresponding button in the hotbar
+      const macroButton = html.find(`.macro[data-macro-id='${macro.id}']`);
+
+      if (macroButton.length > 0) {
+        AscAssetManager.log(false, `Adding custom drop event to macro: ${macro.name}`, {macro, macroButton});
+        macroButton.addClass(AscAssetManager.ID)
+
+        macroButton.on('dragover', (event)=>{
+          AscAssetManager.log(false, {event});
+          $(event.currentTarget).addClass('dragover');
+          AscAssetManager.log(false, {classlist: event.currentTarget.classList});
+        })
+        macroButton.on('dragleave', (event)=>$(event.currentTarget).removeClass('dragover'))
+
+        // Add a custom drop event to the macro
+        macroButton.on("drop", (event) => {
+          event.preventDefault();
+          $(event.currentTarget).removeClass('dragover')
+          const files = event.originalEvent.dataTransfer.files;
+          AscAssetManager.log(false, "Dropped file on macro.", {files});
+
+          for (let file of files) {
+            Hooks.callAll("ascAssetManager.renderUploadForm", {file})
+          }
+
+          // Perform your custom logic with the dropped data
+          // handleCustomDrop(droppedData, macro);
+        });
+      }
+    }
+  }
+});
+
+Hooks.on("ascAssetManager.renderUploadForm", (data={})=>{
+  const templateData = {moduleId: AscAssetManager.ID, fileCategories: AscAssetManager.fileCategories, fileTags: AscAssetManager.fileTags}
   renderTemplate(AscAssetManager.TEMPLATES.UPLOAD_FORM, templateData).then(content => {
     let {file} = data
-    new Dialog({
+    const dialog = new Dialog({
       title: "Simple Popup",
       content: content,
       buttons: [],
@@ -153,7 +197,10 @@ Hooks.on("ascAssetManager.renderUploadForm", (data)=>{
                 notify: true
               }
           )
-          .then((res)=>AscAssetManager.log(false, 'Uploaded!', res))
+          .then((res)=>{
+            AscAssetManager.log(false, 'Uploaded!', res);
+            dialog.close()
+          })
           .catch((e)=>ui.notifications.error('Error uploading', e))
         })
       }