@necrolab/dashboard 0.4.49 → 0.4.51

package/src/components/Tasks/Task.vue

@@ -1,459 +1,423 @@
 <template>
-  <Row
-    class="relative text-white grid-cols-10 gap-2 lg:grid-cols-12"
-    @click="ui.setOpenContextMenu('')"
-  >
-    <div class="block md:hidden absolute left-1 top-1">
-      <h4
-        class="text-xs text-white font-bold"
-        style="
-          background: transparent !important;
-          border: none !important;
-          padding: 0 !important;
-          margin: 0 !important;
-          color: #c9cad1 !important;
-          font-size: 11px !important;
-          font-weight: 600 !important;
-          letter-spacing: 0.4px !important;
-        "
-      >
-        {{ props.task.taskId }}
-      </h4>
-    </div>
-    <div class="col-span-1 lg:col-span-2 flex items-center justify-start">
-      <Checkbox
-        class="ml-2 mr-4 flex-shrink-0"
-        :toggled="props.task.selected"
-        @valueUpdate="ui.toggleTaskSelected(props.task.taskId)"
-      />
-      <h4
-        class="task-event-id mx-auto hidden lg:block text-white cursor-pointer hover:text-light-300"
-        @click="copy(props.task.eventId)"
-      >
-        {{ props.task.eventId }}
-      </h4>
-    </div>
-    <div class="col-span-2">
-      <h4 class="text-white">
-        <span v-if="!props.task.reservedTicketsList">-</span>
-        <div v-else>
-          <div v-for="l in props.task.reservedTicketsList.split(' | ')" :key="l">
-            <span v-if="!!l.trim()">{{ l.trim() }}</span>
-          </div>
+    <Row class="relative text-white grid-cols-10 gap-2 lg:grid-cols-12" @click="ui.setOpenContextMenu('')">
+        <div class="block md:hidden absolute left-1 top-1">
+            <h4
+                class="text-xs text-white font-bold"
+                style="
+                    background: transparent !important;
+                    border: none !important;
+                    padding: 0 !important;
+                    margin: 0 !important;
+                    color: #c9cad1 !important;
+                    font-size: 11px !important;
+                    font-weight: 600 !important;
+                    letter-spacing: 0.4px !important;
+                ">
+                {{ props.task.taskId }}
+            </h4>
         </div>
