@necrolab/dashboard 0.5.15 → 0.5.17

package/src/components/Filter/Filter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div 
+    <div
         class="filter-card group text-white text-sm transition-all duration-200 hover:bg-dark-400 relative"
         :class="{
             'expanded-filter': filterBuilder.expandedFilter === filter.id,
@@ -9,7 +9,7 @@
     >
         <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 items-center gap-2 sm:gap-3 cursor-pointer flex-1" @click="handleFilterClick(filter.id)">
+                <div class="flex-gap-2 items-center sm:gap-3 cursor-pointer flex-1" @click="handleFilterClick(filter.id)">
                     <div class="filter-type-badge flex-shrink-0">
                         <component :is="getFilterIcon()" class="w-3 h-3 sm:w-4 sm:h-4" />
                     </div>
@@ -19,7 +19,6 @@
                     </div>
                 </div>
                 <div class="expanded-content mt-4 mx-2 sm:mx-0" v-if="filterBuilder.expandedFilter === filter.id">
-                    <!-- NORMAL -->
                     <div v-if="filterType === 2" class="space-y-2">
                         <div class="info-row">
                             <span class="label">Section:</span>
@@ -34,7 +33,6 @@
                             <span class="value">{{ filter?.event || filter?.eventId || "-" }}</span>
                         </div>
                     </div>
-                    <!-- NORMAL_FIRSTROW -->
                     <div v-if="filterType === 3" class="space-y-2">
                         <div class="info-row">
                             <span class="label">Section:</span>
@@ -49,7 +47,6 @@
                             <span class="value">{{ filter?.event || "-" }}</span>
                         </div>
                     </div>
-                    <!-- CATCH_ALL_GA -->
                     <div v-if="filterType === 1">
                         <button
                             @click.stop="update({ buyAny: true, floor: false, generalAdmission: false })"
@@ -59,7 +56,6 @@
                             Convert to wildcard
                         </button>
                     </div>
-                    <!-- CATCH_ALL -->
                     <div v-if="filterType === 0">
                         <button
                             @click.stop="update({ floor: true, buyAny: false, generalAdmission: false })"
@@ -69,7 +65,6 @@
                             Convert to Floor Wildcard
                         </button>
                     </div>
-                    <!-- CATCH_ALL_FLOOR -->
                     <div v-if="filterType === 5">
                         <button
                             @click.stop="update({ generalAdmission: true, floor: false, buyAny: false })"
@@ -82,11 +77,11 @@
                 </div>
                 <div v-if="filterBuilder.expandedFilter === filter.id" class="controls-section mt-4 mx-2 sm:mx-0">
                     <div class="flex flex-col sm:flex-row flex-wrap gap-3 sm:items-center">
-                        <div class="flex items-center gap-2 control-group">
+                        <div class="flex-gap-2 items-center control-group">
                             <Checkbox :toggled="filter.exclude || false" @valueUpdate="handleExcludeClick" />
                             <label class="text-sm font-medium">Excluded</label>
                         </div>
-                        <div class="flex items-center gap-2 control-group">
+                        <div class="flex-gap-2 items-center control-group">
                             <label class="text-xs whitespace-nowrap text-light-400">Min:</label>
                             <input
                                 type="number"
@@ -104,7 +99,7 @@
                                 class="filter-input w-16 sm:w-20"
                             />
                         </div>
-                        <div class="flex items-center gap-2 control-group">
+                        <div class="flex-gap-2 items-center control-group">
                             <label class="text-xs whitespace-nowrap text-light-400">Max:</label>
                             <input
                                 type="number"
@@ -131,16 +126,15 @@
                     </div>
                 </div>
             </div>
-            <div class="col-span-3 sm:col-span-2 flex justify-end items-center gap-1 sm:gap-2">
-                <div class="drag-handle handle filter-action-btn drag-btn cursor-grab active:cursor-grabbing" title="Drag to reorder">
-                    <MenuIcon class="w-3 h-3 sm:w-4 sm:h-4" />
+            <div class="col-span-3 sm:col-span-2 flex justify-end items-center gap-2">
+                <div class="drag-handle handle drag-btn cursor-grab active:cursor-grabbing" title="Drag to reorder">
+                    <MenuIcon class="icon-md" />
                 </div>
-                <button 
-                    @click="filterBuilder.deleteFilterById(filter.id)" 
-                    class="delete-btn filter-action-btn"
-                    title="Delete filter"
-                >
-                    <TrashIcon class="w-3 h-3 sm:w-4 sm:h-4" />
+                <button
+                    @click="filterBuilder.deleteFilterById(filter.id)"
+                    class="delete-btn"
+                    title="Delete filter">
+                    <TrashIcon class="icon-md" />
                 </button>
             </div>
         </div>
@@ -155,16 +149,27 @@ import { ref } from "vue";
 import { useUIStore } from "@/stores/ui";
 const ui = useUIStore();
 
