From ac6da3bf5cd0e6d5be33feb3da85b94a90f2d4ae Mon Sep 17 00:00:00 2001
From: MickaelK <mickael@kerjean.me>
Date: Mon, 26 May 2025 15:52:26 +1000
Subject: [PATCH] feature (ux): ux for submenu

---
 public/assets/pages/filespage/ctrl_newitem.css | 12 ++++++++++--
 public/assets/pages/filespage/ctrl_newitem.js  |  9 ++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/public/assets/pages/filespage/ctrl_newitem.css b/public/assets/pages/filespage/ctrl_newitem.css
index 4e24371e..6a3e7c5e 100644
--- a/public/assets/pages/filespage/ctrl_newitem.css
+++ b/public/assets/pages/filespage/ctrl_newitem.css
@@ -7,6 +7,14 @@
 .component_newitem .component_thing .box {
     margin: 0;
 }
-.component_newitem .component_thing .component_action {
-    display: block;
+.component_newitem .component_thing .box .file-details {
+    flex-grow: 1;
+}
+.component_newitem .component_thing .box .file-details input {
+    border-color: var(--border);
+    padding: 0;
+}
+.component_newitem .component_thing .box .component_action {
+    display: block;
+    opacity: 1;
 }
diff --git a/public/assets/pages/filespage/ctrl_newitem.js b/public/assets/pages/filespage/ctrl_newitem.js
index 0cad5a7e..b262d5bb 100644
--- a/public/assets/pages/filespage/ctrl_newitem.js
+++ b/public/assets/pages/filespage/ctrl_newitem.js
@@ -28,10 +28,13 @@ export default async function(render) {
     const $node = createElement(`
         <div class="component_newitem container">
             <div class="component_thing">
-                <div class="mouse-is-hover highlight box">
+                <div class="mouse-is-hover highlight box flex">
                     <img class="component_icon" draggable="false" alt="directory">
                     <span class="file-details">
-                        <form><input type="text" name="name" value=""><input type="hidden" name="type" value=""></form>
+                        <form class="full-width">
+                            <input type="text" name="name" value="" class="full-width">
+                            <input type="hidden" name="type" value="">
+                        </form>
                     </span>
                     <span class="component_action">
                         <div class="action">
@@ -70,7 +73,7 @@ export default async function(render) {
             $icon.setAttribute("src", `${img}`);
             $icon.setAttribute("alt", alt);
             $input.value = "";
-            $input.nextSibling.setAttribute("name", alt);
+            $input.nextElementSibling.setAttribute("name", alt);
             let done = Promise.resolve(nop);
             if ($node.classList.contains("hidden")) done = animate($node, {
                 keyframes: [{ height: `0px` }, { height: "50px" }],