@necrolab/dashboard 0.5.11 → 0.5.13

package/src/components/ui/controls/atomic/Dropdown.vue

@@ -120,27 +120,18 @@ const chose = (f) => {
 
 <style scoped>
 .dropdown {
-    @apply relative w-full text-white ml-auto rounded-lg ring-0 h-10;
-    background: linear-gradient(135deg, oklch(0.18 0 0) 0%, oklch(0.20 0 0) 100%);
-    border: 1px solid oklch(0.26 0 0);
+    @apply relative w-full text-white ml-auto rounded-lg ring-0 h-10 bg-dark-300 border border-dark-600;
     padding: 0.75rem;
 }
 
 .dropdown.transparent {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-    height: 40px !important;
+    @apply bg-transparent border-0 shadow-none p-0 h-10;
 }
 
 .dropdown.transparent:hover,
 .dropdown.transparent:focus-within,
 .dropdown.transparent.opened {
-    border: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
-    outline: none !important;
+    @apply border-0 bg-transparent shadow-none outline-none;
 }
 
 .dropdown:not(.transparent):hover {
@@ -149,14 +140,13 @@ const chose = (f) => {
 
 .dropdown:not(.transparent):focus-within,
 .dropdown:not(.transparent).opened {
-    border-color: oklch(0.72 0.15 145) !important;
-    outline: 1px solid oklch(0.72 0.15 145) !important;
+    @apply border-border-focus outline outline-1 outline-border-focus;
     outline-offset: 0;
 }
 
 @media (min-width: 768px) {
     .dropdown {
-        height: 40px;
+        @apply h-10;
         padding: 0.625rem;
     }
 }
@@ -176,21 +166,23 @@ const chose = (f) => {
 }
 
 .dropdown-arrow {
-    @apply w-4 h-4 transition-all duration-300 flex-shrink-0;
+    @apply w-4 h-4 transition-all duration-300;
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .dropdown-menu-portal {
-    @apply rounded-xl shadow-2xl;
-    background: linear-gradient(135deg, oklch(0.18 0 0) 0%, oklch(0.20 0 0) 100%);
-    border: 1px solid oklch(0.26 0 0);
+    @apply rounded-xl shadow-2xl bg-dark-300 border border-dark-600 overflow-x-auto overflow-y-auto touch-pan-x touch-pan-y;
     backdrop-filter: blur(12px);
     box-shadow: 0 20px 25px -5px oklch(0 0 0 / 0.4), 0 10px 10px -5px oklch(0 0 0 / 0.2),
         0 0 0 1px oklch(1 0 0 / 0.05);
-    overflow-x: auto !important;
-    overflow-y: auto !important;
-    overscroll-behavior: contain !important;
-    touch-action: pan-x pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
     z-index: 1000;

package/src/components/ui/controls/atomic/MultiDropdown.vue

@@ -225,7 +225,10 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 }
 
 .dropdown-counter {
-    @apply flex items-center gap-2 absolute right-2;
+    @apply flex items-center gap-2 absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
 }
 
 .counter-badge {
@@ -235,6 +238,9 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 
 .dropdown-arrow {
     @apply min-w-4 min-h-4 transition-all duration-300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .dropdown-menu-portal {

package/src/components/ui/controls/atomic/Switch.vue

@@ -18,39 +18,29 @@ const props = defineProps({
 <style lang="scss" scoped>
 /* iOS-style switch */
 .switch {
-    position: relative;
-    display: inline-block;
+    @apply relative inline-block;
     width: 51px;
     height: 31px;
 }
 
 /* Hide default HTML checkbox */
 .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
+    @apply opacity-0 w-0 h-0;
 }
 
 /* The slider */
 .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    @apply absolute cursor-pointer inset-0;
+    @apply border-2;
     background-color: oklch(0.26 0 0);
-    border: 2px solid oklch(0.35 0 0);
+    border-color: oklch(0.35 0 0);
     transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .slider:before {
-    position: absolute;
+    @apply absolute;
+    @apply w-[23px] h-[23px] left-0.5 bottom-0.5;
     content: "";
-    height: 23px;
-    width: 23px;
-    left: 2px;
-    bottom: 2px;
     background-color: oklch(0.50 0 0);
     transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 1px 3px oklch(0 0 0 / 0.3);
@@ -70,16 +60,15 @@ input:checked + .slider:before {
 }
 
 .switch.disabled {
-    pointer-events: none;
+    @apply pointer-events-none;
 }
 
 input:disabled + .slider {
-    opacity: 0.5;
-    cursor: not-allowed;
+    @apply opacity-50 cursor-not-allowed;
 }
 
 input:disabled + .slider:before {
-    opacity: 0.7;
+    @apply opacity-70;
 }
 
 /* Rounded sliders */
@@ -93,20 +82,15 @@ input:disabled + .slider:before {
 
 @media (max-width: 810px) {
     .switch {
-        width: 44px;
-        min-width: 44px;
-        height: 26px;
+        @apply w-11 min-w-11 h-[26px];
 
         .slider:before {
-            width: 22px;
-            height: 22px;
-            left: 2px;
-            bottom: 2px;
+            @apply w-[22px] h-[22px] left-0.5 bottom-0.5;
         }
     }
 
     input:checked + .slider:before {
-        transform: translateX(18px);
+        @apply translate-x-[18px];
     }
 }
 </style>

package/src/composables/useCopyToClipboard.js

@@ -0,0 +1,25 @@
+import { useUIStore } from '@/stores/ui'
+
+/**
+ * useCopyToClipboard - Composable for copying text with user feedback
+ *
+ * @returns {Object} Copy function with success notification
+ */
+export function useCopyToClipboard() {
+  const ui = useUIStore()
+
+  const copy = (text, message = 'Copied to clipboard') => {
+    if (!text) return
+
+    navigator.clipboard.writeText(text)
+      .then(() => {
+        ui.showSuccess(message)
+      })
+      .catch((err) => {
+        ui.showError('Failed to copy')
+        console.error('Copy failed:', err)
+      })
+  }
+
+  return { copy }
+}

package/src/composables/useRowSelection.js

@@ -0,0 +1,48 @@
+/**
+ * useRowSelection - Composable for handling row selection via double-click/tap
+ *
+ * Provides consistent double-click and double-tap behavior for table rows.
+ * Prevents selection when clicking on buttons or checkboxes.
+ *
+ * @param {Function} toggleCallback - Function to call when row is double-clicked/tapped
+ * @returns {Object} Event handlers for @dblclick, @touchstart, @touchend
+ */
+export function useRowSelection(toggleCallback) {
+  let lastTapTime = 0
+  const DOUBLE_TAP_DELAY = 300
+
+  const handleDoubleClick = (event) => {
+    // Don't trigger on button or checkbox clicks
+    if (event.target.closest('button') || event.target.closest('.checkbox')) {
+      return
+    }
+    toggleCallback()
+  }
+
+  const handleTouchStart = (event) => {
+    const currentTime = Date.now()
+    const tapGap = currentTime - lastTapTime
+
+    if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
+      // Don't trigger on button or checkbox taps
+      if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
+        event.preventDefault()
+        toggleCallback()
+      }
+    }
+    lastTapTime = currentTime
+  }
+
+  const handleTouchEnd = (event) => {
+    // Prevent default touch behavior on buttons/checkboxes
+    if (event.target.closest('button') || event.target.closest('.checkbox')) {
+      return
+    }
+  }
+
+  return {
+    handleDoubleClick,
+    handleTouchStart,
+    handleTouchEnd
+  }
+}

package/src/views/Accounts.vue

@@ -94,12 +94,6 @@
     </div>
 </template>
 <style lang="scss" scoped>
-.custom-dropdown-content {
-    top: 2.6rem !important;
-    left: -13px;
-    @apply border border-dark-650;
-}
-
 /* Page buttons styling - match Tasks page */
 button.bg-dark-400 {
     &:active,
@@ -110,81 +104,6 @@ button.bg-dark-400 {
     }
 }
 
-/* Unified search component group */
-.unified-search-group {
-    border: 2px solid oklch(0.2809 0 0);
-    border-radius: 0.5rem;
-    overflow: hidden;
-    background: oklch(0.2603 0 0);
-    transition: all 0.15s ease;
-    display: flex;
-
-    :deep(.tag-toggle),
-    :deep(.dropdown),
-    input {
-        border: none !important;
-        border-width: 0 !important;
-        border-radius: 0 !important;
-        height: 40px !important;
-        background: transparent !important;
-        box-shadow: none !important;
-        min-width: fit-content !important;
-    }
-
-    :deep(.tag-toggle) {
-        padding: 0;
-        border: 0 solid transparent !important;
-        border-top: 0 !important;
-        border-bottom: 0 !important;
-        border-left: 0 !important;
-        border-right: 0 !important;
-    }
-
-    :deep(.tag-toggle button) {
-        font-size: 0.875rem;
-        padding: 0.5rem 0.75rem;
-        min-width: fit-content;
-        border: 0 solid transparent !important;
-        border-top: 0 !important;
-        border-bottom: 0 !important;
-        border-left: 0 !important;
-        border-right: 0 !important;
-    }
-
-    :deep(.dropdown) {
-        width: 120px !important;
-        min-width: 120px !important;
-    }
-
-    :deep(.dropdown-display) {
-        padding: 0 0.75rem;
-        font-size: 0.875rem;
-    }
-
-    input {
-        padding-left: 0.75rem;
-        padding-right: 0.75rem;
-        flex: 1;
-
-        &::placeholder {
-            color: oklch(0.50 0 0);
-        }
-
-        &:focus {
-            outline: none !important;
-        }
-    }
-
-    &:hover {
-        border-color: oklch(0.30 0 0);
-    }
-
-    &:focus-within {
-        border-color: oklch(0.72 0.15 145);
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
-    }
-}
 .max-h-big-acc {
     max-height: calc(100vh - 14rem);
     overflow: auto;

package/src/views/Console.vue

@@ -7,7 +7,7 @@
 
         <div>
             <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="flex flex-col gap-3 md:flex-1 md:flex-row md:items-center">
                     <div class="w-full md:w-64">
                         <Dropdown
                             class="console-dropdown input-default w-full border-2 border-dark-550 bg-dark-500"
@@ -22,8 +22,8 @@
                                     .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">
+                    <div class="flex flex-1 items-center gap-2">
+                        <div class="input-default flex flex-1 items-center md:max-w-64">
                             <input
                                 v-model="searchQuery"
                                 type="text"
@@ -52,7 +52,7 @@
                         </button>
                     </div>
                 </div>
-                <div class="flex items-center gap-3 hidden md:flex">
+                <div class="flex hidden items-center gap-3 md:flex">
                     <!-- Hide Monitors and Auto buttons only on desktop -->
                     <div class="hidden items-center gap-3 md:flex">
                         <button
@@ -72,7 +72,7 @@
                     </div>
                     <!-- Scroll buttons - desktop only (mobile has them inline with search) -->
                     <button
-                        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"
+                        class="hidden 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 md:flex"
                         @mousedown="startScrolling('up')"
                         @mouseup="stopScrolling"
                         @mouseleave="stopScrolling"
@@ -81,7 +81,7 @@
                         <UpIcon class="pointer-events-none h-5 w-5" />
                     </button>
                     <button
-                        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"
+                        class="hidden 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 md:flex"
                         @mousedown="startScrolling('down')"
                         @mouseup="stopScrolling"
                         @mouseleave="stopScrolling"
@@ -94,7 +94,7 @@
 
             <Smoothie
                 :weight="0.2"
-                class="console scrollable smooth-scroll overflow-y-auto overflow-x-auto font-mono text-white"
+                class="console scrollable smooth-scroll overflow-x-auto overflow-y-auto font-mono text-white"
                 style="min-height: 12rem !important"
                 ref="$autoscroll"
                 @wheel.stop
@@ -118,7 +118,7 @@
                     v-bind:key="`log-${index}`"
                     :style="{ '--index': index }"><code class="md:text-sm lg:text-base" v-html="line"></code></pre>
             </Smoothie>
-            <div class="console-switches mt-4 mb-6 flex justify-between md:hidden">
+            <div class="console-switches mb-6 mt-4 flex justify-between md:hidden">
                 <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>
@@ -139,31 +139,25 @@
 </template>
 <style lang="scss" scoped>
 .console-page {
-    // Add generous bottom padding on mobile to prevent switch cutoff
-    @media (max-width: 768px) {
-        padding-bottom: 4rem;
-        margin-bottom: 2rem;
-    }
+    @apply pb-16 mb-8 md:pb-0 md:mb-0;
 
     @media (max-width: 480px) and (orientation: portrait) {
-        padding-bottom: 6rem;
-        margin-bottom: 3rem;
+        @apply pb-24 mb-12;
     }
 }
 
 .console-switches {
     @media (max-width: 480px) and (orientation: portrait) {
-        margin-top: 1.5rem !important;
-        margin-bottom: 4rem !important;
+        @apply mt-6 mb-16;
     }
 }
 
 .console {
     @apply relative rounded border-2 border-dark-550 bg-dark-400 p-2 lg:p-5;
+    @apply touch-pan-x touch-pan-y;
     height: calc(100vh - 18rem);
     scrollbar-width: thin;
     scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
-    touch-action: pan-x pan-y !important;
     -webkit-overflow-scrolling: touch;
 
     // Use fixed height on mobile portrait to ensure switches are visible
@@ -261,7 +255,8 @@
     border-color: oklch(0.2809 0 0);
     transition: all 0.15s ease;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
         border-color: oklch(0.72 0.15 145) !important;
         outline: 1px solid oklch(0.72 0.15 145);
         outline-offset: 0;
@@ -292,17 +287,6 @@
     }
 }
 
-.text-xxs {
-    font-size: 0.5rem;
-    line-height: 0.8rem;
-}
-
-.header-wrapper {
-    svg {
-        width: 30px;
-        height: 30px;
-    }
-}
 /* Console-specific styles handled by utilities */
 </style>
 <script setup>
@@ -525,7 +509,7 @@ window.startDebugConsoleMessages = () => {
     setInterval(() => {
         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`,
+            log: `\u001b[96m[12:16:02.273]\u001b[00m \u001b[96m[TASK-${taskId}]\u001b[00m TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST`,
             metadata: {
                 taskId: taskId,
                 siteId: "TM_US",