Add listing

src/main/resources/static/css/styles.css

@@ -82,3 +82,21 @@ body {
     overflow: hidden;
     background: transparent;
 }
+
+.panel {
+    margin-top: 24px;
+    padding: 16px;
+    background: #0b1220;
+    border-radius: 10px;
+    border: 1px solid #1f2937;
+}
+
+.panel ul {
+    list-style: none;
+    padding: 0;
+    margin: 8px 0 0 0;
+}
+
+.panel li {
+    margin: 6px 0;
+}

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

@@ -62,13 +62,18 @@ function draw() {
 }
 
 function uploadAsset() {
-    const url = document.getElementById('asset-url').value;
-    const width = parseFloat(document.getElementById('asset-width').value);
-    const height = parseFloat(document.getElementById('asset-height').value);
+    const fileInput = document.getElementById('asset-file');
+    if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
+        alert('Please choose an image to upload.');
+        return;
+    }
+    const data = new FormData();
+    data.append('file', fileInput.files[0]);
     fetch(`/api/channels/${broadcaster}/assets`, {
         method: 'POST',
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({url, width, height})
+        body: data
+    }).then(() => {
+        fileInput.value = '';
     });
 }
 

src/main/resources/templates/admin.html

@@ -27,9 +27,7 @@
         </div>
         <div>
             <h3>Assets</h3>
-            <input id="asset-url" placeholder="Asset URL" />
-            <input id="asset-width" placeholder="Width" type="number" value="600" />
-            <input id="asset-height" placeholder="Height" type="number" value="400" />
+            <input id="asset-file" type="file" accept="image/*" />
             <button onclick="uploadAsset()">Upload</button>
             <ul id="asset-list"></ul>
         </div>

src/main/resources/templates/dashboard.html

@@ -16,6 +16,17 @@
             <button class="secondary" type="submit">Logout</button>
         </form>
     </div>
+    <div th:if="${adminChannels != null}"
+         class="panel">
+        <h3>Channels you administer</h3>
+        <p th:if="${#lists.isEmpty(adminChannels)}">No admin invitations yet.</p>
+        <ul th:if="${!#lists.isEmpty(adminChannels)}">
+            <li th:each="channelName : ${adminChannels}">
+                <a th:href="@{'/view/' + ${channelName} + '/admin'}"
+                   th:text="${channelName}">channel</a>
+            </li>
+        </ul>
+    </div>
 </div>
 </body>
 </html>