@necrolab/dashboard 0.5.15 → 0.5.17

package/src/components/Tasks/QuickSettings.vue

@@ -9,23 +9,40 @@
             <div
                 v-for="(value, keyName) in category"
                 :key="keyName"
-                class="input-container"
+                class="form-field-labeled-sm mb-3"
             >
                 <span class="w-1/3 text-light-300 font-medium text-xs">{{ keyName }}</span>
-                <div class="w-2/3 h-full flex items-center">
+                <div class="w-2/3 h-full relative">
                     <input
                         type="text"
-                        class="quick-settings-input"
+                        class="api-key-input pr-16"
                         :placeholder="`Enter ${keyName} key`"
                         v-model="quickConfig.keys[categoryName][keyName]"
                     />
+                    <div class="balance-indicator">
+                        <div v-if="balanceState[categoryName]?.[keyName]?.loading" class="flex-gap-1 items-center">
+                            <svg class="animate-spin h-3 w-3 text-light-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                        </div>
+                        <div v-else-if="balanceState[categoryName]?.[keyName]?.error" class="flex-gap-1 items-center" title="Failed to fetch balance">
+                            <svg class="h-3 w-3 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                            </svg>
+                        </div>
+                        <div v-else-if="balanceState[categoryName]?.[keyName]?.balance !== null && balanceState[categoryName]?.[keyName]?.balance !== undefined" class="flex-gap-1 items-center text-green-400" :title="`Balance: ${balanceState[categoryName]?.[keyName]?.balance}`">
+                            <img src="@/assets/img/sell.svg" width="9" class="opacity-60" />
+                            <span class="text-2xs font-bold tabular-nums">{{ formatBalance(balanceState[categoryName]?.[keyName]?.balance) }}</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
 
         <div class="text-light-400 mb-2 mt-4">Proxy Lists</div>
 
-        <div class="input-container relative-positioned z-tooltip">
+        <div class="form-field-labeled-sm mb-3 relative z-dropdown">
             <span class="w-1/3 text-light-300 font-medium text-xs">Checkout Proxies</span>
             <Dropdown
                 class="!w-2/3"
@@ -38,7 +55,7 @@
             />
         </div>
 
-        <div class="input-container relative-positioned z-dropdown">
+        <div class="form-field-labeled-sm mb-3 relative z-dropdown">
             <span class="w-1/3 text-light-300 font-medium text-xs">Queue Proxies</span>
             <Dropdown
                 class="!w-2/3"
@@ -50,163 +67,56 @@
                 :allowDefault="false"
             />
         </div>
-        <div class="flex mt-5 justify-between flex-row items-center quicksettings-bottom">
-            <div class="flex gap-3 items-center quicksettings-versions">
-                <div class="version-badge">
-                    <span class="version-label">Dashboard</span>
-                    <span class="version-number">v{{ version }}</span>
+        <div class="flex mt-5 justify-between flex-row items-center gap-3 flex-col sm:flex-row max-xs:gap-3 max-xs:items-stretch">
+            <div class="flex gap-2 items-center max-xs:justify-center max-xs:flex-wrap max-xs:gap-2 max-xs:w-full">
+                <div class="badge-version max-xs:flex-1 max-xs:min-w-0 text-center text-2xs">
+                    <span class="font-medium text-light-500">Dashboard</span>
+                    <span class="font-bold text-accent-green">v{{ version }}</span>
                 </div>
-                <div class="version-badge">
-                    <span class="version-label">Bot</span>
-                    <span class="version-number">v{{ ui.botVersion }}</span>
+                <div class="badge-version max-xs:flex-1 max-xs:min-w-0 text-center text-2xs">
+                    <span class="font-medium text-light-500">Bot</span>
+                    <span class="font-bold text-accent-green">v{{ ui.botVersion }}</span>
                 </div>
             </div>
 
-            <div class="flex gap-3 quicksettings-buttons">
+            <div class="flex gap-2 max-xs:w-full max-xs:flex-col max-xs:gap-2">
                 <button
-                    class="quicksettings-btn bg-dark-400 flex items-center justify-center gap-x-2"
+                    class="btn-modal h-9 text-2xs px-2 max-xs:w-full"
                     @click="checkBalances()"
                 >
-                    Balances <img src="@/assets/img/sell.svg" width="12" />
+                    Balances <img src="@/assets/img/sell.svg" width="10" class="ml-1" />
                 </button>
                 <button
-                    class="quicksettings-btn bg-dark-400 flex items-center justify-center gap-x-2"
+                    class="btn-modal h-9 text-2xs px-2 max-xs:w-full"
                     @click="done(true)"
                 >
-                    Save <img src="/img/save.svg" width="12" class="invert" />
+                    Save <img src="/img/save.svg" width="10" class="ml-1 invert" />
                 </button>
             </div>
         </div>
     </Modal>
 </template>
 <style lang="scss">
