@necrolab/dashboard 0.5.16 → 0.5.17

package/src/assets/css/components/utilities.scss

@@ -78,7 +78,8 @@
 /* Console main container with responsive heights */
 .console-main {
     @apply relative overflow-x-auto overflow-y-auto rounded border-2 border-dark-550 bg-dark-400 p-2 font-mono text-white;
-    height: calc(100vh - 18rem);
+    height: calc(100vh - 20rem);
+    max-height: calc(100vh - 20rem);
     scroll-padding: 0.5rem;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
@@ -86,17 +87,19 @@
     touch-action: pan-y pan-up pan-down;
 
     @screen md {
-        height: calc(100vh - 16rem);
+        height: calc(100vh - 18rem);
+        max-height: calc(100vh - 18rem);
     }
 
     @screen lg {
-        height: calc(100vh - 14rem);
+        height: calc(100vh - 16rem);
+        max-height: calc(100vh - 16rem);
         padding: 1.25rem;
     }
 
     @screen mobile-portrait {
-        height: calc(100vh - 19.5rem);
-        max-height: 50vh;
+        height: calc(100vh - 22rem);
+        max-height: calc(100vh - 22rem);
         overflow: auto;
         padding: 0.25rem;
         font-size: 0.75rem;
@@ -104,12 +107,13 @@
     }
 
     @media (orientation: landscape) and (max-width: 1023px) {
-        height: calc(100vh - 10.5rem);
+        height: calc(100vh - 12rem);
+        max-height: calc(100vh - 12rem);
     }
 
     @media (max-width: 767px) and (orientation: landscape) {
         height: auto;
-        max-height: 60vh;
+        max-height: 65vh;
     }
 }
 
@@ -202,19 +206,90 @@
     @apply h-full w-full bg-transparent text-sm text-white outline-none;
 }
 
