From 872ed764f5759cd59a8f01c8730a614d7ee01936 Mon Sep 17 00:00:00 2001
From: javl <mail@jaspervanloenen.com>
Date: Sat, 15 Aug 2026 15:03:23 +0200
Subject: [PATCH] Add previews to uploaded images

---
 css/style.css | 32 +++++++++++++++++++++++++++++---
 js/script.js  | 28 ++++++++++++++++++++++------
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/css/style.css b/css/style.css
index 435ab2c..8db299c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -663,8 +663,8 @@ input[type="file"]::file-selector-button {
 .remove-button {
   margin: 0 0 0 10px;
   padding: 2px 8px;
-  background: var(--surface-container-high);
-  color: var(--on-surface-variant);
+  /* background: var(--surface-container-high); */
+  /* color: var(--on-surface-variant); */
 }
 
 #no-images-error {
@@ -674,10 +674,16 @@ input[type="file"]::file-selector-button {
 
 .file-input-entry {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
   margin: 10px 0;
 }
 
+.file-input-entry span {
+  flex: 1;
+  min-width: 0;
+}
+
 .file-info {
   color: var(--text-muted);
   font-size: 12px;
@@ -704,12 +710,32 @@ input[type="file"]::file-selector-button {
 }
 
 #image-size-settings li {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
   margin: 6px 0;
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-lg);
   padding: 8px 12px;
 }
 
+.image-size-thumb {
+  width: auto;
+  height: auto;
+  max-width: 100px;
+  max-height: 100px;
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-md, 4px);
+  background: var(--surface-variant, #fff);
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+.image-size-details {
+  flex: 1;
+  min-width: 0;
+}
+
 /* ---- Preview canvases ---- */
 
 #images-canvas-container {
diff --git a/js/script.js b/js/script.js
index cb0c5ab..3580026 100644
--- a/js/script.js
+++ b/js/script.js
@@ -783,6 +783,11 @@ function handleImageSelection(evt) {
         const fileInputColumnEntry = document.createElement('div');
         fileInputColumnEntry.className = 'file-input-entry';
 
+        const fileInputColumnEntryThumb = document.createElement('img');
+        fileInputColumnEntryThumb.className = 'image-size-thumb';
+        fileInputColumnEntryThumb.src = img.src;
+        fileInputColumnEntryThumb.alt = file.name;
+
         const fileInputColumnEntryLabel = document.createElement('span');
         fileInputColumnEntryLabel.textContent = file.name;
 
@@ -795,6 +800,11 @@ function handleImageSelection(evt) {
         const imageEntry = document.createElement('li');
         imageEntry.setAttribute('data-img', file.name);
 
+        const thumb = document.createElement('img');
+        thumb.className = 'image-size-thumb';
+        thumb.src = img.src;
+        thumb.alt = file.name;
+
         const w = document.createElement('input');
         w.type = 'number';
         w.name = 'width';
@@ -874,16 +884,22 @@ function handleImageSelection(evt) {
 
         fileInputColumnEntryRemoveButton.onclick = removeButtonOnClick;
 
+        fileInputColumnEntry.appendChild(fileInputColumnEntryThumb);
         fileInputColumnEntry.appendChild(fileInputColumnEntryLabel);
         fileInputColumnEntry.appendChild(fileInputColumnEntryRemoveButton);
         fileInputColumn.appendChild(fileInputColumnEntry);
 
-        imageEntry.appendChild(fn);
-        imageEntry.appendChild(w);
-        imageEntry.appendChild(document.createTextNode(' x '));
-        imageEntry.appendChild(h);
-        imageEntry.appendChild(gil);
-        imageEntry.appendChild(gi);
+        const imageEntryDetails = document.createElement('div');
+        imageEntryDetails.className = 'image-size-details';
+        imageEntryDetails.appendChild(fn);
+        imageEntryDetails.appendChild(w);
+        imageEntryDetails.appendChild(document.createTextNode(' x '));
+        imageEntryDetails.appendChild(h);
+        imageEntryDetails.appendChild(gil);
+        imageEntryDetails.appendChild(gi);
+
+        imageEntry.appendChild(thumb);
+        imageEntry.appendChild(imageEntryDetails);
 
         imageSizeSettings.appendChild(imageEntry);