move input bar extensions button into menu

public/scripts/extensions.js

@@ -147,6 +147,36 @@ function autoConnectInputHandler() {
     saveSettingsDebounced();
 }
 
+function addExtensionsButtonAndMenu() {
+    const buttonHTML =
+        `<div id="extensionsMenuButton" class="fa-solid fa-square-caret-up" title="Extras Extensions" /></div>`;
+    const extensionsMenuHTML = `<div id="extensionsMenu" class="list-group"></div>`;
+
+    $(document.body).append(extensionsMenuHTML);
+
+    $('#send_but_sheld').prepend(buttonHTML);
+
+    const button = $('#extensionsMenuButton');
+    const dropdown = $('#extensionsMenu');
+
+    let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
+        placement: 'top-end',
+    });
+
+    $(document).on('click touchend', function (e) {
+        const target = $(e.target);
+        if (target.is(dropdown)) return;
+        if (target.is(button) && !dropdown.is(":visible")) {
+            e.preventDefault();
+
+            dropdown.show(200);
+            popper.update();
+        } else {
+            dropdown.hide(200);
+        }
+    });
+}
+
 async function connectToApi(baseUrl) {
     if (!baseUrl) {
         return;
@@ -163,6 +193,7 @@ async function connectToApi(baseUrl) {
             modules = data.modules;
             await activateExtensions();
             eventSource.emit(event_types.EXTRAS_CONNECTED, modules);
+            $("#extensionsMenuButton").css("display", "flex");
         }
 
         updateStatus(getExtensionsResult.ok);
@@ -287,6 +318,7 @@ async function loadExtensionSettings(settings) {
 }
 
 $(document).ready(async function () {
+    setTimeout(function () { addExtensionsButtonAndMenu(); }, 100)
     $("#extensions_connect").on('click', connectClickHandler);
     $("#extensions_autoconnect").on('input', autoConnectInputHandler);
     $("#extensions_details").on('click', showExtensionsDetails);

public/scripts/extensions/dice/index.js

@@ -8,7 +8,7 @@ const UPDATE_INTERVAL = 1000;
 function setDiceIcon() {
     const sendButton = document.getElementById('roll_dice');
     /* sendButton.style.backgroundImage = `url(/img/dice-solid.svg)`; */
-    sendButton.classList.remove('spin');
+    //sendButton.classList.remove('spin');
 }
 
 async function doDiceRoll() {
@@ -29,7 +29,7 @@ async function doDiceRoll() {
 
 function addDiceRollButton() {
     const buttonHtml = `
-        <div id="roll_dice" class="fa-solid fa-dice" title="Roll the dice" /></div>
+        <div id="roll_dice" class="fa-solid fa-dice list-group-item" title="Roll the dice" /></div>
         `;
     const dropdownHtml = `
     <div id="dice_dropdown">
@@ -45,7 +45,8 @@ function addDiceRollButton() {
         </ul>
     </div>`;
 
-    $('#send_but_sheld').prepend(buttonHtml);
+    $('#extensionsMenu').prepend(buttonHtml);
+
     $(document.body).append(dropdownHtml)
     $('#dice_dropdown li').on('click', doDiceRoll);
     const button = $('#roll_dice');
@@ -54,7 +55,7 @@ function addDiceRollButton() {
     button.hide();
 
     let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
-        placement: 'top-start',
+        placement: 'left-end',
     });
 
     $(document).on('click touchend', function (e) {

public/scripts/extensions/dice/style.css

@@ -1,9 +1,9 @@
 #roll_dice {
     order: 100;
-    width: 40px;
+    /*     width: 40px;
     height: 40px;
     margin: 0;
-    padding: 1px;
+    padding: 1px; */
     outline: none;
     border: none;
     cursor: pointer;

public/scripts/extensions/stable-diffusion/index.js

@@ -537,11 +537,11 @@ async function sendMessage(prompt, image) {
 function addSDGenButtons() {
 
     const buttonHtml = `
-        <div id="sd_gen" class="fa-solid fa-paintbrush" title="Trigger Stable Diffusion" /></div>
+        <div id="sd_gen" class="fa-solid fa-paintbrush list-group-item" title="Trigger Stable Diffusion" /></div>
         `;
 
     const waitButtonHtml = `
-        <div id="sd_gen_wait" class="fa-solid fa-hourglass-half" /></div>
+        <div id="sd_gen_wait" class="fa-solid fa-hourglass-half list-group-item" /></div>
     `
     const dropdownHtml = `
     <div id="sd_dropdown">
@@ -556,8 +556,8 @@ function addSDGenButtons() {
         </ul>
     </div>`;
 
-    $('#send_but_sheld').prepend(buttonHtml);
+    $('#extensionsMenu').prepend(buttonHtml);
-    $('#send_but_sheld').prepend(waitButtonHtml);
+    $('#extensionsMenu').prepend(waitButtonHtml);
     $(document.body).append(dropdownHtml);
 
     const messageButton = $('.sd_message_gen');
@@ -570,7 +570,7 @@ function addSDGenButtons() {
     messageButton.hide();
 
     let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
-        placement: 'top-end',
+        placement: 'left-end',
     });
 
     $(document).on('click', '.sd_message_gen', sdMessageButton);

public/scripts/extensions/stable-diffusion/style.css

@@ -4,10 +4,10 @@
 
 #sd_gen {
     order: 100;
-    width: 40px;
+    /*     width: 40px;
     height: 40px;
     margin: 0;
-    padding: 1px;
+    padding: 1px; */
     outline: none;
     border: none;
     cursor: pointer;

public/scripts/extensions/tts/index.js

@@ -212,7 +212,12 @@ async function onTtsVoicesClick() {
         const voiceIds = await ttsProvider.fetchTtsVoiceIds()
 
         for (const voice of voiceIds) {
-            popupText += `<div class="voice_preview"><span class="voice_lang">${voice.lang || ''}</span> <b class="voice_name">${voice.name}</b> <i onclick="tts_preview('${voice.voice_id}')" class="fa-solid fa-play"></i></div>`
+            popupText += `
+            <div class="voice_preview">
+                <span class="voice_lang">${voice.lang || ''}</span>
+                <b class="voice_name">${voice.name}</b> 
+                <i onclick="tts_preview('${voice.voice_id}')" class="fa-solid fa-play"></i>
+            </div>`
             popupText += `<audio id="${voice.voice_id}" src="${voice.preview_url}" data-disabled="${voice.preview_url == false}"></audio>`
         }
     } catch {
@@ -228,9 +233,9 @@ function updateUiAudioPlayState() {
         let img
         // Give user feedback that TTS is active by setting the stop icon if processing or playing
         if (!audioElement.paused || isTtsProcessing()) {
-            img = 'fa-solid fa-stop-circle'
+            img = 'fa-solid fa-stop-circle list-group-item'
         } else {
-            img = 'fa-solid fa-circle-play'
+            img = 'fa-solid fa-circle-play list-group-item'
         }
         audioControl.className = img
     } else {
@@ -251,7 +256,7 @@ function onAudioControlClicked() {
 }
 
 function addAudioControl() {
-    $('#send_but_sheld').prepend('<div id="tts_media_control"/>')
+    $('#extensionsMenu').prepend('<div id="tts_media_control" class="list-group-item" />')
     $('#tts_media_control').attr('title', 'TTS play/pause').on('click', onAudioControlClicked)
     audioControl = document.getElementById('tts_media_control')
     updateUiAudioPlayState()

public/scripts/extensions/tts/style.css

@@ -1,9 +1,9 @@
 #tts_media_control {
     order: 100;
-    width: 40px;
+    /*     width: 40px;
     height: 40px;
     margin: 0;
-    padding: 1px;
+    padding: 1px; */
     outline: none;
     border: none;
     cursor: pointer;

public/style.css

@@ -486,6 +486,38 @@ code {
     border-top: 1px solid var(--white30a);
 }
 
+#extensionsMenuButton {
+    order: 100;
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    padding: 1px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s;
+    opacity: 0.7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    display: none;
+
+}
+
+#extensionsMenuButton:hover {
+    opacity: 1;
+    filter: brightness(1.2);
+}
+
+#extensionsMenu {
+    z-index: 100;
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    font-size: 30px;
+    /* padding: 10px; */
+    display: flex;
+    gap: 10px;
+}
+
 #right-nav-panel hr,
 #personality_div hr,
 #top-settings-holder hr {
@@ -493,7 +525,8 @@ code {
     min-height: 1px;
 }
 
-.options-content a {
+.options-content a,
+#extensionsMenu div {
     color: var(--SmartThemeBodyColor);
     padding: 12px 16px;
     text-decoration: none;