@necrolab/dashboard 0.5.14 → 0.5.16

package/backend/api.js

@@ -147,7 +147,7 @@ app.ws("/api/updates", async function (ws, req) {
                     { event: "set-button-disabled", button: "add-accounts", value: false }
                 ])
             );
-            setTimeout(() => send({ event: "init-tasks", tasks: endpoints.getStrippedTasks(currentUser.name) }));
+            setTimeout(() => send({ event: "init-tasks", tasks: endpoints.getStrippedTasks() }));
             setTimeout(() => send({ event: "init-profiles", profiles: Bot.Profiles }));
             setTimeout(() => send({ event: "init-tm-accounts", accounts: Bot.TM.Accounts }));
             setTimeout(() => send({ event: "init-axs-accounts", accounts: Bot.AXS.Accounts }));
@@ -429,8 +429,7 @@ app.post("/api/proxies", async (req, res) => {
 });
 
 app.post("/api/userconfig/set", async (req, res) => {
-    // eslint-disable-next-line no-unused-vars
-    const { field, value } = req.body;
+    const { value } = req.body;
 
     users[0].proxyList = value;
 

package/eslint.config.js

@@ -0,0 +1,46 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import globals from "globals";
+import vue from "eslint-plugin-vue";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default defineConfig([
+    ...compat.extends("eslint:recommended", "plugin:vue/vue3-essential"),
+    {
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                Bot: true,
+                refreshTaskOnFrontEnd: true,
+                pushWSUpdate: true,
+                __APP_VERSION__: "readonly"
+            },
+            ecmaVersion: "latest",
+            sourceType: "module",
+            parserOptions: {}
+        },
+        plugins: {
+            vue
+        },
+        rules: {
+            "html.validate.scripts": 0,
+            "html.validate.styles": 0,
+            "vue/multi-word-component-names": "off",
+            "no-unused-vars": [
+                "warn",
+                { vars: "all", args: "after-used", ignoreRestSiblings: true }
+            ]
+        }
+    },
+    globalIgnores(["src/registerServiceWorker.js", "src/libs/panzoom.js"])
+]);

package/index.html

@@ -9,6 +9,7 @@
         />
         <!-- Lock iPhone to portrait orientation only -->
         <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <meta name="description" content="Necro Lab - dashboard" />
         <meta name="darkreader-lock" />
@@ -36,8 +37,8 @@
         />
 
         <!-- Preload critical assets -->
-        <link rel="preload" as="image" href="/img/background.svg" />
         <link rel="preload" as="image" href="/img/logo_trans.png" />
+        <link rel="preload" as="image" href="/img/reconnect-logo.png" />
 
         <!-- Prefetch core navigation icons -->
         <link rel="prefetch" as="image" href="/img/close.svg" />

package/package.json

@@ -1,9 +1,9 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.14",
+    "version": "0.5.16",
     "type": "module",
     "scripts": {
-        "build": "rm -rf dist && npx workbox-cli generateSW workbox-config.cjs && vite build",
+        "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.cjs",
         "dev": "node dev-server.js",
         "bot": "node dev-server.js",
         "expose": "node dev-server.js",
@@ -42,8 +42,11 @@
     },
     "main": "index.js",
     "devDependencies": {
+        "@eslint/eslintrc": "^3.3.3",
+        "@eslint/js": "^9.39.2",
         "eslint": "^9.17.0",
         "eslint-plugin-vue": "^9.32.0",
+        "globals": "^17.3.0",
         "workbox-cli": "^7.3.0"
     },
     "overrides": {

package/src/App.vue

@@ -1,58 +1,34 @@
 <template>
     <div class="layout min-h-screen h-screen">
+        <!-- iPhone Landscape Lock Overlay -->
+        <div v-if="showLandscapeLock" class="iphone-landscape-lock">
+            <div class="rotate-message">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="rotate-icon">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                <p class="rotate-text">Please rotate your device to portrait mode</p>
+            </div>
+        </div>
+
         <transition name="fade">
             <Splash v-if="isLoading" />
         </transition>
-        <div class="refresh-wrapper">
-            <div
-                class="refresh-container w-fit mx-auto"
-                :style="{
-                    'margin-top': maxPull() + 'px',
-                    transform: `rotate(${ui.pullChange}deg)`
-                }">
-                <div
-                    class="refresh-icon p-2 rounded-full mx-auto duration-200"
-                    :class="{
-                        'opacity-100': ui.pullChange > 250,
-                        'opacity-0': ui.pullChange < 250
-                    }">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        class="stroke-2 w-4 stroke-dark-400"
-                        :class="{ 'opacity-0': ui.pullChange == 0 }">
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
-                    </svg>
-                </div>
-            </div>
-            <h2
-                class="text-dark-400 text-center duration-200"
-                :class="{
-                    'opacity-100': ui.pullChange > 250,
-                    'opacity-0': ui.pullChange < 250
-                }">
-                Release to refresh
-            </h2>
-        </div>
         <transition name="out-in">
             <div v-if="spinner" key="reconnect-indicator" class="h-full">
                 <ReconnectIndicator :message="ui.spinnerMessage" />
             </div>
             <div v-else key="main-components" class="flex">
                 <Navbar v-if="layout == 'dashboard'" class="fixed" />
