@necrolab/dashboard 0.5.12 → 0.5.13

package/src/components/Tasks/Task.vue

@@ -1,6 +1,6 @@
 <template>
     <Row
-        class="relative grid-cols-10 gap-2 text-white lg:grid-cols-12"
+        class="relative grid-cols-10 gap-2 text-white lg:grid-cols-12 min-h-full"
         @click="ui.setOpenContextMenu('')"
         @dblclick="handleDoubleClick"
         @touchstart="handleTouchStart"
@@ -12,8 +12,8 @@
                 @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
             <div
                 v-if="props.preferEventName && props.task.eventName"
-                class="event-details hidden cursor-pointer lg:flex flex-col gap-0.5 justify-center"
-                @click="copy(props.task.eventId)"
+                class="event-details hidden lg:flex flex-col gap-0.5 justify-center cursor-pointer"
+                @click="copy(props.task.eventId, 'Copied event ID')"
                 :title="`Event ID: ${props.task.eventId}`">
                 <div class="event-name text-white text-[11px] font-semibold leading-tight">
                     {{ props.task.eventName }}
@@ -44,8 +44,8 @@
             </div>
             <div
                 v-else
-                class="event-id-details hidden cursor-pointer lg:flex flex-col gap-0.5 justify-center"
-                @click="copy(props.task.eventId)">
+                class="event-id-details hidden lg:flex flex-col gap-0.5 justify-center cursor-pointer"
+                @click="copy(props.task.eventId, 'Copied event ID')">
                 <div class="event-id-row flex items-center gap-1 text-[11px] text-white font-semibold">
                     <svg class="event-icon" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                         <path d="M9 11l3 3L22 4"></path>
@@ -99,7 +99,7 @@
             </div>
         </div>
         <div class="col-span-2 flex lg:col-span-3 overflow-visible">
-            <ul class="task-buttons overflow-visible">
+            <ActionButtonGroup class="overflow-visible">
                 <li>
                     <button v-if="task.active" @click="ui.stopTask(task.taskId)">
                         <PauseIcon />
@@ -128,7 +128,7 @@
                         <EyeIcon />
                     </button>
                 </li>
-            </ul>
+            </ActionButtonGroup>
         </div>
         <div class="absolute right-5 top-4 col-span-1 hidden items-center justify-center md:block lg:flex">
             <h4 class="task-id text-center text-xs text-white">
@@ -178,20 +178,19 @@ h4 {
     }
 
     .event-icon {
-        min-width: 10px !important;
-        min-height: 10px !important;
-        flex-shrink: 0 !important;
-        color: oklch(0.60 0 0) !important;
-        stroke: oklch(0.60 0 0) !important;
-        fill: none !important;
+        @apply min-w-[10px] flex-shrink-0;
+        min-height: 10px;
+        color: oklch(0.60 0 0);
+        stroke: oklch(0.60 0 0);
+        fill: none;
 
         path,
         rect,
         line,
         circle,
         polyline {
-            stroke: oklch(0.60 0 0) !important;
-            fill: none !important;
+            stroke: oklch(0.60 0 0);
+            fill: none;
         }
     }
 
@@ -233,159 +232,11 @@ h4 {
     }
 }
 
