@necrolab/dashboard 0.5.30 → 0.5.31

package/package.json

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

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

@@ -30,7 +30,7 @@
             </div>
         </Header>
         <RecycleScroller
-            v-if="props.accounts.length !== 0"
+            v-if="props.accounts.length !== 0 && useVirtualScroller"
             class="hidden-scrollbars touch-pan-y overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll scrollable"
             :style="{ height: dynamicTableHeight, maxHeight: dynamicTableHeight }"
             :items="virtualAccounts"
@@ -46,6 +46,20 @@
                 </div>
             </template>
         </RecycleScroller>
+        <div
+            v-else-if="props.accounts.length !== 0"
+            class="hidden-scrollbars touch-pan-y overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll scrollable"
+            :style="{ maxHeight: dynamicTableHeight }">
+            <div
+                v-for="(item, index) in virtualAccounts"
+                :key="item.virtualKey"
+                class="min-h-16 flex-shrink-0 hover:bg-dark-550">
+                <Account
+                    :class="getRowClass(index)"
+                    :account="item.account"
+                    :privacy="props.privacy" />
+            </div>
+        </div>
         <EmptyState v-else :icon="MailIcon" message="No accounts found" subtitle="Create accounts to get started" />
     </div>
 </template>
@@ -89,6 +103,8 @@ const virtualAccounts = computed(() =>
         virtualKey: String(account.id ?? account.email ?? "account")
     }))
 );
+const ACCOUNT_VIRTUALIZE_THRESHOLD = 80;
+const useVirtualScroller = computed(() => props.accounts.length > ACCOUNT_VIRTUALIZE_THRESHOLD);
 
 const handleVirtualWheel = (event) => {
     const target = event.currentTarget;

package/src/components/Editors/Profile/ProfileView.vue

@@ -34,7 +34,7 @@
             </div>
         </Header>
         <RecycleScroller
-            v-if="props.profiles.length !== 0"
+            v-if="props.profiles.length !== 0 && useVirtualScroller"
             class="hidden-scrollbars touch-pan-y overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll scrollable"
             :style="{ height: dynamicTableHeight, maxHeight: dynamicTableHeight }"
             :items="virtualProfiles"
@@ -50,6 +50,20 @@
                 </div>
             </template>
         </RecycleScroller>
+        <div
+            v-else-if="props.profiles.length !== 0"
+            class="hidden-scrollbars touch-pan-y overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll scrollable"
+            :style="{ maxHeight: dynamicTableHeight }">
+            <div
+                v-for="(item, index) in virtualProfiles"
+                :key="item.virtualKey"
+                class="min-h-16 flex-shrink-0 hover:bg-dark-550">
+                <Profile
+                    :class="getRowClass(index)"
+                    :profile="item.profile"
+                    :privacy="props.privacy" />
+            </div>
+        </div>
         <EmptyState v-else :icon="ProfileIcon" message="No profiles found" subtitle="Create profiles to get started" />
     </div>
 </template>
@@ -88,6 +102,8 @@ const virtualProfiles = computed(() =>
         virtualKey: String(profile.id ?? `${profile.profileName ?? "profile"}-${profile.cardNumber ?? ""}`)
     }))
 );
