@necrolab/dashboard 0.4.39 → 0.4.40

package/src/views/Console.vue

@@ -26,28 +26,48 @@
                             <h3 class="text-sm text-white">Hide Monitors</h3>
                             <Switch class="scale-75" v-model="filteredLogs" />
                         </button>
-                        <button class="flex rounded gap-3 card-dark px-2 h-10 flex-center">
+                        <button class="flex rounded gap-3 card-dark px-2 h-10 flex-center relative">
                             <h3 class="text-sm text-white">Auto</h3>
-                            <Switch class="scale-75" v-model="autoscrollToggled" />
+                            <Switch class="scale-75" v-model="autoscrollToggled" @change="onAutoscrollToggle" />
+                            <div
+                                v-if="userScrolledUp && autoscrollToggled"
+                                class="absolute -top-1 -right-1 w-2 h-2 bg-yellow-500 rounded-full animate-pulse"
+                                title="Autoscroll paused - scroll to bottom to resume"
+                            ></div>
                         </button>
                     </div>
                     <!-- Scroll buttons always visible -->
-                    <button class="rounded card-dark w-10 h-10 flex-center">
-                        <UpIcon class="cursor-pointer mx-1 lg:w-4 w-5 h-5" @click="scrollTo('up')" />
+                    <button
+                        class="rounded card-dark w-10 h-10 flex-center hover:bg-dark-300 active:bg-dark-200 transition-colors duration-150"
+                        @mousedown="startScrolling('up')"
+                        @mouseup="stopScrolling"
+                        @mouseleave="stopScrolling"
+                        @touchstart="startScrolling('up')"
+                        @touchend="stopScrolling"
+                    >
+                        <UpIcon class="w-5 h-5 pointer-events-none" />
                     </button>
-                    <button class="rounded card-dark w-10 h-10 flex-center">
-                        <DownIcon class="cursor-pointer ml-1 lg:w-4 w-5 h-5" @click="scrollTo('down')" />
+                    <button
+                        class="rounded card-dark w-10 h-10 flex-center hover:bg-dark-300 active:bg-dark-200 transition-colors duration-150"
+                        @mousedown="startScrolling('down')"
+                        @mouseup="stopScrolling"
+                        @mouseleave="stopScrolling"
+                        @touchstart="startScrolling('down')"
+                        @touchend="stopScrolling"
+                    >
+                        <DownIcon class="w-5 h-5 pointer-events-none" />
                     </button>
                 </div>
             </div>
 
             <Smoothie
-                :weight="0.1"
-                class="console overflow-y-auto overflow-x-hidden font-mono text-white scrollable"
+                :weight="0.2"
+                class="console overflow-y-auto overflow-x-hidden font-mono text-white scrollable smooth-scroll"
                 style="min-height: 14rem !important"
                 ref="$autoscroll"
                 @wheel.stop
                 @touchmove.stop
+                @scroll="handleScroll"
             >
                 <div
                     v-if="
@@ -64,11 +84,12 @@
                 </div>
                 <pre
                     v-else
-                    class="hidden-scrollbars"
+                    class="hidden-scrollbars log-entry"
                     v-for="(line, index) in currentTaskLog && currentTaskLog !== ''
                         ? taskLogMapping[currentTaskLog]
                         : logLines.filter((l) => (filteredLogs ? !['-DISCORD'].some((s) => l.includes(s)) : true))"
                     v-bind:key="`log-${index}`"
+                    :style="{ '--index': index }"
                 ><code class="md:text-sm lg:text-base" v-html="line"></code></pre>
             </Smoothie>
             <div class="flex ipadlg:hidden justify-between mt-3">
@@ -76,9 +97,14 @@
                     <h3 class="text-sm text-white">Hide Monitors</h3>
                     <Switch class="scale-75" v-model="filteredLogs" />
                 </button>
-                <button class="flex rounded gap-3 card-dark px-2 h-10 flex-center">
+                <button class="flex rounded gap-3 card-dark px-2 h-10 flex-center relative">
                     <h3 class="text-sm text-white">Auto</h3>