-        <span
-          class="ml-1 font-bold"
-          :class="{
-            'text-red-400':
-              props.task._timeLeftString === '00:00' ||
-              props.task._timeLeftString === 'No Cartholds',
-          }"
-        >
-          {{
-            props.task._timeLeftString !== "00:00"
-              ? props.task._timeLeftString
-              : "Expired"
-          }}
-        </span>
-      </h4>
-    </div>
-    <div class="col-span-5 md:col-span-4 lg:col-span-5 text-center justify-center">
-      <div class="status-container">
-        <div
-          class="status-indicator"
-          :class="
-            colorToClass(
-              props.task.active || props.task.status.toLowerCase() === 'idle'
-                ? props.task.statusColor
-                : 'red'
-            )
-          "
-        ></div>
-        <span class="status-text">{{ props.task.status }}</span>
-      </div>
-    </div>
-    <div class="col-span-2 lg:col-span-3 flex">
-      <ul class="task-buttons">
-        <li>
-          <button v-if="task.active" @click="ui.stopTask(task.taskId)">
-            <PauseIcon />
-          </button>
-          <button v-else @click="ui.startTask(task.taskId)">
-            <PlayIcon />
-          </button>
-        </li>
-        <li
-          v-if="
-            task.status?.toLowerCase() == 'waiting' &&
-            props.task._timeLeftString !== '00:00'
-          "
-        >
-          <button @click="ui.continueTask(task.taskId, 'autocheckout')">
-            <BagWhiteIcon />
-          </button>
-        </li>
-        <li v-if="task.status?.toLowerCase() == 'waiting'">
-          <button @click="ui.continueTask(task.taskId, 'change_reservation')">
-            <EditIcon />
-          </button>
-        </li>
-        <li>
-          <button @click="ui.deleteTask(task.taskId)">
-            <TrashIcon />
-          </button>
-        </li>
-        <li @contextmenu.prevent="handleRightClick">
-          <button @click="props.task.isExpanded = !props.task.isExpanded">
-            <span>{{ props.task.isExpanded ? "−" : "+" }}</span>
-          </button>
-        </li>
-      </ul>
-    </div>
-    <div
-      class="hidden md:block col-span-1 absolute right-5 top-4 lg:flex items-center justify-center"
-    >
-      <h4 class="text-center text-xs task-id text-white">
-        {{ props.task.taskId }}
-      </h4>
-    </div>
-    <transition name="fade">
-      <div
-        class="col-span-10 lg:col-span-12 flex flex-wrap gap-x-4 gap-y-4 lg:gap-x-10 pt-8 pb-2 xl:justify-around will-change-auto"
-        v-if="props.task.isExpanded"
-      >
-        <!-- Details -->
-        <TaskLabel
-          class="md:hidden"
-          image="stadium_w"
-          :text="props.task.eventId"
-          @click="copy(props.task.eventId)"
-        />
-
-        <TaskLabel class="md:hidden" image="bag_w" :text="String(props.task.quantity)" />
-        <TaskLabel
-          v-if="props.task.email"
-          image="mail"
-          :text="props.task.email"
-          @click="copy(props.task.email)"
-        />
-        <TaskLabel
-          v-if="props.task.password"
-          image="key"
-          :text="props.task.password"
-          @click="copy(props.task.password)"
-        />
-        <TaskLabel
-          v-if="!props.task.email && !props.task.password"
-          image="mail"
-          text="No account chosen yet"
-        />
-        <TaskLabel
-          v-if="props.task.profileName"
-          image="profile"
-          :text="props.task.profileName"
-        />
-        <TaskLabel image="timer" :text="props.task.smartTimer ? 'On' : 'Off'" />
-        <TaskLabel image="groups" :text="props.task.loginAfterCart ? 'On' : 'Off'" />
-        <TaskLabel image="hand" :text="props.task.manual ? 'On' : 'Off'" />
-        <TaskLabel image="savings" :text="props.task.doNotPay ? 'On' : 'Off'" />
-        <TaskLabel image="loyalty" :text="props.task.presaleMode ? 'On' : 'Off'" />
-        <TaskLabel image="ski" :text="props.task.quickQueue ? 'On' : 'Off'" />
-        <TaskLabel image="scanner" :text="props.task.accountTag" />
-        <TaskLabel image="sell" :text="props.task.profileTags.join(', ')" />
-        <TaskLabel
-          v-if="props.task.presaleCode"
-          @click="copy(props.task.presaleCode)"
-          image="pencil"
-          :text="props.task.presaleCode"
-        />
-
-        <TaskLabel
-          v-if="props.task.eventName"
-          image="stadium_w"
-          :text="props.task.eventName"
-        />
-        <TaskLabel
-          v-if="props.task.eventVenue"
-          image="stadium_w"
-          :text="props.task.eventVenue"
-        />
-        <TaskLabel
-          v-if="props.task.eventLocalDate"
-          image="stadium_w"
-          :text="formatDate(props.task.eventLocalDate)"
-        />
-        <TaskLabel image="sandclock" :text="props.task.agedAccount ? 'On' : 'Off'" />
-      </div>
-    </transition>
-
-    <!-- Context menu -->
-    <transition name="fade">
-      <div
-        v-if="ui.openContextMenu === task.taskId"
-        ref="contextMenuRef"
-        class="fixed bg-dark-500 text-white w-42 grid grid-cols-1 p-1 gap-1 rounded-lg shadow-xl border border-dark-650 context-menu z-max"
-        :style="contextMenuPosition"
-      >
-        <button
-          class="btn-primary"
-          @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)"
-        >
-          Open Event
-        </button>
-        <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(false)">
-          Open in browser (proxy)
-        </button>
-        <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(true)">
-          Open in browser (debug)
-        </button>
-      </div>
-    </transition>
-  </Row>
+        <div class="col-span-1 lg:col-span-2 flex items-center justify-start">
+            <Checkbox
+                class="ml-2 mr-4 flex-shrink-0"
+                :toggled="props.task.selected"
+                @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
+            <h4
+                class="task-event-id mx-auto hidden lg:block text-white cursor-pointer hover:text-light-300"
+                @click="copy(props.task.eventId)">
+                {{ props.task.eventId }}
+            </h4>
+        </div>
+        <div class="col-span-2">
+            <h4 class="text-white">
+                <span v-if="!props.task.reservedTicketsList">-</span>
+                <div v-else>
+                    <div v-for="l in props.task.reservedTicketsList.split(' | ')" :key="l">
+                        <span v-if="!!l.trim()">{{ l.trim() }}</span>
+                    </div>
+                </div>
+                <span
+                    class="ml-1 font-bold"
+                    :class="{
+                        'text-red-400':
+                            props.task._timeLeftString === '00:00' || props.task._timeLeftString === 'No Cartholds'
+                    }">
+                    {{ props.task._timeLeftString !== "00:00" ? props.task._timeLeftString : "Expired" }}
+                </span>
+            </h4>
+        </div>
+        <div class="col-span-5 md:col-span-4 lg:col-span-5 text-center justify-center">
+            <div class="status-container">
+                <div
+                    class="status-indicator"
+                    :class="
+                        colorToClass(
+                            props.task.active || props.task.status.toLowerCase() === 'idle'
+                                ? props.task.statusColor
+                                : 'red'
+                        )
+                    "></div>
+                <span class="status-text">{{ props.task.status }}</span>
+            </div>
+        </div>
+        <div class="col-span-2 lg:col-span-3 flex">
+            <ul class="task-buttons">
+                <li>
+                    <button v-if="task.active" @click="ui.stopTask(task.taskId)">
+                        <PauseIcon />
+                    </button>
+                    <button v-else @click="ui.startTask(task.taskId)">
+                        <PlayIcon />
+                    </button>
+                </li>
+                <li v-if="task.status?.toLowerCase() == 'waiting' && props.task._timeLeftString !== '00:00'">
+                    <button @click="ui.continueTask(task.taskId, 'autocheckout')">
+                        <BagWhiteIcon />
+                    </button>
+                </li>
+                <li v-if="task.status?.toLowerCase() == 'waiting'">
+                    <button @click="ui.continueTask(task.taskId, 'change_reservation')">
+                        <EditIcon />
+                    </button>
+                </li>
+                <li>
+                    <button @click="ui.deleteTask(task.taskId)">
+                        <TrashIcon />
+                    </button>
+                </li>
+                <li @contextmenu.prevent="handleRightClick">
+                    <button @click="props.task.isExpanded = !props.task.isExpanded">
+                        <span>{{ props.task.isExpanded ? "−" : "+" }}</span>
+                    </button>
+                </li>
+            </ul>
+        </div>
+        <div class="hidden md:block col-span-1 absolute right-5 top-4 lg:flex items-center justify-center">
+            <h4 class="text-center text-xs task-id text-white">
+                {{ props.task.taskId }}
+            </h4>
+        </div>
+        <transition name="fade">
+            <div
+                class="col-span-10 lg:col-span-12 flex flex-wrap gap-x-4 gap-y-4 lg:gap-x-10 pt-8 pb-2 xl:justify-around will-change-auto"
+                v-if="props.task.isExpanded">
+                <!-- Details -->
+                <TaskLabel
+                    class="md:hidden"
+                    image="stadium_w"
+                    :text="props.task.eventId"
+                    @click="copy(props.task.eventId)" />
+
+                <TaskLabel class="md:hidden" image="bag_w" :text="String(props.task.quantity)" />
+                <TaskLabel
+                    v-if="props.task.email"
+                    image="mail"
+                    :text="props.task.email"
+                    @click="copy(props.task.email)" />
+                <TaskLabel
+                    v-if="props.task.password"
+                    image="key"
+                    :text="props.task.password"
+                    @click="copy(props.task.password)" />
+                <TaskLabel v-if="!props.task.email && !props.task.password" image="mail" text="No account chosen yet" />
+                <TaskLabel v-if="props.task.profileName" image="profile" :text="props.task.profileName" />
+                <TaskLabel image="timer" :text="props.task.smartTimer ? 'On' : 'Off'" />
+                <TaskLabel image="groups" :text="props.task.loginAfterCart ? 'On' : 'Off'" />
+                <TaskLabel image="hand" :text="props.task.manual ? 'On' : 'Off'" />
+                <TaskLabel image="savings" :text="props.task.doNotPay ? 'On' : 'Off'" />
+                <TaskLabel image="loyalty" :text="props.task.presaleMode ? 'On' : 'Off'" />
+                <TaskLabel image="ski" :text="props.task.quickQueue ? 'On' : 'Off'" />
+                <TaskLabel image="scanner" :text="props.task.accountTag" />
+                <TaskLabel image="sell" :text="props.task.profileTags.join(', ')" />
+                <TaskLabel
+                    v-if="props.task.presaleCode"
+                    @click="copy(props.task.presaleCode)"
+                    image="pencil"
+                    :text="props.task.presaleCode" />
+
+                <TaskLabel v-if="props.task.eventName" image="stadium_w" :text="props.task.eventName" />
+                <TaskLabel v-if="props.task.eventVenue" image="stadium_w" :text="props.task.eventVenue" />
+                <TaskLabel
+                    v-if="props.task.eventLocalDate"
+                    image="stadium_w"
+                    :text="formatDate(props.task.eventLocalDate)" />
+                <TaskLabel image="sandclock" :text="props.task.agedAccount ? 'On' : 'Off'" />
+            </div>
+        </transition>
+
+        <!-- Context menu -->
+        <transition name="fade">
+            <div
+                v-if="ui.openContextMenu === task.taskId"
+                ref="contextMenuRef"
+                class="fixed bg-dark-500 text-white w-42 grid grid-cols-1 p-1 gap-1 rounded-lg shadow-xl border border-dark-650 context-menu z-max"
+                :style="contextMenuPosition">
+                <button class="btn-primary" @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)">
+                    Open Event
+                </button>
+                <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(false)">
+                    Open in browser (proxy)
+                </button>
+                <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(true)">
+                    Open in browser (debug)
+                </button>
+            </div>
+        </transition>
+    </Row>
 </template>
 <style lang="scss" scoped>
 h4 {
-  @apply text-center;
-  color: #e2e2e5;
+    @apply text-center;
+    color: #e2e2e5;
 }
 
 .status-container {
-  @apply flex items-center justify-center mx-auto w-fit bg-dark-500 border border-dark-650 rounded-lg;
-  padding: 6px 12px;
-  gap: 6px;
-  transition: all 0.15s ease;
-  max-width: 100%;
-
-  &:hover {
-    @apply bg-dark-550 border-dark-700;
-  }
-}
-
-.status-text {
-  @apply font-medium text-sm truncate uppercase;
-  color: #e2e2e5;
-  letter-spacing: 0.025em;
-}
-
-.task-buttons {
-  @apply flex items-center justify-center mx-auto bg-dark-500 border border-dark-650 rounded;
-  padding: 2px;
-  gap: 1px;
-
-  button {
-    @apply flex items-center justify-center transition-all duration-150 border-0 outline-0 relative rounded;
-    background: transparent;
-    width: 22px;
-    height: 22px;
-    color: #cccccc;
-    border-radius: 4px;
+    @apply flex items-center justify-center mx-auto w-fit bg-dark-500 border border-dark-650 rounded-lg;
+    padding: 6px 12px;
+    gap: 6px;
+    transition: all 0.15s ease;
+    max-width: 100%;
 
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: #ffffff;
-      transform: scale(1.05);
+        @apply bg-dark-550 border-dark-700;
     }
+}
 