-// eslint-disable-next-line no-unused-vars
-import { UpIcon, DownIcon, ReloadIcon, TrashIcon, MenuIcon, WildcardIcon, BoxIcon, GroupIcon, FilterIcon, StadiumIcon } from "@/components/icons";
+import { TrashIcon, MenuIcon, WildcardIcon, BoxIcon, GroupIcon, FilterIcon, StadiumIcon } from "@/components/icons";
 
 let isAllRows = ref(false);
 
 const props = defineProps({
-    filter: Object,
-    index: Number,
-    expandedFilter: String,
-    filterBuilder: Object
+    filter: {
+        type: Object,
+        required: true
+    },
+    index: {
+        type: Number,
+        required: true
+    },
+    expandedFilter: {
+        type: String,
+        default: null
+    },
+    filterBuilder: {
+        type: Object,
+        required: true
+    }
 });
 
 const handleFilterClick = (id) => {
@@ -282,17 +287,20 @@ props.filterBuilder.onUpdate(() => {
     else {
         filterTitle.value = getFilterTitle();
     }
-    // else if (newData.id === filter.value.id) update(newData);
 });
 </script>
 
 <style scoped>
 .filter-card {
-    @apply bg-dark-500 border-dark-550 relative;
-    @apply border-dark-625/30;
-    border-width: 1px;
-    margin-bottom: 8px;
-    transition: all 0.15s ease-out;
+    @apply bg-dark-500 border border-dark-625/30 relative mb-2 transition-all duration-200;
+}
+
+.filter-card:hover {
+    transform: scale(1.03);
+}
+
+.filter-card:active {
+    transform: scale(0.98);
 }
 
 .filter-card:hover:not(.expanded-filter) {
@@ -332,59 +340,39 @@ props.filterBuilder.onUpdate(() => {
 }
 
 .filter-input {
-    @apply border border-dark-550 rounded px-2 py-1.5 text-sm text-white focus:outline-none transition-colors;
-    @apply bg-dark-450/90;
-}
-
-.filter-input:focus {
-    border-color: oklch(0.28 0 0);
-    @apply bg-dark-475/90;
+    @apply border border-dark-550 rounded px-2 py-1.5 text-sm text-white bg-dark-450/90 focus:bg-dark-475/90 focus:outline-none transition-all duration-200 placeholder:text-light-400;
 }
 
-.filter-input::placeholder {
-    @apply text-light-400;
+/* Filter action buttons - drag and delete */
+.drag-btn,
+.delete-btn {
+    @apply flex items-center justify-center rounded-full transition-all duration-200;
+    @apply w-8 h-8 flex-shrink-0 p-0;
+    @apply border border-dark-500 bg-dark-450;
 }
 
-.filter-action-btn {
-    @apply flex items-center justify-center rounded-full transition-all duration-200 border-2 border-transparent;
-    width: 28px;
-    height: 28px;
-    @apply text-light-400;
-    background-color: rgba(35, 36, 41, 0.8);
-    backdrop-filter: blur(4px);
-}
+.drag-btn {
+    @apply text-light-500;
 
-@media (min-width: 640px) {
-    .filter-action-btn {
-        width: 32px;
-        height: 32px;
+    &:hover {
+        @apply bg-dark-300 border-dark-550 text-yellow-400 shadow-md;
     }
 }
 
-.filter-action-btn:hover {
-    color: white;
-    transform: scale(1.15);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.drag-btn:hover {
-    @apply bg-dark-675/80;
-    border-color: oklch(0.28 0 0);
-}
+.delete-btn {
+    @apply bg-error-500/30 border-error-400/50 text-error-300;
 
-.delete-btn:hover {
-    @apply bg-error-500/80 border-error-400 text-error-400;
+    &:hover {
+        @apply bg-error-400/80 border-error-500 text-white shadow-md;
+    }
 }
 
 .drag-handle.sortable-chosen {
-    border: 1px solid oklch(0.28 0 0);
-    @apply bg-dark-675/20;
+    @apply border border-dark-550 bg-dark-675/20;
 }
 
 .filter-card.sortable-ghost {
-    @apply opacity-50;
-    border: 1px solid oklch(0.28 0 0);
-    @apply bg-dark-675/10;
+    @apply opacity-50 border border-dark-550 bg-dark-675/10;
 }
 
 .filter-card.sortable-drag {
@@ -392,27 +380,26 @@ props.filterBuilder.onUpdate(() => {
 }
 
 .expanded-filter {
-    border-left: 4px solid oklch(0.28 0 0);
-    background-color: rgba(26, 27, 30, 0.95);
+    @apply border-l-4 border-l-dark-550 bg-dark-300/95;
 }
 
 .expanded-content {
-    background-color: rgba(26, 27, 30, 0.95);
-    border-radius: 6px;
-    padding: 12px;
+    @apply rounded-md p-3 bg-dark-300/95;
 }
 
 .controls-section {
-    background-color: rgba(26, 27, 30, 0.98);
-    border-radius: 6px;
-    padding: 12px;
+    @apply rounded-md p-3 bg-dark-350/[0.98];
 }
 
 .excluded-filter {
-    @apply border-l-4 border-l-error-300;
+    @apply border-l-4 border-l-error-400 bg-error-500/30;
+}
+
+.excluded-filter .delete-btn {
+    @apply bg-error-400/50 border-error-500 text-error-300;
 }
 
 .normal-filter {
-    border-left: 4px solid transparent;
+    @apply border-l-4 border-l-transparent;
 }
 </style>

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,91 @@
                         @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="btn-modal px-6" @click="save()">Apply</button>
+            <button class="btn-modal px-6" @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 +143,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 +161,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: oklch(0.60 0.18 250 / 0.6);
+    color: transparent;
+}
+
+.code-editor::-moz-selection {
+    background-color: oklch(0.60 0.18 250 / 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>