#6: Toasts work, sidebar is now virtualized

After getting a few of autosaves and 400 snapshots in the db, it was apparent that this would have performance issues. I mainly blame the ScrollArea from shadcn, but implemented the virtualization nonetheless.

Author: ackzell

src/App.vue

@@ -5,7 +5,6 @@ import YvToasts from './components/toasts/YvToasts.vue';
 import YvFooter from './components/YvFooter.vue';
 import YvRepl from './components/YvRepl.vue';
 import YvSidebar from './components/YvSidebar/YvSidebar.vue';
-import 'vue-sonner/style.css'; // vue-sonner v2 requires this import
 import '@vue/repl/style.css';
 
 function setVH() {
@@ -19,7 +18,7 @@ setVH();
 <template>
   <!-- <Drawer v-model:open="isDo" :default-open="true" direction="right"> -->
   <main class="repl-container" font-sans text-primary vaul-drawer-wrapper>
-    <YvToasts />
+    <YvToasts :stack-limit="4" />
     <YVHeader />
     <YvSidebar>
       <YvRepl />

src/components/YvSidebar/YvSidebar.vue

@@ -1,11 +1,29 @@
 <script setup lang="ts">
+import { useVirtualList } from '@vueuse/core';
 import { AnimatePresence, LayoutGroup, motion } from 'motion-v';
+import { computed, ref } from 'vue';
 import { useFileManagerStore } from '@/composables/useFileManagerStore';
-import ScrollArea from '../ui/scroll-area/ScrollArea.vue';
 import YvSessionSelector from '../YvVersioningDrawer/YvSessionSelector.vue';
 import YvSnapshot from '../YvVersioningDrawer/YvSnapshot.vue';
 
 const fm = useFileManagerStore();
+
+const computedList = computed(() => fm.snapshotsList);
+
+const { list, containerProps, wrapperProps } = useVirtualList(computedList, {
+  itemHeight: 112, // h-28 added to the snapshot component
+});
+
+const isScrolling = ref(false);
+let scrollTimeout: number;
+
+function handleScroll() {
+  isScrolling.value = true;
+  clearTimeout(scrollTimeout);
+  scrollTimeout = window.setTimeout(() => {
+    isScrolling.value = false;
+  }, 100);
+}
 </script>
 
 <template>
@@ -50,19 +68,26 @@ const fm = useFileManagerStore();
             No snapshots saved in this session
           </div>
 
-          <ScrollArea v-else flex="~ grow-1" h-full>
-            <ul mb-8>
+          <div
+            v-else
+            v-bind="containerProps"
+            class="p-2 overflow-auto" flex="~ grow-1"
+            h-full
+            @scroll="handleScroll"
+          >
+            <ul v-bind="wrapperProps" mb-8>
               <LayoutGroup>
                 <AnimatePresence mode="popLayout">
                   <YvSnapshot
-                    v-for="(snapshot) in fm.snapshotsList"
+                    v-for="({ data: snapshot }) in list"
                     :key="snapshot.id"
                     :snapshot="snapshot"
+                    :disable-animation="isScrolling"
                   />
                 </AnimatePresence>
               </LayoutGroup>
             </ul>
-          </ScrollArea>
+          </div>
         </div>
       </motion.div>
     </motion.div>

src/components/YvVersioningDrawer/YvSnapshot.vue

@@ -16,6 +16,7 @@ import YvButton from './YvButton.vue';
 
 type YVTimelineEntryProps = {
   snapshot: Snapshot;
+  disableAnimation?: boolean;
 };
 
 type TypeColorConfig = {
@@ -65,7 +66,8 @@ const didFilesChange = computed(() => {
     :initial="{ opacity: 0, scale: 0 }"
     :animate="{ opacity: 1, scale: 1 }"
     :exit="{ opacity: 0, scale: 0 }"
-    px-4 layout
+    :transition="props.disableAnimation ? { duration: 0 } : { duration: 0.25, ease: 'easeOut' }"
+    px-4 layout h-28
     class="group/snapshot hover-bg-accent/60 dark:hover-bg-accent/10"
   >
     <div flex="~ items-center justify-between" mb-1>
@@ -218,16 +220,16 @@ const didFilesChange = computed(() => {
 }
 
 .dark .v-popper--theme-diff-card .v-popper__inner {
-  border: var(--colors-neutral-600);
+  border: var(--colors-neutral-600) !important;;
 }
 
 .dark .v-popper--theme-diff-card .v-popper__arrow-outer {
-  border-color: var(--colors-neutral-600);
+  border-color: var(--colors-neutral-600) !important;;
 
 }
 
 .dark .v-popper--theme-diff-card .v-popper__arrow-inner {
-  border-color: var(--colors-neutral-600);
+  border-color: var(--colors-neutral-600) !important;;
 
 }
 </style>

src/components/toasts/YvToasts.vue

@@ -1,9 +1,18 @@
 <script lang="ts" setup>
-import { ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import { useToastsStore } from './useToastsStore';
 
+const props = defineProps<YvToastsProps>();
+
 const { activeToasts, toast } = useToastsStore();
 
+type YvToastsProps = {
+  /**
+   * Number of toasts visible by default
+   */
+  stackLimit?: number;
+};
+
 // Store timeout data for each toast
 const toastTimers = ref(new Map<string, {
   timeoutId: number;
@@ -13,7 +22,6 @@ const toastTimers = ref(new Map<string, {
   stop: () => void;
 }>());
 
-// Default durations for different toast types (in milliseconds)
 const defaultDurations = {
   success: 4000,
   error: 6000,
@@ -51,17 +59,14 @@ function handleToastClick(toastId: string) {
 }
 
 function createAutoDissmiss(toastId: string, type: string, duration?: number) {
-  // Check if toast should auto-dismiss
   const shouldAutoDismiss = duration !== Infinity && duration !== 0;
   if (!shouldAutoDismiss)
     return null;
 
-  // Get duration
   const autoDismissDelay = duration
     || defaultDurations[type as keyof typeof defaultDurations]
     || defaultDurations.info;
 
-  // Create timeout
   const startTime = Date.now();
   const timeoutId = window.setTimeout(() => {
     toast.dismiss(toastId);
@@ -83,32 +88,23 @@ function createAutoDissmiss(toastId: string, type: string, duration?: number) {
 function pauseAutoDissmiss(toastId: string) {
   const timer = toastTimers.value.get(toastId);
   if (timer) {
-    // Clear the current timeout
     clearTimeout(timer.timeoutId);
-
-    // Calculate remaining time
     const elapsed = Date.now() - timer.startTime;
     timer.remainingTime = Math.max(0, timer.originalDuration - elapsed);
-
     toastTimers.value.set(toastId, timer);
   }
 }
 
 function resumeAutoDissmiss(toastId: string) {
   const timer = toastTimers.value.get(toastId);
   if (timer && timer.remainingTime > 0) {
-    // Create new timeout with remaining time
     timer.startTime = Date.now();
     timer.originalDuration = timer.remainingTime;
-
     timer.timeoutId = window.setTimeout(() => {
       toast.dismiss(toastId);
       toastTimers.value.delete(toastId);
     }, timer.remainingTime);
-
-    // Update the stop function to reference the new timeoutId
     timer.stop = () => clearTimeout(timer.timeoutId);
-
     toastTimers.value.set(toastId, timer);
   }
 }
@@ -117,7 +113,6 @@ function resumeAutoDissmiss(toastId: string) {
 watchEffect(() => {
   const activeToastIds = new Set(activeToasts.map(t => t.id));
 
-  // Set up timers for new toasts
   activeToasts.forEach((activeToast) => {
     if (!toastTimers.value.has(activeToast.id)) {
       createAutoDissmiss(
@@ -128,7 +123,6 @@ watchEffect(() => {
     }
   });
 
-  // Clean up timers for removed toasts
   Array.from(toastTimers.value.keys()).forEach((toastId) => {
     if (!activeToastIds.has(toastId)) {
       const timer = toastTimers.value.get(toastId);
@@ -139,18 +133,37 @@ watchEffect(() => {
     }
   });
 });
+
+// --- STACKING LOGIC ---
+const stackLimit = props.stackLimit || 4; // Number of toasts visible by default
+const isStackHovered = ref(false);
+
+const visibleToasts = computed(() => {
+  if (isStackHovered.value)
+    return activeToasts;
+  return activeToasts.slice(0, stackLimit);
+});
+
+const hiddenCount = computed(() => {
+  const count = activeToasts.length - stackLimit;
+  return count > 0 ? count : 0;
+});
 </script>
 
 <template>
   <div class="fixed top-0 left-0 right-0 z-[13] pointer-events-none">
-    <div class="flex flex-col items-center gap-2 p-4 pt-[55px]">
+    <div
+      class="flex flex-col items-center gap-2 p-4 pt-[55px]"
+      @mouseenter="isStackHovered = true"
+      @mouseleave="isStackHovered = false"
+    >
       <TransitionGroup
         name="toast"
         tag="div"
         class="flex flex-col items-center gap-2"
       >
         <div
-          v-for="activeToast in activeToasts"
+          v-for="activeToast in visibleToasts"
           :key="activeToast.id"
           sc-toast-base bg="opacity-90 background"
           flex="~ items-center gap-3"
@@ -162,13 +175,10 @@ watchEffect(() => {
           @mouseenter="pauseAutoDissmiss(activeToast.id)"
           @mouseleave="resumeAutoDissmiss(activeToast.id)"
         >
-          <!-- Icon -->
           <span
             class="inline-block text-sm align-middle"
             :class="getToastIcon(activeToast.type || 'info')"
           />
-
-          <!-- Content -->
           <div class="flex-1">
             <div v-if="activeToast.title" class="font-medium">
               {{ activeToast.title }}
@@ -183,6 +193,13 @@ watchEffect(() => {
           </div>
         </div>
       </TransitionGroup>
+
+      <div
+        v-if="hiddenCount > 0 && !isStackHovered"
+        class="text-xs cursor-pointer text-neutral dark:text-neutral-400/90"
+      >
+        +{{ hiddenCount }} more
+      </div>
     </div>
   </div>
 </template>

src/components/toasts/useToastsStore.ts

@@ -1,23 +1,8 @@
-import type { Ref } from 'vue';
-
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { reactive } from 'vue';
 
 type ToastType = 'success' | 'error' | 'warning' | 'info';
 
-type ToastsStore = {
-  activeToasts: Ref<Toast[]>;
-
-  toast: {
-    success: (title: string, toast?: Omit<Partial<Toast>, 'id'>) => string;
-    error: (title: string, toast?: Omit<Partial<Toast>, 'id'>) => string;
-    warning: (title: string, toast?: Omit<Partial<Toast>, 'id'>) => string;
-    info: (title: string, toast?: Omit<Partial<Toast>, 'id'>) => string;
-
-    dismiss: (id: string) => void;
-  };
-};
-
 type Toast = {
   id: string;
   type: ToastType;
@@ -33,19 +18,23 @@ const defaultToast: Omit<Toast, 'id'> = {
   duration: 4000,
 };
 
-export const useToastsStore = defineStore<'toastStore', ToastsStore>('toastStore', (): ToastsStore => {
-  const activeToasts = ref<Toast[]>([]);
+export const useToastsStore = defineStore('toastStore', () => {
+  const activeToasts = reactive<Toast[]>([]);
 
   function addToast(toast: Omit<Partial<Toast>, 'id'>): string {
     const id = crypto.randomUUID().slice(0, 8);
-    activeToasts.value.push({ id, ...defaultToast, ...toast });
+    activeToasts.push({ id, ...defaultToast, ...toast });
     return id;
   };
 
   function dismiss(id: string): void {
-    const index = activeToasts.value.findIndex(t => t.id === id);
+    const index = activeToasts.findIndex(t => t.id === id);
     if (index > -1)
-      activeToasts.value.splice(index, 1);
+      activeToasts.splice(index, 1);
+  };
+
+  function dismissAll(): void {
+    activeToasts.splice(0);
   };
 
   function success(title: string, toast?: Omit<Partial<Toast>, 'id'>): string {
@@ -73,6 +62,8 @@ export const useToastsStore = defineStore<'toastStore', ToastsStore>('toastStore
       info,
       warning,
       dismiss,
+      dismissAll,
     },
+
   };
 });

src/composables/useFileManagerStore.ts

@@ -40,6 +40,7 @@ export const useFileManagerStore = defineStore('file-manager', () => {
         currentSession.value = await sessions.create(`Session ${crypto.randomUUID().slice(0, 8)}`);
       }
 
+      // Use the latest available session from standalone mode
       if (!currentSession.value) {
         currentSession.value = await sessions.getLatestSession();
       }
@@ -51,7 +52,11 @@ export const useFileManagerStore = defineStore('file-manager', () => {
 
       // most likely the yv-lesson.json file is not available
       if (error) {
-        console.warn('[yehyecoa-vue]: Server reported an issue:', error);
+        // we switched lessons in amoxtli-vue
+        // clear last lesson's toasts
+        // toast.dismissAll();
+
+        console.error('[yehyecoa-vue]: Server reported an issue:', error);
         errorMessage.value = error;
         toast.error('Error', {
           description: error,
@@ -131,6 +136,9 @@ export const useFileManagerStore = defineStore('file-manager', () => {
 
   watch(currentSession, (newSession, _, onCleanup) => {
     if (newSession) {
+      // console.log('[yehyecoa-vue]: New active session:', newSession);
+      // toast.dismissAll();
+
       const subscription = snapshots.liveQuerySnapshots(newSession.id).subscribe((snaps) => {
         snapshotsList.value = snaps;
       });