-                    <Switch class="scale-75" v-model="autoscrollToggled" />
+                    <Switch class="scale-75" v-model="autoscrollToggled" @change="onAutoscrollToggle" />
+                    <div
+                        v-if="userScrolledUp && autoscrollToggled"
+                        class="absolute -top-1 -right-1 w-2 h-2 bg-yellow-500 rounded-full animate-pulse"
+                        title="Autoscroll paused - scroll to bottom to resume"
+                    ></div>
                 </button>
             </div>
         </div>
@@ -99,17 +125,52 @@
 
     &::-webkit-scrollbar-track {
         background: #2e2f34;
+        border-radius: 4px;
     }
 
     &::-webkit-scrollbar-thumb {
         background: #555;
         border-radius: 4px;
+        transition: background-color 0.2s ease;
     }
 
     &::-webkit-scrollbar-thumb:hover {
         background: #777;
     }
 
+    // Smooth scrolling behavior with momentum
+    &.smooth-scroll {
+        scroll-behavior: smooth;
+        scroll-padding: 0.5rem;
+        -webkit-overflow-scrolling: touch;
+        overscroll-behavior: contain;
+    }
+
+    // Improved log entry animations
+    .log-entry {
+        opacity: 0;
+        transform: translateY(4px);
+        animation: slideInLog 0.2s ease-out forwards;
+        transition: all 0.15s ease;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.02);
+            transform: translateX(2px);
+        }
+    }
+
+    // Stagger animation for new logs
+    .log-entry:last-child {
+        animation-delay: 0.05s;
+    }
+
+    @keyframes slideInLog {
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
     // Empty state styling
     .empty-state {
         min-height: 14rem;
@@ -175,7 +236,7 @@ import Filter from "@/libs/ansii.js";
 import { ConsoleIcon, DownIcon, UpIcon } from "@/components/icons";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import WebsocketHeartbeatJs from "websocket-heartbeat-js";
-import { onMounted, ref, nextTick } from "vue";
+import { onMounted, onUnmounted, ref, nextTick, computed, watch } from "vue";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import { sortAlphaNum } from "@/stores/utils";
 
@@ -190,29 +251,142 @@ const autoscrollToggled = ref(true);
 const taskLogMapping = ref({});
 const currentTaskLog = ref("");
 const filteredLogs = ref(true);
+const userScrolledUp = ref(false);
+const lastScrollTime = ref(0);
+const scrollInterval = ref(null);
+const isScrolling = ref(false);
 
 const path = "/api/updates?type=console";
 const url = (window.location.protocol === "http:" ? "ws://" : "wss://") + window.location.host + path;
-const scrollTo = (dir) => {
+// Handle manual scroll detection
+const handleScroll = (event) => {
+    if (!autoscrollToggled.value) return;
+
+    const element = event.target;
+    if (!element) return;
+
+    // Check if user is near bottom (within 50px)
+    const threshold = 50;
+    const isNearBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - threshold;
+
+    // Only update if there's an actual change
+    if (userScrolledUp.value === isNearBottom) {
+        userScrolledUp.value = !isNearBottom;
+    }
+};
+
+// Bulletproof scroll function with multiple fallbacks
+const performScroll = (direction, smooth = true) => {
     try {
         if (!$autoscroll.value?.el) {
             if (DEBUG) console.log("Autoscroll element not ready");
-            return;
+            return false;
         }
-        if (dir === "up") $autoscroll.value.el.scrollTop = 0;
-        else $autoscroll.value.el.scrollTop = parseInt($autoscroll.value.el.children[1].style.height);
+
+        const element = $autoscroll.value.el;
+
+        if (direction === "up") {
+            if (smooth && element.scrollTo) {
+                element.scrollTo({ top: 0, behavior: "smooth" });
+            } else {
+                element.scrollTop = 0;
+            }
+        } else {
+            const targetTop = element.scrollHeight - element.clientHeight;
+            if (smooth && element.scrollTo) {
+                element.scrollTo({ top: targetTop, behavior: "smooth" });
+            } else {
+                element.scrollTop = targetTop;
+            }
+            userScrolledUp.value = false;
+        }
+
+        return true;
     } catch (e) {
         if (DEBUG) console.log("Error scrolling", e);
+        return false;
+    }
+};
+
+// Continuous scrolling for held buttons
+const startScrolling = (direction) => {
+    if (isScrolling.value) return;
+
+    isScrolling.value = true;
+
+    // Immediate scroll
+    performScroll(direction, true);
+
+    // Continue scrolling while held (for long content)
+    scrollInterval.value = setInterval(() => {
+        if (!isScrolling.value) return;
+
+        const element = $autoscroll.value?.el;
+        if (!element) return;
+
+        const scrollAmount = 100;
+        if (direction === "up") {
+            element.scrollTop = Math.max(0, element.scrollTop - scrollAmount);
+        } else {
+            element.scrollTop = Math.min(element.scrollHeight - element.clientHeight, element.scrollTop + scrollAmount);
+        }
+    }, 50);
+};
+
+const stopScrolling = () => {
+    isScrolling.value = false;
+    if (scrollInterval.value) {
+        clearInterval(scrollInterval.value);
+        scrollInterval.value = null;
+    }
+};
+
+// Legacy function for compatibility
+const scrollTo = (dir) => {
+    performScroll(dir, true);
+};
+
+// Simple autoscroll to bottom
+const autoScrollToBottom = () => {
+    if (!$autoscroll.value?.el || !autoscrollToggled.value) return;
+
+    // Only scroll if user hasn't manually scrolled up
+    if (!userScrolledUp.value) {
+        const element = $autoscroll.value.el;
+        
+        // Calculate the target scroll position to show the last log
+        const targetScrollTop = element.scrollHeight - element.clientHeight;
+        
+        // Use smooth scrolling to ensure new logs are visible
+        if (element.scrollTo && Math.abs(element.scrollTop - targetScrollTop) > 5) {
+            element.scrollTo({
+                top: targetScrollTop,
+                behavior: 'smooth'
+            });
+        } else {
+            // For small differences or fallback, use instant scroll
+            element.scrollTop = targetScrollTop;
+        }
+    }
+};
+
+// Handle autoscroll toggle
+const onAutoscrollToggle = () => {
+    if (autoscrollToggled.value) {
+        userScrolledUp.value = false;
+        nextTick().then(autoScrollToBottom);
     }
 };
 
 const addAnsiToOutput = (a) => {
     const html = ansii.toHtml(a?.log || a);
     logLines.value.push(html);
-    if (autoscrollToggled.value)
-        nextTick().then(() => {
-            scrollTo("down");
-        });
+
+    // Auto scroll after adding new content with proper timing
+    nextTick().then(() => {
+        // Use a small delay to ensure DOM is fully updated
+        setTimeout(autoScrollToBottom, 10);
+    });
 };
 
 const handleWebsocketMessages = (msg) => {
@@ -259,11 +433,19 @@ window.startDebugConsoleMessages = () => {
         };
         addAnsiToOutput(log);
         makeTaskLogMapping([log]);
-    }, 500);
+    }, 100);
 };
 
 if (DEBUG) window.startDebugConsoleMessages();
 