-/* High-frequency Tailwind pattern utilities */
-.flex-center {
-    @apply flex items-center justify-center;
+.icon-md {
+    @apply h-4 w-4;
 }
 
-.text-secondary {
-    @apply text-xs text-light-500;
+/* Flex with gap variants - consolidates 51+ repeated patterns */
+.flex-gap-1 {
+    @apply flex gap-1;
 }
 
-.text-tertiary {
-    @apply text-xs text-light-300;
+.flex-gap-2 {
+    @apply flex gap-2;
 }
 
-.icon-md {
-    @apply h-4 w-4;
+.flex-gap-3 {
+    @apply flex gap-3;
+}
+
+/* Standard transition - used throughout the app */
+.transition-standard {
+    @apply transition-all duration-150;
+}
+
+/* Badge pattern for version/stat chips - QuickSettings pattern */
+.badge-version {
+    @apply flex items-center gap-x-1.5 px-2.5 py-1.5 rounded-lg border bg-dark-400 border-dark-550;
+}
+
+/* Icon button container - 8x8 flex centered button pattern */
+.icon-button {
+    @apply flex h-8 w-8 flex-shrink-0 items-center justify-center rounded;
+}
+
+/* Icon size utilities for common patterns */
+.icon-sm {
+    @apply h-3 w-3;
+}
+
+.icon-lg {
+    @apply h-5 w-5;
+}
+
+.icon-xl {
+    @apply h-6 w-6;
+}
+
+/* Square size utilities */
+.size-8 {
+    @apply h-8 w-8;
+}
+
+.size-10 {
+    @apply h-10 w-10;
+}
+
+/* Common button pattern - dark with border */
+.btn-dark-bordered {
+    @apply rounded-md border border-dark-650 bg-dark-400;
+}
+
+/* Flex layout utilities */
+.flex-between {
+    @apply flex items-center justify-between;
+}
+
+/* Text utilities */
+.text-button {
+    @apply text-white text-xs font-medium;
+}
+
+/* Padding combinations */
+.pad-3-2 {
+    @apply px-3 py-2;
+}
+
+/* Square size utilities */
+.square-8 {
+    @apply h-8 w-8;
+}
+
+/* Border + rounded combinations */
+.dark-border-rounded {
+    @apply rounded border border-dark-650;
+}
+
+.dark-border-rounded-md {
+    @apply rounded-md border border-dark-650;
 }

package/src/assets/css/main.scss

@@ -105,17 +105,6 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
    COMPONENT UTILITIES
    ========================================================================== */
 
-.smooth-hover {
-    @apply transition-all duration-200;
-    @include scale-hover;
-}
-
-.status-indicator {
-    @apply h-2 w-2 flex-shrink-0 rounded-full;
-    min-width: 4px;
-    min-height: 4px;
-}
-
 .mobile-icons {
     @apply ml-auto flex items-center gap-x-2 lg:hidden;
 
@@ -134,6 +123,17 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
     }
 }
 
+.smooth-hover {
+    @apply transition-all duration-200;
+    @include scale-hover;
+}
+
+.status-indicator {
+    @apply h-2 w-2 flex-shrink-0 rounded-full;
+    min-width: 4px;
+    min-height: 4px;
+}
+
 .loading-spinner {
     @apply h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent;
 }
@@ -150,90 +150,6 @@ button.bg-red-400 {
     }
 }
 
-/* ==========================================================================
-   LABEL & ICON STYLING
-   ========================================================================== */
-
-.label-override {
-    @apply mb-2 flex items-center text-xs;
-    color: var(--color-text-muted);
-    margin-top: 1rem;
-
-    svg {
-        @apply ml-2;
-        color: var(--color-text-muted) !important;
-        width: 16px;
-        height: 16px;
-        fill: var(--color-text-muted) !important;
-    }
-}
-
-.task-switches {
-    h4 {
-        color: var(--color-text-primary);
-        font-size: 0.8125rem;
-        font-weight: 500;
-        @apply mx-auto mb-2 flex items-center gap-x-2 text-center;
-    }
-
-    .switch-wrapper {
-        @apply gap-y-2;
-    }
-
-    svg {
-        width: 15px !important;
-        height: 15px !important;
-        color: var(--color-text-primary) !important;
-        margin-left: 0.25rem !important;
-    }
-}
-
-/* ==========================================================================
-   DYNAMIC HEIGHTS & RESPONSIVE DESIGN
-   ========================================================================== */
-
-.max-h-big {
-    max-height: calc(100vh - 12rem);
-    min-height: 8rem;
-    overflow: hidden;
-
-    @screen xl {
-        max-height: calc(100vh - 11rem);
-    }
-}
-
-/* ==========================================================================
-   TRANSITIONS & ANIMATIONS
-   ========================================================================== */
-
-.dropdown-fade-enter-active {
-    @apply transition-all duration-300;
-}
-
-.dropdown-fade-leave-active {
-    @apply transition-all duration-200;
-}
-
-.dropdown-fade-enter-from {
-    @apply opacity-0;
-    transform: translateY(-8px) scale(0.95);
-}
-
-.dropdown-fade-leave-to {
-    @apply opacity-0;
-    transform: translateY(-4px) scale(0.98);
-}
-
-.dropdown-fade-enter-to,
-.dropdown-fade-leave-from {
-    @apply opacity-100;
-    transform: translateY(0) scale(1);
-}
-
-.will-change-auto {
-    will-change: auto;
-}
-
 /* ==========================================================================
    iOS OPTIMIZATIONS
    ========================================================================== */
@@ -271,3 +187,14 @@ button.bg-red-400 {
         min-height: 5px;
     }
 }
+
+/* Fade transition for modals and components */
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}

package/src/components/Auth/LoginForm.vue

@@ -2,7 +2,7 @@
     <div class="form-section">
         <!-- Username -->
         <div class="form-field-labeled mb-3">
-            <div class="flex items-center gap-2">
+            <div class="flex-gap-2 items-center">
                 <ProfileIcon class="w-4 h-4" />
                 <span class="text-light-300 font-medium text-sm">Username</span>
             </div>
