@necrolab/dashboard 0.5.6 → 0.5.8

package/package.json

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

package/src/components/Tasks/Task.vue

@@ -5,16 +5,62 @@
         @dblclick="handleDoubleClick"
         @touchstart="handleTouchStart"
         @touchend="handleTouchEnd">
-        <div class="col-span-1 flex items-center justify-start lg:col-span-2">
+        <div class="col-span-1 flex items-start justify-start lg:col-span-2 py-2">
             <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 cursor-pointer text-white hover:text-light-300 lg:block"
+            <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)"
+                :title="`Event ID: ${props.task.eventId}`">
+                <div class="event-name text-white text-[11px] font-semibold leading-tight">
+                    {{ props.task.eventName }}
+                </div>
+                <div v-if="props.task.venueName || props.task.eventCity" class="event-venue flex items-start gap-1 text-[9px] leading-tight">
+                    <svg class="event-icon mt-[1px]" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <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>
+                    </svg>
+                    <span class="truncate text-light-500">{{ [props.task.venueName, props.task.eventCity].filter(Boolean).join(', ') }}</span>
+                </div>
+                <div v-if="props.task.eventLocalDate" class="event-date flex items-start gap-1 text-[9px] leading-tight">
+                    <svg class="event-icon mt-[1px]" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+                        <line x1="16" y1="2" x2="16" y2="6"></line>
+                        <line x1="8" y1="2" x2="8" y2="6"></line>
+                        <line x1="3" y1="10" x2="21" y2="10"></line>
+                    </svg>
+                    <span class="text-light-500">{{ formatEventDate(props.task.eventLocalDate) }}</span>
+                </div>
+                <div v-if="props.task.email" class="event-email flex items-start gap-1 text-[9px] leading-tight">
+                    <svg class="event-icon mt-[1px]" 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">{{ props.task.email }}</span>
+                </div>
+            </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)">
-                {{ props.task.eventId }}
-            </h4>
+                <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>
+                        <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 }}</span>
+                </div>
+                <div v-if="props.task.email" class="event-email flex items-start gap-1 text-[9px] leading-tight">
+                    <svg class="event-icon mt-[1px]" 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">{{ props.task.email }}</span>
+                </div>
+            </div>
         </div>
         <div class="col-span-2 overflow-hidden">
             <h4 class="text-white text-xs leading-tight">
@@ -115,6 +161,54 @@ h4 {
     color: oklch(0.90 0 0);
 }
 