+// Watch for log filter changes and reset scroll state
+watch([currentTaskLog, filteredLogs], () => {
+    userScrolledUp.value = false;
+    nextTick().then(() => {
+        setTimeout(autoScrollToBottom, 10);
+    });
+});
+
 // Listen for messages
 onMounted(() => {
     const socket = new WebsocketHeartbeatJs({ url, pingMsg: "ping" });
@@ -276,4 +458,9 @@ onMounted(() => {
         });
     };
 });
+
+// Cleanup on unmount
+onUnmounted(() => {
+    stopScrolling();
+});
 </script>

package/src/views/Editor.vue

@@ -686,10 +686,6 @@ loadProxyLists();
     overflow: auto;
 }
 
-/* Enhance the text selection color */
-.code-editor::selection {
-    background: rgba(98, 114, 164, 0.4);
-}
 
 /* iOS keyboard focus fix and scrolling */
 .code-editor:focus,
@@ -788,8 +784,8 @@ textarea.proxy-editor {
 }
 
 .proxy-editor-container:focus-within {
-    border-color: #5d7cc0;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
+    border-color: #44454b;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
 }
 
 /* Prism.js dark theme */

package/src/views/FilterBuilder.vue

@@ -10,12 +10,10 @@
                 <input
                     class="h-10 text-white text-sm p-2 bg-dark-500 w-48 flex items-center rounded-l rounded-r-none relative border-2 border-dark-550"
                     placeholder="Event ID"
