@necrolab/dashboard 0.5.5 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.5",
+    "version": "0.5.6",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && npx workbox-cli generateSW workbox-config.cjs && vite build",

package/src/App.vue

@@ -220,19 +220,52 @@ document.onkeydown = function (evt) {
     }
 };
 
+// Prevent ALL keyboard zoom combinations
 document.addEventListener("keydown", function (event) {
+    // Prevent Ctrl/Cmd + Plus/Minus/0 (various keycodes for different browsers)
     if (
         (event.ctrlKey || event.metaKey) &&
-        (event.which === 61 ||
-            event.which === 107 ||
-            event.which === 173 ||
-            event.which === 109 ||
-            event.which === 187 ||
-            event.which === 189)
+        (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.key === '+' ||
+            event.key === '-' ||
+            event.key === '=' ||
+            event.key === '0')
     ) {
         event.preventDefault();
     }
-});
+}, { passive: false });
+
+// Prevent Ctrl/Cmd + Mouse wheel zoom (desktop)
+document.addEventListener("wheel", function (event) {
+    if (event.ctrlKey || event.metaKey) {
+        event.preventDefault();
+    }
+}, { passive: false });
+
+// Also block mousewheel for older browsers
+document.addEventListener("mousewheel", function (event) {
+    if (event.ctrlKey || event.metaKey) {
+        event.preventDefault();
+    }
+}, { passive: false });
+
+// Block DOMMouseScroll for Firefox
+document.addEventListener("DOMMouseScroll", function (event) {
+    if (event.ctrlKey || event.metaKey) {
+        event.preventDefault();
+    }
+}, { passive: false });
 // Nuclear iOS keyboard prevention - lock everything down
 let isIOSDevice =
     /iPad|iPhone|iPod/.test(navigator.platform) ||
@@ -260,108 +293,12 @@ if (isIOSDevice) {
     }
 }
 
