@necrolab/dashboard 0.5.14 → 0.5.16

package/src/components/Filter/FilterPreview.vue

@@ -6,9 +6,9 @@
         </template>
 
         <div class="my-3">
-            <div class="editor-container">
-                <div class="editor-wrapper">
-                    <pre ref="codeDisplay" class="language-json code-highlight"></pre>
+            <div class="relative min-h-75 max-h-125 rounded-lg overflow-hidden shadow-card bg-dark-350">
+                <div class="relative w-full h-full min-h-75 max-h-125">
+                    <pre ref="codeDisplay" class="code-highlight language-json"></pre>
                     <textarea
                         ref="codeEditor"
                         v-model="text"
@@ -19,173 +19,99 @@
                         @keydown.tab.prevent="handleTab"></textarea>
                 </div>
             </div>
-            <p class="text-red-400 text-bold mt-2">{{ errorMessage }}</p>
+            <p class="text-red-400 font-bold mt-2">{{ errorMessage }}</p>
         </div>
 
         <div class="ml-auto flex gap-3 mt-3">
-            <button class="modal-btn save-btn" @click="save()">Apply</button>
-            <button class="modal-btn" @click="done()">Close</button>
+            <button
+                class="smooth-hover flex h-10 items-center justify-center rounded-md border border-dark-650 bg-dark-400 px-6 text-xs font-medium text-white transition-all duration-150 hover:border-dark-700 btn-focus-ring"
+                @click="save()">
+                Apply
+            </button>
+            <button
+                class="smooth-hover flex h-10 items-center justify-center rounded-md border border-dark-650 bg-dark-400 px-6 text-xs font-medium text-white transition-all duration-150 hover:border-dark-700 btn-focus-ring"
+                @click="done()">
+                Close
+            </button>
         </div>
     </Modal>
 </template>
