css UI fixes, new panel, code optimizaiton, security fixes

web/js/chat.js

@@ -49,7 +49,7 @@ $(document).ready(function() {
                     chatMessageCount++;
                     chatMessagesCount.text(chatMessageCount);
                     chatMessagesCount.attr("aria-label", "Chat (" + chatMessageCount + " unread)");
-                    chatButton.removeClass('bg-color-2').addClass('blink');
+                    chatButton.removeClass('bg-color-1').addClass('blink');
                 }
             }
         }
@@ -67,7 +67,7 @@ $(document).ready(function() {
     chatButton.click(function() {
         chatMessageCount = 0;
         chatMessagesCount.text(chatMessageCount);
-        chatButton.removeClass('blink').addClass('bg-color-2');
+        chatButton.removeClass('blink').addClass('bg-color-1');
         chatSendInput.focus();
 
         setTimeout(function() {

web/js/init.js

@@ -1,9 +1,9 @@
-var currentDate = new Date('Feb 9, 2025 18:00:00');
+var currentDate = new Date('Feb 16, 2025 15:00:00');
 var day = currentDate.getDate();
 var month = currentDate.getMonth() + 1; // Months are zero-indexed, so add 1
 var year = currentDate.getFullYear();
 var formattedDate = day + '/' + month + '/' + year; 
-var currentVersion = 'v1.3.4 [' + formattedDate + ']';
+var currentVersion = 'v1.3.5 [' + formattedDate + ']';
 
 getInitialSettings();
 removeUrlParameters();

web/js/plugins.js

@@ -0,0 +1,61 @@
+function checkScroll() {
+    let $container = $(".scrollable-container");
+    let $leftArrow = $(".scroll-left");
+    let $rightArrow = $(".scroll-right");
+
+    let scrollWidth = $container[0].scrollWidth;
+    let clientWidth = $container[0].clientWidth;
+    let scrollLeft = $container.scrollLeft();
+    let maxScrollLeft = scrollWidth - clientWidth;
+
+    if (scrollWidth > clientWidth) {
+        // If scrolling is possible, show arrows
+        $leftArrow.stop(true, true).fadeIn(200).css("pointer-events", scrollLeft > 0 ? "auto" : "none").fadeTo(200, scrollLeft > 0 ? 1 : 0.2);
+        $rightArrow.stop(true, true).fadeIn(200).css("pointer-events", scrollLeft < maxScrollLeft ? "auto" : "none").fadeTo(200, scrollLeft < maxScrollLeft ? 1 : 0.2);
+    } else {
+        // No scrolling needed, fully hide arrows
+        $leftArrow.stop(true, true).fadeOut(200);
+        $rightArrow.stop(true, true).fadeOut(200);
+    }
+}
+
+
+
+$(document).ready(function () {
+    let $container = $(".scrollable-container");
+    let $leftArrow = $(".scroll-left");
+    let $rightArrow = $(".scroll-right");
+
+    // Scroll left/right when arrows are clicked
+    $leftArrow.on("click", function () {
+        $container.animate({ scrollLeft: "-=100" }, 300);
+    });
+
+    $rightArrow.on("click", function () {
+        $container.animate({ scrollLeft: "+=100" }, 300);
+    });
+
+    // Detect scrolling
+    $container.on("scroll", checkScroll);
+
+    // Run checkScroll on page load to adjust visibility
+    setTimeout(checkScroll, 100);
+});
+
+// Function to add buttons dynamically
+function addIconToPluginPanel(id, text, iconType, icon, tooltip) {
+    let $pluginButton = $(`
+        <button class="no-bg color-4 hover-brighten ${tooltip ? "tooltip" : ""}" 
+        style="padding: 6px; width: 64px; min-width: 64px;" id="${id}"
+        data-tooltip="${tooltip ? tooltip : ""}" data-tooltip-placement="bottom">
+            <i class="fa-${iconType} fa-${icon} fa-lg top-10"></i><br>
+            <span style="font-size: 10px; color: var(--color-main-bright) !important;">${text}</span>
+        </button>
+    `);
+    
+    $('.scrollable-container').append($pluginButton);
+    initTooltips($pluginButton);
+    
+    // Recheck scrolling when new buttons are added
+    setTimeout(checkScroll, 100);
+}

web/js/settings.js

@@ -209,7 +209,7 @@ function setTheme(themeName) {
         $(':root').css('--color-main-bright', themeColors[1]);
         $(':root').css('--color-text', themeColors[2]);
         $(':root').css('--color-text-2', textColor2);
-        $('#wrapper-outer').css('background-color', backgroundColorWithOpacity);
+        $('.wrapper-outer').css('background-color', backgroundColorWithOpacity);
     }
 }
 

web/js/webserver.js

@@ -4,4 +4,5 @@ $.getScript('./js/dropdown.js');
 $.getScript('./js/modal.js');
 $.getScript('./js/settings.js');
 $.getScript('./js/chat.js');
-$.getScript('./js/toast.js');
+$.getScript('./js/toast.js');
+$.getScript('./js/plugins.js');