@necrolab/dashboard 0.4.38 → 0.4.39

package/src/views/Console.vue

@@ -22,28 +22,20 @@
                 <div class="flex items-center gap-3">
                     <!-- Hide Monitors and Auto buttons only on desktop -->
                     <div class="hidden ipadlg:flex items-center gap-3">
-                        <button
-                            class="flex rounded gap-3 card-dark px-2 h-10 flex-center"
-                        >
+                        <button class="flex rounded gap-3 card-dark px-2 h-10 flex-center">
                             <h3 class="text-sm text-white">Hide Monitors</h3>
                             <Switch class="scale-75" v-model="filteredLogs" />
                         </button>
-                        <button
-                            class="flex rounded gap-3 card-dark px-2 h-10 flex-center"
-                        >
+                        <button class="flex rounded gap-3 card-dark px-2 h-10 flex-center">
                             <h3 class="text-sm text-white">Auto</h3>
                             <Switch class="scale-75" v-model="autoscrollToggled" />
                         </button>
                     </div>
                     <!-- Scroll buttons always visible -->
-                    <button
-                        class="rounded card-dark w-10 h-10 flex-center"
-                    >
+                    <button class="rounded card-dark w-10 h-10 flex-center">
                         <UpIcon class="cursor-pointer mx-1 lg:w-4 w-5 h-5" @click="scrollTo('up')" />
                     </button>
-                    <button
-                        class="rounded card-dark w-10 h-10 flex-center"
-                    >
+                    <button class="rounded card-dark w-10 h-10 flex-center">
                         <DownIcon class="cursor-pointer ml-1 lg:w-4 w-5 h-5" @click="scrollTo('down')" />
                     </button>
                 </div>
@@ -51,28 +43,40 @@
 
             <Smoothie
                 :weight="0.1"
-                class="hidden-scrollbars console overflow-y-auto overflow-x-hidden font-mono text-white"
+                class="console overflow-y-auto overflow-x-hidden font-mono text-white scrollable"
                 style="min-height: 14rem !important"
                 ref="$autoscroll"
+                @wheel.stop
+                @touchmove.stop
             >
+                <div
+                    v-if="
+                        (currentTaskLog && currentTaskLog !== ''
+                            ? taskLogMapping[currentTaskLog]
+                            : logLines.filter((l) => (filteredLogs ? !['-DISCORD'].some((s) => l.includes(s)) : true))
+                        ).length === 0
+                    "
+                    class="flex flex-col items-center justify-center h-full empty-state text-center"
+                >
+                    <ConsoleIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50" />
+                    <p class="text-light-400 text-sm">No logs yet</p>
+                    <p class="text-light-500 text-xs mt-1">Logs will appear here in real time</p>
+                </div>
                 <pre
+                    v-else
                     class="hidden-scrollbars"
-                    v-for="line in currentTaskLog
+                    v-for="(line, index) in currentTaskLog && currentTaskLog !== ''
                         ? taskLogMapping[currentTaskLog]
                         : logLines.filter((l) => (filteredLogs ? !['-DISCORD'].some((s) => l.includes(s)) : true))"
-                    v-bind:key="line"
+                    v-bind:key="`log-${index}`"
                 ><code class="md:text-sm lg:text-base" v-html="line"></code></pre>
             </Smoothie>
             <div class="flex ipadlg:hidden justify-between mt-3">
-                <button
-                    class="flex rounded gap-3 card-dark px-2 h-10 flex-center"
-                >
+                <button class="flex rounded gap-3 card-dark px-2 h-10 flex-center">
                     <h3 class="text-sm text-white">Hide Monitors</h3>
                     <Switch class="scale-75" v-model="filteredLogs" />
                 </button>
-                <button
-                    class="flex rounded gap-3 card-dark px-2 h-10 flex-center"
-                >
+                <button class="flex rounded gap-3 card-dark px-2 h-10 flex-center">
                     <h3 class="text-sm text-white">Auto</h3>
                     <Switch class="scale-75" v-model="autoscrollToggled" />
                 </button>