@@ -12,7 +12,7 @@
         </div>
         <!-- Password -->
         <div class="form-field-labeled mb-4">
-            <div class="flex items-center gap-2">
+            <div class="flex-gap-2 items-center">
                 <KeyIcon class="w-4 h-4" />
                 <span class="text-light-300 font-medium text-sm">Password</span>
             </div>

package/src/components/Console/ConsoleToolbar.vue

@@ -0,0 +1,123 @@
+<template>
+    <div>
+        <div class="mb-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div class="flex flex-col gap-3 md:flex-1 md:flex-row md:items-center">
+                <div class="w-full md:w-64">
+                    <Dropdown
+                        class="console-dropdown input-default w-full border-2 border-dark-550 bg-dark-500"
+                        rightAmount="right-2"
+                        default="All logs"
+                        :allowDefault="true"
+                        :value="currentTaskLog"
+                        :onClick="(f) => $emit('update:currentTaskLog', f.split(' ')[0])"
+                        :options="Object.entries(taskLogMapping).map(([k, v]) => `${k} (${v.length})`).sort((a, b) => a.localeCompare(b))" />
+                </div>
+                <div class="flex flex-1 items-center gap-2">
+                    <div class="input-default flex flex-1 items-center md:max-w-64">
+                        <input
+                            :value="searchQuery"
+                            @input="$emit('update:searchQuery', $event.target.value)"
+                            type="text"
+                            placeholder="Search logs..."
+                            aria-label="Search logs"
+                            class="transparent-input" />
+                        <span v-if="searchQuery" class="ml-2 text-xs text-light-500">{{ filteredCount }}</span>
+                    </div>
+                    <button
+                        class="console-scroll-btn md:hidden"
+                        @mousedown="$emit('scroll', 'up')"
+                        @mouseup="$emit('scroll-stop')"
+                        @mouseleave="$emit('scroll-stop')"
+                        @touchstart="$emit('scroll', 'up')"
+                        @touchend="$emit('scroll-stop')"
+                        aria-label="Scroll up">
+                        <UpIcon class="pointer-events-none h-5 w-5" />
+                    </button>
+                    <button
+                        class="console-scroll-btn md:hidden"
+                        @mousedown="$emit('scroll', 'down')"
+                        @mouseup="$emit('scroll-stop')"
+                        @mouseleave="$emit('scroll-stop')"
+                        @touchstart="$emit('scroll', 'down')"
+                        @touchend="$emit('scroll-stop')">
+                        <DownIcon class="pointer-events-none h-5 w-5" />
+                    </button>
+                </div>
+            </div>
+            <div class="flex hidden items-center gap-3 md:flex">
+                <div class="hidden items-center gap-3 md:flex">
+                    <button class="flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
+                        <h3 class="text-sm text-white">Hide Monitors</h3>
+                        <Switch class="scale-75" :model-value="filteredLogs" @update:model-value="$emit('update:filteredLogs', $event)" />
+                    </button>
+                    <button class="relative flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
+                        <h3 class="text-sm text-white">Auto</h3>
+                        <Switch class="scale-75" :model-value="autoscrollToggled" @update:model-value="$emit('update:autoscrollToggled', $event); $emit('autoscroll-toggle')" />
+                        <div
+                            v-if="userScrolledUp && autoscrollToggled"
+                            class="absolute -right-1 -top-1 h-2 w-2 animate-pulse rounded-full bg-yellow-500"
+                            title="Autoscroll paused - scroll to bottom to resume"></div>
+                    </button>
+                </div>
+                <button
+                    class="hidden size-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200 md:flex"
+                    @mousedown="$emit('scroll', 'up')"
+                    @mouseup="$emit('scroll-stop')"
+                    @mouseleave="$emit('scroll-stop')"
+                    @touchstart="$emit('scroll', 'up')"
+                    @touchend="$emit('scroll-stop')">
+                    <UpIcon class="pointer-events-none h-5 w-5" />
+                </button>
+                <button
+                    class="hidden size-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200 md:flex"
+                    @mousedown="$emit('scroll', 'down')"
+                    @mouseup="$emit('scroll-stop')"
+                    @mouseleave="$emit('scroll-stop')"
+                    @touchstart="$emit('scroll', 'down')"
+                    @touchend="$emit('scroll-stop')">
+                    <DownIcon class="pointer-events-none h-5 w-5" />
+                </button>
+            </div>
+        </div>
+        <div class="mb-6 mt-4 flex justify-between md:hidden mobile-portrait:mb-16 mobile-portrait:mt-6">
+            <button class="flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
+                <h3 class="text-sm text-white">Hide Monitors</h3>
+                <Switch class="scale-75" :model-value="filteredLogs" @update:model-value="$emit('update:filteredLogs', $event)" />
+            </button>
+            <button class="relative flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
+                <h3 class="text-sm text-white">Auto</h3>
+                <Switch class="scale-75" :model-value="autoscrollToggled" @update:model-value="$emit('update:autoscrollToggled', $event); $emit('autoscroll-toggle')" />
+                <div
+                    v-if="userScrolledUp && autoscrollToggled"
+                    class="absolute -right-1 -top-1 h-2 w-2 animate-pulse rounded-full bg-yellow-500"
+                    title="Autoscroll paused - scroll to bottom to resume"></div>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { DownIcon, UpIcon } from '@/components/icons';
+import Switch from '@/components/ui/controls/atomic/Switch.vue';
+import Dropdown from '@/components/ui/controls/atomic/Dropdown.vue';
+
+defineProps({
+    currentTaskLog: String,
+    taskLogMapping: Object,
+    searchQuery: String,
+    filteredLogs: Boolean,
+    autoscrollToggled: Boolean,
+    userScrolledUp: Boolean,
+    filteredCount: String
+});
+
+defineEmits([
+    'update:currentTaskLog',
+    'update:searchQuery',
+    'update:filteredLogs',
+    'update:autoscrollToggled',
+    'scroll',
+    'scroll-stop',
+    'autoscroll-toggle'
+]);
+</script>

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

