refactor: commandline (#5180)

* initial rewrite

* remove title

* remove from dom on hide

* actual command dom
show active
keep active in view
update active index on keypress

* global event only shows commandline

* impr(dev): showing notifications with unhandled errors

* rename functions

* handle hover functions
handle nesting
handle exec
attaching handlers once

* void promise

* no need for async

* move font preview to ui

* add configkey to command

* add function to build single list

* add mouse mode
clearing preview on hide
add config icon

* using new function

* use fw icon

* fix incorrect type

* extract logic

* add support for input commands

* unused error

* update single list

* chevron icon margin

* only focusing when no popups and words are visible

* extract condition

* better type

* remove no icon

* only showing when nothing is already visible

* commandline lists no longer modify the commandline element
dynamically changing which funbox commnands are available
modified searching approach
showing active settings in single mode again
calling before list if needed

* ignore keydown on page transition

* add other ways to show the commandline

* always clearing previews

* incorrect icon being used

* extract logic

* support quick single list mode by starting input with >

* fix test words not being focused

* showing all if in quick single mode

* remove unused code

* rename entry to command

* remove more unused code

* add data- prefix

* rename to data-command-id

* fix input commands not refocusing words

* fix fontsize change not working as intended

* set active index to 0 when going back

* keeping active command in view

* remove console logs

* fix quick single mode

* move file

* add footer events

* add option for subgroup override
fix issue where commands would get hidden after clearing input field
fixed auto scrolling in mouse mode

* rename commands to lists

* add background after to avoid flashing

* getting config key from active subgroup

* updating active command after removing hidden class but before animating

* fix nasty hover behavior

* updating active before animation showing, keeping active after

* add keymap event

* remove comments

* invert if, use return, combine ifs to reduce nesting

* add test event

* popups events

* fix some commands not showing up on a single list

* use new animated modal

* use regex escaping function from misc

* add singlelistdisplay and singlelistdisplaynoicon properties

* add more navigation aliases

* not adding alias if not needed

* rework command filtering

* fix active icon not working

* add custom hide handlers

* fix active command not being kept in view after showing

* unused imports

* remove commandlinelists imports from other files

* delete old file

* remove unused file

* import commandline dynamically

* fix: if skeleton has wrapper, append before building animated modal

* using new parameters

* save skeleton on ready

* rename folder

* add util to get async modules

* remove empty imports

* remove unnecessary code

* unnecessary void

* catching errors and notifying user

* better error message

* making sure all the lists are fetched before getting the single command list

* add tab navigation

frontend/src/html/popups.html

@@ -1095,8 +1095,8 @@
     </div>
   </div>
 </div>
-<div id="commandLineWrapper" class="hidden">
-  <div id="commandLine">
+<dialog id="commandLine" class="modalWrapper hidden">
+  <div class="modal">
     <div
       style="
         display: grid;
@@ -1105,17 +1105,14 @@
       "
     >
       <div class="searchicon">
-        <i class="fas fa-search"></i>
+        <i class="fas fa-fw fa-search"></i>
       </div>
       <input type="text" class="input" placeholder="Type to search" />
     </div>
-    <div class="separator hidden"></div>
     <div class="suggestions"></div>
   </div>
-  <div id="commandInput" class="hidden">
-    <input type="text" class="input" placeholder="input" />
-  </div>
-</div>
+</dialog>
+
 <div id="newResultFilterPresetPopupWrapper" class="popupWrapper hidden">
   <div id="newResultFilterPresetPopup">
     <div class="title">Add new filter preset</div>

frontend/src/styles/commandline.scss

@@ -1,4 +1,4 @@
-#commandLineWrapper {
+#commandLine {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.75);
@@ -9,47 +9,21 @@
   display: grid;
   justify-items: center;
   align-items: start;
-  padding: 5rem 2rem;
+  padding: 6rem 2rem;
   grid-template-columns: 1fr;
   transition: background 0.125s;
+  overflow: hidden;
 
-  #commandInput {
-    max-width: 600px;
-    width: 100%;
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-
-    input {
-      background: var(--bg-color);
-      padding: 1rem;
-      color: var(--main-color);
-      border: none;
-      outline: none;
-      font-size: 1rem;
-      width: 100%;
-      border-radius: var(--roundness);
-      &:focus-visible {
-        box-shadow: none;
-      }
-    }
-
-    .shiftEnter {
-      padding: 0.5rem 1rem;
-      font-size: 0.75rem;
-      line-height: 0.75rem;
-      color: var(--sub-color);
-      text-align: center;
-    }
-  }
-
-  #commandLine {
+  .modal {
     max-width: 600px;
     width: 100%;
     background: var(--bg-color);
     border-radius: var(--roundness);
     // outline: 0.25rem solid transparent;
     box-shadow: 0 0 0 0.2em transparent;
     transition: outline 0.125s;
+    padding: 0;
+    display: block;
 
     .searchicon {
       color: var(--sub-color);
@@ -70,38 +44,28 @@
       }
     }
 
-    .separator {
-      background: black;
-      width: 100%;
-      height: 1px;
-      margin-bottom: 0.5rem;
-    }
-
-    .listTitle {
-      color: var(--text-color);
-      padding: 0.5rem 1rem;
-      font-size: 0.75rem;
-      line-height: 0.75rem;
-    }
-
     .suggestions {
       display: block;
       @extend .ffscroll;
       overflow-y: scroll;
-      max-height: calc(100vh - 10rem - 3rem);
+      max-height: calc(100vh - 12rem - 3rem);
       display: grid;
       cursor: pointer;
       -webkit-user-select: none;
       user-select: none;
 
-      .entry {
+      .command {
         padding: 0.5rem 1rem;
         font-size: 0.75rem;
         line-height: 0.75rem;
         color: var(--sub-color);
         display: grid;
         grid-template-columns: auto 1fr;
 
+        .chevronIcon {
+          margin: 0 0.5rem;
+        }
+
         div {
           pointer-events: none;
         }
@@ -126,27 +90,6 @@
           border-radius: 0 0 var(--roundness) var(--roundness);
         }
 
-        &.activeMouse {
-          color: var(--bg-color) !important;
-          background: var(--text-color) !important;
-          cursor: pointer;
-          .fas,
-          .far,
-          .fab {
-            color: var(--bg-color);
-          }
-        }
-
-        &.activeKeyboard {
-          color: var(--bg-color) !important;
-          background: var(--text-color) !important;
-          .fas,
-          .far,
-          .fab {
-            color: var(--bg-color);
-          }
-        }
-
         &.active {
           color: var(--bg-color) !important;
           background: var(--text-color) !important;
@@ -157,12 +100,6 @@
           }
         }
 
-        // &:hover {
-        //   color: var(--text-color);
-        //   background: var(--sub-color);
-        //   cursor: pointer;
-        // }
-
         &.withThemeBubbles {
           grid-template-columns: auto 1fr auto;
           .themeBubbles {
@@ -183,7 +120,7 @@
 
   &.noBackground {
     background: none;
-    #commandLine {
+    .modal {
       box-shadow: 0 0 0 0.2em var(--sub-alt-color);
       // outline: 0.25rem solid var(--sub-alt-color);
     }