@necrolab/dashboard 0.4.221 → 0.5.1

package/src/views/Console.vue

@@ -1,13 +1,16 @@
 <template>
     <div>
-        <h4 class="text-white font-bold mb-5 pt-5 flex gap-2 text-xl items-center">Console <ConsoleIcon /></h4>
+        <h4 class="mb-2 flex items-center gap-2 pt-5 text-sm font-bold text-white lg:mt-1">
+            Console
+            <ConsoleIcon />
+        </h4>
 
         <div>
-            <div class="flex items-center mb-3">
-                <div class="flex w-full justify-start text-exl items-center">
-                    <div class="w-40 flex rounded input-default">
+            <div class="mb-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+                <div class="flex flex-col gap-3 md:flex-row md:items-center md:flex-1">
+                    <div class="w-full md:w-64">
                         <Dropdown
-                            class="w-40"
+                            class="console-dropdown input-default w-full border-2 border-dark-550 bg-dark-500"
                             rightAmount="right-2"
                             default="All logs"
                             :allowDefault="true"
@@ -17,62 +20,118 @@
                                 Object.entries(taskLogMapping)
                                     .map(([k, v]) => `${k} (${v.length})`)
                                     .sort((a, b) => a.localeCompare(b))
-                            "
-                        />
+                            " />
+                    </div>
+                    <div class="flex items-center gap-2 flex-1">
+                        <div class="input-default flex items-center flex-1 md:max-w-64">
+                            <input
+                                v-model="searchQuery"
+                                type="text"
+                                placeholder="Search logs..."
+                                class="h-full w-full bg-transparent text-sm text-white outline-none" />
+                            <span v-if="searchQuery" class="ml-2 text-xs text-light-500">{{ filteredCount }}</span>
+                        </div>
+                        <!-- Scroll buttons on mobile - inline with search -->
+                        <button
+                            class="console-scroll-btn flex h-10 w-10 items-center justify-center rounded border-2 bg-dark-400 shadow-sm md:hidden"
+                            @mousedown="startScrolling('up')"
+                            @mouseup="stopScrolling"
+                            @mouseleave="stopScrolling"
+                            @touchstart="startScrolling('up')"
+                            @touchend="stopScrolling">
+                            <UpIcon class="pointer-events-none h-5 w-5" />
+                        </button>
+                        <button
+                            class="console-scroll-btn flex h-10 w-10 items-center justify-center rounded border-2 bg-dark-400 shadow-sm md:hidden"
+                            @mousedown="startScrolling('down')"
+                            @mouseup="stopScrolling"
+                            @mouseleave="stopScrolling"
+                            @touchstart="startScrolling('down')"
+                            @touchend="stopScrolling">
+                            <DownIcon class="pointer-events-none h-5 w-5" />
+                        </button>
                     </div>
                 </div>
-                <div class="flex justify-right justify-end text-2xl items-center gap-3">
-                    <button
-                        class="hidden ipadlg:flex rounded gap-3 bg-dark-500 border-2 border-dark-550 shadow-lg px-2 h-10 justify-center items-center"
-                    >
-                        <h3 class="text-sm text-white">Hide Monitors</h3>
-                        <Switch class="scale-75" v-model="filteredLogs" />
-                    </button>
-                    <button
-                        class="hidden ipadlg:flex rounded gap-3 bg-dark-500 border-2 border-dark-550 shadow-lg px-2 h-10 justify-center items-center"
-                    >
-                        <h3 class="text-sm text-white">Auto</h3>
-                        <Switch class="scale-75" v-model="autoscrollToggled" />
-                    </button>
+                <div class="flex items-center gap-3 hidden md:flex">
+                    <!-- Hide Monitors and Auto buttons only on desktop -->
+                    <div class="hidden items-center gap-3 md:flex">
+                        <button
+                            class="flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
+                            <h3 class="text-sm text-white">Hide Monitors</h3>
+                            <Switch class="scale-75" v-model="filteredLogs" />
+                        </button>
+                        <button
+                            class="relative flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
+                            <h3 class="text-sm text-white">Auto</h3>
+                            <Switch class="scale-75" v-model="autoscrollToggled" @change="onAutoscrollToggle" />
+                            <div
+                                v-if="userScrolledUp && autoscrollToggled"
+                                class="absolute -right-1 -top-1 h-2 w-2 animate-pulse rounded-full bg-yellow-500"
+                                title="Autoscroll paused - scroll to bottom to resume"></div>
+                        </button>
+                    </div>
+                    <!-- Scroll buttons - desktop only (mobile has them inline with search) -->
                     <button
