@necrolab/dashboard 0.5.22 → 0.5.24

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.22",
+    "version": "0.5.24",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.cjs",
@@ -8,13 +8,13 @@
         "bot": "node dev-server.js",
         "expose": "node dev-server.js",
         "postinstall": "node postinstall.js",
-        "updaterenderer": "npm i @necrolab/tm-renderer@latest",
         "preview": "vite preview",
-        "lint": "npx eslint src/ --fix"
+        "lint": "npx eslint src/ --fix",
+        "release": "npm version patch && npm i && npm publish",
+        "release:minor": "npm version minor && npm i && npm publish"
     },
     "dependencies": {
         "@msgpack/msgpack": "^3.0.0-beta2",
-        "@necrolab/tm-renderer": "^0.1.12",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vueuse/core": "^11.3.0",
         "autoprefixer": "^10.4.21",

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

@@ -30,7 +30,7 @@
             </h4>
         </div>
 
-        <div class="col-span-1 flex">
+        <div class="col-span-1 flex items-center justify-center">
             <ActionButtonGroup>
                 <li>
                     <button @click="edit">

package/src/components/Editors/Profile/CreateProfile.vue

@@ -8,8 +8,17 @@
 
         <div>
             <div class="my-3 grid grid-cols-12 gap-3">
+                <!-- Country chooser -->
+                <FormField label="Country" :icon="StadiumIcon" z-index="0" class="col-span-4 md:col-span-2" noWrapper>
+                    <ProfileCountryChooser
+                        class="h-10"
+                        :value="formProfile.country"
+                        :onClick="chooseCountry"
+                        :disabled="true" />
+                </FormField>
+
                 <!-- Profile tag -->
-                <FormField label="Profile Tag" :icon="TagIcon" z-index="0" class="col-span-12 md:col-span-4" noWrapper>
+                <FormField label="Profile Tag" :icon="TagIcon" z-index="0" class="col-span-8 md:col-span-4" noWrapper>
                     <Dropdown
                         :class="`input-default dropdown w-full`"
                         :default="ui.profile.tags[0]"
@@ -19,7 +28,7 @@
                 </FormField>
 
                 <!-- Card Number -->
-                <FormField label="Card Number" :icon="CartIcon" :error="errors.includes('cardNumber')" z-index="0" class="col-span-12 md:col-span-8">
+                <FormField label="Card Number" :icon="CartIcon" :error="errors.includes('cardNumber')" z-index="0" class="col-span-12 md:col-span-6">
                     <input
                         ref="cardNumberInput"
                         placeholder="Enter card number"
@@ -30,15 +39,6 @@
                         @focus="formatCardNumberDisplay" />
                 </FormField>
 
-                <!-- Country chooser -->
-                <FormField label="Country" :icon="StadiumIcon" z-index="0" class="col-span-12 md:col-span-2" noWrapper>
-                    <ProfileCountryChooser
-                        class="h-10"
-                        :value="formProfile.country"
-                        :onClick="chooseCountry"
-                        :disabled="true" />
-                </FormField>
-
                 <!-- Exp Year -->
                 <FormField label="Expiry Year" :icon="TimerIcon" :error="errors.includes('expYear')" z-index="0" class="col-span-6 md:col-span-5" noWrapper>
                     <Dropdown

package/src/components/Filter/Filter.vue

@@ -10,6 +10,10 @@
         <div class="grid grid-cols-12 items-center py-3 px-2 sm:px-4 gap-2 sm:gap-3">
             <div class="col-span-9 sm:col-span-10">
                 <div class="flex-gap-2 items-center sm:gap-3 cursor-pointer flex-1" @click="handleFilterClick(filter.id)">
+                    <div
+                        class="filter-color-dot flex-shrink-0"
+                        :style="{ backgroundColor: color }">
+                    </div>
                     <div class="filter-type-badge flex-shrink-0">
                         <component :is="getFilterIcon()" class="w-3 h-3 sm:w-4 sm:h-4" />
                     </div>
@@ -169,6 +173,10 @@ const props = defineProps({
     filterBuilder: {
         type: Object,
         required: true
+    },
+    color: {
+        type: String,
+        default: "#7bc999"
     }
 });
 
@@ -307,6 +315,11 @@ props.filterBuilder.onUpdate(() => {
     @apply border-t border-t-dark-625/20;
 }
 
+.filter-color-dot {
+    @apply w-2.5 h-2.5 rounded-full flex-shrink-0;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
 .filter-type-badge {
     @apply w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-dark-400 flex items-center justify-center flex-shrink-0;
 }

package/src/components/Tasks/Task.vue

@@ -1,24 +1,26 @@
 <template>
     <Row
-        class="relative grid-cols-10 gap-2 text-white lg:grid-cols-12 min-h-full"
+        class="relative min-h-full grid-cols-10 gap-2 text-white lg:grid-cols-12"
         @click="ui.setOpenContextMenu('')"
         @dblclick="handleDoubleClick"
         @touchstart="handleTouchStart"
         @touchend="handleTouchEnd">
-        <div class="col-span-1 flex items-center justify-start lg:col-span-2 py-2">
+        <div class="col-span-1 flex items-center justify-start py-2 lg:col-span-2">
             <Checkbox
                 class="ml-2 mr-4 flex-shrink-0"
                 :toggled="props.task.selected"
                 @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
             <div
                 v-if="props.preferEventName && props.task.eventName"
-                class="hidden lg:flex flex-col gap-0.5 justify-center cursor-pointer max-w-full min-w-0"
+                class="hidden min-w-0 max-w-full cursor-pointer flex-col justify-center gap-0.5 lg:flex"
                 @click="copy(props.task.eventId, 'Copied event ID')"
                 :title="`Event ID: ${props.task.eventId}`">
-                <div class="max-w-45 truncate text-xs+ font-semibold leading-tight text-white">
+                <div class="max-w-45 text-xs+ truncate font-semibold leading-tight text-white">
                     {{ props.task.eventName }}
                 </div>
-                <EventDetailRow :content="[props.task.venueName, props.task.eventCity].filter(Boolean).join(', ')" truncate>
+                <EventDetailRow
+                    :content="[props.task.venueName, props.task.eventCity].filter(Boolean).join(', ')"
+                    truncate>
                     <template #icon>
                         <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                         <circle cx="12" cy="10" r="3"></circle>
@@ -32,26 +34,46 @@
                         <line x1="3" y1="10" x2="21" y2="10"></line>
                     </template>
                 </EventDetailRow>
-                <div v-if="props.task.email" class="flex items-start gap-1 text-3xs leading-tight-sm min-h-2.75">
-                    <svg class="icon-sm" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <div v-if="props.task.email" class="text-3xs leading-tight-sm min-h-2.75 flex items-start gap-1">
+                    <svg
+                        class="icon-sm"
+                        width="10"
+                        height="10"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        viewBox="0 0 24 24">
                         <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                         <polyline points="22,6 12,13 2,6"></polyline>
                     </svg>
-                    <span class="truncate text-light-500 text-3xs leading-tight-sm">{{ props.task.email }}</span>
+                    <span class="text-3xs leading-tight-sm truncate text-light-500">{{ props.task.email }}</span>
                 </div>
             </div>
             <div
                 v-else
-                class="hidden lg:flex flex-col gap-0.5 justify-center cursor-pointer max-w-full min-w-0"
-                @click="copy(props.task.eventId || props.task.email, props.task.eventId ? 'Copied event ID' : 'Copied email')">
-                <div class="flex-gap-1 items-center text-xs+ text-white font-semibold max-w-45 truncate leading-tight-md">
-                    <svg class="icon-sm" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+                class="hidden min-w-0 max-w-full cursor-pointer flex-col justify-center gap-0.5 lg:flex"
+                @click="
+                    copy(
+                        props.task.eventId || props.task.email,
+                        props.task.eventId ? 'Copied event ID' : 'Copied email'
+                    )
+                ">
+                <div
+                    class="flex-gap-1 text-xs+ max-w-45 leading-tight-md items-center truncate font-semibold text-white">
+                    <svg
+                        class="icon-sm"
+                        width="11"
+                        height="11"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2.5"
+                        viewBox="0 0 24 24">
                         <path d="M9 11l3 3L22 4"></path>
                         <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                     </svg>
                     <span>{{ props.task.eventId || props.task.email }}</span>
                 </div>
-                <EventDetailRow v-if="props.task.eventId && props.task.email && props.task.eventId !== props.task.email" :content="props.task.email" truncate>
+                <EventDetailRow v-if="!props.task.eventId" :content="props.task.email" truncate>
                     <template #icon>
                         <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                         <polyline points="22,6 12,13 2,6"></polyline>
@@ -60,19 +82,29 @@
             </div>
         </div>
         <div class="col-span-2 overflow-hidden lg:col-span-3 xl:col-span-2">
-            <h4 class="text-center text-light-300 text-xs leading-tight lg:text-2xs">
+            <h4 class="lg:text-2xs text-center text-xs leading-tight text-light-300">
                 <span v-if="!props.task.reservedTicketsList">-</span>
                 <div v-else class="overflow-hidden">
-                    <div v-for="(l, index) in props.task.reservedTicketsList.split('\n')" :key="`ticket-${index}`" class="truncate">
+                    <div
+                        v-for="(l, index) in props.task.reservedTicketsList.split('\n')"
+                        :key="`ticket-${index}`"
+                        class="truncate">
                         <span
                             v-if="!!l.trim()"
                             class="text-xs"
-                            :class="{ 'text-green-400 font-bold': isTotalPrice(l, index, props.task.reservedTicketsList.split('\n')) }"
-                        >{{ l.trim() }}</span>
+                            :class="{
+                                'font-bold text-green-400': isTotalPrice(
+                                    l,
+                                    index,
+                                    props.task.reservedTicketsList.split(' ')
+                                )
+                            }">
+                            {{ l.trim() }}
+                        </span>
                     </div>
                 </div>
                 <span
-                    class="block mt-1 font-bold text-xs"
+                    class="mt-1 block text-xs font-bold"
                     :class="{
                         'text-red-400':
                             props.task._timeLeftString === '00:00' || props.task._timeLeftString === 'No Cartholds'
@@ -84,7 +116,7 @@
         <div class="col-span-6 justify-center text-center md:col-span-5 lg:col-span-4 xl:col-span-5">
             <div class="task-status-badge">
                 <div
-                    class="w-2 h-2 rounded-full flex-shrink-0"
+                    class="h-2 w-2 flex-shrink-0 rounded-full"
                     :class="
                         colorToClass(
                             props.task.active || props.task.status.toLowerCase() === 'idle'
@@ -92,10 +124,14 @@
                                 : 'red'
                         )
                     "></div>
-                <span class="truncate text-sm font-medium uppercase text-light-300 tracking-wide max-md:text-xs max-md:max-w-full max-sm:tracking-normal">{{ props.task.status }}</span>
+                <span
+                    class="max-md:text-xs max-md:max-w-full max-sm:tracking-normal truncate text-sm font-medium uppercase tracking-wide text-light-300">
+                    {{ props.task.status }}
+                </span>
             </div>
         </div>
-        <div class="col-span-1 flex md:col-span-2 lg:col-span-3 overflow-visible max-sm:min-w-0 max-sm:flex-shrink-0 max-sm:items-center max-sm:justify-end max-sm:px-0.5">
+        <div
+            class="max-sm:min-w-0 max-sm:flex-shrink-0 max-sm:items-center max-sm:justify-end max-sm:px-0.5 col-span-1 flex overflow-visible md:col-span-2 lg:col-span-3">
             <ActionButtonGroup class="overflow-visible" :allowWrap="true">
                 <li>
                     <button v-if="task.active" @click="ui.stopTask(task.taskId)" aria-label="Stop task">
@@ -127,8 +163,10 @@
                 </li>
             </ActionButtonGroup>
         </div>
-        <div class="absolute right-5 top-4 col-span-1 hidden items-center justify-center xl:flex max-sm:left-16 max-sm:top-1 max-sm:z-10">
-            <h4 class="text-center text-xs text-light-500 bg-dark-475/40 border border-dark-500 font-semibold tracking-wide m-0 px-1.5 py-0.5 rounded text-2xs lg:text-2xs">
+        <div
+            class="max-sm:left-16 max-sm:top-1 max-sm:z-10 absolute right-5 top-4 col-span-1 hidden items-center justify-center xl:flex">
+            <h4
+                class="bg-dark-475/40 text-2xs lg:text-2xs m-0 rounded border border-dark-500 px-1.5 py-0.5 text-center text-xs font-semibold tracking-wide text-light-500">
                 {{ props.task.taskId }}
             </h4>
         </div>
@@ -137,7 +175,7 @@
             <div
                 v-if="ui.openContextMenu === task.taskId"
                 ref="contextMenuRef"
-                class="w-42 context-menu z-max fixed grid grid-cols-1 gap-1 rounded-lg border border-dark-650 bg-dark-500 p-1 text-white shadow-xl"
+                class="w-42 context-menu fixed z-max grid grid-cols-1 gap-1 rounded-lg border border-dark-650 bg-dark-500 p-1 text-white shadow-xl"
                 :style="contextMenuPosition">
                 <button class="btn-primary" @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)">
                     Open Event
@@ -237,10 +275,9 @@ onUnmounted(() => {
     document.removeEventListener("click", handleClickOutside);
 });
 
-
 const openViewTaskModal = () => {
     ui.selectedTaskForView = props.task;
-    ui.toggleModal('view-task');
+    ui.toggleModal("view-task");
 };
 
 const openInBrowser = (debug) => {

package/src/components/ui/StatusBadge.vue

@@ -25,7 +25,7 @@ const disabledClasses = "bg-red-500/20 border-red-500/30";
 <template>
     <div
         :class="[
-            'flex-center rounded-full border-2 transition-all duration-200',
+            'flex items-center justify-center rounded-full border-2 transition-all duration-200',
             enabled ? enabledClasses : disabledClasses,
             sizeClasses[size]
         ]">

package/src/composables/useFilterCSS.js

@@ -19,7 +19,9 @@ export function useFilterCSS(filterBuilder, svg) {
             document.head.appendChild(styleElement);
         }
 
-        const combinedCSS = filterBuilder.value.cssClasses + filterBuilder.value.temporaryCSS;
+        // Only use cssClasses now (permanent filter colors)
+        // temporaryCSS is no longer used - hover uses DOM classes instead
+        const combinedCSS = filterBuilder.value.cssClasses;
         if (styleElement.textContent !== combinedCSS) {
             styleElement.textContent = combinedCSS;
         }
@@ -35,17 +37,9 @@ export function useFilterCSS(filterBuilder, svg) {
             });
         };
 
-        const originalHighlight = filterBuilder.value.highlight.bind(filterBuilder.value);
-        filterBuilder.value.highlight = (...args) => {
-            originalHighlight(...args);
-            nextTick(() => injectStyles());
-        };
-
-        const originalClearHighlight = filterBuilder.value.clearHighlight.bind(filterBuilder.value);
-        filterBuilder.value.clearHighlight = () => {
-            originalClearHighlight();
-            nextTick(() => injectStyles());
-        };
+        // NOTE: highlight() and clearHighlight() now use DOM class manipulation
+        // They don't modify CSS, so we don't wrap them to inject styles
+        // This eliminates the flicker caused by style element updates
     };
 
     const cleanupStyles = () => {