Improvement: Add Upload Button to Image Gallery (#4500)

* Improvement: Add Upload Button to Image Gallery

- Added an **Upload Image** button to the **Image Gallery** for a more intuitive experience and easier use on mobile devices ~~(so I can upload some awesome GIFs right from my phone)~~
- Adjusted the `<select class="gallery-sort-select">` menu styling for better consistency with other sections, making it more compact and reducing wasted space

* Fix type error

---------

Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

public/scripts/extensions/gallery/index.js

@@ -63,10 +63,10 @@ mutationObserver.observe(document.body, {
 });
 
 const SORT = Object.freeze({
-    NAME_ASC: { value: 'nameAsc', field: 'name', order: 'asc', label: t`Sort By: Name (A-Z)` },
-    NAME_DESC: { value: 'nameDesc', field: 'name', order: 'desc', label: t`Sort By: Name (Z-A)` },
-    DATE_ASC: { value: 'dateAsc', field: 'date', order: 'asc', label: t`Sort By: Date (Oldest First)` },
-    DATE_DESC: { value: 'dateDesc', field: 'date', order: 'desc', label: t`Sort By: Date (Newest First)` },
+    NAME_ASC: { value: 'nameAsc', field: 'name', order: 'asc', label: t`Name (A-Z)` },
+    NAME_DESC: { value: 'nameDesc', field: 'name', order: 'desc', label: t`Name (Z-A)` },
+    DATE_DESC: { value: 'dateDesc', field: 'date', order: 'desc', label: t`Newest` },
+    DATE_ASC: { value: 'dateAsc', field: 'date', order: 'asc', label: t`Oldest` },
 });
 
 const defaultSettings = Object.freeze({
@@ -376,6 +376,11 @@ async function makeMovable(url) {
     const titleText = document.createElement('span');
     titleText.textContent = t`Image Gallery`;
     dragTitle.append(titleText);
+
+    // Create a container for the controls
+    const controlsContainer = document.createElement('div');
+    controlsContainer.classList.add('flex-container', 'alignItemsCenter');
+
     const sortSelect = document.createElement('select');
     sortSelect.classList.add('gallery-sort-select');
 
@@ -394,7 +399,42 @@ async function makeMovable(url) {
     });
 
     sortSelect.value = getSortOrder();
-    dragTitle.append(sortSelect);
+    controlsContainer.appendChild(sortSelect);
+
+    // Create the "Add Image" button
+    const addImageButton = document.createElement('div');
+    addImageButton.classList.add('menu_button', 'menu_button_icon', 'interactable');
+    addImageButton.title = 'Add Image';
+    addImageButton.innerHTML = '<i class="fa-solid fa-plus fa-fw"></i><div>Add Image</div>';
+
+    // Create a hidden file input
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = 'image/*';
+    fileInput.multiple = true;
+    fileInput.style.display = 'none';
+
+    // Trigger file input when the button is clicked
+    addImageButton.addEventListener('click', () => {
+        fileInput.click();
+    });
+
+    // Handle file selection
+    fileInput.addEventListener('change', async () => {
+        const files = fileInput.files;
+        if (files.length > 0) {
+            for (const file of files) {
+                await uploadFile(file, url);
+            }
+            // Refresh the gallery
+            closeButton.trigger('click');
+            await showCharGallery();
+        }
+    });
+
+    controlsContainer.appendChild(addImageButton);
+    dragTitle.append(controlsContainer);
+    newElement.append(fileInput); // Append hidden file input to the main element
 
     // add no-scrollbar class to this element
     newElement.addClass('no-scrollbar');

public/scripts/extensions/gallery/style.css

@@ -2,6 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 4px;
 }
 
 .gallery-folder-input {
@@ -26,13 +27,13 @@
     text-overflow: ellipsis;
     width: 100%;
     opacity: 0.8;
-    background: none;
+    background-color: var(--black30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     background-image: url(/img/down-arrow.svg);
     background-repeat: no-repeat;
     background-position: right 6px center;
     background-size: 8px 5px;
     padding-right: 20px;
-    font-size: calc(var(--mainFontSize)* 0.9);
     margin-bottom: 0;
 }