@necrolab/dashboard 0.5.17 → 0.5.19

package/package.json

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

package/postinstall.js

@@ -17,7 +17,7 @@ try {
 
 try {
     // Detect if we're running inside the project itself or as a dependency
-    const isInsideProject = __dirname.includes('node_modules') === false;
+    const isInsideProject = __dirname.includes("node_modules") === false;
 
     let distPath, versionFilePath;
 
@@ -46,7 +46,7 @@ try {
                     `Version mismatch (Installed: ${installedVersion}, Target: ${currentVersion}). Proceeding with build.`
                 );
             }
-        } catch (readErr) {
+        } catch {
             console.log("Could not read version file. Proceeding with build.");
         }
     } else {

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

@@ -61,8 +61,6 @@ import { useUIStore } from "@/stores/ui";
 import TagLabel from "@/components/Editors/TagLabel.vue";
 import { useRowSelection } from "@/composables/useRowSelection";
 import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
-import { computed } from "vue";
-import { useEnableDisable } from "@/composables/useEnableDisable";
 
 const ui = useUIStore();
 const { copy } = useCopyToClipboard();

package/src/components/Editors/AdminFileEditor.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="admin-editor-section" :class="{ 'landscape-hidden': isHidden }">
+    <div class="admin-editor-section" :class="{ 'landscape-hidden': isHidden }" v-if="!isHidden">
         <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Admin Editor</h5>
-        <div class="flex flex-wrap items-center gap-3 w-full">
-            <div class="unified-search-group flex w-full flex-shrink-0 dropdown-container z-dropdown-high lg:w-auto lg:min-w-64">
+        <div class="flex items-center gap-2 w-full">
+            <div class="unified-search-group flex flex-1 dropdown-container z-dropdown-high lg:flex-initial lg:min-w-64">
                 <Dropdown
                     class="admin-file-dropdown flex-1"
                     default="Select a file"
@@ -12,15 +12,16 @@
                     :includeAdjacentButtons="true"
                     rightAmount="right-1" />
                 <button
-                    class="refresh-button flex items-center justify-center w-9 h-10 flex-shrink-0 text-white bg-dark-400 transition-standard hover:bg-dark-450"
+                    class="refresh-button flex items-center justify-center w-9 h-10 flex-shrink-0 text-white bg-dark-400 hover:bg-dark-450"
+                    style="transition: all 0.2s ease"
                     @click="$emit('refresh-files')"
                     title="Refresh file list">
                     <ReloadIcon class="refresh-icon icon-md" />
                 </button>
             </div>
-            <div v-if="isEditorVisible" class="flex gap-1.5 ml-auto">
+            <div v-if="isEditorVisible" class="flex gap-2 flex-shrink-0">
                 <button
-                    class="button-default bg-dark-400"
+                    class="editor-action-btn"
                     @click="$emit('format')"
                     v-if="isJsonFile"
                     title="Format JSON">
@@ -40,7 +41,7 @@
                         <path d="M21 18H7" />
                     </svg>
                 </button>
-                <button class="button-default bg-dark-400" @click="$emit('save')" title="Save File">
+                <button class="editor-action-btn" @click="$emit('save')" title="Save File">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="16"
@@ -56,7 +57,7 @@
                         <polyline points="7 3 7 8 15 8" />
                     </svg>
                 </button>
-                <button class="button-default bg-dark-400" @click="$emit('close')" title="Close File">
+                <button class="editor-action-btn" @click="$emit('close')" title="Close File">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="16"
@@ -75,9 +76,9 @@
         </div>
 
         <transition name="fade">
-            <div v-if="isEditorVisible" class="my-3 relative">
-                <div class="pb-4">
-                    <div class="editor-container overflow-hidden rounded-lg shadow-card bg-dark-350" :class="{ 'has-error': errorMessage }">
+            <div v-if="isEditorVisible" class="my-3 relative editor-wrapper">
+                <div :class="{ 'has-error-padding': errorMessage }">
+                    <div class="editor-container overflow-hidden rounded-lg shadow-card bg-dark-350" :class="{ 'has-error': errorMessage, 'with-error-msg': errorMessage }">
                         <div class="relative w-full h-full">
                             <pre ref="codeDisplay" class="code-highlight language-json"></pre>
                             <textarea
@@ -91,7 +92,6 @@
                         </div>
                     </div>
                 </div>
-
                 <div v-if="errorMessage" class="error-container">
                     <div class="error-icon">
                         <svg
@@ -140,9 +140,10 @@ const isEditorVisible = computed(() => props.currentFile !== '');
 const isJsonFile = computed(() => props.currentFile.endsWith('.json'));
 
 const errorMessage = computed(() => {
-    if (!isJsonFile.value) return;
+    if (!isJsonFile.value) return null;
     try {
         JSON.parse(props.content);
+        return null;
     } catch (e) {
         return e.message;
     }
@@ -177,3 +178,245 @@ onMounted(() => {
     }
 });
 </script>
+
+<style scoped>
+.editor-action-btn {
+    @apply flex items-center justify-center w-9 h-9 rounded border-2 border-dark-550 bg-dark-400 text-white;
+    transition: all 0.2s ease;
+}
+
+.editor-action-btn:hover {
+    @apply bg-dark-450 border-dark-625;
+}
+
+.editor-action-btn svg {
+    @apply w-4 h-4;
+}
+
+.editor-wrapper {
+    max-height: calc(100vh - 380px);
+    overflow: visible;
+}
+
+.editor-container {
+    position: relative;
+    height: calc(100vh - 380px);
+    min-height: 300px;
+    max-height: calc(100vh - 380px);
+    border: 2px solid var(--color-border);
+    overflow: hidden;
+}
+
+.editor-container.has-error {
+    border-color: oklch(0.6 0.19 29);
+}
+
+.editor-container.with-error-msg {
+    height: calc(100vh - 520px);
+    max-height: calc(100vh - 520px);
+    min-height: 200px;
+}
+
+.code-highlight,
+.code-editor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 1rem;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    white-space: pre;
+    word-wrap: normal;
+    overflow-wrap: normal;
+    tab-size: 4;
+}
+
+.code-highlight {
+    overflow: auto;
+    pointer-events: none;
+    background: transparent;
+    caret-color: transparent;
+    z-index: 0;
+}
+
+/* Enhanced syntax highlighting - SUPER BRIGHT for dark background */
+.code-highlight :deep(.token.property),
+.code-highlight :deep(.token.tag),
+.code-highlight :deep(.token.boolean),
+.code-highlight :deep(.token.number),
+.code-highlight :deep(.token.constant),
+.code-highlight :deep(.token.symbol),
+.code-highlight :deep(.token.deleted) {
+    color: #ff6b9d !important;
+    font-weight: 500;
+}
+
+.code-highlight :deep(.token.selector),
+.code-highlight :deep(.token.attr-name),
+.code-highlight :deep(.token.string),
+.code-highlight :deep(.token.char),
+.code-highlight :deep(.token.builtin),
+.code-highlight :deep(.token.inserted) {
+    color: #7ee8fa !important;
+    font-weight: 500;
+}
+
+.code-highlight :deep(.token.operator),
+.code-highlight :deep(.token.entity),
+.code-highlight :deep(.token.url),
+.code-highlight :deep(.language-css .token.string),
+.code-highlight :deep(.style .token.string) {
+    color: #5bc0eb !important;
+}
+
+.code-highlight :deep(.token.atrule),
+.code-highlight :deep(.token.attr-value),
+.code-highlight :deep(.token.keyword) {
+    color: #ffa657 !important;
+    font-weight: 600;
+}
+
+.code-highlight :deep(.token.function),
+.code-highlight :deep(.token.class-name) {
+    color: #d4a5ff !important;
+    font-weight: 600;
+}
+
+.code-highlight :deep(.token.regex),
+.code-highlight :deep(.token.important),
+.code-highlight :deep(.token.variable) {
+    color: #ffc777 !important;
+}
+
+.code-highlight :deep(.token.punctuation) {
+    color: #c8d3f5 !important;
+}
+
+.code-editor {
+    background: transparent;
+    color: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+    overflow: auto;
+    z-index: 1;
+    caret-color: #ffc777;
+    -webkit-text-fill-color: transparent;
+}
+
+.code-editor::selection {
+    background: oklch(0.5 0.15 250 / 0.5);
+    color: #fff;
+    -webkit-text-fill-color: #fff;
+}
+
+.error-container {
+    @apply mt-2 p-3 rounded-lg border-2 flex gap-3 items-start;
+    background: oklch(0.25 0.02 29);
+    border-color: oklch(0.5 0.15 29);
+    max-width: 100%;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-height: 120px;
+    overflow-y: auto;
+}
+
+.error-icon {
+    @apply flex-shrink-0 text-error-400;
+}
+
+.error-content {
+    @apply flex-1;
+}
+
+.error-title {
+    @apply text-sm font-semibold text-error-300 mb-1;
+}
+
+.error-text {
+    @apply text-xs text-error-300;
+}
+
+/* Tablet adjustments */
+@media (max-width: 1024px) {
+    .editor-wrapper {
+        max-height: calc(100vh - 350px);
+    }
+
+    .editor-container {
+        height: calc(100vh - 350px);
+        max-height: calc(100vh - 350px);
+        min-height: 280px;
+    }
+
+    .editor-container.with-error-msg {
+        height: calc(100vh - 480px);
+        max-height: calc(100vh - 480px);
+        min-height: 180px;
+    }
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+    .editor-wrapper {
+        max-height: calc(100vh - 320px);
+    }
+
+    .editor-container {
+        height: calc(100vh - 320px);
+        max-height: calc(100vh - 320px);
+        min-height: 250px;
+    }
+
+    .editor-container.with-error-msg {
+        height: calc(100vh - 440px);
+        max-height: calc(100vh - 440px);
+        min-height: 150px;
+    }
+
+    .code-highlight,
+    .code-editor {
+        font-size: 13px;
+        padding: 0.75rem;
+        line-height: 1.5;
+    }
+
+    .error-container {
+        max-height: 100px;
+    }
+}
+
+@media (max-width: 480px) {
+    .editor-wrapper {
+        max-height: calc(100vh - 300px);
+    }
+
+    .editor-container {
+        height: calc(100vh - 300px);
+        max-height: calc(100vh - 300px);
+        min-height: 200px;
+    }
+
+    .editor-container.with-error-msg {
+        height: calc(100vh - 400px);
+        max-height: calc(100vh - 400px);
+        min-height: 120px;
+    }
+
+    .code-highlight,
+    .code-editor {
+        font-size: 12px;
+        padding: 0.5rem;
+    }
+
+    .error-container {
+        max-height: 80px;
+    }
+}
+</style>

package/src/components/Editors/ProxyFileEditor.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="proxy-editor-section" :class="{ 'landscape-hidden': isHidden }">
+    <div class="proxy-editor-section" :class="{ 'landscape-hidden': isHidden }" v-if="!isHidden">
         <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Proxy Editor</h5>
-        <div class="flex flex-wrap items-center gap-3 w-full mb-1">
-            <div class="w-full lg:w-64 flex flex-shrink-0 dropdown-container z-dropdown">
+        <div class="flex items-center gap-2 w-full mb-1">
+            <div class="flex-1 lg:flex-initial lg:w-64 flex dropdown-container z-dropdown">
                 <div class="relative flex-grow">
                     <Dropdown
                         class="bg-dark-500 border-2 border-dark-550 proxy-file-dropdown w-full"
@@ -14,8 +14,8 @@
                         rightAmount="right-1" />
                 </div>
             </div>
-            <div v-if="isProxyEditorVisible" class="flex gap-1.5 ml-auto">
-                <button class="button-default bg-dark-400" @click="$emit('save-proxies')" title="Save Proxies">
+            <div v-if="isProxyEditorVisible" class="flex gap-2 flex-shrink-0">
+                <button class="editor-action-btn" @click="$emit('save-proxies')" title="Save Proxies">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="16"
@@ -31,7 +31,7 @@
                         <polyline points="7 3 7 8 15 8" />
                     </svg>
                 </button>
-                <button class="button-default bg-dark-400" @click="$emit('close-proxy')" title="Close File">
+                <button class="editor-action-btn" @click="$emit('close-proxy')" title="Close File">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="16"
@@ -51,7 +51,7 @@
         <transition name="fade">
             <div v-if="isProxyEditorVisible" class="relative my-3">
                 <div class="pb-4">
-                    <div class="proxy-editor-container table-component">
+                    <div class="proxy-editor-container">
                         <textarea
                             :value="proxyContent"
                             @input="$emit('update:proxyContent', $event.target.value)"
@@ -84,3 +84,95 @@ const loadProxies = (listName) => {
     emit('load-proxies', listName);
 };
 </script>
+
+<style scoped>
+.editor-action-btn {
+    @apply flex items-center justify-center w-9 h-9 rounded border-2 border-dark-550 bg-dark-400 text-white;
+    transition: all 0.2s ease;
+}
+
+.editor-action-btn:hover {
+    @apply bg-dark-450 border-dark-625;
+}
+
+.editor-action-btn svg {
+    @apply w-4 h-4;
+}
+
+.proxy-editor-container {
+    position: relative;
+    height: calc(100vh - 380px);
+    min-height: 300px;
+    max-height: calc(100vh - 380px);
+    border: 2px solid var(--color-border);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: var(--color-bg-dark-350);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.proxy-editor {
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #c8d3f5;
+    background: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+    overflow: auto;
+    white-space: pre;
+    word-wrap: normal;
+    overflow-wrap: normal;
+    tab-size: 4;
+    caret-color: #ffc777;
+}
+
+.proxy-editor::selection {
+    background: oklch(0.4 0.1 240 / 0.4);
+}
+
+.proxy-editor:focus {
+    outline: none;
+}
+
+/* Tablet adjustments */
+@media (max-width: 1024px) {
+    .proxy-editor-container {
+        height: calc(100vh - 350px);
+        max-height: calc(100vh - 350px);
+        min-height: 280px;
+    }
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+    .proxy-editor-container {
+        height: calc(100vh - 320px);
+        max-height: calc(100vh - 320px);
+        min-height: 250px;
+    }
+
+    .proxy-editor {
+        font-size: 13px;
+        padding: 0.75rem;
+        line-height: 1.5;
+    }
+}
+
+@media (max-width: 480px) {
+    .proxy-editor-container {
+        height: calc(100vh - 300px);
+        max-height: calc(100vh - 300px);
+        min-height: 200px;
+    }
+
+    .proxy-editor {
+        font-size: 12px;
+        padding: 0.5rem;
+    }
+}
+</style>

package/src/composables/useDropdownPosition.js

@@ -107,7 +107,7 @@ export function useDropdownPosition(dropdownRef, options = {}) {
                 zIndex,
                 maxHeight: `${maxHeight}px`
             };
-        } catch (error) {
+        } catch {
             menuStyle.value = {
                 position: "fixed",
                 top: "0px",

package/src/composables/useFormValidation.js

@@ -13,10 +13,6 @@ export function useFormValidation() {
         }
     };
 
-    const hasError = (fieldName) => {
-        return errors.value.includes(fieldName);
-    };
-
     const isValidEmail = (email) => {
         return email && email.includes("@");
     };
@@ -52,10 +48,6 @@ export function useFormValidation() {
         return true; // Not required for other countries
     };
 
-    const isValidZipCode = (zipCode) => {
-        return zipCode && zipCode.trim().length > 0;
-    };
-
     const validateAccount = (account) => {
         clearErrors();
 

package/src/composables/useNotchHandling.js

@@ -253,7 +253,6 @@ export function useNotchHandling(logger) {
 
     // Vue-specific watchers
     onMounted(() => {
-        let attempts = 0;
         const maxAttempts = 5;
         const delays = [0, 50, 150, 300, 500];
 

package/src/stores/connection.js

@@ -118,7 +118,9 @@ export class ConnectionHandler {
                 } else if (msg.update) {
                     try {
                         Object.entries(msg.update).forEach((change) => (this.ui.tasks[msg.id][change[0]] = change[1]));
-                    } catch {}
+                    } catch {
+                        // Ignore update errors if task doesn't exist
+                    }
                 } else {
                     if (!this.ui.tasks[msg.id]) this.ui.tasks[msg.id] = msg.task;
                     if (!this.ui.taskIdOrder.includes(msg.id)) {

package/src/stores/logger.js

@@ -46,13 +46,13 @@ class Logger {
 
         // For styled console output in browser
         if (style) {
-            /* eslint-disable no-console */
+             
             console.log(`%c${args.join(" ")}`, style);
-            /* eslint-enable no-console */
+             
         } else {
-            /* eslint-disable no-console */
+             
             console.log(...args);
-            /* eslint-enable no-console */
+             
         }
     }
 

package/src/views/Console.vue

@@ -16,7 +16,7 @@
                 :taskLogMapping="taskLogMapping"
                 :userScrolledUp="userScrolledUp"
                 :filteredCount="filteredCount"
-                @scroll="handleScrollDirection"
+                @scroll="startScrolling"
                 @scroll-stop="stopScrolling"
                 @autoscroll-toggle="onAutoscrollToggle" />
 
@@ -122,11 +122,10 @@ import { Smoothie } from "vue-smoothie";
 import { DEBUG } from "@/utils/debug";
 
 import Filter from "@/libs/ansii.js";
-import { ConsoleIcon, DownIcon, UpIcon } from "@/components/icons";
+import { ConsoleIcon } from "@/components/icons";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import WebsocketHeartbeatJs from "websocket-heartbeat-js";
 import { onMounted, onUnmounted, ref, nextTick, computed, watch } from "vue";
-import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import ConsoleToolbar from "@/components/Console/ConsoleToolbar.vue";
 
 const $autoscroll = ref(null);
@@ -216,7 +215,7 @@ const performScroll = (direction, smooth = true) => {
         }
 
         return true;
-    } catch (e) {
+    } catch {
         if (DEBUG) return false;
         return false;
     }

package/src/views/Editor.vue

@@ -70,8 +70,6 @@ let previous = {
 
 const loadAvailableFiles = async () => (availableFiles.value = await loadFromApi("/api/json-files"));
 
-const isJsonFile = () => currentFile.value.endsWith(".json");
-
 const loadFile = async (f) => {
     currentFile.value = f;
     if (DEBUG) {

package/src/views/FilterBuilder.vue

@@ -158,8 +158,7 @@
 
 <script setup>
 import draggable from "vuedraggable";
-import { ref, computed, defineAsyncComponent, watch, onMounted, onUnmounted, nextTick } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
+import { ref, computed, defineAsyncComponent, watch, nextTick } from "vue";
 import { useFilterCSS } from "@/composables/useFilterCSS";
 import Filter from "@/components/Filter/Filter.vue";
 import { FilterIcon } from "@/components/icons";
@@ -216,7 +215,7 @@ const addWildcardFilter = () => {
 
 let RendererFactory = import("@necrolab/tm-renderer");
 
-const { injectStyles, cssUpdateTrigger } = useFilterCSS(filterBuilder, svg);
+useFilterCSS(filterBuilder, svg);
 
 const doesFilterShow = (filter) => {
     if ((filter.event || filter.eventId) !== filterBuilder.value.currentEventId) return;
@@ -326,9 +325,6 @@ const updateShownVenue = async () => {
     await nextTick();
     await loadFilter();
     filterBuilder.value.reload(eventId.value);
-
-    // Re-setup CSS system after reload
-    setupCSSUpdates();
     filterBuilder.value.updateCss();
 };
 

package/src/views/Profiles.vue

@@ -164,7 +164,7 @@ watch(
         const f = (p) => searchRegex.test(p[filterFieldMap[field]]);
         ui.search.profiles.results = profs.filter(f);
 
-        allTags.value = getAllTags();
+        allTags.value = useGetAllTags(ui.search.profiles.results);
     }
 );