+const PROFILE_VIRTUALIZE_THRESHOLD = 80;
+const useVirtualScroller = computed(() => props.profiles.length > PROFILE_VIRTUALIZE_THRESHOLD);
 
 const handleVirtualWheel = (event) => {
     const target = event.currentTarget;

package/src/components/Tasks/TaskView.vue

@@ -35,9 +35,9 @@
             </div>
         </Header>
         <DynamicScroller
-            v-if="virtualTaskItems.length"
+            v-if="virtualTaskItems.length && useVirtualScroller"
             class="hidden-scrollbars touch-pan-y min-h-0 overflow-y-auto overflow-x-hidden scrollable"
-            :style="{ height: dynamicTableHeight, maxHeight: dynamicTableHeight }"
+            :style="{ height: maxTableHeight, maxHeight: maxTableHeight }"
             :items="virtualTaskItems"
             :min-item-size="virtualMinItemSize"
             :buffer="virtualBuffer"
@@ -66,10 +66,25 @@
                 </DynamicScrollerItem>
             </template>
         </DynamicScroller>
+        <div
+            v-else-if="virtualTaskItems.length"
+            class="hidden-scrollbars touch-pan-y min-h-0 overflow-y-auto overflow-x-hidden scrollable"
+            :style="{ maxHeight: maxTableHeight }">
+            <div
+                v-for="(item, index) in virtualTaskItems"
+                :key="item.taskId"
+                class="shrink-0 border-b border-dark-650 min-h-14.5 md:min-h-17.25 has-[.event-details]:min-h-18.75 mobile-portrait:min-h-12.5 transition-colors duration-150 ease-in-out hover:!bg-dark-550">
+                <Task
+                    v-if="props.tasks[item.taskId]"
+                    :task="props.tasks[item.taskId]"
+                    :preferEventName="props.preferEventName"
+                    :class="getRowClass(index)" />
+            </div>
+        </div>
         <div
             v-else
             class="empty-state flex flex-col items-center justify-center py-8 text-center bg-dark-400 text-light-500 text-sm font-medium"
-            :style="{ minHeight: dynamicTableHeight, maxHeight: dynamicTableHeight }">
+            :style="{ minHeight: emptyStateHeight }">
             <div
                 v-if="
                     !ui.queueStats.queued && !ui.queueStats.sleeping && ui.queueStats.nextQueuePasses.length === 0
@@ -237,6 +252,9 @@ onUnmounted(() => {
 
 const virtualMinItemSize = computed(() => (windowWidth.value <= 768 ? 58 : 69));
 const virtualBuffer = computed(() => virtualMinItemSize.value * 8);
+const TASK_VIRTUALIZE_THRESHOLD = 80;
+const useVirtualScroller = computed(() => virtualTaskItems.value.length > TASK_VIRTUALIZE_THRESHOLD);
+const emptyStateHeight = computed(() => `${virtualMinItemSize.value * 2}px`);
 
 const handleVirtualWheel = (event) => {
     const target = event.currentTarget;
@@ -244,7 +262,7 @@ const handleVirtualWheel = (event) => {
     target.scrollTop += event.deltaY;
 };
 
-const dynamicTableHeight = computed(() => {
+const maxTableHeight = computed(() => {
     // Detect PWA mode (standalone display)
     const isPWA = window.matchMedia('(display-mode: standalone)').matches;
 
@@ -280,12 +298,10 @@ const dynamicTableHeight = computed(() => {
 
     // Calculate row height based on screen size
     const rowHeight = windowWidth.value <= 768 ? 58 : 69; // Mobile vs desktop row height
-    const minRowsToShow = 2; // Always show at least 2 rows
-    const minHeight = minRowsToShow * rowHeight;
-
-    // Calculate how many complete rows can fit
-    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight) + 1;
-    const exactHeight = maxCompleteRows * rowHeight;
+    const safeAvailableHeight = Math.max(availableHeight, rowHeight * 2);
+    const desktopBonusRows = windowWidth.value >= 1024 ? 1 : 0;
+    const maxRowsThatFit = Math.max(1, Math.floor(safeAvailableHeight / rowHeight) + desktopBonusRows);
+    const exactHeight = maxRowsThatFit * rowHeight;
 
     return exactHeight + "px";
 });

package/src/composables/useDynamicTableHeight.js

@@ -1,14 +1,15 @@
-import { computed } from "vue";
+import { computed, unref } from "vue";
 import { useWindowDimensions } from "./useWindowDimensions";
 
-export function useDynamicTableHeight(options = {}) {
+export function useDynamicTableHeight(options = {}, itemCount = null) {
     const { windowHeight, windowWidth } = useWindowDimensions();
 
     const {
         topReservedSpace = options.TOP_RESERVED_SPACE ?? 243,
         bottomBuffer = options.BOTTOM_BUFFER ?? 16,
         rowHeight = options.ROW_HEIGHT ?? 64,
-        minRowsToShow = options.MIN_ROWS_TO_SHOW ?? 2
+        minRowsToShow = options.MIN_ROWS_TO_SHOW ?? 2,
+        minRowsWhenEmpty = options.MIN_ROWS_WHEN_EMPTY ?? minRowsToShow
     } = options;
 
     const dynamicTableHeight = computed(() => {
@@ -22,9 +23,25 @@ export function useDynamicTableHeight(options = {}) {
         const extraBuffer = isPWA && isMobile ? (isIPhonePortrait ? 24 : 40) : 0;
 
         const availableHeight = windowHeight.value - topReservedSpace - bottomBuffer - extraBuffer;
-        const minHeight = minRowsToShow * rowHeight;
-        const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
-        const exactHeight = maxCompleteRows * rowHeight;
+        const safeAvailableHeight = Math.max(availableHeight, rowHeight);
+        const maxRowsThatFit = Math.max(1, Math.floor(safeAvailableHeight / rowHeight));
+
+        if (itemCount === null || itemCount === undefined) {
+            const minRows = Math.max(1, minRowsToShow);
+            const exactHeight = Math.max(minRows, maxRowsThatFit) * rowHeight;
+            return exactHeight + "px";
+        }
+
+        const count = Number(unref(itemCount) || 0);
+        let targetRows = Math.max(1, minRowsWhenEmpty);
+
+        if (count > 0) {
+            targetRows = Math.max(1, Math.min(count, maxRowsThatFit));
+        } else {
+            targetRows = Math.min(maxRowsThatFit, Math.max(1, minRowsWhenEmpty));
+        }
+
+        const exactHeight = targetRows * rowHeight;
 
         return exactHeight + "px";
     });