-                    v-model="eventId"
-                />
+                    v-model="eventId" />
                 <button
                     class="h-10 text-white text-sm px-3 bg-dark-400 flex items-center rounded-r relative font-medium border-2 border-dark-550 smooth-hover"
-                    @click="updateShownVenue"
-                >
+                    @click="updateShownVenue">
                     Load
                 </button>
             </div>
@@ -27,8 +25,7 @@
                 <div class="grid grid-cols-1 lg:grid-cols-5 gap-3 lg:gap-4 w-full h-full">
                     <!-- Map -->
                     <div
-                        class="col-span-1 lg:col-span-3 w-full h-full rounded-lg relative flex flex-col lg:max-w-none lg:overflow-hidden"
-                    >
+                        class="col-span-1 lg:col-span-3 w-full h-full rounded-lg relative flex flex-col lg:max-w-none lg:overflow-hidden">
                         <div v-if="svg" class="flex items-center mb-1">
                             <div class="flex items-center justify-between w-20 px-2 text-white font-black text-sm">
                                 <span class="cursor-pointer" @click="handleZoom(true)">+</span>
@@ -39,25 +36,21 @@
                         <div class="overflow-hidden selecto-wrapper flex-1">
                             <div
                                 v-if="svg"
-                                class="h-full overflow-auto hidden-scrollbars p-2 rounded shadow border-2 border-dark-550 svg-container"
-                            >
+                                class="h-full overflow-auto hidden-scrollbars p-2 rounded shadow border-2 border-dark-550 svg-container">
                                 <div class="svg-wrapper" id="svg-wrapper" v-html="svg"></div>
                             </div>
                             <div
                                 v-else
-                                class="h-full flex items-center justify-center p-2 rounded shadow border-2 border-dark-550 svg-container"
-                            >
+                                class="h-full flex items-center justify-center p-2 rounded shadow border-2 border-dark-550 svg-container">
                                 <div class="text-center">
                                     <svg
                                         class="w-12 h-12 mb-3 mx-auto opacity-50"
                                         viewBox="0 0 19 19"
                                         fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                    >
