@necrolab/dashboard 0.5.14 → 0.5.16

package/src/stores/ui.js

@@ -3,7 +3,8 @@ import { defineStore } from "pinia";
 import { ConnectionHandler } from "@/stores/connection.js";
 import { toast } from "vue3-toastify";
 import { createLogger } from "@/stores/logger";
-import { timeDifference, betterSort, sortTaskIds } from "@/stores/utils";
+import { timeDifference } from "@/libs/utils/time";
+import { betterSort, sortTaskIds } from "@/libs/utils/array";
 
 import mockTaskData from "@/stores/sampleData.js";
 import { useRouter } from "vue-router";
@@ -60,9 +61,6 @@ export const useUIStore = defineStore("ui", () => {
     const selectedTaskForView = ref(null);
     const connection = new ConnectionHandler();
 
-    const startPoint = ref(0);
-    const pullChange = ref(0);
-
     const currentEvent = ref("");
     const currentCountry = ref({ id: "US", siteId: "TM_US", url: "https://www.ticketmaster.com" });
     const currentModule = ref("TM");
@@ -99,19 +97,33 @@ export const useUIStore = defineStore("ui", () => {
     });
     const currentDropdown = ref("");
 
-    // Set the _timeLeftString property every second
-    setInterval(() => {
-        const t1 = new Date();
-        for (const [key, value] of Object.entries(tasks.value)) {
-            if (value.expirationTime)
-                tasks.value[key]._timeLeftString =
-                    value.expirationTime == "Invalid Date"
-                        ? "No Cartholds"
-                        : timeDifference(Date.parse(value.expirationTime), t1.getTime());
-            else tasks.value[key]._timeLeftString = undefined;
+    // Optimized: Use requestAnimationFrame instead of setInterval to reduce CPU waste
+    // Only update times when tab is visible and at most once per second
+    let lastTimeUpdate = 0;
+    let lastSyncCheck = 0;
+    let rafId = null;
+
+    const updateTaskTimes = (timestamp) => {
+        // Only update once per second
+        if (timestamp - lastTimeUpdate >= 1000) {
+            lastTimeUpdate = timestamp;
+            const now = Date.now();
+
+            for (const [key, value] of Object.entries(tasks.value)) {
+                if (value.expirationTime) {
+                    tasks.value[key]._timeLeftString =
+                        value.expirationTime == "Invalid Date"
+                            ? "No Cartholds"
+                            : timeDifference(Date.parse(value.expirationTime), now);
+                } else {
+                    tasks.value[key]._timeLeftString = undefined;
+                }
+            }
         }
 
-        if (t1.getSeconds() % 10 === 0) {
+        // Sync taskIdOrder every 10 seconds (optimized with Map for O(1) lookups)
+        if (timestamp - lastSyncCheck >= 10000) {
+            lastSyncCheck = timestamp;
             const allIds = new Set(Object.keys(tasks.value));
             const orderIds = new Set(taskIdOrder.value);
 
@@ -123,20 +135,44 @@ export const useUIStore = defineStore("ui", () => {
 
                 if (missingIds.length > 0) {
                     missingIds.sort(sortTaskIds);
+                    // Optimized: Binary search for insertion point
                     for (const id of missingIds) {
-                        let pos = taskIdOrder.value.length;
-                        for (let i = 0; i < taskIdOrder.value.length; i++) {
-                            if (sortTaskIds(id, taskIdOrder.value[i]) < 0) {
-                                pos = i;
-                                break;
+                        let left = 0;
+                        let right = taskIdOrder.value.length;
+                        while (left < right) {
+                            const mid = Math.floor((left + right) / 2);
+                            if (sortTaskIds(id, taskIdOrder.value[mid]) < 0) {
+                                right = mid;
+                            } else {
+                                left = mid + 1;
                             }
                         }
-                        taskIdOrder.value.splice(pos, 0, id);
+                        taskIdOrder.value.splice(left, 0, id);
                     }
                 }
             }
         }
-    }, 1000);
+
+        rafId = requestAnimationFrame(updateTaskTimes);
+    };
+
+    rafId = requestAnimationFrame(updateTaskTimes);
+
+    // Pause updates when tab is hidden to save CPU
+    document.addEventListener('visibilitychange', () => {
+        if (document.hidden) {
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        } else {
+            if (!rafId) {
+                lastTimeUpdate = 0;
+                lastSyncCheck = 0;
+                rafId = requestAnimationFrame(updateTaskTimes);
+            }
+        }
+    });
 
     connection.init("/api/updates?type=tasks");
 
@@ -155,7 +191,6 @@ export const useUIStore = defineStore("ui", () => {
         document.body.style.top = `-${scrollY}px`;
         document.body.style.width = "100%";
         document.body.style.height = "100%";
-        document.body.style.left = "0"; // Add left positioning
 
         // iOS specific properties
         document.body.style.overflow = "hidden";
@@ -372,7 +407,7 @@ export const useUIStore = defineStore("ui", () => {
     };
 
     const startSpinner = (msg) => {
-        if (router.currentRoute.value.name == "login" || window.location.href.includes(":5173")) return;
+        if (router.currentRoute.value.name == "login") return;
         showSpinner.value = true;
         spinnerMessage.value = msg;
         preventScroll();
@@ -421,10 +456,6 @@ export const useUIStore = defineStore("ui", () => {
         reverseTasks,
 
         // refresh
-        startPoint,
-        pullChange,
-        setStartPoint: (point) => (startPoint.value = point),
-        setPullChange: () => (pullChange.value = length),
         tasks,
 
         // top main checkbox
@@ -472,14 +503,6 @@ export const useUIStore = defineStore("ui", () => {
             const selectedTasks = getSelectedTasks();
             for (const value of Object.values(selectedTasks)) connection.sendDeleteTask(value.taskId);
         },
-        foldTasks: () => {
-            const selectedTasks = getSelectedTasks();
-            for (const key of Object.keys(selectedTasks)) tasks.value[key].isExpanded = false;
-        },
-        expandTasks: () => {
-            const selectedTasks = getSelectedTasks();
-            for (const key of Object.keys(selectedTasks)) tasks.value[key].isExpanded = true;
-        },
         startTasks: () => {
             const selectedTasks = getSelectedTasks();
             for (const value of Object.values(selectedTasks)) if (!value.active) connection.sendStartTask(value.taskId);

package/src/views/Accounts.vue

@@ -1,12 +1,9 @@
 <template>
     <div>
-        <div class="flex items-center justify-between pt-5 pb-2">
-            <div class="flex items-center justify-center gap-4">
-                <MailIcon class="cursor-pointer smooth-hover text-white" />
-                <h4 class="text-base font-semibold text-light-300">
-                    Accounts
-                    <span class="text-sm font-medium text-light-400 pl-1">{{ ui.getSelectedAccounts().length }}</span>
-                </h4>
+        <div class="page-header">
+            <div class="page-header-card">
+                <MailIcon />
+                <h4>Accounts</h4>
             </div>
             <ul class="mobile-icons">
                 <li>
@@ -16,7 +13,8 @@
                     <button
                         :disabled="ui.disabledButtons['create-accounts']"
                         @click="ui.toggleModal('account-creator', true)"
-                        class="smooth-hover">
+                        class="smooth-hover"
+                        aria-label="Create accounts">
                         <PlayIcon class="w-4 h-4" />
                     </button>
                 </li>
@@ -24,7 +22,8 @@
                     <button
                         :disabled="ui.disabledButtons['add-accounts']"
                         @click="ui.toggleModal('create-account', true)"
-                        class="smooth-hover">
+                        class="smooth-hover"
+                        aria-label="Add account">
                         <PlusIcon class="w-4 h-4" />
                     </button>
                 </li>
@@ -41,6 +40,7 @@
                 <input
                     class="h-10 w-44 text-white text-sm p-2 bg-dark-500 flex items-center relative"
                     placeholder="Search Email"
+                    aria-label="Search email"
                     autocomplete="new-password"
                     data-dashlane-rid=""
                     data-dashlane-label=""
@@ -67,7 +67,7 @@
                 </div>
                 <button
                     :disabled="ui.disabledButtons['create-accounts']"
-                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-dark-650 hover:border-dark-700 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-dark-650 hover:border-dark-700 btn-focus-ring w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
                     @click="ui.toggleModal('account-creator')">
                     Create Accounts
                     <PlayIcon class="ml-2" />
@@ -75,7 +75,7 @@
 
                 <button
                     :disabled="ui.disabledButtons['add-accounts']"
-                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-dark-650 hover:border-dark-700 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-dark-650 hover:border-dark-700 btn-focus-ring w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
                     @click="ui.toggleModal('create-account')">
                     Add Account
                     <PlusIcon class="ml-2" />
@@ -84,7 +84,7 @@
         </div>
 
         <!-- Tasks (Table) -->
-        <AccountView :accounts="processedTasks" class="max-h-big-acc" />
+        <AccountView :accounts="processedTasks" />
 
         <!-- Modal -->
         <transition-group name="fade">
@@ -93,27 +93,9 @@
         </transition-group>
     </div>
 </template>
-<style lang="scss" scoped>
-/* Page buttons styling - match Tasks page */
-button.bg-dark-400 {
-    &:active,
-    &:focus {
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
-        border-color: oklch(0.72 0.15 145) !important;
-    }
-}
-
-.max-h-big-acc {
-    max-height: calc(100vh - 14rem);
-    overflow: auto;
-}
-</style>
 <script setup>
-import { computed, watch, ref } from "vue";
+import { computed, defineAsyncComponent, watch, ref } from "vue";
 import AccountView from "@/components/Editors/Account/AccountView.vue";
-import AccountCreator from "@/components/Editors/Account/AccountCreator.vue";
-import CreateAccount from "@/components/Editors/Account/CreateAccount.vue";
 import { useUIStore } from "@/stores/ui";
 import { PlusIcon, PlayIcon, MailIcon } from "@/components/icons";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
@@ -121,6 +103,10 @@ import TagToggle from "@/components/Editors/TagToggle.vue";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import EyeToggle from "@/components/ui/controls/EyeToggle.vue";
 
+// Lazy-loaded modal components
+const AccountCreator = defineAsyncComponent(() => import("@/components/Editors/Account/AccountCreator.vue"));
+const CreateAccount = defineAsyncComponent(() => import("@/components/Editors/Account/CreateAccount.vue"));
+
 const ui = useUIStore();
 const activeModal = computed(() => ui.activeModal);
 const allTags = ref([]);