-                        class="rounded bg-dark-500 border-2 border-dark-550 shadow-lg w-10 h-10 flex justify-center items-center"
-                    >
-                        <UpIcon class="cursor-pointer mx-1 lg:w-4 w-5 h-5" @click="scrollTo('up')" />
+                        class="hidden md:flex h-10 w-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200"
+                        @mousedown="startScrolling('up')"
+                        @mouseup="stopScrolling"
+                        @mouseleave="stopScrolling"
+                        @touchstart="startScrolling('up')"
+                        @touchend="stopScrolling">
+                        <UpIcon class="pointer-events-none h-5 w-5" />
                     </button>
                     <button
-                        class="rounded bg-dark-500 border-2 border-dark-550 shadow-lg w-10 h-10 flex justify-center items-center"
-                    >
-                        <DownIcon class="cursor-pointer ml-1 lg:w-4 w-5 h-5" @click="scrollTo('down')" />
+                        class="hidden md:flex h-10 w-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200"
+                        @mousedown="startScrolling('down')"
+                        @mouseup="stopScrolling"
+                        @mouseleave="stopScrolling"
+                        @touchstart="startScrolling('down')"
+                        @touchend="stopScrolling">
+                        <DownIcon class="pointer-events-none h-5 w-5" />
                     </button>
                 </div>
             </div>
 
             <Smoothie
-                :weight="0.1"
-                class="hidden-scrollbars console overflow-y-auto overflow-x-hidden font-mono text-white"
-                style="min-height: 14rem !important"
+                :weight="0.2"
+                class="console scrollable smooth-scroll overflow-y-auto overflow-x-hidden font-mono text-white"
+                style="min-height: 12rem !important"
                 ref="$autoscroll"
-            >
+                @wheel.stop
+                @touchmove.stop
+                @scroll="handleScroll">
+                <div
+                    v-if="displayedLogs.length === 0"
+                    class="empty-state flex h-full flex-col items-center justify-center text-center">
+                    <ConsoleIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
+                    <p class="text-sm text-light-400">
+                        {{ searchQuery ? "No logs match your search" : "No logs yet" }}
+                    </p>
+                    <p class="mt-1 text-xs text-light-500">
+                        {{ searchQuery ? "Try a different search term" : "Logs will appear here in real time" }}
+                    </p>
+                </div>
                 <pre
-                    class="hidden-scrollbars"
-                    v-for="line in currentTaskLog
-                        ? taskLogMapping[currentTaskLog]
-                        : logLines.filter((l) => (filteredLogs ? !['-DISCORD'].some((s) => l.includes(s)) : true))"
-                    v-bind:key="line"
-                ><code class="md:text-sm lg:text-base" v-html="line"></code></pre>
+                    v-else
+                    class="hidden-scrollbars log-entry"
+                    v-for="(line, index) in displayedLogs"
+                    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">
+            <div class="mt-3 flex justify-between md:hidden">
                 <button
-                    class="flex rounded gap-3 bg-dark-500 border-2 border-dark-550 shadow-lg px-2 h-10 justify-center items-center"
-                >
+                    class="flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
                     <h3 class="text-sm text-white">Hide Monitors</h3>
                     <Switch class="scale-75" v-model="filteredLogs" />
                 </button>
                 <button
-                    class="flex rounded gap-3 bg-dark-500 border-2 border-dark-550 shadow-lg px-2 h-10 justify-center items-center"
-                >
+                    class="relative flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
                     <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 -right-1 -top-1 h-2 w-2 animate-pulse rounded-full bg-yellow-500"
+                        title="Autoscroll paused - scroll to bottom to resume"></div>
                 </button>
             </div>
         </div>