-.input-wrapper {
-    label {
-        @apply flex;
-    }
-}
-
-.transparent {
-    background: transparent !important;
-}
-
-.input-container {
-    @apply text-white bg-dark-500 mb-3 px-3 rounded-lg border-dark-550 border-2 flex items-center justify-between h-10;
-    overflow: visible;
-    transition: border-color 0.15s ease;
-
-    &:focus-within,
-    &:has(.dropdown.opened) {
-        border-color: oklch(0.72 0.15 145) !important;
-        outline: 1px solid oklch(0.72 0.15 145) !important;
-        outline-offset: 0;
-    }
-}
-
-.quick-settings-input {
-    @apply w-full h-full text-sm text-white bg-transparent border-0 outline-none px-2 py-1 transition-colors duration-150;
-
-    &:focus {
-        @apply outline-none border-0 shadow-none bg-transparent;
-    }
-
-    &:hover:not(:focus) {
-        background: transparent;
-    }
-
-    &::placeholder {
-        color: oklch(0.50 0 0);
-    }
-}
-
-.input-container:hover {
-    border-color: oklch(0.30 0 0);
-}
-
-.input-container:focus-within {
-    border-color: oklch(0.72 0.15 145) !important;
-    outline: 1px solid oklch(0.72 0.15 145);
-    outline-offset: 0;
-}
-
-/* iPhone portrait mode fixes */
-@media (max-width: 430px) and (orientation: portrait) {
-    .quicksettings-bottom {
-        flex-direction: column;
-        gap: 1rem;
-        align-items: stretch;
-    }
-    
-    .quicksettings-versions {
-        justify-content: center;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-    }
-    
-    .quicksettings-versions > div {
-        flex: 1;
-        min-width: 120px;
-        text-align: center;
-    }
-    
-    .quicksettings-buttons {
-        justify-content: center;
-        gap: 0.75rem;
-    }
-    
-    .quicksettings-buttons button {
-        width: 5rem;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        gap: 0.25rem;
-    }
-    
-    .quicksettings-buttons button img {
-        width: 12px;
-    }
-}
-
-/* Fix modal scrolling on mobile */
+/* Modal mobile scrolling uses :deep() due to teleported element */
 @media (max-width: 768px) {
-    :deep(.modal-mask) {
-        overflow-y: auto !important;
-        overflow-x: hidden !important;
-        touch-action: pan-y !important;
-        -webkit-overflow-scrolling: touch !important;
-    }
-
-    :deep(.component-modal) {
-        overflow-y: visible !important;
-        overflow-x: hidden !important;
-        touch-action: pan-y !important;
-        max-height: none !important;
-    }
+    :deep(.modal-mask) { overflow-y: auto !important; overflow-x: hidden !important; touch-action: pan-y !important; -webkit-overflow-scrolling: touch !important; }
+    :deep(.component-modal) { overflow-y: visible !important; overflow-x: hidden !important; touch-action: pan-y !important; max-height: none !important; }
 }
 
