Add proper view segregation

src/main/java/com/imgfloat/app/model/Asset.java

@@ -22,7 +22,7 @@ public class Asset {
         this.x = 0;
         this.y = 0;
         this.rotation = 0;
-        this.hidden = true;
+        this.hidden = false;
         this.createdAt = Instant.now();
     }
 

src/main/resources/static/js/admin.js

@@ -14,7 +14,6 @@ function connect() {
             handleEvent(body);
         });
         fetchAssets();
-        fetchAdmins();
     });
 }
 
@@ -22,18 +21,6 @@ function fetchAssets() {
     fetch(`/api/channels/${broadcaster}/assets`).then(r => r.json()).then(renderAssets);
 }
 
-function fetchAdmins() {
-    fetch(`/api/channels/${broadcaster}/admins`).then(r => r.json()).then(list => {
-        const adminList = document.getElementById('admin-list');
-        adminList.innerHTML = '';
-        list.forEach(a => {
-            const li = document.createElement('li');
-            li.textContent = a;
-            adminList.appendChild(li);
-        });
-    }).catch(() => {});
-}
-
 function renderAssets(list) {
     list.forEach(asset => assets.set(asset.id, asset));
     draw();
@@ -77,16 +64,6 @@ function uploadAsset() {
     });
 }
 
-function addAdmin() {
-    const usernameInput = document.getElementById('new-admin');
-    const username = usernameInput.value;
-    fetch(`/api/channels/${broadcaster}/admins`, {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({username})
-    }).then(() => fetchAdmins());
-}
-
 window.addEventListener('resize', () => {
     canvas.width = canvas.offsetWidth;
     canvas.height = canvas.offsetHeight;

src/main/resources/static/js/dashboard.js

@@ -0,0 +1,44 @@
+function renderAdmins(list) {
+    const adminList = document.getElementById('admin-list');
+    adminList.innerHTML = '';
+    if (!list || list.length === 0) {
+        const empty = document.createElement('li');
+        empty.textContent = 'No channel admins yet';
+        adminList.appendChild(empty);
+        return;
+    }
+
+    list.forEach((admin) => {
+        const li = document.createElement('li');
+        li.textContent = admin;
+        adminList.appendChild(li);
+    });
+}
+
+function fetchAdmins() {
+    fetch(`/api/channels/${broadcaster}/admins`)
+        .then((r) => r.json())
+        .then(renderAdmins)
+        .catch(() => renderAdmins([]));
+}
+
+function addAdmin() {
+    const input = document.getElementById('new-admin');
+    const username = input.value.trim();
+    if (!username) {
+        alert('Enter a Twitch username to add as an admin.');
+        return;
+    }
+
+    fetch(`/api/channels/${broadcaster}/admins`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username })
+    })
+        .then(() => {
+            input.value = '';
+            fetchAdmins();
+        });
+}
+
+fetchAdmins();

src/main/resources/templates/admin.html

@@ -20,13 +20,8 @@
     </header>
     <section class="controls">
         <div>
-            <h3>Admins</h3>
+            <h3>Overlay assets</h3>
-            <input id="new-admin" placeholder="Twitch username" />
+            <p>Upload images to place on the broadcaster's overlay. Changes are visible to the broadcaster instantly.</p>
-            <button onclick="addAdmin()">Add admin</button>
-            <ul id="admin-list"></ul>
-        </div>
-        <div>
-            <h3>Assets</h3>
             <input id="asset-file" type="file" accept="image/*" />
             <button onclick="uploadAsset()">Upload</button>
             <ul id="asset-list"></ul>

src/main/resources/templates/dashboard.html

@@ -16,6 +16,15 @@
             <button class="secondary" type="submit">Logout</button>
         </form>
     </div>
+    <div class="panel">
+        <h3>Channel admins</h3>
+        <p>Add trusted moderators who can upload overlay assets on your behalf.</p>
+        <div class="actions">
+            <input id="new-admin" placeholder="Twitch username" />
+            <button type="button" onclick="addAdmin()">Add admin</button>
+        </div>
+        <ul id="admin-list" class="stacked-list"></ul>
+    </div>
     <div th:if="${adminChannels != null}"
          class="panel">
         <h3>Channels you administer</h3>
@@ -28,5 +37,9 @@
         </ul>
     </div>
 </div>
+<script th:inline="javascript">
+    const broadcaster = /*[[${channel}]]*/ '';
+</script>
+<script src="/js/dashboard.js"></script>
 </body>
 </html>