@@ -39,12 +39,12 @@
                 </li>
                 <li v-if="props.account.enabled">
                     <button @click="disable">
-                        <img class="h-4 w-4" src="/img/controls/disable.svg" />
+                        <img class="icon-md" src="/img/controls/disable.svg" />
                     </button>
                 </li>
                 <li v-else>
                     <button @click="enable">
-                        <img class="h-4 w-4" src="/img/controls/enable.svg" />
+                        <img class="icon-md" src="/img/controls/enable.svg" />
                     </button>
                 </li>
             </ActionButtonGroup>
@@ -61,6 +61,8 @@ 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/Account/AccountView.vue

@@ -8,24 +8,24 @@
                     @valueUpdate="ui.toggleMainCheckbox('accounts')"
                     :isHeader="true" />
                 <div class="mx-auto flex cursor-pointer items-center" @click="ui.toggleSort('eventId')">
-                    <MailIcon class="mr-0 h-4 w-4 md:mr-3" />
+                    <MailIcon class="mr-0 icon-md md:mr-3" />
                     <h4 class="hidden text-white md:flex">Email</h4>
                 </div>
             </div>
             <div class="col-span-2 hidden items-center justify-center md:flex" v-once>
-                <KeyIcon class="mr-0 h-4 w-4 md:mr-3" />
+                <KeyIcon class="mr-0 icon-md md:mr-3" />
                 <h4 class="hidden text-white md:flex">Password</h4>
             </div>
             <div class="grid-cell-center" v-once>
-                <CheckmarkIcon class="mr-0 h-4 w-4 md:mr-3" />
+                <CheckmarkIcon class="mr-0 icon-md md:mr-3" />
                 <h4 class="hidden text-white md:flex">Enabled</h4>
             </div>
             <div class="col-span-1 hidden items-center justify-center lg:flex" v-once>
