From bdbb0d6b36392a83dc042183205fb5983c211ba5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= <andreas@kruhlmann.dev>
Date: Wed, 10 Dec 2025 09:56:55 +0100
Subject: [PATCH] Fix wrappers

---
 src/main/resources/static/css/styles.css | 61 +++++++++++++++++++++++-
 src/main/resources/static/js/admin.js    | 26 +++++++---
 src/main/resources/templates/admin.html  | 22 ++++++---
 3 files changed, 95 insertions(+), 14 deletions(-)

diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
index 41f71f4..09305d7 100644
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -534,7 +534,8 @@ body {
 
 .asset-inspector {
     background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(148, 163, 184, 0.15);
+    border: none !important;
+    padding: 0 !important;
 }
 
 .asset-controls-placeholder {
@@ -873,6 +874,64 @@ body {
     align-items: center;
     gap: 8px;
     padding-top: 6px;
+    position: relative;
+}
+
+.checkbox-inline.toggle {
+    gap: 12px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.checkbox-inline input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+}
+
+.toggle-track {
+    position: relative;
+    width: 52px;
+    height: 30px;
+    display: inline-flex;
+    align-items: center;
+    padding: 4px;
+    border-radius: 999px;
+    background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
+    border: 1px solid #cbd5e1;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
+    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.toggle-thumb {
+    width: 22px;
+    height: 22px;
+    border-radius: 999px;
+    background: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
+    transform: translateX(0);
+    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+
+.checkbox-inline input[type="checkbox"]:checked + .toggle-track {
+    background: linear-gradient(180deg, #34c759, #28b74b);
+    border-color: #28b74b;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(52, 199, 89, 0.35);
+}
+
+.checkbox-inline input[type="checkbox"]:checked + .toggle-track .toggle-thumb {
+    transform: translateX(22px);
+    box-shadow: 0 2px 6px rgba(40, 183, 75, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
+}
+
+.checkbox-inline input[type="checkbox"]:focus-visible + .toggle-track {
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.18);
+}
+
+.toggle-label {
+    color: #e2e8f0;
+    font-weight: 600;
 }
 
 .muted {
diff --git a/src/main/resources/static/js/admin.js b/src/main/resources/static/js/admin.js
index c26fe6e..2b5cfc6 100644
--- a/src/main/resources/static/js/admin.js
+++ b/src/main/resources/static/js/admin.js
@@ -1294,26 +1294,40 @@ function deleteAsset(asset) {
 
 function handleFileSelection(input) {
     if (!input) return;
-    const name = input.files && input.files.length ? input.files[0].name : '';
+    const hasFile = input.files && input.files.length;
+    const name = hasFile ? input.files[0].name : '';
     if (fileNameLabel) {
         fileNameLabel.textContent = name || 'No file chosen';
     }
+    if (hasFile) {
+        uploadAsset(input.files[0]);
+    }
 }
 
-function uploadAsset() {
+function uploadAsset(file = null) {
     const fileInput = document.getElementById('asset-file');
-    if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
+    const selectedFile = file || (fileInput?.files && fileInput.files.length ? fileInput.files[0] : null);
+    if (!selectedFile) {
         alert('Please choose an image, GIF, video, or audio file to upload.');
         return;
     }
     const data = new FormData();
-    data.append('file', fileInput.files[0]);
+    data.append('file', selectedFile);
+    if (fileNameLabel) {
+        fileNameLabel.textContent = 'Uploading...';
+    }
     fetch(`/api/channels/${broadcaster}/assets`, {
         method: 'POST',
         body: data
     }).then(() => {
-        fileInput.value = '';
-        handleFileSelection(fileInput);
+        if (fileInput) {
+            fileInput.value = '';
+            handleFileSelection(fileInput);
+        }
+    }).catch(() => {
+        if (fileNameLabel) {
+            fileNameLabel.textContent = 'Upload failed';
+        }
     });
 }
 
diff --git a/src/main/resources/templates/admin.html b/src/main/resources/templates/admin.html
index 9336be1..19638bf 100644
--- a/src/main/resources/templates/admin.html
+++ b/src/main/resources/templates/admin.html
@@ -38,7 +38,6 @@
                                 <small id="asset-file-name">No file chosen</small>
                             </span>
                         </label>
-                        <button onclick="uploadAsset()">Upload</button>
                     </div>
                     <ul id="asset-list" class="asset-list"></ul>
                 </div>
@@ -76,9 +75,12 @@
                                             Height
                                             <input id="asset-height" class="number-input" type="number" min="10" step="5" />
                                         </label>
-                                        <label class="checkbox-inline">
+                                        <label class="checkbox-inline toggle">
                                             <input id="maintain-aspect" type="checkbox" checked />
-                                            Maintain aspect
+                                            <span class="toggle-track" aria-hidden="true">
+                                                <span class="toggle-thumb"></span>
+                                            </span>
+                                            <span class="toggle-label">Maintain aspect</span>
                                         </label>
                                     </div>
                                     <div class="control-grid condensed">
@@ -110,9 +112,12 @@
                                             <input id="asset-speed" class="range-input" type="range" min="0" max="1000" step="10" value="100" />
                                         </label>
                                         <div class="range-meta"><span>0%</span><span>1000%</span></div>
-                                        <label class="checkbox-inline">
+                                        <label class="checkbox-inline toggle">
                                             <input id="asset-muted" type="checkbox" />
-                                            Mute
+                                            <span class="toggle-track" aria-hidden="true">
+                                                <span class="toggle-thumb"></span>
+                                            </span>
+                                            <span class="toggle-label">Mute</span>
                                         </label>
                                     </div>
                                 </div>
@@ -122,9 +127,12 @@
                                         <h5>Audio</h5>
                                     </div>
                                     <div class="control-grid condensed three-col">
-                                        <label class="checkbox-inline">
+                                        <label class="checkbox-inline toggle">
                                             <input id="asset-audio-loop" type="checkbox" />
-                                            Loop
+                                            <span class="toggle-track" aria-hidden="true">
+                                                <span class="toggle-thumb"></span>
+                                            </span>
+                                            <span class="toggle-label">Loop</span>
                                         </label>
                                         <label>
                                             Delay (ms)