-    &:active {
-      background: rgba(255, 255, 255, 0.2);
-      transform: scale(0.95);
-    }
-  }
-
-  svg,
-  img {
-    width: 12px;
-    height: 12px;
-    position: relative;
-    z-index: 1;
-  }
-
-  svg path {
-    fill: currentColor;
-  }
-
-  span {
-    @apply text-xs font-medium relative z-[1];
-  }
+.status-text {
+    @apply font-medium text-sm truncate uppercase;
+    color: #e2e2e5;
+    letter-spacing: 0.025em;
 }
 
-/* Tablet sizing - medium buttons */
-@media (min-width: 768px) and (max-width: 1023px) {
-  .task-buttons {
+.task-buttons {
+    @apply flex items-center justify-center mx-auto bg-dark-500 border border-dark-650 rounded;
     padding: 2px;
     gap: 1px;
-    border-radius: 6px;
 
     button {
-      width: 26px;
-      height: 26px;
-      border-radius: 5px;
+        @apply flex items-center justify-center transition-all duration-150 border-0 outline-0 relative rounded;
+        background: transparent;
+        width: 22px;
+        height: 22px;
+        color: #cccccc;
+        border-radius: 4px;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: #ffffff;
+            transform: scale(1.05);
+        }
+
+        &:active {
+            background: rgba(255, 255, 255, 0.2);
+            transform: scale(0.95);
+        }
     }
 
     svg,
     img {
-      width: 14px;
-      height: 14px;
+        width: 12px;
+        height: 12px;
+        position: relative;
+        z-index: 1;
     }
 
-    span {
-      font-size: 0.75rem;
+    svg path {
+        fill: currentColor;
     }
-  }
-}
 
-/* 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;
+    span {
+        @apply text-xs font-medium relative z-[1];
     }
+}
 
-    svg,
-    img {
-      width: 16px;
-      height: 16px;
+/* 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;
+        }
     }
+}
 
-    span {
-      font-size: 0.875rem;
+/* 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 portrait specific styling */
 @media (max-width: 480px) and (orientation: portrait) {
-  /* Position adjustment for mobile taskId */
-  .block.md\\:hidden {
-    left: 4rem !important; /* Move further right to avoid checkbox collision */
-    top: 0.25rem !important;
-    z-index: 1 !important;
-  }
-
-  /* Ultra-compact button layout for mobile portrait */
-  .task-buttons {
-    padding: 1px;
-    gap: 0;
-    border-radius: 4px;
-    border: none !important;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
-    max-width: 100%;
-    overflow: visible;
-    flex-wrap: wrap;
-    justify-content: center;
-    min-height: 18px;
-    height: auto;
-
-    button {
-      width: 15px;
-      height: 15px;
-      border-radius: 2px;
-      min-width: 15px;
-      border: none !important;
-      flex-shrink: 0;
-      margin: 0.5px;
-
-      &:hover {
-        transform: scale(1.1);
-      }
+    /* Position adjustment for mobile taskId */
+    .block.md\\:hidden {
+        left: 4rem !important;
+        top: 0.25rem !important;
+        z-index: 1 !important;
     }
 
-    svg,
-    img {
-      width: 7px;
-      height: 7px;
+    /* Improved button layout for mobile portrait */
+    .task-buttons {
+        padding: 1px;
+        gap: 1px;
+        border-radius: 4px;
+        border: 1px solid #3d3e44 !important;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+        max-width: 100%;
+        min-height: 28px;
+        height: auto;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        background: #2e2f34;
+
+        button {
+            width: 20px;
+            height: 20px;
+            border-radius: 3px;
+            min-width: 20px;
+            border: none !important;
+            flex-shrink: 0;
+            margin: 0.5px;
+            background: transparent;
+
+            &:hover {
+                background: rgba(255, 255, 255, 0.1);
+                transform: scale(1.05);
+            }
+
+            &:active {
+                background: rgba(255, 255, 255, 0.15);
+                transform: scale(0.95);
+            }
+        }
+
+        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;
+        }
     }
 
-    span {
-      font-size: 0.5rem;
-      line-height: 1;
+    /* Make the actions column more flexible */
+    .col-span-2.lg\\:col-span-3 {
+        min-width: 0;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 2px;
     }
 
-    /* Allow buttons to wrap to second row if needed */
-    li {
-      display: flex;
-      margin: 0;
+    /* Compact status container */
+    .status-container {
+        border: none !important;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+        padding: 2px 4px;
+        font-size: 0.7rem;
+        max-width: 100%;
     }
-  }
-
-  /* Make the actions column slightly more flexible */
-  .col-span-2.lg\\:col-span-3 {
-    min-width: 0;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Compact status container */
-  .status-container {
-    border: none !important;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
-    padding: 3px 6px;
-    font-size: 0.75rem;
-    max-width: 100%;
-  }
 
-  .status-text {
-    font-size: 0.7rem;
-    letter-spacing: 0;
-  }
+    .status-text {
+        font-size: 0.65rem;
+        letter-spacing: 0;
+    }
 
-  /* Reduce row height to accommodate smaller elements */
-  .task-row-container {
-    min-height: 50px !important;
-  }
+    /* Reduce row height to accommodate smaller elements */
+    .task-row-container {
+        min-height: 45px !important;
+    }
 }
 
 .task-id {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  margin: 0;
-  color: #a0a0a6;
-  background: rgba(46, 47, 52, 0.4);
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: 1px solid #3d3e44;
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    margin: 0;
+    color: #a0a0a6;
+    background: rgba(46, 47, 52, 0.4);
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid #3d3e44;
 }
 
 .task-event-id {
-  font-size: 11px;
-  font-weight: 500;
-  text-align: center;
-  color: #d0d0d3;
+    font-size: 11px;
+    font-weight: 500;
+    text-align: center;
+    color: #d0d0d3;
 
-  &:hover {
-    color: #ffffff;
-  }
+    &:hover {
+        color: #ffffff;
+    }
 
-  @media (max-width: 1024px) {
-    font-size: 10px;
-  }
+    @media (max-width: 1024px) {
+        font-size: 10px;
+    }
 
-  @media (max-width: 768px) {
-    font-size: 9px;
-  }
+    @media (max-width: 768px) {
+        font-size: 9px;
+    }
 }
 
 /* Responsive task styling */
 @screen lg {
-  h4 {
-    font-size: 10px;
-  }
+    h4 {
+        font-size: 10px;
+    }
 
-  .task-id {
-    font-size: 8px;
-  }
+    .task-id {
+        font-size: 8px;
+    }
 
-  .task-event-id {
-    font-size: 10px;
-  }
+    .task-event-id {
+        font-size: 10px;
+    }
 }
 </style>
 
@@ -461,13 +425,7 @@ h4 {
 /// <reference path="@/types/index.js" />
 
 import { Row } from "@/components/Table";
-import {
-  PlayIcon,
-  TrashIcon,
-  BagWhiteIcon,
-  PauseIcon,
-  EditIcon,
-} from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import TaskLabel from "@/components/Tasks/TaskLabel.vue";
@@ -477,7 +435,7 @@ const ui = useUIStore();
 
 /** @type {{ task: Task }} */
 const props = defineProps({
-  task: { type: Object },
+    task: { type: Object }
 });
 
 // Context menu positioning
@@ -486,51 +444,51 @@ const contextMenuRef = ref(null);
 
 // Handle right-click to position context menu
 const handleRightClick = (event) => {
-  const menuWidth = 168; // w-42 = 10.5rem = 168px
-  const menuHeight = 200; // Approximate height
-
-  let x = event.clientX;
-  let y = event.clientY - 55;
-
-  // Prevent menu from going off screen
-  if (x + menuWidth > window.innerWidth) {
-    x = event.clientX - menuWidth; // Show to the left instead
-  }
-  if (y + menuHeight > window.innerHeight) {
-    y = event.clientY - menuHeight; // Show above instead
-  }
-
-  contextMenuPosition.value = {
-    left: `${x}px`,
-    top: `${y}px`,
-  };
-
-  // Open the context menu for this task
-  ui.setOpenContextMenu(props.task.taskId);
-
-  // Add click outside listener after menu opens
-  nextTick(() => {
-    document.addEventListener("click", handleClickOutside);
-  });
+    const menuWidth = 168; // w-42 = 10.5rem = 168px
+    const menuHeight = 200; // Approximate height
+
+    let x = event.clientX;
+    let y = event.clientY - 55;
+
+    // Prevent menu from going off screen
+    if (x + menuWidth > window.innerWidth) {
+        x = event.clientX - menuWidth; // Show to the left instead
+    }
+    if (y + menuHeight > window.innerHeight) {
+        y = event.clientY - menuHeight; // Show above instead
+    }
+
+    contextMenuPosition.value = {
+        left: `${x}px`,
+        top: `${y}px`
+    };
+
+    // Open the context menu for this task
+    ui.setOpenContextMenu(props.task.taskId);
+
+    // Add click outside listener after menu opens
+    nextTick(() => {
+        document.addEventListener("click", handleClickOutside);
+    });
 };
 
 // Handle clicking outside the context menu
 const handleClickOutside = (event) => {
-  if (contextMenuRef.value && !contextMenuRef.value.contains(event.target)) {
-    ui.setOpenContextMenu("");
-    document.removeEventListener("click", handleClickOutside);
-  }
+    if (contextMenuRef.value && !contextMenuRef.value.contains(event.target)) {
+        ui.setOpenContextMenu("");
+        document.removeEventListener("click", handleClickOutside);
+    }
 };
 
 // Cleanup on unmount
 onUnmounted(() => {
-  document.removeEventListener("click", handleClickOutside);
+    document.removeEventListener("click", handleClickOutside);
 });
 
 const copy = (txt) => {
-  if (!txt) return;
-  navigator.clipboard.writeText(txt);
-  ui.showSuccess("Copied text");
+    if (!txt) return;
+    navigator.clipboard.writeText(txt);
+    ui.showSuccess("Copied text");
 };
 
 const colorMapping = new Map();
@@ -539,52 +497,39 @@ colorMapping.set("red", "bg-red-400");
 colorMapping.set("error", "bg-red-400");
 colorMapping.set("success", "bg-green-400");
 const colorToClass = (color) => {
-  return colorMapping.get(color) || "bg-white";
+    return colorMapping.get(color) || "bg-white";
 };
 
 const openInBrowser = (debug) => {
-  if (!props.task.openerLink) return;
-  ui.showSuccess(`Opening in browser ${debug ? "(debug)" : ""}`);
-  const input = props.task.openerLink;
-  const data = JSON.parse(atob(input.split("://")[1]));
-  data.config.debug = debug;
-  const out = "necro://" + btoa(JSON.stringify(data));
-  openInNewTab(out);
+    if (!props.task.openerLink) return;
+    ui.showSuccess(`Opening in browser ${debug ? "(debug)" : ""}`);
+    const input = props.task.openerLink;
+    const data = JSON.parse(atob(input.split("://")[1]));
+    data.config.debug = debug;
+    const out = "necro://" + btoa(JSON.stringify(data));
+    openInNewTab(out);
 };
 
 const formatDate = (date) => {
-  if (!date) return "-";
-  const d = new Date(date);
-  const iso = d.toISOString();
-  const [year, month, day] = iso.substring(0, 10).split("-");
-  const time = iso.substring(11, 16);
-  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const dayName = dayNames[d.getUTCDay()];
-  const monthNames = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-  const monthName = monthNames[parseInt(month) - 1];
-  return `${dayName} ${monthName} ${parseInt(day)} ${year} ${time}`;
+    if (!date) return "-";
+    const d = new Date(date);
+    const iso = d.toISOString();
+    const [year, month, day] = iso.substring(0, 10).split("-");
+    const time = iso.substring(11, 16);
+    const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const dayName = dayNames[d.getUTCDay()];
+    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    const monthName = monthNames[parseInt(month) - 1];
+    return `${dayName} ${monthName} ${parseInt(day)} ${year} ${time}`;
 };
 
 const openInNewTab = (href) => {
-  if (!href) return;
-  ui.logger.Info("Opening", href);
-  Object.assign(document.createElement("a"), {
-    target: "_blank",
-    rel: "noopener noreferrer",
-    href: href,
-  }).click();
+    if (!href) return;
+    ui.logger.Info("Opening", href);
+    Object.assign(document.createElement("a"), {
+        target: "_blank",
+        rel: "noopener noreferrer",
+        href: href
+    }).click();
 };
 </script>