+                                        xmlns="http://www.w3.org/2000/svg">
                                         <path
                                             d="M2.37499 5.54165V2.37498L5.54166 3.95831L2.37499 5.54165ZM14.25 5.54165V2.37498L17.4167 3.95831L14.25 5.54165ZM8.70833 4.74998V1.58331L11.875 3.16665L8.70833 4.74998ZM8.70833 17.4166C7.70555 17.3903 6.77218 17.3079 5.9082 17.1696C5.0437 17.0308 4.29162 16.8559 3.65195 16.6448C3.01176 16.4337 2.50694 16.1896 2.13749 15.9125C1.76805 15.6354 1.58333 15.3451 1.58333 15.0416V7.91665C1.58333 7.58678 1.79127 7.27988 2.20716 6.99594C2.62252 6.71252 3.18645 6.46183 3.89895 6.24385C4.61145 6.02641 5.4493 5.85488 6.4125 5.72927C7.37569 5.60419 8.40486 5.54165 9.49999 5.54165C10.5951 5.54165 11.6243 5.60419 12.5875 5.72927C13.5507 5.85488 14.3885 6.02641 15.101 6.24385C15.8135 6.46183 16.3775 6.71252 16.7928 6.99594C17.2087 7.27988 17.4167 7.58678 17.4167 7.91665V15.0416C17.4167 15.3451 17.2319 15.6354 16.8625 15.9125C16.493 16.1896 15.9885 16.4337 15.3488 16.6448C14.7086 16.8559 13.9565 17.0308 13.0926 17.1696C12.2281 17.3079 11.2944 17.3903 10.2917 17.4166V14.25H8.70833V17.4166ZM9.49999 8.70831C10.7799 8.70831 11.885 8.63231 12.8155 8.48031C13.7454 8.32884 14.4875 8.15415 15.0417 7.95623C15.0417 7.89026 14.5403 7.73509 13.5375 7.49073C12.5347 7.2469 11.1889 7.12498 9.49999 7.12498C7.81111 7.12498 6.46527 7.2469 5.46249 7.49073C4.45972 7.73509 3.95833 7.89026 3.95833 7.95623C4.51249 8.15415 5.25481 8.32884 6.18529 8.48031C7.11523 8.63231 8.22013 8.70831 9.49999 8.70831ZM7.12499 15.7146V12.6666H11.875V15.7146C12.9305 15.609 13.7948 15.4538 14.4677 15.2491C15.1406 15.0448 15.5958 14.8635 15.8333 14.7052V9.34165C15.1076 9.63192 14.1972 9.86283 13.1021 10.0344C12.0069 10.2059 10.8062 10.2916 9.49999 10.2916C8.19374 10.2916 6.99305 10.2059 5.89791 10.0344C4.80277 9.86283 3.89236 9.63192 3.16666 9.34165V14.7052C3.40416 14.8635 3.85937 15.0448 4.53229 15.2491C5.2052 15.4538 6.06944 15.609 7.12499 15.7146Z"
-                                            fill="#F5F5F5"
-                                        />
+                                            fill="#F5F5F5" />
                                     </svg>
                                     <p class="text-light-400 text-sm">No Map</p>
                                     <p class="text-light-500 text-xs">
@@ -69,13 +62,15 @@
                     </div>
                     <div class="col-span-1 lg:col-span-2 w-full flex flex-col h-full">
                         <div class="flex justify-between mb-2 items-center text-white">
-                            <div class="rounded flex justify-between gap-2 items-center" v-if="hasLoaded">
+                            <div class="rounded flex gap-2 items-center" v-if="hasLoaded">
                                 <PriceSortToggle
                                     :current="filterBuilder.globalFilter.priceSort"
                                     class="smooth-hover"
-                                    @change="(e) => filterBuilder.updateGlobalFilter({ priceSort: e })"
-                                />
-
+                                    @change="(e) => filterBuilder.updateGlobalFilter({ priceSort: e })" />
+                            </div>
+                            <div class="flex items-center gap-1" v-if="hasLoaded">
+                                <SavingsIcon class="w-4 h-4 text-light-400" />
+                                <label class="text-sm text-light-400">Max Price:</label>
                                 <input
                                     type="number"
                                     :value="filterBuilder.globalFilter.maxPrice"
@@ -86,8 +81,7 @@
                                             })
                                     "
                                     class="w-14 bg-dark-500 border-2 border-dark-550 px-1 pl-2 h-8 rounded"
-                                    placeholder="max"
-                                />
+                                    placeholder="max" />
                             </div>
                         </div>
                         <Table class="border-2 border-dark-550 shadow-xl flex-1 flex flex-col">
@@ -101,8 +95,7 @@
                                         <PriceSortToggle
                                             class="w-14 smooth-hover"
                                             :options="['All', 'WL', 'BL']"