-.task-buttons {
-    @apply mx-auto flex items-center justify-center rounded;
-    background: oklch(0.2046 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-    padding: 2px;
-    gap: 1px;
-    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: 22px;
-        height: 22px;
-        color: oklch(0.90 0 0);
-        border-radius: 4px;
-
-        &:hover {
-            background: oklch(0.72 0.15 145 / 0.15);
-            color: oklch(1 0 0);
-        }
-
-        &:active {
-            background: oklch(0.72 0.15 145 / 0.25);
-        }
-    }
-
-    svg,
-    img {
-        width: 12px;
-        height: 12px;
-        position: relative;
-        z-index: 1;
-    }
-
-    svg path {
-        fill: currentColor;
-    }
-
-    span {
-        @apply relative z-[1] text-xs font-medium;
-    }
-}
-
-/* Tablet sizing - medium buttons */
-@media (min-width: 768px) and (max-width: 1023px) {
-    .task-buttons {
-        padding: 2px;
-        gap: 1px;
-        border-radius: 6px;
-
-        button {
-            width: 26px;
-            height: 26px;
-            border-radius: 5px;
-        }
-
-        svg,
-        img {
-            width: 14px;
-            height: 14px;
-        }
-
-        span {
-            font-size: 0.75rem;
-        }
-    }
-}
-
-/* Desktop sizing - large buttons */
-@media (min-width: 1024px) {
-    .task-buttons {
-        padding: 3px;
-        gap: 2px;
-        border-radius: 8px;
-
-        button {
-            width: 28px;
-            height: 28px;
-            border-radius: 6px;
-        }
-
-        svg,
-        img {
-            width: 16px;
-            height: 16px;
-        }
-
-        span {
-            font-size: 0.875rem;
-        }
-    }
-}
-
 /* Mobile specific styling - changed from 480px to 640px for earlier transition */
 @media (max-width: 640px) {
     /* Position adjustment for mobile taskId */
     .block.md\\:hidden {
-        left: 4rem !important;
-        top: 0.25rem !important;
-        z-index: 1 !important;
-    }
-
-    /* Improved button layout for mobile */
-    .task-buttons {
-        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: 20px;
-            height: 20px;
-            border-radius: 3px;
-            min-width: 20px;
-            border: none !important;
-            flex-shrink: 0;
-            margin: 0.5px;
-            background: transparent;
-
-            &:hover {
-                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;
-        }
-
-        span {
-            font-size: 0.7rem;
-            line-height: 1;
-        }
-
-        /* Improved list item layout */
-        li {
-            display: flex;
-            margin: 0;
-            padding: 0;
-        }
+        @apply left-16 top-1 z-10;
     }
 
     /* Make the actions column more flexible */
@@ -400,8 +251,7 @@ h4 {
 
     /* Compact status container */
     .status-container {
-        border: none !important;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+        @apply border-0 shadow-sm;
         padding: 2px 4px;
         font-size: 0.7rem;
         max-width: 100%;
@@ -411,11 +261,6 @@ h4 {
         font-size: 0.65rem;
         letter-spacing: 0;
     }
-
-    /* Reduce row height to accommodate smaller elements */
-    .task-row-container {
-        min-height: 45px !important;
-    }
 }
 
 .task-id {
@@ -471,12 +316,16 @@ h4 {
 import { Row } from "@/components/Table";
 import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, EyeIcon, StadiumIcon, TimerIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
+import ActionButtonGroup from "@/components/ui/ActionButtonGroup.vue";
 import { useUIStore } from "@/stores/ui";
 import TaskLabel from "@/components/Tasks/TaskLabel.vue";
 import ViewTask from "@/components/Tasks/ViewTask.vue";
 import { computed, ref, onMounted, onUnmounted, nextTick } from "vue";
+import { useRowSelection } from "@/composables/useRowSelection";
+import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
 
 const ui = useUIStore();
+const { copy } = useCopyToClipboard();
 
 /** @type {{ task: Task }} */
 const props = defineProps({
@@ -508,40 +357,9 @@ const contextMenuPosition = ref({});
 const contextMenuRef = ref(null);
 
 // Double-click/tap selection
-let lastTapTime = 0;
-const DOUBLE_TAP_DELAY = 300; // ms
-
-const handleDoubleClick = (event) => {
-    // Prevent if clicking on buttons or checkbox
-    if (event.target.closest('button') || event.target.closest('.checkbox')) {
-        return;
-    }
+const { handleDoubleClick, handleTouchStart, handleTouchEnd } = useRowSelection(() => {
     ui.toggleTaskSelected(props.task.taskId);
-};
-
-const handleTouchStart = (event) => {
-    // Store touch time for double-tap detection
-    const currentTime = Date.now();
-    const tapGap = currentTime - lastTapTime;
-
-    if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
-        // Double-tap detected
-        if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
-            event.preventDefault(); // Prevent zoom
-            ui.toggleTaskSelected(props.task.taskId);
-        }
-    }
-
-    lastTapTime = currentTime;
-};
-
-const handleTouchEnd = (event) => {
-    // Prevent default to avoid potential zoom issues
-    // but only if not interacting with buttons/checkbox
-    if (event.target.closest('button') || event.target.closest('.checkbox')) {
-        return;
-    }
-};
+});
 
 // Handle right-click to position context menu
 const handleRightClick = (event) => {
@@ -586,11 +404,6 @@ onUnmounted(() => {
     document.removeEventListener("click", handleClickOutside);
 });
 
-const copy = (txt) => {
-    if (!txt) return;
-    navigator.clipboard.writeText(txt);
-    ui.showSuccess("Copied text");
-};
 
 const openViewTaskModal = () => {
     ui.selectedTaskForView = props.task;

package/src/components/Tasks/TaskView.vue

@@ -78,9 +78,11 @@ h4 {
         @apply bg-dark-550 !important;
     }
 
-    // Increase height when showing eventName to accommodate multi-line display
-    &:has(.event-details) {
-        min-height: 75px;
+    // Increase height when showing eventName to accommodate multi-line display (desktop only)
+    @media (min-width: 1024px) {
+        &:has(.event-details) {
+            min-height: 75px;
+        }
     }
 
     @media (max-width: 768px) {
@@ -94,7 +96,6 @@ h4 {
 
 .empty-state {
     @apply bg-dark-400;
-    color: #969696;
     font-size: 14px;
     font-weight: 500;
 }