Improve script UI

2026-02-05 03:39:26 +00:00 · 2026-01-10 02:07:03 +01:00
parent 6cba63d025
commit 2d5c21e7aa
4 changed files with 102 additions and 40 deletions
--- a/src/main/resources/static/css/customAssets.css
+++ b/src/main/resources/static/css/customAssets.css
@@ -25,8 +25,12 @@
    width: 460px;
 }

+.modal .modal-inner.medium {
+    width: 720px;
+}
+
 .modal .modal-inner.wide {
-    width: 960px;
+    width: 1120px;
 }

 .modal .modal-inner .modal-header-row {
@@ -58,6 +62,51 @@
    gap: 10px;
 }

+.modal .modal-inner .launch-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+    margin-top: 16px;
+}
+
+.modal .modal-inner .launch-tile {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+    padding: 16px;
+    border-radius: 12px;
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    background: rgba(15, 23, 42, 0.75);
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+    min-height: 140px;
+    width: 100%;
+    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+}
+
+.modal .modal-inner .launch-tile:hover,
+.modal .modal-inner .launch-tile:focus-visible {
+    border-color: rgba(226, 232, 240, 0.7);
+    background: rgba(30, 41, 59, 0.8);
+    transform: translateY(-1px);
+}
+
+.modal .modal-inner .launch-tile .tile-icon {
+    font-size: 1.4rem;
+    color: rgba(226, 232, 240, 0.9);
+}
+
+.modal .modal-inner .launch-tile .tile-title {
+    font-weight: 600;
+}
+
+.modal .modal-inner .launch-tile .tile-subtitle {
+    color: rgba(226, 232, 240, 0.7);
+    font-size: 0.9rem;
+}
+
 .modal .modal-inner .checkbox-row {
    flex-direction: row;
    align-items: center;
@@ -146,21 +195,22 @@
 }

 .modal .modal-inner .marketplace-list {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    margin-top: 8px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 16px;
+    margin-top: 12px;
 }

 .modal .modal-inner .marketplace-card {
-    display: grid;
-    grid-template-columns: 80px 1fr auto;
-    gap: 16px;
-    align-items: center;
-    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 10px;
    background-color: rgba(15, 23, 42, 0.6);
+    min-height: 240px;
 }

 .modal .modal-inner .marketplace-logo {
@@ -193,6 +243,9 @@
 .modal .modal-inner .marketplace-actions {
    display: flex;
    align-items: center;
+    margin-top: auto;
+    width: 100%;
+    justify-content: flex-end;
 }

 .modal .modal-inner .marketplace-empty,
--- a/src/main/resources/static/js/admin/console.js
+++ b/src/main/resources/static/js/admin/console.js
@@ -110,9 +110,9 @@ export function createAdminConsole({
                handleFileSelection(event.target);
            });
        }
-        const customAssetButton = document.getElementById("custom-asset-button");
-        if (customAssetButton && customAssetModal?.openLauncher) {
-            customAssetButton.addEventListener("click", () => customAssetModal.openLauncher());
+        const assetLauncherButton = document.getElementById("asset-launcher-button");
+        if (assetLauncherButton && customAssetModal?.openLauncher) {
+            assetLauncherButton.addEventListener("click", () => customAssetModal.openLauncher());
        }
        globalThis.addEventListener("resize", () => {
            resizeCanvas();
--- a/src/main/resources/static/js/customAssets.js
+++ b/src/main/resources/static/js/customAssets.js
@@ -7,6 +7,7 @@ export function createCustomAssetModal({
    const launchModal = document.getElementById("custom-asset-launch-modal");
    const launchNewButton = document.getElementById("custom-asset-launch-new");
    const launchMarketplaceButton = document.getElementById("custom-asset-launch-marketplace");
+    const assetFileInput = document.getElementById("asset-file");
    const marketplaceModal = document.getElementById("custom-asset-marketplace-modal");
    const marketplaceCloseButton = document.getElementById("custom-asset-marketplace-close");
    const marketplaceSearchInput = document.getElementById("custom-asset-marketplace-search");
@@ -234,6 +235,13 @@ export function createCustomAssetModal({
    if (launchMarketplaceButton) {
        launchMarketplaceButton.addEventListener("click", () => openMarketplaceModal());
    }
+    if (assetFileInput) {
+        assetFileInput.addEventListener("change", (event) => {
+            if (event.target?.files?.length) {
+                closeLaunchModal();
+            }
+        });
+    }
    if (marketplaceModal) {
        marketplaceModal.addEventListener("click", (event) => {
            if (event.target === marketplaceModal) {
--- a/src/main/resources/templates/admin.html
+++ b/src/main/resources/templates/admin.html
@@ -47,27 +47,13 @@
            <div class="admin-workspace">
                <aside class="admin-rail">
                    <div class="upload-row">
-                        <input
-                            id="asset-file"
-                            class="file-input-field"
-                            type="file"
-                            accept="image/*,video/*,audio/*,application/javascript,text/javascript,.js,.mjs"
-                        />
-                        <label for="asset-file" class="file-input-trigger">
-                            <span class="file-input-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
+                        <button type="button" class="file-input-trigger" id="asset-launcher-button">
+                            <span class="file-input-icon"><i class="fa-solid fa-layer-group"></i></span>
                            <span class="file-input-copy">
-                                <strong>Upload asset</strong>
-                                <small id="asset-file-name">No file chosen</small>
+                                <strong>Add asset</strong>
+                                <small>Upload, build, or browse scripts</small>
                            </span>
-                        </label>
-                    </div>
-                    <div class="upload-row">
-                        <label class="file-input-trigger" id="custom-asset-button">
-                            <span class="file-input-icon"><i class="fa-solid fa-code"></i></span>
-                            <span class="file-input-copy">
-                                <strong>Create custom asset</strong>
-                            </span>
-                        </label>
+                        </button>
                    </div>
                    <div class="rail-body">
                        <div class="rail-scroll">
@@ -369,15 +355,30 @@
            </div>
        </div>
        <div id="custom-asset-launch-modal" class="modal hidden">
-            <section class="modal-inner small">
-                <h1>Custom scripts</h1>
-                <p>Start a new script or browse scripts shared by other creators.</p>
-                <div class="form-actions split">
-                    <button type="button" class="secondary" id="custom-asset-launch-marketplace">
-                        Browse marketplace
+            <section class="modal-inner medium">
+                <h1>Custom assets</h1>
+                <p>Upload media, build new scripts, or pull from the marketplace.</p>
+                <div class="launch-grid">
+                    <input
+                        id="asset-file"
+                        class="file-input-field"
+                        type="file"
+                        accept="image/*,video/*,audio/*,application/javascript,text/javascript,.js,.mjs"
+                    />
+                    <label for="asset-file" class="launch-tile">
+                        <span class="tile-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
+                        <span class="tile-title">Upload asset</span>
+                        <span class="tile-subtitle" id="asset-file-name">No file chosen</span>
+                    </label>
+                    <button type="button" class="launch-tile" id="custom-asset-launch-new">
+                        <span class="tile-icon"><i class="fa-solid fa-code"></i></span>
+                        <span class="tile-title">Create script</span>
+                        <span class="tile-subtitle">Start from a blank template</span>
                    </button>
-                    <button type="button" class="primary" id="custom-asset-launch-new">
-                        Create new script
+                    <button type="button" class="launch-tile" id="custom-asset-launch-marketplace">
+                        <span class="tile-icon"><i class="fa-solid fa-store"></i></span>
+                        <span class="tile-title">Browse marketplace</span>
+                        <span class="tile-subtitle">Find community scripts</span>
                    </button>
                </div>
            </section>