-                <div :class="['router-wrapper', { '-mt-[60px]': ui.pullChange > 1 }]"></div>
-                <router-view v-slot="{ Component, route }">
-                    <transition name="page-transition" mode="out-in">
-                        <component
-                            :is="Component"
-                            :key="route.path"
-                            class="component-container w-full mx-auto px-3 xs:px-3 md:px-2 lg:px-6 xl:px-10 pb-2 mt-0 lg:mt-4 ios-wrapper" />
-                    </transition>
-                </router-view>
+                <div class="router-wrapper w-full">
+                    <router-view v-slot="{ Component, route }">
+                        <transition name="page-transition" mode="out-in">
+                            <component
+                                :is="Component"
+                                :key="route.path"
+                                class="component-container w-full mx-auto px-3 xs:px-3 md:px-2 lg:px-6 xl:px-10 pb-2 ios-wrapper" />
+                        </transition>
+                    </router-view>
+                </div>
             </div>
         </transition>
     </div>
@@ -66,27 +42,18 @@ import Navbar from "@/components/ui/Navbar.vue";
 import { useUIStore } from "@/stores/ui";
 import Splash from "@/components/ui/Splash.vue";
 import ReconnectIndicator from "@/components/ui/ReconnectIndicator.vue";
+import { DEBUG } from "@/utils/debug";
+import { useDeviceDetection } from "@/composables/useDeviceDetection";
 
 const ui = useUIStore();
+const { showSpinner: spinner } = storeToRefs(ui);
 const router = useRouter();
 const isLoading = ref(false);
-const spinner = storeToRefs(ui).showSpinner;
+const showLandscapeLock = ref(false);
 
-function isIOS() {
-    if (/iPad|iPhone|iPod/.test(navigator.platform)) {
-        return true;
-    } else {
-        return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
-    }
-}
-
-function isIpadOS() {
-    return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
-}
+const { isIOS, isIpadOS } = useDeviceDetection();
 
 // Prevent pinch-to-zoom gestures