@@ -84,6 +88,39 @@
 .console {
     @apply bg-dark-400 lg:p-5 p-2 rounded relative border-dark-550 border-2;
     height: calc(100vh - 16.5rem);
+
+    // Enable scrollbars for console
+    scrollbar-width: thin;
+    scrollbar-color: #555 #2e2f34;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #2e2f34;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #555;
+        border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: #777;
+    }
+
+    // Empty state styling
+    .empty-state {
+        min-height: 14rem;
+        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+    }
+
+    // iPhone portrait - disable scroll since everything fits
+    @media (max-width: 480px) and (orientation: portrait) {
+        height: calc(100vh - 18rem);
+        overflow: hidden;
+    }
     textarea {
         background: transparent;
         resize: none;
@@ -97,11 +134,11 @@
     .console {
         height: calc(100vh - 20rem);
         @apply p-1 text-xs;
-        
+
         pre {
             line-height: 1.2;
         }
-        
+
         code {
             font-size: 0.7rem !important;
         }
@@ -151,13 +188,17 @@ const logLines = ref([]);
 const ansii = new Filter();
 const autoscrollToggled = ref(true);
 const taskLogMapping = ref({});
-const currentTaskLog = ref(false);
+const currentTaskLog = ref("");
 const filteredLogs = ref(true);
 
 const path = "/api/updates?type=console";
 const url = (window.location.protocol === "http:" ? "ws://" : "wss://") + window.location.host + path;
 const scrollTo = (dir) => {
     try {
+        if (!$autoscroll.value?.el) {
+            if (DEBUG) console.log("Autoscroll element not ready");
+            return;
+        }
         if (dir === "up") $autoscroll.value.el.scrollTop = 0;
         else $autoscroll.value.el.scrollTop = parseInt($autoscroll.value.el.children[1].style.height);
     } catch (e) {
@@ -166,7 +207,7 @@ const scrollTo = (dir) => {
 };
 
 const addAnsiToOutput = (a) => {
-    const html = ansii.toHtml(a.log);
+    const html = ansii.toHtml(a?.log || a);
     logLines.value.push(html);
     if (autoscrollToggled.value)
         nextTick().then(() => {
@@ -206,11 +247,18 @@ const makeTaskLogMapping = (lines) => {
 
 window.startDebugConsoleMessages = () => {
     setInterval(() => {
-        const line = `\u001b[96m[12:16:02.273]\u001b[00m \u001b[96m[TASK-${Math.round(
-            Math.random() * 10
-        )}]\u001b[00m AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Needs To Queue: false - Queue up:  false`;
-        addAnsiToOutput(line);
-        makeTaskLogMapping([line]);
+        const log = {
+            log: `\u001b[96m[12:16:02.273]\u001b[00m \u001b[96m[TASK-${Math.round(
+                Math.random() * 10
+            )}]\u001b[00m TEST TEST TEST Needs To Queue: false - Queue up:  false`,
+            metadata: {
+                taskId: Math.round(Math.random() * 10),
+                siteId: "TM_US",
+                global: false
+            }
+        };
+        addAnsiToOutput(log);
+        makeTaskLogMapping([log]);
     }, 500);
 };
 

package/src/views/Editor.vue

@@ -1,7 +1,6 @@
 <template>
     <div>
         <!-- Heading -->
-        <GearIcon class="w-5 cursor-pointer" @click="ui.toggleModal('quick-settings')" />
         <h4 class="text-white text-xl font-bold mb-5 pt-5 flex gap-2 items-center">
             Editor <img src="@/assets/img/pencil.svg" />
         </h4>
@@ -9,8 +8,8 @@
         <div class="card-dark p-2">
             <div v-if="ui.profile.admin">
                 <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Admin Editor</h5>
-                <div class="flex justify-between items-center">
-                    <div class="w-64 flex">
+                <div class="flex justify-between items-center gap-4 editor-controls-row">
+                    <div class="w-64 flex flex-shrink-0 dropdown-container">
                         <div class="relative flex-grow">
                             <Dropdown
                                 class="bg-dark-500 border-2 border-r-0 border-dark-550 admin-file-dropdown w-full"
@@ -30,7 +29,7 @@
                         </button>
                     </div>
                     <!-- Admin editor buttons moved here -->
-                    <div v-if="textEditorVisible" class="flex gap-x-2" style="margin-right: 1px;">
+                    <div v-if="textEditorVisible" class="flex gap-x-2 flex-shrink-0">
                         <button class="btn-action" @click="format()" v-if="isJsonFile()">
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
@@ -68,6 +67,23 @@
                             </svg>
                             <span>Save File</span>
                         </button>
+                        <button class="btn-action" @click="closeFile">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
+                                <line x1="18" y1="6" x2="6" y2="18"></line>
+                                <line x1="6" y1="6" x2="18" y2="18"></line>
+                            </svg>
+                            <span>Close File</span>
+                        </button>
                     </div>
                 </div>
             </div>
@@ -76,7 +92,7 @@
                 <div v-if="textEditorVisible" class="my-3 relative">
                     <div class="pb-4">
                         <!-- Syntax Highlighting Editor -->
-                        <div class="editor-container">
+                        <div class="editor-container table-component">
                             <div class="editor-wrapper">
                                 <pre ref="codeDisplay" class="language-json code-highlight"></pre>
                                 <textarea
@@ -94,10 +110,17 @@
 
                     <div v-if="errorMessage" class="error-container">
                         <div class="error-icon">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <circle cx="12" cy="12" r="10"/>
-                                <line x1="15" y1="9" x2="9" y2="15"/>
-                                <line x1="9" y1="9" x2="15" y2="15"/>
+                            <svg
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                            >
+                                <circle cx="12" cy="12" r="10" />
+                                <line x1="15" y1="9" x2="9" y2="15" />
+                                <line x1="9" y1="9" x2="15" y2="15" />
                             </svg>
                         </div>
                         <div class="error-content">
@@ -110,9 +133,9 @@
             <div class="border border-dark-650 my-8" />
 
             <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Proxy Editor</h5>
-            <div class="flex justify-between items-center mb-4 relative z-60">
-                <div class="w-64">
-                    <div class="relative">
+            <div class="flex justify-between items-center gap-4 proxy-controls-row mb-4">
+                <div class="w-64 flex flex-shrink-0 dropdown-container">
+                    <div class="relative flex-grow">
                         <Dropdown
                             class="bg-dark-500 border-2 border-dark-550 rounded-lg w-full h-10"
                             :default="ui.profile.proxyList?.checkout || proxyLists[0]"
@@ -124,7 +147,7 @@
                     </div>
                 </div>
                 <!-- Proxy save button moved here -->
-                <div v-if="currentProxyList" style="margin-right: 1px;">
+                <div v-if="currentProxyList" class="flex gap-x-2 flex-shrink-0">
                     <button class="btn-action h-12" @click="saveProxies">
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -143,28 +166,40 @@
                         </svg>
                         <span>Save Proxies</span>
                     </button>
+                    <button class="btn-action h-12" @click="closeProxyFile">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                        <span>Close File</span>
+                    </button>
                 </div>
             </div>
             <!-- Textarea -->
             <transition name="fade">
                 <div v-if="currentProxyList" class="relative my-3">
                     <div class="pb-4">
-                        <div class="proxy-editor-container">
-                            <textarea
-                                v-model="proxyContent"
-                                class="proxy-editor"
-                                spellcheck="false"
-                            ></textarea>
+                        <div class="proxy-editor-container table-component">
+                            <textarea v-model="proxyContent" class="proxy-editor" spellcheck="false"></textarea>
                         </div>
                     </div>
                 </div>
             </transition>
         </div>
-        <QuickSettings v-if="activeModal === 'quick-settings'" />
     </div>
 </template>
 <script setup>
-import { ref, computed, watch, onMounted, nextTick } from "vue";
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
 import { DownIcon, ReloadIcon, EditIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
@@ -402,6 +437,19 @@ const saveAll = async () => {
     await saveQuickConfig();
 };
 
+const closeFile = () => {
+    currentFile.value = "";
+    currentContent.value = "";
+    textEditorVisible.value = false;
+    ui.logger.Info("File closed");
+};
+
+const closeProxyFile = () => {
+    currentProxyList.value = "";
+    proxyContent.value = "";
+    ui.logger.Info("Proxy file closed");
+};
+
 const loadProxies = async (list) => {
     try {
         if (DEBUG) {
@@ -455,6 +503,47 @@ onMounted(() => {
         }
     });
 
+    // iOS-specific editor fixes with cursor tracking
+    if (
+        /iPad|iPhone|iPod/.test(navigator.platform) ||
+        (navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform))
+    ) {
+        const trackCursor = (editor) => {
+            const scrollToCursor = () => {
+                setTimeout(() => {
+                    const container = editor.closest(".editor-container") || editor.closest(".proxy-editor-container");
+                    if (container) {
+                        // Get cursor position and scroll to it
+                        const lines = editor.value.substring(0, editor.selectionStart).split("\n");
+                        const lineHeight = 24; // Approximate line height
+                        const cursorY = lines.length * lineHeight;
+                        const containerHeight = container.clientHeight;
+
+                        // Scroll to keep cursor in view
+                        if (cursorY > container.scrollTop + containerHeight - 60) {
+                            container.scrollTop = cursorY - containerHeight + 60;
+                        }
+                    }
+                }, 100);
+            };
+
+            editor.addEventListener("focus", scrollToCursor);
+            editor.addEventListener("input", scrollToCursor);
+            editor.addEventListener("click", scrollToCursor);
+            editor.addEventListener("keyup", scrollToCursor);
+        };
+
+        nextTick(() => {
+            if (codeEditor.value) {
+                trackCursor(codeEditor.value);
+            }
+            const proxyEditor = document.querySelector(".proxy-editor");
+            if (proxyEditor) {
+                trackCursor(proxyEditor);
+            }
+        });
+    }
+
     // Watch for editor visibility changes
     watch(textEditorVisible, (newValue) => {
         if (newValue) {
@@ -470,6 +559,8 @@ onMounted(() => {
     });
 });
 
+// No cleanup needed - global iOS handling takes care of everything
+
 if (ui.profile.admin && !DEBUG) loadAvailableFiles();
 loadProxyLists();
 </script>
@@ -552,8 +643,9 @@ loadProxyLists();
     max-height: 600px;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    overflow: hidden;
+    overflow: visible !important;
     background-color: #2e2f34;
+    touch-action: auto !important;
 }
 
 .editor-wrapper {
@@ -562,6 +654,7 @@ loadProxyLists();
     height: 100%;
     min-height: 300px;
     max-height: 600px;
+    overflow: visible !important; /* ALLOW SCROLLING */
 }
 
 .code-editor {
@@ -598,6 +691,33 @@ loadProxyLists();
     background: rgba(98, 114, 164, 0.4);
 }
 
+/* iOS keyboard focus fix and scrolling */
+.code-editor:focus,
+.proxy-editor:focus {
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+}
+
+/* Force textarea scrolling to work */
+.code-editor,
+.proxy-editor {
+    overflow: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+    user-select: text !important;
+    -webkit-user-select: text !important;
+    touch-action: auto !important;
+    overscroll-behavior: auto !important;
+}
+
+/* Additional override for any global styles */
+textarea.code-editor,
+textarea.proxy-editor {
+    overflow: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+    touch-action: auto !important;
+    overscroll-behavior: auto !important;
+}
+
 .code-highlight {
     width: 100%;
     height: 100%;
@@ -629,7 +749,8 @@ loadProxyLists();
 
 /* Proxy editor container */
 .proxy-editor-container {
-    @apply w-full overflow-hidden rounded-lg border border-dark-600;
+    @apply w-full rounded-lg border border-dark-600;
+    overflow: visible !important; /* ALLOW SCROLLING */
     height: 400px;
     max-height: 60vh;
     background-color: #2e2f34;
@@ -668,7 +789,7 @@ loadProxyLists();
 
 .proxy-editor-container:focus-within {
     border-color: #5d7cc0;
-    box-shadow: 0 0 0 2px rgba(93, 124, 192, 0.25);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
 }
 
 /* Prism.js dark theme */
@@ -842,4 +963,34 @@ pre[class*="language-"] {
     word-break: break-word;
     opacity: 0.9;
 }
+
+/* iPhone portrait mode spacing fixes */
+@media (max-width: 480px) and (orientation: portrait) {
+    .editor-controls-row {
+        gap: 0.75rem !important;
+        flex-wrap: wrap;
+    }
+
+    .dropdown-container {
+        width: 100% !important;
+        max-width: 16rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .editor-controls-row > div:last-child {
+        margin-right: auto;
+        margin-top: 0.5rem;
+    }
+
+    /* Proxy editor responsive layout */
+    .proxy-controls-row {
+        gap: 0.75rem !important;
+        flex-wrap: wrap;
+    }
+
+    .proxy-controls-row > div:last-child {
+        margin-right: auto;
+        margin-top: 0.5rem;
+    }
+}
 </style>

package/src/views/FilterBuilder.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="filter-builder-container w-full min-h-0 flex flex-col overflow-hidden">
         <!-- Heading -->
-        <div class="flex-between pt-4 pb-1 px-4 mt-1">
+        <div class="flex-between pt-4 pb-1 mt-1">
             <div class="flex-center gap-4">
                 <FilterIcon class="cursor-pointer smooth-hover text-white" />
                 <h4 class="text-heading">Filter creator</h4>
@@ -47,9 +47,22 @@
                                 v-else
                                 class="h-full flex items-center justify-center p-2 rounded shadow border-2 border-dark-550 svg-container"
                             >
-                                <div class="text-center text-dark-400">
-                                    <StadiumIcon class="mx-auto mb-2 w-8 h-8 opacity-50" />
-                                    <p class="text-sm">Enter an event ID and click "Load" to display the venue map</p>
+                                <div class="text-center">
+                                    <svg
+                                        class="w-12 h-12 mb-3 mx-auto opacity-50"
+                                        viewBox="0 0 19 19"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                        <path
+                                            d="M2.37499 5.54165V2.37498L5.54166 3.95831L2.37499 5.54165ZM14.25 5.54165V2.37498L17.4167 3.95831L14.25 5.54165ZM8.70833 4.74998V1.58331L11.875 3.16665L8.70833 4.74998ZM8.70833 17.4166C7.70555 17.3903 6.77218 17.3079 5.9082 17.1696C5.0437 17.0308 4.29162 16.8559 3.65195 16.6448C3.01176 16.4337 2.50694 16.1896 2.13749 15.9125C1.76805 15.6354 1.58333 15.3451 1.58333 15.0416V7.91665C1.58333 7.58678 1.79127 7.27988 2.20716 6.99594C2.62252 6.71252 3.18645 6.46183 3.89895 6.24385C4.61145 6.02641 5.4493 5.85488 6.4125 5.72927C7.37569 5.60419 8.40486 5.54165 9.49999 5.54165C10.5951 5.54165 11.6243 5.60419 12.5875 5.72927C13.5507 5.85488 14.3885 6.02641 15.101 6.24385C15.8135 6.46183 16.3775 6.71252 16.7928 6.99594C17.2087 7.27988 17.4167 7.58678 17.4167 7.91665V15.0416C17.4167 15.3451 17.2319 15.6354 16.8625 15.9125C16.493 16.1896 15.9885 16.4337 15.3488 16.6448C14.7086 16.8559 13.9565 17.0308 13.0926 17.1696C12.2281 17.3079 11.2944 17.3903 10.2917 17.4166V14.25H8.70833V17.4166ZM9.49999 8.70831C10.7799 8.70831 11.885 8.63231 12.8155 8.48031C13.7454 8.32884 14.4875 8.15415 15.0417 7.95623C15.0417 7.89026 14.5403 7.73509 13.5375 7.49073C12.5347 7.2469 11.1889 7.12498 9.49999 7.12498C7.81111 7.12498 6.46527 7.2469 5.46249 7.49073C4.45972 7.73509 3.95833 7.89026 3.95833 7.95623C4.51249 8.15415 5.25481 8.32884 6.18529 8.48031C7.11523 8.63231 8.22013 8.70831 9.49999 8.70831ZM7.12499 15.7146V12.6666H11.875V15.7146C12.9305 15.609 13.7948 15.4538 14.4677 15.2491C15.1406 15.0448 15.5958 14.8635 15.8333 14.7052V9.34165C15.1076 9.63192 14.1972 9.86283 13.1021 10.0344C12.0069 10.2059 10.8062 10.2916 9.49999 10.2916C8.19374 10.2916 6.99305 10.2059 5.89791 10.0344C4.80277 9.86283 3.89236 9.63192 3.16666 9.34165V14.7052C3.40416 14.8635 3.85937 15.0448 4.53229 15.2491C5.2052 15.4538 6.06944 15.609 7.12499 15.7146Z"
+                                            fill="#F5F5F5"
+                                        />
+                                    </svg>
+                                    <p class="text-light-400 text-sm">No Map</p>
+                                    <p class="text-light-500 text-xs">
+                                        Enter an event ID and click "Load" to display the venue map
+                                    </p>
                                 </div>
                             </div>
                         </div>
@@ -83,13 +96,13 @@
                                     <div class="flex items-center gap-2">
                                         <span class="text-base">Filters</span>
                                         <span class="text-base text-light-300">{{ filterBuilder.filters.length }}</span>
+                                    </div>
+                                    <div class="flex gap-2 items-center">
                                         <PriceSortToggle
                                             class="w-14 smooth-hover"
                                             :options="['All', 'WL', 'BL']"
                                             @change="(e) => (shownFilters = e)"
                                         />
-                                    </div>
-                                    <div class="flex gap-2 items-center">
                                         <button class="header-btn save-btn" @click="saveFilter">
                                             <EditIcon class="w-4 h-4" />
                                             <span class="lg:block hidden">Save</span>
@@ -167,7 +180,7 @@
                 </div>
             </div>
 
-            <transition-group name="fade" mode="out-in">
+            <transition-group name="fade">
                 <FilterPreview v-if="activeModal === 'preview-filter'" :filter="filterBuilder" />
             </transition-group>
         </div>
@@ -562,6 +575,7 @@ const updateShownVenue = async () => {
 
 const loadFilter = async () => {
     try {
+        if (!eventId.value) return;
         const res = await fetch(`/api/filter/load?eventId=${eventId.value}`);
         const data = await res.json();
         if (eventId.value) ui.showSuccess("Loaded filter data");

package/src/views/Profiles.vue

@@ -23,18 +23,18 @@
                     </button>
                 </li>
                 <li>
-                    <button 
-                        :disabled="ui.disabledButtons['add-profiles']" 
-                        @click="disable" 
+                    <button
+                        :disabled="ui.disabledButtons['add-profiles']"
+                        @click="disable"
                         class="smooth-hover text-red-400"
                     >
                         <CloseXIcon />
                     </button>
                 </li>
                 <li>
-                    <button 
-                        :disabled="ui.disabledButtons['add-profiles']" 
-                        @click="enable" 
+                    <button
+                        :disabled="ui.disabledButtons['add-profiles']"
+                        @click="enable"
                         class="smooth-hover text-green-400"
                     >
                         <CheckIcon />
@@ -112,10 +112,10 @@
         </div>
 
         <!-- Tasks (Table) -->
-        <ProfileView :tasks="processedTasks" />
+        <ProfileView :profiles="processedTasks" />
 
         <!-- Modal -->
-        <transition-group name="fade" mode="out-in">
+        <transition-group name="fade">
             <CreateProfile v-if="activeModal === 'create-profile'" />
         </transition-group>
     </div>