-                <TicketIcon class="mr-0 h-4 w-4 md:mr-3" />
+                <TicketIcon class="mr-0 icon-md md:mr-3" />
                 <h4 class="hidden text-white md:flex">Tags</h4>
             </div>
             <div class="grid-cell-center" v-once>
-                <ClickIcon class="mr-0 h-4 w-4 md:mr-3" />
+                <ClickIcon class="mr-0 icon-md md:mr-3" />
                 <h4 class="hidden text-white md:flex">Actions</h4>
             </div>
         </Header>
@@ -38,7 +38,7 @@
                 :key="account.id || account.index"
                 class="min-h-16 flex-shrink-0 hover:bg-dark-550">
                 <Account
-                    :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
+                    :class="getRowClass(i)"
                     :account="account" />
             </div>
         </div>
@@ -59,7 +59,9 @@ import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import EmptyState from "@/components/ui/EmptyState.vue";
 import { useUIStore } from "@/stores/ui";
 import { useDynamicTableHeight } from "@/composables/useDynamicTableHeight";
-import { computed, ref } from "vue";
+import { computed } from "vue";
+import { useTableRender } from "@/composables/useTableRender";
+import { getRowClass } from "@/utils/tableHelpers";
 
 const props = defineProps({
     accounts: {
@@ -69,36 +71,9 @@ const props = defineProps({
 });
 const ui = useUIStore();
 
-const i = ref({});
-const toRender = computed(() => {
-    let c = 0;
-    const rendered = props.accounts.map((t) => ({ ...t, index: c++ }));
+const { toRender } = useTableRender(computed(() => props.accounts));
 
-    // Initialize reactive refs for click tracking
-    rendered.forEach((t) => {
-        if (t.id && !(t.id in i.value)) {
-            i.value[t.id] = 0;
-        }
-        if (!(t.index in i.value)) {
-            i.value[t.index] = 0;
-        }
-    });
+import { TABLE_LAYOUT } from "@/constants/tableLayout";
 
-    return rendered;
-});
-
-// Layout constants for dynamic table height calculation
-const LAYOUT_CONSTANTS = {
-    TOP_RESERVED_SPACE: 180, // Page header + search controls + gaps (router-wrapper handles navbar, no UTILS section)
-    BOTTOM_BUFFER: 50, // Margin at bottom to prevent overflow
-    ROW_HEIGHT: 64, // Account row height in pixels
-    MIN_ROWS_TO_SHOW: 2 // Minimum number of rows to display
-};
-
-const { dynamicTableHeight } = useDynamicTableHeight({
-    topReservedSpace: LAYOUT_CONSTANTS.TOP_RESERVED_SPACE,
-    bottomBuffer: LAYOUT_CONSTANTS.BOTTOM_BUFFER,
-    rowHeight: LAYOUT_CONSTANTS.ROW_HEIGHT,
-    minRowsToShow: LAYOUT_CONSTANTS.MIN_ROWS_TO_SHOW
-});
+const { dynamicTableHeight } = useDynamicTableHeight(TABLE_LAYOUT.ACCOUNTS);
 </script>

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

@@ -72,6 +72,7 @@ import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import ReadonlyFieldsSection from "@/components/ui/ReadonlyFieldsSection.vue";
 import { ref } from "vue";
+import { useFormValidation } from "@/composables/useFormValidation";
 
 const ui = useUIStore();
 const account = ref({
@@ -82,19 +83,10 @@ const account = ref({
 
 if (ui.currentlyEditing?.email) account.value = ui.currentlyEditing;
 
-const errors = ref([]);
-
-const validate = (p) => {
-    errors.value = [];
-
-    if (!p.email.includes("@")) errors.value.push("email");
-    if (p.password.length < 5) errors.value.push("password");
-
-    return errors.value.length === 0;
-};
+const { errors, validateAccount } = useFormValidation();
 
 function done() {
-    if (!validate(account.value)) return;
+    if (!validateAccount(account.value)) return;
     ui.toggleModal("");
     ui.addAccount(account.value);
 }