feat: Enhance file metadata and notification components

- Added sorting capabilities to file metadata lists, including SortBy and SortDir fields.
- Integrated a toast notification system for user feedback on actions.
- Updated templates and JavaScript for improved user interaction and responsiveness.
- Refactored file metadata handlers to utilize new sorting features and ensure proper data flow.
- Introduced new notification dialog components for better user confirmation on actions.

components/file_metadata/dialog/file_metadata_dialog.templ

@@ -7,7 +7,7 @@ import (
 
 // FileMetadataDialog renders a confirmation dialog for file metadata actions
 templ FileMetadataDialog(id string, title string, message string, confirmClass string, confirmText string, action string, fileID uint, fileName string, section string) {
-	@utils.fileMetadataJS()
+	@utils.FileMetadataJS()
 	<div id={ id } tabindex="-1" aria-hidden="true" class="hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
 		<!-- Backdrop -->
 		<div id={ fmt.Sprintf("%s-backdrop", id) } class="fixed inset-0 bg-gray-900/50 dark:bg-gray-900/80 backdrop-blur-sm"></div>
@@ -31,7 +31,7 @@ templ FileMetadataDialog(id string, title string, message string, confirmClass s
 							data-file-name={ fileName }
 							data-file-id={ fmt.Sprint(fileID) }
 							id={ fmt.Sprintf("delete-file-btn-%d", fileID) }
-							onclick={ triggerFileDelete(id, fileID, fileName) }>
+							onclick={ templ.ComponentScript{Call: fmt.Sprintf("triggerFileDelete('%s', %d, '%s')", id, fileID, fileName)} }>
 							{ confirmText }
 						</button>
 					} else {
@@ -43,11 +43,11 @@ templ FileMetadataDialog(id string, title string, message string, confirmClass s
 							data-file-name={ fileName }
 							data-file-id={ fmt.Sprint(fileID) }
 							id={ fmt.Sprintf("delete-file-btn-%d", fileID) }
-							onclick={ triggerFileDelete(id, fileID, fileName) }>
+							onclick={ templ.ComponentScript{Call: fmt.Sprintf("triggerFileDelete('%s', %d, '%s')", id, fileID, fileName)} }>
 							{ confirmText }
 						</button>
 					}
-					<button type="button" onclick={ closeModal(id) } class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+					<button type="button" onclick={ templ.ComponentScript{Call: fmt.Sprintf("closeModal('%s')", id)} } class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
 						Cancel
 					</button>
 				</div>
@@ -55,18 +55,3 @@ templ FileMetadataDialog(id string, title string, message string, confirmClass s
 		</div>
 	</div>
 }
-
-script triggerFileDelete(dialogId string, fileID uint, fileName string) {
-	// Hide the dialog
-	document.getElementById(dialogId).classList.add("hidden");
-	document.getElementById(dialogId).classList.remove("flex");
-		
-	// Store data in a way that's accessible to event handlers
-	window.lastDeletedFile = {
-		id: fileID,
-		name: fileName
-	};
-
-	// Add custom marker to track this deletion
-	window.currentlyDeletingFile = true;
-} 

components/file_metadata/dialog/file_metadata_dialog_templ.go

@@ -35,7 +35,7 @@ func FileMetadataDialog(id string, title string, message string, confirmClass st
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = utils.fileMetadataJS().Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = utils.FileMetadataJS().Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -98,7 +98,7 @@ func FileMetadataDialog(id string, title string, message string, confirmClass st
 			return templ_7745c5c3_Err
 		}
 		if section == "list" {
-			templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, triggerFileDelete(id, fileID, fileName))
+			templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, templ.ComponentScript{Call: fmt.Sprintf("triggerFileDelete('%s', %d, '%s')", id, fileID, fileName)})
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -171,7 +171,7 @@ func FileMetadataDialog(id string, title string, message string, confirmClass st
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var10 templ.ComponentScript = triggerFileDelete(id, fileID, fileName)
+			var templ_7745c5c3_Var10 templ.ComponentScript = templ.ComponentScript{Call: fmt.Sprintf("triggerFileDelete('%s', %d, '%s')", id, fileID, fileName)}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10.Call)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
@@ -194,7 +194,7 @@ func FileMetadataDialog(id string, title string, message string, confirmClass st
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, triggerFileDelete(id, fileID, fileName))
+			templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, templ.ComponentScript{Call: fmt.Sprintf("triggerFileDelete('%s', %d, '%s')", id, fileID, fileName)})
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -254,7 +254,7 @@ func FileMetadataDialog(id string, title string, message string, confirmClass st
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var16 templ.ComponentScript = triggerFileDelete(id, fileID, fileName)
+			var templ_7745c5c3_Var16 templ.ComponentScript = templ.ComponentScript{Call: fmt.Sprintf("triggerFileDelete('%s', %d, '%s')", id, fileID, fileName)}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var16.Call)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
@@ -277,7 +277,7 @@ func FileMetadataDialog(id string, title string, message string, confirmClass st
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, closeModal(id))
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, templ.ComponentScript{Call: fmt.Sprintf("closeModal('%s')", id)})
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -285,7 +285,7 @@ func FileMetadataDialog(id string, title string, message string, confirmClass st
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var18 templ.ComponentScript = closeModal(id)
+		var templ_7745c5c3_Var18 templ.ComponentScript = templ.ComponentScript{Call: fmt.Sprintf("closeModal('%s')", id)}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var18.Call)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -298,25 +298,4 @@ func FileMetadataDialog(id string, title string, message string, confirmClass st
 	})
 }
 
-func triggerFileDelete(dialogId string, fileID uint, fileName string) templ.ComponentScript {
-	return templ.ComponentScript{
-		Name: `__templ_triggerFileDelete_bdb5`,
-		Function: `function __templ_triggerFileDelete_bdb5(dialogId, fileID, fileName){// Hide the dialog
-	document.getElementById(dialogId).classList.add("hidden");
-	document.getElementById(dialogId).classList.remove("flex");
-		
-	// Store data in a way that's accessible to event handlers
-	window.lastDeletedFile = {
-		id: fileID,
-		name: fileName
-	};
-
-	// Add custom marker to track this deletion
-	window.currentlyDeletingFile = true;
-}`,
-		Call:       templ.SafeScript(`__templ_triggerFileDelete_bdb5`, dialogId, fileID, fileName),
-		CallInline: templ.SafeScriptInline(`__templ_triggerFileDelete_bdb5`, dialogId, fileID, fileName),
-	}
-}
-
 var _ = templruntime.GeneratedTemplate