-/* Dropdowns are teleported to body, so modal can scroll normally */
-
-/* Dropdown styling fixes */
-:deep(.dropdown) {
+/* Dropdown styling uses :deep() due to teleport to body */
+:deep(.dropdown),
+:deep(.dropdown.opened),
+:deep(.dropdown:focus-within),
+:deep(.dropdown:hover) {
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
-    padding: 0 !important;
-    height: 40px !important;
-}
-
-/* Keep dropdown border hidden when opened (container handles border) */
-:deep(.dropdown.opened),
-:deep(.dropdown:focus-within) {
-    border: none !important;
     outline: none !important;
-    box-shadow: none !important;
 }
 
-:deep(.dropdown:hover),
-:deep(.dropdown:focus-within) {
-    border: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
+:deep(.dropdown) {
+    padding: 0 !important;
+    height: 40px !important;
 }
 
 :deep(.dropdown-display) {
@@ -219,6 +129,12 @@
     line-height: 1.25rem;
 }
 
+:deep(.dropdown-item) {
+    padding: 0.625rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
 :deep(.dropdown-menu-portal) {
     z-index: 26000 !important;
     max-height: 200px !important;
@@ -226,8 +142,8 @@
     overscroll-behavior: contain !important;
     touch-action: pan-y !important;
     -webkit-overflow-scrolling: touch !important;
-    border: 1px solid oklch(0.26 0 0) !important;
-    background: linear-gradient(135deg, oklch(0.18 0 0) 0%, oklch(0.20 0 0) 100%) !important;
+    @apply border border-dark-550 !important;
+    @apply bg-gradient-to-br from-dark-800 to-dark-750 !important;
     width: calc(100vw - 4rem) !important;
     max-width: 600px !important;
 
@@ -236,82 +152,21 @@
     }
 }
 
-:deep(.dropdown-item) {
-    padding: 0.625rem 1rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
-
-/* Ensure proper z-index stacking */
-.z-tooltip {
-    z-index: 100 !important;
-}
-
-.z-dropdown {
-    z-index: 90 !important;
-}
-
-/* QuickSettings compact buttons */
-.quicksettings-btn {
-    @apply rounded transition-all duration-150;
-    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;
+.api-key-input {
+    @apply w-full h-full text-sm text-white border-0 rounded-md;
+    @apply px-3 py-2;
+    @apply focus:outline-none;
+    background: oklch(26% 0 68deg);
 
-    &: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;
-    }
-
-    @media (max-width: 640px) {
-        height: 2.25rem;
-        width: 5rem;
-        font-size: 0.7rem;
-        padding: 0 0.5rem;
-
-        img {
-            width: 10px !important;
-        }
+    &::placeholder {
+        @apply text-light-500;
     }
 }
 
-/* Version badges */
-.version-badge {
-    @apply flex items-center gap-x-2 px-3 py-2 rounded-lg border;
-    background: oklch(0.2046 0 0);
-    border-color: oklch(0.2809 0 0);
-
-    .version-label {
-        @apply text-xs font-medium;
-        color: oklch(0.65 0 0);
-    }
-
-    .version-number {
-        @apply text-xs font-bold;
-        color: oklch(0.72 0.15 145);
-    }
-
-    @media (max-width: 640px) {
-        padding: 0.375rem 0.625rem;
-        gap: 0.375rem;
-
-        .version-label {
-            font-size: 0.625rem;
-        }
-
-        .version-number {
-            font-size: 0.625rem;
-        }
-    }
+.balance-indicator {
+    @apply absolute right-3 top-1/2 -translate-y-1/2;
+    @apply flex items-center justify-center;
+    @apply pointer-events-none;
 }
 </style>
 <script setup>
@@ -319,15 +174,14 @@ import Modal from "@/components/ui/Modal.vue";
 import { GearIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import { ref } from "vue";
-import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
-import { sendQuickConfig, getQuickConfig } from "@/stores/requests";
-import { getBalances, sendProxyList, getProxyLists } from "../../stores/requests";
+import { sendQuickConfig, getQuickConfig, getBalances, sendProxyList, getProxyLists } from "@/stores/requests";
 
 const version = __APP_VERSION__;
 const quickConfig = ref({});
 const ui = useUIStore();
 const proxyLists = ref(["loading..."]);
+const balanceState = ref({});
 
 const loadCurrentQuickConfig = async () => {
     try {
@@ -367,12 +221,82 @@ const loadProxyLists = async () => {
 };
 
 const checkBalances = async () => {
+    // Initialize loading state for all keys
+    Object.entries(quickConfig.value.keys || {}).forEach(([categoryName, category]) => {
+        if (!balanceState.value[categoryName]) {
+            balanceState.value[categoryName] = {};
+        }
+        Object.keys(category).forEach((keyName) => {
+            balanceState.value[categoryName][keyName] = {
+                loading: true,
+                error: false,
+                balance: null
+            };
+        });
+    });
+
     const balances = await getBalances();
-    if (typeof balances == "object")
+
+    if (typeof balances === "object") {
         Object.entries(balances).forEach(([service, balance]) => {
-            ui.showSuccess(`${service} balance: ${balance}`);
+            // Find which category and key this service belongs to
+            Object.entries(quickConfig.value.keys || {}).forEach(([categoryName, category]) => {
+                Object.keys(category).forEach((keyName) => {
+                    // Match service name (case-insensitive)
+                    if (keyName.toLowerCase().includes(service.toLowerCase()) ||
+                        service.toLowerCase().includes(keyName.toLowerCase())) {
+                        balanceState.value[categoryName][keyName] = {
+                            loading: false,
+                            error: false,
+                            balance: balance
+                        };
+                    }
+                });
+            });
+        });
+
+        // Mark any keys that didn't get a response as errors
+        Object.entries(balanceState.value).forEach(([categoryName, category]) => {
+            Object.entries(category).forEach(([keyName, state]) => {
+                if (state.loading) {
+                    balanceState.value[categoryName][keyName] = {
+                        loading: false,
+                        error: true,
+                        balance: null
+                    };
+                }
+            });
+        });
+
+        ui.showSuccess("Balances updated");
+    } else {
+        // Mark all as error
+        Object.entries(balanceState.value).forEach(([categoryName, category]) => {
+            Object.keys(category).forEach((keyName) => {
+                balanceState.value[categoryName][keyName] = {
+                    loading: false,
+                    error: true,
+                    balance: null
+                };
+            });
         });
-    else ui.showError("Could not get balances");
+        ui.showError("Could not get balances");
+    }
+};
+
+const formatBalance = (balance) => {
+    if (typeof balance === 'number') {
+        // Format large numbers with K, M suffixes if needed
+        if (balance >= 1000000) {
+            return (balance / 1000000).toFixed(1) + 'M';
+        } else if (balance >= 100000) {
+            return (balance / 1000).toFixed(0) + 'K';
+        } else if (balance >= 10000) {
+            return (balance / 1000).toFixed(1) + 'K';
+        }
+        return balance.toLocaleString();
+    }
+    return String(balance);
 };
 
 loadProxyLists();

package/src/components/Tasks/ScrapeVenue.vue

@@ -3,7 +3,7 @@
         <template #header> Scrape Venue <ScrapeIcon 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'"
@@ -11,27 +11,18 @@
                 />
             </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()">
             Scrape Venue
-            <ScrapeIcon />
+            <ScrapeIcon 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, ScrapeIcon } 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("");

package/src/components/Tasks/Stats.vue

@@ -1,64 +1,57 @@
 <template>
-    <div class="flex items-center gap-1 font-bold text-white lg:gap-3" v-if="ui.queueStats.show" :key="key">
+    <div class="flex-gap-1 items-center font-bold text-white lg:gap-3" v-if="ui.queueStats.show" :key="key">
         <div
             v-if="ui.queueStats.total"
-            class="stats-card flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg px-3 text-sm">
-            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+            class="stat-badge">
+            <h2 class="stat-header">
                 <img width="14px" src="@/assets/img/wildcard.svg" />
                 <span class="hidden md:inline">Total</span>
             </h2>
-            <span class="flex items-center justify-center whitespace-nowrap text-xs font-black text-light-400">
+            <span class="stat-value">
                 {{ ui.queueStats.total }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.queued"
-            class="stats-card flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg px-3 text-sm">
-            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+            class="stat-badge">
+            <h2 class="stat-header">
                 <SkiIcon />
                 <span class="hidden md:inline">Queued</span>
             </h2>
-            <span class="flex items-center justify-center whitespace-nowrap text-xs font-black text-light-400">
+            <span class="stat-value">
                 {{ ui.queueStats.queued }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.sleeping"
-            class="stats-card flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg px-3 text-sm">
-            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+            class="stat-badge">
+            <h2 class="stat-header">
                 <TimerIcon />
                 <span class="hidden md:inline">Sleeping</span>
             </h2>
-            <span class="flex items-center justify-center whitespace-nowrap text-xs font-black text-light-400">
+            <span class="stat-value">
                 {{ ui.queueStats.sleeping }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.nextQueuePasses.length > 0"
-            class="stats-card mb-2 flex h-8 min-w-0 items-center justify-between gap-2 rounded-xl p-2 text-sm lg:mb-5 lg:gap-3 lg:p-3">
-            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+            class="mb-2 flex h-8 min-w-0 items-center justify-between gap-2 rounded-xl p-2 text-sm lg:mb-5 lg:gap-3 lg:p-3 bg-dark-400 border-2 border-dark-550">
+            <h2 class="stat-header">
                 <CartIcon />
                 <span class="hidden sm:block">Next Passes</span>
                 <span class="block sm:hidden">Pass</span>
             </h2>
-            <span class="flex items-center truncate text-right text-xs font-black text-light-400">
+            <span class="flex items-center truncate text-right text-xs font-bold text-light-300">
                 {{ ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ") }}
             </span>
         </div>
-        <!-- <div
-            v-if="ui.queueStats.carts"
-            class="bg-dark-500 mb-2 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
-        >
-            <h2 class="font-bold text-sm flex items-center gap-1"><CartIcon />Carts</h2>
-            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.sleeping }} </span>
-        </div> -->
     </div>
 </template>
 
 <script setup>
 import { SkiIcon, TimerIcon, CartIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
-import { ref } from "vue";
+import { ref, onUnmounted } from "vue";
 
 const ui = useUIStore();
 
@@ -71,22 +64,10 @@ const getQueuePassAmount = (width) => {
 let key = ref(0);
 let queuePassAmount = ref(getQueuePassAmount(window.innerWidth));
 
-window.addEventListener("resize", () => (queuePassAmount.value = getQueuePassAmount(window.innerWidth)));
-</script>
-<style lang="scss" scoped>
-.stats-card {
-    @apply rounded;
-    background: oklch(0.2046 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-
-    h2 {
-        font-weight: 600;
-        color: oklch(0.90 0 0);
-    }
+const handleResize = () => (queuePassAmount.value = getQueuePassAmount(window.innerWidth));
+window.addEventListener("resize", handleResize);
 
-    span {
-        font-weight: 700;
-        color: oklch(0.90 0 0);
-    }
-}
-</style>
+onUnmounted(() => {
+    window.removeEventListener("resize", handleResize);
+});
+</script>