@@ -80,23 +139,124 @@
 </template>
 <style lang="scss" scoped>
 .console {
-    @apply bg-dark-400 lg:p-5 p-2 rounded relative border-dark-550 border-2;
-    height: calc(100vh - 16.5rem);
+    @apply relative rounded border-2 border-dark-550 bg-dark-400 p-2 lg:p-5;
+    height: calc(100vh - 18rem);
+    scrollbar-width: thin;
+    scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
+
+    @media (min-width: 768px) {
+        height: calc(100vh - 16rem);
+    }
+
+    @media (min-width: 1024px) {
+        height: calc(100vh - 14rem);
+    }
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: oklch(0.19 0 0);
+        border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: oklch(0.35 0 0);
+        border-radius: 4px;
+        transition: background-color 0.2s ease;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: oklch(0.45 0 0);
+    }
+
+    // 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;
+        font-family:
+            "Inter",
+            -apple-system,
+            BlinkMacSystemFont,
+            "Segoe UI",
+            Helvetica,
+            Arial,
+            sans-serif;
+    }
+
     textarea {
         background: transparent;
         resize: none;
+        @apply w-full text-white focus:outline-none;
+    }
+}
+
+.console-scroll-btn {
+    border-color: oklch(0.2809 0 0);
+    transition: all 0.15s ease;
 
-        @apply w-full focus:outline-none text-white;
-    }
-    // $border: 1px;
-    // &:before {
-    //     content: "";
-    //     @apply absolute top-0 left-0 right-0 bottom-0 opacity-60;
-    //     z-index: -2;
-    //     margin: -$border;
-    //     border-radius: inherit;
-    //     background: radial-gradient(rgba(96, 66, 255, 0.6), rgba(255, 255, 255, 0));
-    // }
+    &:hover, &:active {
+        border-color: oklch(0.72 0.15 145) !important;
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
+}
+
+/* Mobile portrait console optimizations */
+@screen mobile-portrait {
+    .console {
+        height: calc(100vh - 19.5rem);
+        @apply p-1 text-xs;
+        overflow: auto;
+
+        pre {
+            line-height: 1.2;
+        }
+
+        code {
+            font-size: 0.7rem !important;
+        }
+    }
+}
+
+/* Mobile landscape console optimizations */
+@media (max-width: 1024px) and (orientation: landscape) {
+    .console {
+        height: calc(100vh - 10.5rem);
+    }
 }
 
 .text-xxs {
@@ -110,21 +270,17 @@
         height: 30px;
     }
 }
-.max-h-big-con {
-    max-height: calc(100vh - 12rem);
-    overflow: hidden;
-}
+/* Console-specific styles handled by utilities */
 </style>
 <script setup>
 import { Smoothie } from "vue-smoothie";
-
-const DEBUG = window.location.href.startsWith("http://localhost:5173");
+import { DEBUG } from "@/utils/debug";
 
 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";
 
@@ -137,27 +293,169 @@ const logLines = ref([]);
 const ansii = new Filter();
 const autoscrollToggled = ref(true);
 const taskLogMapping = ref({});
-const currentTaskLog = ref(false);
+const currentTaskLog = ref("");
 const filteredLogs = ref(true);
+const userScrolledUp = ref(false);
+const lastScrollTime = ref(0);
+const scrollInterval = ref(null);
+const isScrolling = ref(false);
+const searchQuery = ref("");
+
+// Computed filtered logs based on search query
+const displayedLogs = computed(() => {
+    let logs =
+        currentTaskLog.value && currentTaskLog.value !== ""
+            ? taskLogMapping.value[currentTaskLog.value]
+            : logLines.value.filter((l) => (filteredLogs.value ? !["-DISCORD"].some((s) => l.includes(s)) : true));
+
+    if (searchQuery.value.trim()) {
+        const query = searchQuery.value.toLowerCase();
+        logs = logs.filter((log) => {
+            // Remove HTML tags for search
+            const plainText = log.replace(/<[^>]*>/g, "").toLowerCase();
+            return plainText.includes(query);
+        });
+    }
+
+    return logs;
+});
+
+const filteredCount = computed(() => {
+    if (!searchQuery.value.trim()) return "";
+    return `${displayedLogs.value.length}`;
+});
 
 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 (dir === "up") $autoscroll.value.el.scrollTop = 0;
-        else $autoscroll.value.el.scrollTop = parseInt($autoscroll.value.el.children[1].style.height);
+        if (!$autoscroll.value?.el) {
+            if (DEBUG) console.log("Autoscroll element not ready");
+            return false;
+        }
+
+        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);
+    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) => {
@@ -192,16 +490,30 @@ const makeTaskLogMapping = (lines) => {
 
 window.startDebugConsoleMessages = () => {
     setInterval(() => {
-        const line = `\u001b[96m[12:16:02.273]\u001b[00m \u001b[96m[TASK-${Math.round(
-            Math.random() * 10
-        )}]\u001b[00m AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Needs To Queue: false - Queue up:  false`;
-        addAnsiToOutput(line);
-        makeTaskLogMapping([line]);
-    }, 500);
+        var taskId = Math.round(Math.random() * 10);
+        const log = {
+            log: `\u001b[96m[12:16:02.273]\u001b[00m \u001b[96m[TASK-${taskId}]\u001b[00m TEST TEST TEST TEST TEST TEST TEST`,
+            metadata: {
+                taskId: taskId,
+                siteId: "TM_US",
+                global: false
+            }
+        };
+        addAnsiToOutput(log);
+        makeTaskLogMapping([log]);
+    }, 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" });
@@ -214,4 +526,9 @@ onMounted(() => {
         });
     };
 });
+
+// Cleanup on unmount
+onUnmounted(() => {
+    stopScrolling();
+});
 </script>