-// Precise mouse wheel control - only allow scrolling within specific scrollable elements
-window.addEventListener(
-    "mousewheel",
-    function (event) {
-        // Check if we're on a scrollable textarea
-        const isScrollableTextarea =
-            event.target.tagName === "TEXTAREA" &&
-            (event.target.classList.contains("code-editor") || event.target.classList.contains("proxy-editor"));
+// Simplified scroll control - let scrollable elements handle their own scrolling
+// Page scroll is already prevented by overflow: hidden on html/body
 
-        // Check if we're in a table but only allow scrolling on actual scrollable content
-        const isInTable = event.target.closest(".table-component");
-        const isScrollableTableContent =
-            isInTable &&
-            (event.target.closest(".grid") || // Table rows
-                event.target.closest(".table-row") ||
-                (event.target.closest(".table-component") && !event.target.closest(".table-header")));
+// DOMMouseScroll handler removed - CSS overflow handles scroll prevention
 
-        // Allow scrolling in navbar and modals
-        const isInNavbar = event.target.closest(".navbar") || event.target.closest(".mobile-menu");
-        const isInModal = event.target.closest('[role="dialog"]');
-
-        // Only allow these specific cases
-        if (isScrollableTextarea || isScrollableTableContent || isInNavbar || isInModal) {
-            // Stop propagation to prevent page scroll
-            if (isScrollableTableContent || isScrollableTextarea) {
-                event.stopPropagation();
-            }
-            return;
-        }
-
-        event.preventDefault();
-    },
-    { passive: false }
-);
-
-window.addEventListener(
-    "DOMMouseScroll",
-    function (event) {
-        // Use same logic as mousewheel
-        const isScrollableTextarea =
-            event.target.tagName === "TEXTAREA" &&
-            (event.target.classList.contains("code-editor") || event.target.classList.contains("proxy-editor"));
-
-        const isInTable = event.target.closest(".table-component");
-        const isScrollableTableContent =
-            isInTable &&
-            (event.target.closest(".grid") ||
-                event.target.closest(".table-row") ||
-                (event.target.closest(".table-component") && !event.target.closest(".table-header")));
-
-        const isInNavbar = event.target.closest(".navbar") || event.target.closest(".mobile-menu");
-        const isInModal = event.target.closest('[role="dialog"]');
-
-        if (isScrollableTextarea || isScrollableTableContent || isInNavbar || isInModal) {
-            if (isScrollableTableContent || isScrollableTextarea) {
-                event.stopPropagation();
-            }
-            return;
-        }
-
-        event.preventDefault();
-    },
-    { passive: false }
-);
-
-window.addEventListener(
-    "wheel",
-    function (event) {
-        // Use same logic as mousewheel
-        const isScrollableTextarea =
-            event.target.tagName === "TEXTAREA" &&
-            (event.target.classList.contains("code-editor") || event.target.classList.contains("proxy-editor"));
-
-        const isInTable = event.target.closest(".table-component");
-        const isScrollableTableContent =
-            isInTable &&
-            (event.target.closest(".grid") ||
-                event.target.closest(".table-row") ||
-                (event.target.closest(".table-component") && !event.target.closest(".table-header")));
-
-        const isInNavbar = event.target.closest(".navbar") || event.target.closest(".mobile-menu");
-        const isInModal = event.target.closest('[role="dialog"]');
-
-        if (isScrollableTextarea || isScrollableTableContent || isInNavbar || isInModal) {
-            if (isScrollableTableContent || isScrollableTextarea) {
-                event.stopPropagation();
-            }
-            return;
-        }
-
-        event.preventDefault();
-    },
-    { passive: false }
-);
-
-window.addEventListener(
-    "scroll",
-    function (event) {
-        event.preventDefault();
-    },
-    { passive: false }
-);
+// 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(
@@ -372,12 +309,21 @@ window.addEventListener(
             event.target.tagName === "TEXTAREA" &&
             (event.target.classList.contains("code-editor") || event.target.classList.contains("proxy-editor"));
 
+        // Check if we're in a scrollable container
+        const isInScrollableContainer =
+            event.target.closest(".stop-pan") ||
+            event.target.closest(".overflow-y-auto") ||
+            event.target.closest(".vue-recycle-scroller") ||
+            event.target.closest(".scroller") ||
+            event.target.closest(".scrollable");
+
         // Check if we're in a table but only allow scrolling on actual scrollable content
         const isInTable = event.target.closest(".table-component");
         const isScrollableTableContent =
             isInTable &&
             (event.target.closest(".grid") || // Table rows
                 event.target.closest(".table-row") ||
+                isInScrollableContainer ||
                 (event.target.closest(".table-component") && !event.target.closest(".table-header")));
 
         // Allow scrolling in navbar and modals (they handle their own boundaries)
@@ -385,9 +331,9 @@ window.addEventListener(
         const isInModal = event.target.closest('[role="dialog"]');
 
         // Only allow these specific cases
-        if (isScrollableTextarea || isScrollableTableContent || isInNavbar || isInModal) {
+        if (isScrollableTextarea || isScrollableTableContent || isInScrollableContainer || isInNavbar || isInModal) {
             // For table content, ensure we stop propagation to prevent page scroll
-            if (isScrollableTableContent || isScrollableTextarea) {
+            if (isScrollableTableContent || isScrollableTextarea || isInScrollableContainer) {
                 event.stopPropagation();
             }
             return;
@@ -749,11 +695,26 @@ body {
     touch-action: none !important;
 }
 
-// Prevent any element from being zoomable
+// Prevent zoom but allow scrolling on specific elements
 * {
     touch-action: manipulation !important;
 }
 
+// Override for scrollable containers - allow proper touch scrolling
+.table-component,
+.stop-pan,
+.scrollable,
+.overflow-y-auto,
+.vue-recycle-scroller,
+.console,
+[class*="scroll"] {
+    touch-action: pan-y !important;
+}
+
+.table-component {
+    touch-action: pan-x pan-y !important;
+}
+
 .dropdown {
     position: relative;
     display: inline-block;

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

@@ -2,6 +2,14 @@
    GLOBAL RESETS
    ========================================================================== */
 
+/* Comprehensive zoom prevention */
+* {
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+}
+
 input,
 textarea,
 select,
@@ -9,6 +17,8 @@ button {
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     outline: none;
+    /* Prevent zoom on input focus (mobile) */
+    font-size: 16px;
 }
 
 input,

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

@@ -7,6 +7,11 @@ html {
     overscroll-behavior: none !important;
     height: 100% !important;
     width: 100% !important;
+    /* Additional zoom prevention at CSS level */
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
 
 * {

package/src/assets/css/components/forms.scss

@@ -31,6 +31,17 @@
         &::placeholder {
             color: oklch(0.50 0 0);
         }
+
+        // Hide default number input spinners - use custom .input-incrementer instead
+        &[type="number"]::-webkit-inner-spin-button,
+        &[type="number"]::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        &[type="number"] {
+            -moz-appearance: textfield;
+        }
     }
 
     .input-incrementer {

package/src/assets/css/main.scss

@@ -73,6 +73,31 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
     fill: oklch(0.9 0 0) !important;
 }
 
+/* Badge icon color exceptions - override ALL global white rules */
+.enabled-badge svg,
+.enabled-badge-large svg {
+    color: oklch(0.72 0.15 145) !important;
+    fill: oklch(0.72 0.15 145) !important;
+}
+
+.disabled-badge svg,
+.disabled-badge-large svg {
+    color: oklch(0.60 0.20 25) !important;
+    fill: oklch(0.60 0.20 25) !important;
+}
+
+.enabled-badge svg *,
+.enabled-badge-large svg * {
+    fill: oklch(0.72 0.15 145) !important;
+    stroke: oklch(0.72 0.15 145) !important;
+}
+
+.disabled-badge svg *,
+.disabled-badge-large svg * {
+    fill: oklch(0.60 0.20 25) !important;
+    stroke: oklch(0.60 0.20 25) !important;
+}
+
 /* ==========================================================================
    COMPONENT UTILITIES
    ========================================================================== */

package/src/components/Editors/Account/Account.vue

@@ -21,12 +21,12 @@
             </h4>
         </div>
         <div class="col-span-1">
-            <h4 v-if="props.account.enabled" class="flex justify-center text-green-400">
-                <img class="green h-3 w-3" src="/img/controls/enable.svg" />
-            </h4>
-            <h4 v-else class="flex justify-center text-red-400">
-                <img class="h-3 w-3 fill-red-400" src="/img/close.svg" />
-            </h4>
+            <div v-if="props.account.enabled" class="enabled-badge">
+                <CheckmarkIcon class="w-3.5 h-3.5" />
+            </div>
+            <div v-else class="disabled-badge">
+                <CloseXIcon class="w-3.5 h-3.5" />
+            </div>
         </div>
 
         <div class="col-span-1 hidden lg:block">
@@ -57,30 +57,80 @@
     </Row>
 </template>
 <style lang="scss" scoped>
+.enabled-badge {
+    @apply flex items-center justify-center mx-auto rounded-full;
+    background: oklch(0.72 0.15 145 / 0.12);
+    border: 1.5px solid oklch(0.72 0.15 145);
+    width: 24px;
+    height: 24px;
+    padding: 0;
+
+    svg {
+        color: oklch(0.72 0.15 145) !important;
+        width: 12px !important;
+        height: auto !important;
+        max-height: 12px !important;
+        display: block;
+        margin: 0;
+    }
+
+    svg path {
+        stroke: oklch(0.72 0.15 145) !important;
+        fill: oklch(0.72 0.15 145) !important;
+    }
+}
+
+.disabled-badge {
+    @apply flex items-center justify-center mx-auto rounded-full;
+    background: oklch(0.60 0.20 25 / 0.12);
+    border: 1.5px solid oklch(0.60 0.20 25);
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    color: oklch(0.60 0.20 25) !important;
+
+    svg {
+        color: oklch(0.60 0.20 25) !important;
+        width: 12px !important;
+        height: 12px !important;
+        display: block;
+        margin: 0;
+        fill: oklch(0.60 0.20 25) !important;
+    }
+
+    svg path {
+        stroke: oklch(0.60 0.20 25) !important;
+        fill: oklch(0.60 0.20 25) !important;
+    }
+}
+
 h4 {
     @apply text-center;
 }
 .account-buttons {
-    @apply mx-auto flex items-center justify-center rounded border border-dark-650 bg-dark-500;
+    @apply mx-auto flex items-center justify-center rounded;
+    background: oklch(0.2046 0 0);
+    border: 2px solid oklch(0.2809 0 0);
     padding: 3px;
     gap: 2px;
+    flex-shrink: 0;
+    overflow: visible;
 
     button {
         @apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
         background: transparent;
         width: 28px;
         height: 28px;
-        color: oklch(0.82 0 0);
+        color: oklch(0.90 0 0);
+        border-radius: 6px;
 
         &:hover {
-            background: rgba(255, 255, 255, 0.1);
-            color: #ffffff;
-            transform: scale(1.05);
+            background: oklch(0.72 0.15 145 / 0.15);
+            color: oklch(1 0 0);
         }
 
         &:active {
-            background: rgba(255, 255, 255, 0.2);
-            transform: scale(0.95);
+            background: oklch(0.72 0.15 145 / 0.25);
         }
     }
 
@@ -97,19 +147,17 @@ h4 {
     }
 }
 
-// Tablet optimization
-@media (max-width: 1024px) {
-    h4 {
-        font-size: 10px !important;
-    }
-
+// Tablet sizing - medium buttons
+@media (min-width: 768px) and (max-width: 1023px) {
     .account-buttons {
-        padding: 3px;
-        gap: 2px;
+        padding: 2px;
+        gap: 1px;
+        border-radius: 6px;
 
         button {
             width: 26px;
             height: 26px;
+            border-radius: 5px;
         }
 
         svg,
@@ -118,59 +166,74 @@ h4 {
             height: 14px;
         }
     }
-
-    .account-id {
-        font-size: 6px !important;
-        margin-right: -12px;
-        margin-top: 20px;
-    }
 }
 
-// Mobile optimization
-@media (max-width: 768px) {
+// Desktop sizing - large buttons
+@media (min-width: 1024px) {
     .account-buttons {
-        padding: 2px;
-        gap: 1px;
+        padding: 3px;
+        gap: 2px;
+        border-radius: 8px;
 
         button {
-            width: 22px;
-            height: 22px;
+            width: 28px;
+            height: 28px;
+            border-radius: 6px;
         }
 
         svg,
         img {
-            width: 12px;
-            height: 12px;
+            width: 16px;
+            height: 16px;
         }
     }
 }
 
-// iPhone vertical (portrait) specific
-@media (max-width: 480px) and (orientation: portrait) {
+// Mobile specific styling
+@media (max-width: 640px) {
     .account-buttons {
-        padding: 2px;
+        padding: 1px;
         gap: 1px;
+        border-radius: 4px;
+        border: 2px solid oklch(0.2809 0 0) !important;
+        max-width: 100%;
+        min-height: 28px;
+        height: auto;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        background: oklch(0.2046 0 0);
 
         button {
-            width: 18px;
-            height: 18px;
+            width: 20px;
+            height: 20px;
+            border-radius: 3px;
+            min-width: 20px;
+            border: none !important;
+            flex-shrink: 0;
+            margin: 0.5px;
+            background: transparent;
 
             &:hover {
-                transform: scale(1.1);
+                background: oklch(0.72 0.15 145 / 0.15);
+            }
+
+            &:active {
+                background: oklch(0.72 0.15 145 / 0.25);
             }
         }
 
         svg,
         img {
-            width: 10px;
-            height: 10px;
+            width: 12px;
+            height: 12px;
         }
     }
 }
 </style>
 <script setup>
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, CheckmarkIcon, CloseXIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import TagLabel from "@/components/Editors/TagLabel.vue";

package/src/components/Editors/Account/AccountView.vue

@@ -31,22 +31,13 @@
         </Header>
         <div
             v-if="toRender.length != 0"
-            class="hidden-scrollbars stop-pan overflow-y-auto overflow-x-hidden"
+            class="hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
             :style="{ maxHeight: dynamicTableHeight }">
-            <RecycleScroller
-                :items="toRender"
-                :item-size="64"
-                key-field="index"
-                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650">
-                <template #default="props">
-                    <div class="account" :key="`account-${props.item.id || props.item.index}`">
-                        <Account
-                            @click="i[props.item.index]++"
-                            :class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
-                            :account="props.item" />
-                    </div>
-                </template>
-            </RecycleScroller>
+            <div v-for="(account, i) in toRender" :key="account.id || account.index" class="account-row-container">
+                <Account
+                    :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
+                    :account="account" />
+            </div>
         </div>
         <div v-else class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center">
             <MailIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
@@ -56,9 +47,16 @@
     </Table>
 </template>
 <style lang="scss" scoped>
-.account {
-    height: 64px;
+.account-row-container {
+    min-height: 64px;
+    flex-shrink: 0;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+        @apply bg-dark-550 !important;
+    }
 }
+
 h4 {
     @apply text-white;
 }