+.event-details,
+.event-id-details {
+    max-width: 100%;
+    min-width: 0;
+    gap: 2px;
+
+    .event-name,
+    .event-id-row {
+        max-width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 11px;
+        line-height: 1.3;
+    }
+
+    .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;
+
+        path,
+        rect,
+        line,
+        circle,
+        polyline {
+            stroke: oklch(0.60 0 0) !important;
+            fill: none !important;
+        }
+    }
+
+    .event-venue,
+    .event-date,
+    .event-email {
+        line-height: 1.2;
+        min-height: 11px;
+
+        span {
+            color: oklch(0.60 0 0);
+            font-size: 9px;
+            line-height: 1.2;
+        }
+    }
+}
+
 .status-container {
     @apply mx-auto flex w-fit items-center justify-center rounded-lg border border-dark-650 bg-dark-500;
     padding: 6px 12px;
@@ -375,7 +469,7 @@ h4 {
 /// <reference path="@/types/index.js" />
 
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, EyeIcon } from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, EyeIcon, StadiumIcon, TimerIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import TaskLabel from "@/components/Tasks/TaskLabel.vue";
@@ -386,9 +480,29 @@ const ui = useUIStore();
 
 /** @type {{ task: Task }} */
 const props = defineProps({
-    task: { type: Object }
+    task: { type: Object },
+    preferEventName: { type: Boolean, default: false }
 });
 
+// Format event date for display
+const formatEventDate = (dateString) => {
+    if (!dateString) return '';
+    try {
+        const date = new Date(dateString);
+        const options = {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: true
+        };
+        return date.toLocaleString('en-US', options).replace(',', '');
+    } catch {
+        return dateString;
+    }
+};
+
 // Context menu positioning
 const contextMenuPosition = ref({});
 const contextMenuRef = ref(null);
@@ -494,9 +608,9 @@ const isTotalPrice = (line, index, lines) => {
     if (!isLastLine) return false;
 
     // Check if line is a standalone price (not in parentheses)
-    // Matches: $345.88, €345.88, £345.88, ¥345.88, etc.
+    // Matches: $345.88, €345.88, USD 345.88, EUR 345.88, etc.
     // Does NOT match: ($86.47) or 2× 301/E ($86.47)
-    const totalPricePattern = /^[$€£¥₹₽¢]\s*[\d,]+\.?\d*$/;
+    const totalPricePattern = /^([$€£¥₹₽¢]|[A-Z]{3})\s*[\d,]+\.?\d*$/;
     return totalPricePattern.test(trimmed) && !trimmed.includes('(') && !trimmed.includes(')');
 };
 

package/src/components/Tasks/TaskView.vue

@@ -14,31 +14,31 @@
                     <UpIcon v-if="ui.sortData.sortBy === 'eventId' && ui.sortData.reversed" class="ml-1" />
                 </div>
             </div>
-            <div class="col-span-2 flex items-center justify-start" v-once>
+            <div class="col-span-2 flex items-center justify-center" v-once>
                 <TicketIcon class="mr-0 lg:mr-3" />
                 <h4 class="hidden lg:flex">Tickets</h4>
             </div>
-            <div class="col-span-5 md:col-span-4 lg:col-span-5 flex items-center justify-center" @click="ui.toggleSort('status')">
+            <div
+                class="col-span-5 flex items-center justify-center md:col-span-4 lg:col-span-5"
+                @click="ui.toggleSort('status')">
                 <StatusIcon class="mr-0 lg:mr-3" />
                 <h4 class="hidden lg:flex">Status</h4>
                 <DownIcon v-if="ui.sortData.sortBy === 'status' && !ui.sortData.reversed" class="ml-1" />
                 <UpIcon v-if="ui.sortData.sortBy === 'status' && ui.sortData.reversed" class="ml-1" />
             </div>
-            <div class="col-span-2 lg:col-span-3 flex items-center justify-center" v-once>
+            <div class="col-span-2 flex items-center justify-center lg:col-span-3" v-once>
                 <ClickIcon class="mr-0 lg:mr-3" />
                 <h4 class="hidden lg:flex">Actions</h4>
             </div>
-            <div class="absolute right-5 top-3.5 hidden items-center lg:flex" @click="ui.toggleSort('taskId')">
+            <div class="absolute right-5 top-3.5 hidden items-center lg:flex">
                 <h4 class="text-center text-xs">ID</h4>
-                <DownIcon v-if="ui.sortData.sortBy === 'taskId' && !ui.sortData.reversed" class="ml-1" />
-                <UpIcon v-if="ui.sortData.sortBy === 'taskId' && ui.sortData.reversed" class="ml-1" />
             </div>
         </Header>
         <div
             class="hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
             :style="{ maxHeight: dynamicTableHeight }">
             <div v-for="(task, i) in getTasksInOrder()" :key="task.taskId" class="task-row-container">
-                <Task :task="task" :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'" />
+                <Task :task="task" :preferEventName="props.preferEventName" :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'" />
             </div>
             <div
                 v-if="getTasksInOrder().length === 0"
@@ -78,6 +78,11 @@ h4 {
         @apply bg-dark-550 !important;
     }
 
+    // Increase height when showing eventName to accommodate multi-line display
+    &:has(.event-details) {
+        min-height: 75px;
+    }
+
     @media (max-width: 768px) {
         min-height: 58px;
     }
@@ -104,12 +109,13 @@ import { useUIStore } from "@/stores/ui";
 
 const props = defineProps({
     tasks: { type: Object },
-    searchQuery: { type: String, default: '' }
+    searchQuery: { type: String, default: "" },
+    preferEventName: { type: Boolean, default: false }
 });
 
 const shouldTaskShow = (task) => {
     if (ui.taskFilter === "All") return true;
-    else if (ui.taskFilter === "Checkout") return task.expirationTime;
+    else if (ui.taskFilter === "Checkout") return Boolean(task.checkoutUrl);
     else return true;
 };
 
@@ -124,7 +130,7 @@ const siteIdEdgeCases = {
 
 const getTasksInOrder = () => {
     let out = [];
-    const searchLower = props.searchQuery?.toLowerCase().trim() || '';
+    const searchLower = props.searchQuery?.toLowerCase().trim() || "";
 
     ui.taskIdOrder.forEach((id) => {
         if (props.tasks[id] && !props.tasks[id]?.hidden) {
@@ -150,7 +156,10 @@ const getTasksInOrder = () => {
                     task.profileName,
                     task.presaleCode,
                     task.reservedTicketsList
-                ].filter(Boolean).join(' ').toLowerCase();
+                ]
+                    .filter(Boolean)
+                    .join(" ")
+                    .toLowerCase();
 
                 if (!searchableText.includes(searchLower)) return;
             }
@@ -185,9 +194,14 @@ const dynamicTableHeight = computed(() => {
     const controlsHeight = windowWidth.value >= 650 ? 55 : 0; // Desktop controls
     // On desktop: stats + filters all in one row (45px)
     // On mobile: stats row (40px) + filters stacked (90px) = 130px
-    const filtersAndStatsHeight = windowWidth.value >= 768
-        ? (ui.queueStats.show ? 50 : 45) // Desktop: single row
-        : (ui.queueStats.show ? 130 : 90); // Mobile: stats row + stacked filters
+    const filtersAndStatsHeight =
+        windowWidth.value >= 768
+            ? ui.queueStats.show
+                ? 50
+                : 45 // Desktop: single row
+            : ui.queueStats.show
+              ? 130
+              : 90; // Mobile: stats row + stacked filters
     const utilitiesHeight = windowWidth.value <= 768 ? 180 : 160; // Increase mobile utilities space to prevent cutoff
     const margins =
         windowWidth.value >= 1024 ? 20 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 8 : 12;

package/src/components/Tasks/ViewTask.vue

@@ -23,10 +23,10 @@
                     <span class="info-label">Event Name</span>
                     <span class="info-value">{{ task.eventName }}</span>
                 </div>
-                <div class="info-row" v-if="task.eventVenue">
+                <div class="info-row" v-if="task.venueName || task.eventCity">
                     <StadiumWhiteIcon class="info-icon" />
                     <span class="info-label">Venue</span>
-                    <span class="info-value">{{ task.eventVenue }}</span>
+                    <span class="info-value">{{ [task.venueName, task.eventCity].filter(Boolean).join(', ') }}</span>
                 </div>
                 <div class="info-row" v-if="task.eventLocalDate">
                     <StadiumWhiteIcon class="info-icon" />
@@ -40,6 +40,24 @@
                     </div>
                     <span class="info-value uppercase font-semibold whitespace-normal break-words">{{ task.status }}</span>
                 </div>
+                <div class="info-row" v-if="task._timeLeftString && task._timeLeftString !== 'No Cartholds'">
+                    <TimerIcon class="info-icon" />
+                    <span class="info-label">Cart Expiration</span>
+                    <span class="info-value font-semibold" :class="{ 'text-red-400': task._timeLeftString === '00:00' }">
+                        {{ task._timeLeftString !== '00:00' ? task._timeLeftString : 'Expired' }}
+                    </span>
+                </div>
+                <div class="info-row" v-if="task.reservedTicketsList">
+                    <TicketIcon class="info-icon" />
+                    <span class="info-label">Reserved Tickets</span>
+                    <div class="info-value text-left">
+                        <div v-for="(line, index) in task.reservedTicketsList.split('\n')" :key="index" class="text-xs leading-tight">
+                            <span v-if="line.trim()" :class="{ 'text-green-400 font-bold': isTotalPrice(line, index, task.reservedTicketsList.split('\n')) }">
+                                {{ line.trim() }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
 
@@ -173,6 +191,7 @@ import {
     EyeIcon,
     StadiumIcon,
     StadiumWhiteIcon,
+    TicketIcon,
     MailIcon,
     KeyIcon,
     ProfileIcon,
@@ -218,8 +237,30 @@ const copy = (text) => {
 
 const formatDate = (dateString) => {
     if (!dateString) return '';
-    const date = new Date(dateString);
-    return date.toLocaleString();
+    try {
+        const date = new Date(dateString);
+        const options = {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: true
+        };
+        return date.toLocaleString('en-US', options).replace(',', '');
+    } catch {
+        return dateString;
+    }
+};
+
+const isTotalPrice = (line, index, lines) => {
+    const trimmed = line.trim();
+    const nonEmptyLines = lines.filter((l) => l.trim());
+    const isLastLine = index === lines.lastIndexOf(nonEmptyLines[nonEmptyLines.length - 1]);
+    if (!isLastLine) return false;
+    // Match currency symbols ($, €, £, etc.) OR currency codes (USD, EUR, AUD, etc.)
+    const totalPricePattern = /^([$€£¥₹₽¢]|[A-Z]{3})\s*[\d,]+\.?\d*$/;
+    return totalPricePattern.test(trimmed) && !trimmed.includes('(');
 };
 
 const colorToClass = (color) => {

package/src/stores/sampleData.js

@@ -38,6 +38,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-19T22:30:00.000Z",
+            eventLocalDate: "2023-05-19T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             eventUrl:
@@ -72,6 +73,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Morgan Wallen: One Night At A Time World Tour",
             eventDate: "2024-06-06T23:00:00.000Z",
+            eventLocalDate: "2024-06-06T23:00:00.000Z",
             venueName: "Veterans United Home Loans Amphitheater at Virginia Beach",
             eventCity: "Virginia Beach, VA",
             eventUrl:
@@ -105,6 +107,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             eventUrl:
@@ -138,6 +141,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-19T22:30:00.000Z",
+            eventLocalDate: "2023-05-19T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             eventUrl:
@@ -171,6 +175,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-19T22:30:00.000Z",
+            eventLocalDate: "2023-05-19T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             eventUrl:
@@ -303,6 +308,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             eventUrl:
@@ -336,6 +342,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             eventUrl:
@@ -369,6 +376,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             eventUrl:
@@ -402,6 +410,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             eventUrl:
@@ -435,6 +444,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             hidden: true,
@@ -465,6 +475,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             hidden: true,
@@ -495,6 +506,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             hidden: true,
@@ -525,6 +537,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             hidden: true,
@@ -555,6 +568,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             hidden: false,
@@ -585,6 +599,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             hidden: true,
@@ -615,6 +630,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             hidden: true,
@@ -645,6 +661,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             hidden: true,
@@ -675,6 +692,7 @@ export default {
             profileTags: ["Any"],
             eventName: "Taylor Swift | The Eras Tour",
             eventDate: "2023-05-21T22:30:00.000Z",
+            eventLocalDate: "2023-05-21T22:30:00.000Z",
             venueName: "Gillette Stadium",
             eventCity: "Foxborough, MA",
             hidden: true,

package/src/views/Tasks.vue

@@ -45,13 +45,19 @@
 
       <div class="flex md:hidden items-center justify-between gap-2 mb-1">
         <Stats class="stats-component flex-1" />
-        <PriceSortToggle
-          class="min-w-20 max-w-28 flex-shrink-0 h-8"
-          :options="['All', 'Checkout']"
-          :darker="true"
-          :current="ui.taskFilter"
-          @change="(e) => ui.setTaskFilter(e)"
-        />
+        <div class="flex gap-2 items-center">
+          <div class="bg-dark-400 border border-dark-650 justify-between px-2 flex text-white text-xs font-medium items-center rounded-md h-8">
+            <p class="text-[10px]">Name</p>
+            <Switch class="scale-75" v-model="preferEventName" />
+          </div>
+          <PriceSortToggle
+            class="min-w-20 max-w-28 flex-shrink-0 h-8"
+            :options="['All', 'Checkout']"
+            :darker="true"
+            :current="ui.taskFilter"
+            @change="(e) => ui.setTaskFilter(e)"
+          />
+        </div>
       </div>
 
       <div class="hidden md:flex items-center gap-2 lg:mb-2 mb-1">
@@ -80,6 +86,10 @@
             <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
           </div>
         </div>
+        <div class="bg-dark-400 border border-dark-650 justify-between px-3 w-32 flex text-white text-xs font-medium items-center rounded-md h-10">
+          <p>Name</p>
+          <Switch class="scale-75" v-model="preferEventName" />
+        </div>
         <PriceSortToggle
           class="min-w-24 max-w-28 flex-shrink-0"
           :options="['All', 'Checkout']"
@@ -118,7 +128,7 @@
         </div>
       </div>
 
-      <TaskView class="lg:mb-3 mb-2" :tasks="ui.tasks" :searchQuery="taskSearchQuery" />
+      <TaskView class="lg:mb-3 mb-2" :tasks="ui.tasks" :searchQuery="taskSearchQuery" :preferEventName="preferEventName" />
 
       <Utilities class="utilities-section" />
     </div>
@@ -230,7 +240,7 @@
 }
 </style>
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { DesktopControls } from "@/components/Tasks/Controls";
 import TaskView from "@/components/Tasks/TaskView.vue";
 import ViewTask from "@/components/Tasks/ViewTask.vue";
@@ -242,6 +252,7 @@ import ScrapeVenue from "@/components/Tasks/ScrapeVenue.vue";
 import MassEditPresaleCode from "@/components/Tasks/MassEdit.vue";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import Stats from "@/components/Tasks/Stats.vue";
+import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import { useUIStore } from "@/stores/ui";
 import { TrashIcon, GearIcon, PlusIcon, PlayIcon, PauseIcon } from "@/components/icons";
 import QuickSettings from "@/components/Tasks/QuickSettings.vue";
@@ -253,6 +264,13 @@ const taskCount = computed(() => Object.keys(ui.getSelectedTasks()).length);
 ui.refreshQueueStats();
 
 const taskSearchQuery = ref('');
+// Load preference from localStorage, default to true
+const preferEventName = ref(localStorage.getItem('preferEventName') !== 'false');
+
+// Persist preference to localStorage when changed
+watch(preferEventName, (newValue) => {
+  localStorage.setItem('preferEventName', String(newValue));
+});
 
 const filteredTaskCount = computed(() => {
   if (!taskSearchQuery.value.trim()) return '';