-<style lang="scss" scoped>
-.modal-btn {
-    @apply rounded transition-all duration-150 flex items-center justify-center;
-    background: oklch(0.2046 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-    color: oklch(0.90 0 0);
-    height: 2.5rem;
-    width: 6.5rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-
-    &:hover {
-        border-color: oklch(0.72 0.15 145);
-    }
-
-    &:active, &:focus {
-        border-color: oklch(0.72 0.15 145);
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
-    }
-
-    &.save-btn {
-        background-color: oklch(0.72 0.15 145 / 0.15);
-        border-color: oklch(0.72 0.15 145 / 0.5);
-
-        &:hover {
-            background-color: oklch(0.72 0.15 145 / 0.25);
-            border-color: oklch(0.72 0.15 145);
-        }
-    }
-}
-
-/* Prism.js syntax highlighting styles */
-.editor-container {
-    position: relative;
-    min-height: 300px;
-    max-height: 500px;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    overflow: hidden;
-    background-color: oklch(0.19 0 0);
-}
-
-.editor-wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-    max-height: 500px;
-}
-
-.code-editor {
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-    max-height: 500px;
-    background-color: transparent;
-    /* Make text completely transparent */
-    color: rgba(0, 0, 0, 0);
-    caret-color: #e2e8f0;
-    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
-    padding: 12px;
-    border: none;
-    resize: none;
-    font-size: 14px;
-    line-height: 1.6;
-    tab-size: 4;
-    outline: none;
-    border: 1px solid oklch(0.26 0 0);
-    border-radius: 8px;
-    z-index: 10;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    white-space: pre;
-    overflow: auto;
-}
-
-.code-highlight {
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-    max-height: 500px;
-    overflow: auto;
-    white-space: pre;
-    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
-    font-size: 14px;
-    line-height: 1.6;
-    background-color: transparent !important;
-    pointer-events: none;
-    z-index: 5;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 12px;
-    margin: 0;
-}
-</style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
 import { FilterIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import { ref, computed, onMounted, nextTick } from "vue";
+import { DEBUG } from "@/utils/debug";
 
 const props = defineProps({
-    filter: Object
+    filter: {
+        type: Object,
+        required: true
+    }
 });
 
 const ui = useUIStore();
 const text = ref(JSON.stringify(props.filter.out(), null, 4));
 const codeEditor = ref(null);
 const codeDisplay = ref(null);
+let highlightTimer = null;
 
 // Function to highlight code using Prism
 const highlightCode = () => {
     if (!codeDisplay.value || !codeEditor.value) return;
 
-    // Ensure Prism is available
-    if (typeof Prism === "undefined") {
-        console.error("Prism is not loaded");
-        return;
-    }
+    // Debounce to avoid excessive highlighting
+    if (highlightTimer) clearTimeout(highlightTimer);
 
-    // Use requestAnimationFrame for smoother updates
-    requestAnimationFrame(() => {
-        try {
-            // Update the pre element with highlighted HTML
-            const highlighted = Prism.highlight(text.value || "", Prism.languages.json, "json");
-            codeDisplay.value.innerHTML = highlighted;
-            codeDisplay.value.className = "language-json code-highlight";
-        } catch (e) {
-            console.error("Highlight error:", e);
-            // Fallback to plain text if highlighting fails
-            codeDisplay.value.textContent = text.value || "";
-        }
+    highlightTimer = setTimeout(() => {
+        requestAnimationFrame(() => {
+            try {
+                // Check if Prism is available
+                if (typeof window.Prism === "undefined" || !window.Prism.languages?.json) {
+                    // Fallback to plain text
+                    if (codeDisplay.value) {
+                        codeDisplay.value.textContent = text.value || "";
+                        codeDisplay.value.className = "language-json";
+                    }
+                    return;
+                }
 
-        // Ensure scroll positions are synced after highlighting
-        syncScroll();
-    });
+                // Highlight the code (Prism.highlight returns sanitized HTML)
+                const highlighted = window.Prism.highlight(
+                    text.value || "",
+                    window.Prism.languages.json,
+                    "json"
+                );
+
+                if (codeDisplay.value) {
+                    codeDisplay.value.innerHTML = highlighted;
+                    codeDisplay.value.className = "language-json code-highlight";
+                }
+            } catch (e) {
+                if (DEBUG) ui.logger.Error("Highlight error:", e);
+                // Fallback to plain text
+                if (codeDisplay.value) {
+                    codeDisplay.value.textContent = text.value || "";
+                }
+            } finally {
+                // Always sync scroll
+                syncScroll();
+            }
+        });
+    }, 50);
 };
 
 // Function to sync scrolling between textarea and highlighted code
 const syncScroll = () => {
     if (!codeDisplay.value || !codeEditor.value) return;
 
-    // Synchronize scrolling between the textarea and the highlighted code
-    requestAnimationFrame(() => {
-        codeDisplay.value.scrollTop = codeEditor.value.scrollTop;
-        codeDisplay.value.scrollLeft = codeEditor.value.scrollLeft;
-    });
+    // Direct synchronization without RAF for immediate response
+    codeDisplay.value.scrollTop = codeEditor.value.scrollTop;
+    codeDisplay.value.scrollLeft = codeEditor.value.scrollLeft;
 };
 
 // Function to handle tab key press in the editor
-const handleTab = (e) => {
+const handleTab = () => {
     const textarea = codeEditor.value;
     const start = textarea.selectionStart;
     const end = textarea.selectionEnd;
@@ -225,10 +151,12 @@ function done() {
 
 function save() {
     const out = JSON.parse(text.value);
+    /* eslint-disable vue/no-mutating-props -- intentional sync from JSON to filter */
     props.filter.reset();
     props.filter.globalFilter = out.globalFilter;
     props.filter.filters = out.filters;
     props.filter.updateCss();
+    /* eslint-enable vue/no-mutating-props */
     done();
 }
 
@@ -241,3 +169,101 @@ const errorMessage = computed(() => {
     }
 });
 </script>
+
+<style scoped>
+/* Shared base styles for perfect alignment */
+.code-editor,
+.code-highlight {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    max-height: 500px;
+    padding: 12px;
+    margin: 0;
+    overflow: auto;
+    white-space: pre;
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    word-wrap: normal;
+    word-break: normal;
+    border: 0;
+    outline: none;
+    background: transparent;
+    box-sizing: border-box;
+}
+
+/* Code editor layer - interactive */
+.code-editor {
+    z-index: 2;
+    color: transparent !important;
+    caret-color: #ffffff;
+    resize: none;
+}
+
+.code-editor::selection {
+    background-color: rgba(38, 79, 120, 0.6);
+    color: transparent;
+}
+
+.code-editor::-moz-selection {
+    background-color: rgba(38, 79, 120, 0.6);
+    color: transparent;
+}
+
+/* Highlight layer - visual only */
+.code-highlight {
+    z-index: 1;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+}
+
+:deep(.token.property),
+:deep(.token.tag),
+:deep(.token.boolean),
+:deep(.token.number),
+:deep(.token.constant),
+:deep(.token.symbol) {
+    color: #b5cea8;
+}
+
+:deep(.token.selector),
+:deep(.token.attr-name),
+:deep(.token.string),
+:deep(.token.char),
+:deep(.token.builtin) {
+    color: #ce9178;
+}
+
+:deep(.token.punctuation) {
+    color: #d4d4d4;
+}
+
+:deep(.token.operator),
+:deep(.token.entity),
+:deep(.token.url) {
+    color: #d4d4d4;
+}
+
+:deep(.token.atrule),
+:deep(.token.attr-value),
+:deep(.token.keyword) {
+    color: #c586c0;
+}
+
+:deep(.token.function),
+:deep(.token.class-name) {
+    color: #dcdcaa;
+}
+
+:deep(.token.comment) {
+    color: #6a9955;
+    font-style: italic;
+}
+</style>

package/src/components/Filter/PriceSortToggle.vue

@@ -2,12 +2,12 @@
     <button
         @click="increase"
         :class="[
-            'sort-toggle',
-            { 'darker': props.darker }
+            'flex items-center gap-2 px-3 py-2 rounded text-sm font-medium focus:outline-none text-light-300 border-2 border-dark-550 h-10',
+            props.darker ? 'bg-dark-400 min-w-25' : 'bg-dark-350 min-w-20'
         ]"
     >
-        <component :is="getCurrentIcon()" class="icon" />
-        <span class="text">{{ getCurrentText() }}</span>
+        <component :is="getCurrentIcon()" class="w-4 h-4 flex-shrink-0" />
+        <span class="text-center flex-1">{{ getCurrentText() }}</span>
     </button>
 </template>
 
@@ -19,13 +19,34 @@ let sortOptions = ref(["none", "asc", "desc", "none"]);
 const currentOpt = ref(0);
 
 const props = defineProps({
-    filter: Object,
-    index: Number,
-    expandedFilter: Number,
-    filterBuilder: Object,
-    options: Object,
-    current: String,
-    darker: Boolean
+    filter: {
+        type: Object,
+        default: () => ({})
+    },
+    index: {
+        type: Number,
+        default: 0
+    },
+    expandedFilter: {
+        type: Number,
+        default: null
+    },
+    filterBuilder: {
+        type: Object,
+        default: () => ({})
+    },
+    options: {
+        type: Array,
+        default: () => ['none', 'asc', 'desc', 'none']
+    },
+    current: {
+        type: String,
+        default: 'none'
+    },
+    darker: {
+        type: Boolean,
+        default: false
+    }
 });
 
 if (props.options) sortOptions.value = props.options;
@@ -40,7 +61,7 @@ const increase = () => {
 
 const getCurrentIcon = () => {
     const current = sortOptions.value[currentOpt.value];
-    
+
     // Handle filter options (All, WL, BL)
     if (props.options && props.options.includes('All')) {
         switch (current) {
@@ -50,7 +71,7 @@ const getCurrentIcon = () => {
             default: return FilterIcon;
         }
     }
-    
+
     // Handle sort options (none, asc, desc)
     switch (current) {
         case 'asc': return UpIcon;
@@ -62,12 +83,12 @@ const getCurrentIcon = () => {
 
 const getCurrentText = () => {
     const current = sortOptions.value[currentOpt.value];
-    
+
     // Handle filter options (All, WL, BL)
     if (props.options && props.options.includes('All')) {
         return current;
     }
-    
+
     // Handle sort options
     switch (current) {
         case 'asc': return 'Low';
@@ -77,31 +98,3 @@ const getCurrentText = () => {
     }
 };
 </script>
-
-<style scoped>
-.sort-toggle {
-    @apply flex items-center gap-2 px-3 py-2 rounded text-sm font-medium focus:outline-none;
-    background: oklch(0.2603 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-    color: oklch(0.90 0 0);
-    min-width: 80px;
-    height: 40px;
-}
-
-.sort-toggle.darker {
-    background: oklch(0.2046 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-    color: oklch(0.90 0 0);
-    min-width: 100px;
-    height: 40px;
-    padding: 0 0.75rem;
-}
-
-.icon {
-    @apply w-4 h-4 flex-shrink-0;
-}
-
-.text {
-    @apply text-center flex-1;
-}
-</style>

package/src/components/Table/Header.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="border-b border-dark-600 w-full px-2 md:px-4 text-white text-xs py-4 grid items-center bg-dark-300">
+    <div class="relative border-b border-dark-550 w-full px-2 md:px-4 text-white text-xs py-4 grid items-center bg-dark-300">
         <slot />
     </div>
 </template>

package/src/components/Table/Table.vue

@@ -1,24 +1,73 @@
 <template>
-    <div class="table-component">
+    <div class="table-component" style="border-color: var(--color-border);">
         <slot />
     </div>
 </template>
-<style lang="scss">
+
+<style scoped lang="scss">
 .table-component {
-    @apply flex-col bg-clip-padding rounded relative box-border border border-dark-600 bg-dark-500;
-    @apply overflow-x-auto overflow-y-auto touch-pan-x touch-pan-y;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    overscroll-behavior: auto;
+    @apply relative box-border flex flex-col rounded-lg;
+    @apply bg-dark-500 bg-clip-padding overflow-auto shadow-sm;
+
     max-height: calc(100vh - 200px);
+    overscroll-behavior: auto;
     -webkit-overflow-scrolling: touch;
-}
+    touch-action: pan-x pan-y;
 
-.table-component > .grid {
-    @apply bg-dark-400;
-    border-bottom: 1px solid oklch(0.26 0 0);
-    // Only enforce min-width on desktop, allow mobile to fit screen
     @media (min-width: 768px) {
-        min-width: 640px;
+        max-height: calc(100vh - 280px);
+    }
+
+    @media (min-width: 1024px) {
+        max-height: calc(100vh - 240px);
+    }
+
+    @media (min-width: 1280px) {
+        max-height: calc(100vh - 220px);
+    }
+
+    @media (display-mode: standalone) {
+        max-height: calc(100vh - 240px);
+
+        @media (min-width: 768px) {
+            max-height: calc(100vh - 320px);
+        }
+
+        @media (min-width: 1024px) {
+            max-height: calc(100vh - 280px);
+        }
+
+        @media (min-width: 1280px) {
+            max-height: calc(100vh - 260px);
+        }
+    }
+
+    & > :not(:first-child) {
+        @apply border-b border-dark-500;
+
+        @media (min-width: 768px) {
+            min-width: 640px;
+        }
+    }
+
+    & > :last-child {
+        @apply border-b-0 rounded-b-lg overflow-hidden;
+    }
+
+    & > :nth-child(odd) {
+        @apply bg-dark-300;
+    }
+
+    & > :nth-child(even) {
+        @apply bg-dark-400;
+    }
+
+    & > :first-child {
+        @apply border-b border-dark-500 rounded-t-lg overflow-hidden;
+
+        @media (min-width: 768px) {
+            min-width: 640px;
+        }
     }
 }
 </style>

package/src/components/Tasks/CheckStock.vue

@@ -3,7 +3,7 @@
         <template #header> Check Stock <BoxIcon class="ml-4" /> </template>
         <!-- Event ID -->
         <div class="input-wrapper mt-7 mb-4">
-            <label class="label-override mb-2">Event ID or URL <StadiumIcon /></label>
+            <label class="label-override mb-2 flex">Event ID or URL <StadiumIcon /></label>
             <div class="input-default required">
                 <input
                     :placeholder="!isEU(ui.currentCountry.siteId) ? '102PDA9125510GYU' : '529171'"
@@ -13,46 +13,37 @@
         </div>
         <!-- Presale Code -->
         <div class="input-wrapper mb-4">
-            <label class="label-override mb-2">Presale code <AwardIcon /></label>
+            <label class="label-override mb-2 flex">Presale code <AwardIcon /></label>
             <div class="input-default">
                 <input placeholder="Presale code" v-model="presaleCode" />
             </div>
         </div>
         <!-- DID -->
         <div class="input-wrapper mb-4" v-if="!isEU(ui.currentCountry.siteId)">
-            <label class="label-override mb-2">DID <AwardIcon /></label>
+            <label class="label-override mb-2 flex">DID <AwardIcon /></label>
             <div class="input-default">
                 <input placeholder="psl" v-model="eventDid" />
             </div>
         </div>
         <!-- CL ORIGIN -->
         <div class="input-wrapper mb-8" v-if="isEU(ui.currentCountry.siteId)">
-            <label class="label-override mb-2">CL Origin / SubChannel ID <AwardIcon /></label>
+            <label class="label-override mb-2 flex">CL Origin / SubChannel ID <AwardIcon /></label>
             <div class="input-default">
                 <input placeholder="ORIGIN2" v-model="clOrigin" />
             </div>
         </div>
-        <button
-            class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
-            @click="done()">
+        <button class="btn-modal ml-auto mt-4 w-48" @click="done()">
             Check Stock
-            <BoxIcon />
+            <BoxIcon class="ml-2" />
         </button>
     </Modal>
 </template>
-<style lang="scss" scoped>
-.input-wrapper {
-    label {
-        @apply flex;
-    }
-}
-</style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
 import { StadiumIcon, BoxIcon, AwardIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import { ref } from "vue";
-import { isEU } from "@/stores/utils";
+import { isEU } from "@/libs/utils/eventUrl";
 
 const ui = useUIStore();
 const eventId = ref("");