-let lastTouchDistance = 0;
-
 document.addEventListener('touchstart', (e) => {
     if (e.touches.length > 1) {
         e.preventDefault();
@@ -123,34 +90,54 @@ document.addEventListener('touchend', (e) => {
 
 if (!window.location.href.includes(":5173")) ui.startSpinner("Loading...");
 
+// Handle iPhone landscape lock
+function updateLandscapeLock() {
+    if (isIOS() && !isIpadOS()) {
+        showLandscapeLock.value = isLandscapeMode();
+    }
+}
+
+// Update on orientation/resize
+window.addEventListener("orientationchange", updateLandscapeLock);
+window.addEventListener("resize", updateLandscapeLock);
+updateLandscapeLock();
+
 // Ensure notch handling runs when Vue app mounts
 onMounted(() => {
-    // Multiple aggressive attempts on Vue mount
-    handleNotch();
-    setTimeout(handleNotch, 10);
-    setTimeout(handleNotch, 50);
-    setTimeout(handleNotch, 150);
-    setTimeout(handleNotch, 300);
-
-    // Set up a recurring check for the first few seconds
+    // Optimized: Single debounced handler instead of multiple setTimeouts
     let attempts = 0;
-    const recurringCheck = setInterval(() => {
-        if (attempts++ > 10) {
-            clearInterval(recurringCheck);
-            return;
-        }
-        handleNotch();
-    }, 200);
+    const maxAttempts = 5;
+    const delays = [0, 50, 150, 300, 500];
+
+    const scheduleNextAttempt = (index) => {
+        if (index >= maxAttempts) return;
+        setTimeout(() => {
+            handleNotch();
+            scheduleNextAttempt(index + 1);
+        }, delays[index]);
+    };
+
+    scheduleNextAttempt(0);
 });
 
-// close modals on esc
+// Keyboard key codes
+const KEY_CODES = {
+    ESCAPE: 27,
+    EQUAL: 61,
+    NUMPAD_PLUS: 107,
+    FIREFOX_MINUS: 173,
+    NUMPAD_MINUS: 109,
+    CHROME_EQUAL: 187,
+    MINUS: 189
+};
+
 document.onkeydown = function (evt) {
     evt = evt || window.event;
-    var isEscape = false;
+    let isEscape = false;
     if ("key" in evt) {
         isEscape = evt.key === "Escape" || evt.key === "Esc";
     } else {
-        isEscape = evt.keyCode === 27;
+        isEscape = evt.keyCode === KEY_CODES.ESCAPE;
     }
     if (isEscape) {
         ui.activeModal = "";
@@ -162,18 +149,18 @@ document.addEventListener("keydown", function (event) {
     // Prevent Ctrl/Cmd + Plus/Minus/0 (various keycodes for different browsers)
     if (
         (event.ctrlKey || event.metaKey) &&
-        (event.which === 61 ||  // = key
-            event.which === 107 || // Numpad +
-            event.which === 173 || // Firefox -
-            event.which === 109 || // Numpad -
-            event.which === 187 || // = key (Chrome)
-            event.which === 189 || // - key
-            event.keyCode === 61 ||
-            event.keyCode === 107 ||
-            event.keyCode === 173 ||
-            event.keyCode === 109 ||
-            event.keyCode === 187 ||
-            event.keyCode === 189 ||
+        (event.which === KEY_CODES.EQUAL ||
+            event.which === KEY_CODES.NUMPAD_PLUS ||
+            event.which === KEY_CODES.FIREFOX_MINUS ||
+            event.which === KEY_CODES.NUMPAD_MINUS ||
+            event.which === KEY_CODES.CHROME_EQUAL ||
+            event.which === KEY_CODES.MINUS ||
+            event.keyCode === KEY_CODES.EQUAL ||
+            event.keyCode === KEY_CODES.NUMPAD_PLUS ||
+            event.keyCode === KEY_CODES.FIREFOX_MINUS ||
+            event.keyCode === KEY_CODES.NUMPAD_MINUS ||
+            event.keyCode === KEY_CODES.CHROME_EQUAL ||
+            event.keyCode === KEY_CODES.MINUS ||
             event.key === '+' ||
             event.key === '-' ||
             event.key === '=' ||
@@ -233,9 +220,7 @@ if (isIOSDevice) {
 // Simplified scroll control - let scrollable elements handle their own scrolling
 // Page scroll is already prevented by overflow: hidden on html/body
 
-// DOMMouseScroll handler removed - CSS overflow handles scroll prevention
 
-// Wheel and scroll handlers removed - CSS overflow: hidden on html/body prevents page scroll
 
 // Precise scroll control - only allow scrolling within specific scrollable elements
 window.addEventListener(
@@ -282,12 +267,9 @@ window.addEventListener(
     { passive: false }
 );
 
-// PERFECT notch handling - simple and bulletproof
 let notchTimeout;
 let isNotchBusy = false;
 let lastNotchState = null;
-let animationTimeout;
-let pendingUpdate = false;
 
 function isLandscapeMode() {
     // Check orientation first
@@ -354,9 +336,8 @@ function handleNotch(force = false) {
 
         isNotchBusy = true;
 
-        // Debug info
-        if (window.location.href.includes("localhost") || window.location.href.includes("5173")) {
-            console.log("🔥 Notch Debug:", {
+        if (DEBUG) {
+            ui.logger.Debug("🔥 Notch Debug:", {
                 isLandscape,
                 hasNotch,
                 orientation,
@@ -382,7 +363,7 @@ function handleNotch(force = false) {
 
             document.body.removeChild(testDiv);
 
-            console.log("🔍 Safe area insets:", { leftInset, rightInset });
+            if (DEBUG) ui.logger.Debug("🔍 Safe area insets:", { leftInset, rightInset });
 
             // Apply styles instantly - NO ANIMATION
             wrappers.forEach((wrapper) => {
@@ -401,15 +382,22 @@ function handleNotch(force = false) {
                 }
             });
         } else {
-            // Portrait or no notch
+            // Portrait or no notch - Responsive padding constants
+            const RESPONSIVE_PADDING = {
+                XL: { minWidth: 1280, padding: "2.5rem" },
+                LG: { minWidth: 1030, padding: "1.5rem" },
+                MD: { minWidth: 768, padding: "0.5rem" },
+                DEFAULT: { padding: "0.5rem" }
+            };
+
             const padding =
-                window.innerWidth > 1280
-                    ? "2.5rem"
-                    : window.innerWidth > 1030
-                    ? "1.5rem"
-                    : window.innerWidth > 768
-                    ? "0.5rem"
-                    : "0.5rem";
+                window.innerWidth > RESPONSIVE_PADDING.XL.minWidth
+                    ? RESPONSIVE_PADDING.XL.padding
+                    : window.innerWidth > RESPONSIVE_PADDING.LG.minWidth
+                    ? RESPONSIVE_PADDING.LG.padding
+                    : window.innerWidth > RESPONSIVE_PADDING.MD.minWidth
+                    ? RESPONSIVE_PADDING.MD.padding
+                    : RESPONSIVE_PADDING.DEFAULT.padding;
 
             // Apply styles instantly - NO ANIMATION
             wrappers.forEach((wrapper) => {
@@ -420,7 +408,7 @@ function handleNotch(force = false) {
 
         isNotchBusy = false;
     } catch (error) {
-        console.warn("Notch error:", error);
+        if (DEBUG) ui.logger.Yellow("Notch error:", error);
         isNotchBusy = false;
     }
 }
@@ -525,58 +513,7 @@ window.addEventListener("popstate", triggerNotch);
 // Expose for manual triggering
 window.simulateRotate = handleNotch;
 
-const pullStart = (e) => {
-    const { screenY } = e.targetTouches[0];
-    ui.setStartPoint(screenY);
-};
-const initLoading = () => {
-    // refreshCont.current.classList.add("loading");
-    setTimeout(() => {
-        isLoading.value = true;
-    }, 500);
-    setTimeout(() => {
-        window.location.reload();
-    }, 1500);
-};
-const pull = (e) => {
-    /**
-     * get the current user touch event data
-     */
-    const touch = e.targetTouches[0];
-    /**
-     * get the touch position on the screen's Y axis
-     */
-    const { screenY } = touch;
-    /**
-     * The length of the pull
-     *
-     * if the start touch position is lesser than the current touch position, calculate the difference, which gives the `pullLength`
-     *
-     * This tells us how much the user has pulled
-     */
-    let pullLength = ui.startPoint < screenY ? Math.abs(screenY - ui.startPoint) : 0;
-    ui.setPullChange(pullLength);
-};
-const endPull = (e) => {
-    if (ui.pullChange > 250) {
-        e.preventDefault();
-    }
-    if (ui.pullChange > 200) initLoading();
-    ui.setStartPoint(0);
-    ui.setPullChange(0);
-};
-window.addEventListener("touchstart", pullStart);
-window.addEventListener("touchmove", pull);
-window.addEventListener("touchend", endPull);
-
-function maxPull() {
-    if (ui.pullChange < 250) {
-        return ui.pullChange;
-    } else {
-        ui.setPullChange(250);
-        return 250;
-    }
-}
+// Pull-to-refresh removed per user request
 // Vue router integration - aggressive triggering on route changes
 watch(
     () => router.currentRoute.value.name,
@@ -610,45 +547,78 @@ watch(
 const layout = computed(() => router.currentRoute.value.meta.layout);
 </script>
 <style lang="scss">
-// Override for scrollable containers - allow proper touch scrolling
+/* iPhone Landscape Lock Overlay */
+.iphone-landscape-lock {
+    @apply fixed inset-0 bg-dark-300 z-max hidden items-center justify-center;
+
+    @media (max-device-width: 430px) and (orientation: landscape) {
+        display: flex;
+    }
+}
+
+.rotate-message {
+    @apply text-center p-8;
+}
+
+.rotate-icon {
+    @apply w-16 h-16 mx-auto mb-4 text-accent-green;
+    animation: rotate-pulse 2s ease-in-out infinite;
+}
+
+.rotate-text {
+    @apply text-white text-lg font-medium;
+}
+
+@keyframes rotate-pulse {
+    0%, 100% {
+        transform: rotate(0deg) scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: rotate(90deg) scale(1.1);
+        opacity: 0.8;
+    }
+}
+
+/* Touch scrolling overrides for mobile */
 .table-component,
 .stop-pan,
-.scrollable,
 .overflow-y-auto,
 .vue-recycle-scroller,
 .console,
-[class*="scroll"] {
+[class*="scroll"]:not(.dropdown-menu-portal) {
     touch-action: pan-y !important;
 }
 
+/* Dropdown menus need both x/y panning */
+.dropdown-menu-portal {
+    touch-action: pan-x pan-y !important;
+}
+
 .table-component {
     touch-action: pan-x pan-y !important;
 }
 
+/* Dropdown positioning */
 .dropdown {
     position: relative;
     display: inline-block;
 }
 
 .dropdown-content {
-    @apply bg-dark-500 text-white shadow rounded-lg top-10 left-0;
+    @apply bg-dark-500 text-white shadow rounded-lg top-10 left-0 px-4 py-3;
     position: absolute;
     min-width: 160px;
-    padding: 12px 16px;
     z-index: 1;
 }
 
+/* Router wrapper */
 .router-wrapper {
-    @apply pt-5;
-    transition: margin 0.25s;
+    @apply pt-16 lg:pt-20;
     z-index: 0;
 }
 
-.refresh-container {
-    transition: margin 0.25s;
-}
-
-// Page navigation transitions
+/* Page transition animations */
 .page-transition-enter-active {
     transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

package/src/assets/css/base/mixins.scss

@@ -0,0 +1,72 @@
+/* ==========================================================================
+   MIXINS - Reusable SCSS patterns
+   ========================================================================== */
+
+/**
+ * Scale hover effect - subtle zoom on hover/active
+ * Used across buttons and interactive elements
+ */
+@mixin scale-hover {
+    &:hover {
+        transform: scale(1.03);
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
+}
+
+/**
+ * Scale hover for elements with disabled state
+ * Only applies transform when not disabled
+ */
+@mixin scale-hover-safe {
+    &:hover:not(:disabled) {
+        transform: scale(1.03);
+    }
+
+    &:active:not(:disabled) {
+        transform: scale(0.98);
+    }
+}
+
+/**
+ * Focus ring with accent green color
+ * Replaces repeated outline pattern across components
+ */
+@mixin focus-ring-accent {
+    @apply outline outline-1 outline-accent-green outline-offset-0;
+}
+
+/**
+ * User select control with vendor prefixes
+ * @param {string} $value - none, text, auto, all
+ */
+@mixin user-select($value) {
+    -webkit-user-select: $value;
+    -moz-user-select: $value;
+    -ms-user-select: $value;
+    user-select: $value;
+}
+
+/**
+ * Touch scroll reset for dropdowns and scrollable areas
+ * Enables smooth touch scrolling on mobile devices
+ */
+@mixin touch-scroll-reset {
+    overscroll-behavior: auto !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+}
+
+/**
+ * Dark button base styling
+ * Common pattern for action buttons and modal controls
+ */
+@mixin dark-button-base {
+    @apply bg-dark-400 border border-dark-650 text-white;
+}
+
+@mixin transition-standard {
+    @apply transition-all duration-150;
+}

package/src/assets/css/base/reset.scss

@@ -17,7 +17,6 @@ button {
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     outline: none;
-    /* Prevent zoom on input focus (mobile) */
     font-size: 16px;
 }
 
@@ -37,7 +36,6 @@ select:focus {
     box-shadow: none !important;
 }
 
-/* Remove number input spinners */
 input[type="number"] {
     -moz-appearance: textfield;
 }