-                                            @change="(e) => (shownFilters = e)"
-                                        />
+                                            @change="(e) => (shownFilters = e)" />
                                         <button class="header-btn save-btn" @click="saveFilter">
                                             <EditIcon class="w-4 h-4" />
                                             <span class="lg:block hidden">Save</span>
@@ -131,23 +124,20 @@
                                                 filterBuilder.updateCss();
                                                 cssUpdateTrigger++;
                                             }
-                                        "
-                                    >
+                                        ">
                                         <template #item="{ element: f, index: i }">
                                             <Filter
                                                 v-if="doesFilterShow(f)"
                                                 :filter="f"
                                                 :index="i"
                                                 :filterBuilder="filterBuilder"
-                                                class="compact-filter"
-                                            />
+                                                class="compact-filter" />
                                         </template>
                                     </draggable>
                                 </div>
                                 <div
                                     v-else
-                                    class="empty-state flex flex-col items-center justify-center py-8 text-center"
-                                >
+                                    class="empty-state flex flex-col items-center justify-center py-8 text-center">
                                     <FilterIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50" />
                                     <p class="text-light-400 text-sm">No filters yet</p>
                                     <p class="text-light-500 text-xs mt-1">Click on the map to create filters</p>
@@ -164,14 +154,12 @@
                                         ? 'text-gray opacity-50 cursor-not-allowed'
                                         : 'text-gray smooth-hover hover:bg-dark-400 hover:border-light-300'
                                 ]"
-                                :title="hasWildcardFilter ? 'Wildcard filter already exists' : 'Add wildcard filter'"
-                            >
+                                :title="hasWildcardFilter ? 'Wildcard filter already exists' : 'Add wildcard filter'">
                                 * Wildcard
                             </button>
                             <button
                                 @click="ui.toggleModal('preview-filter')"
-                                class="border-2 gap-1 flex justify-between items-center rounded border-dark-550 px-2 h-7 text-gray text-xs bg-dark-500 overflow-hidden shadow smooth-hover"
-                            >
+                                class="border-2 gap-1 flex justify-between items-center rounded border-dark-550 px-2 h-7 text-gray text-xs bg-dark-500 overflow-hidden shadow smooth-hover">
                                 <CameraIcon class="w-3 h-3" />
                                 JSON
                             </button>
@@ -197,7 +185,7 @@ import { FilterIcon } from "@/components/icons";
 import DragSelect from "dragselect";
 import { DEBUG } from "@/utils/debug";
 
-import { ReloadIcon, TrashIcon, EditIcon, CameraIcon, StadiumIcon } from "@/components/icons";
+import { ReloadIcon, TrashIcon, EditIcon, CameraIcon, StadiumIcon, SavingsIcon } from "@/components/icons";
 import { sendSaveFilter } from "@/stores/requests";
 import PriceSortToggle from "@/components/Filter/PriceSortToggle.vue";
 import { useUIStore } from "@/stores/ui";
@@ -372,12 +360,7 @@ const addWildcardFilter = () => {
 };
 
 // Initialize RendererFactory
-let RendererFactory;
-if (DEBUG) {
-    RendererFactory = class {
-        constructor() {}
-    };
-} else RendererFactory = import("@necrolab/tm-renderer");
+let RendererFactory = import("@necrolab/tm-renderer");
 
 // Real-time CSS injection system
 let styleElement = null;
@@ -490,13 +473,12 @@ const doesFilterShow = (filter) => {
 };
 
 let rendererFactory;
-if (!DEBUG)
-    RendererFactory.then((r) => {
-        rendererFactory = new r.default();
-        rendererFactory.init();
-    }).catch((error) => {
-        console.error("Failed to initialize renderer:", error);
-    });
+RendererFactory.then((r) => {
+    rendererFactory = new r.default();
+    rendererFactory.init();
+}).catch((error) => {
+    console.error("Failed to initialize renderer:", error);
+});
 
 const updateShownVenue = async () => {
     eventId.value = eventId.value.trim();