#6: Guarding against multiple any kind of save with duplicate file contents

Also fixing toast behavior. It wasn't stacking properly if there was a permanent toast because it threw off the calculation of toasts to render next.

Author: ackzell

src/components/YvRepl.vue

@@ -7,7 +7,7 @@ import { useIntervalFn } from '@vueuse/core';
 import { useFileManagerStore } from '@/composables/useFileManagerStore';
 import { useSettingsStore } from '@/composables/useSettingsStore';
 
-const AUTO_SAVE_INTERVAL_MINUTES = 3 * 60 * 1000;
+const AUTO_SAVE_INTERVAL_MINUTES = 10 * 60 * 1000;
 
 const { settings } = useSettingsStore();
 const fm = useFileManagerStore();

src/components/YvSidebar/YvSidebar.vue

@@ -71,8 +71,9 @@ function handleScroll() {
           <div
             v-else
             v-bind="containerProps"
-            class="p-2 overflow-auto" flex="~ grow-1"
-            h-full
+            flex="~ grow-1"
+            overflow-auto
+            h-full pt-4
             @scroll="handleScroll"
           >
             <ul v-bind="wrapperProps" mb-8>

src/components/YvVersioningDrawer/YvSnapshot.vue

@@ -68,7 +68,7 @@ const didFilesChange = computed(() => {
     :exit="{ opacity: 0, scale: 0 }"
     :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"
+    class="group/snapshot hover-bg-accent/60 dark:hover-bg-accent/20"
   >
     <div flex="~ items-center justify-between" mb-1>
       <div flex gap-0 items-center>

src/components/toasts/YvToasts.vue

@@ -135,18 +135,19 @@ watchEffect(() => {
 });
 
 // --- STACKING LOGIC ---
-const stackLimit = props.stackLimit || 4; // Number of toasts visible by default
+const stackLimit = computed(() => props.stackLimit ?? 4);
 const isStackHovered = ref(false);
 
 const visibleToasts = computed(() => {
   if (isStackHovered.value)
     return activeToasts;
-  return activeToasts.slice(0, stackLimit);
+
+  // Always show the newest ones
+  return activeToasts.slice(-stackLimit.value);
 });
 
 const hiddenCount = computed(() => {
-  const count = activeToasts.length - stackLimit;
-  return count > 0 ? count : 0;
+  return Math.max(0, activeToasts.length - visibleToasts.value.length);
 });
 </script>
 

src/components/toasts/useToastsStore.ts

@@ -9,21 +9,28 @@ type Toast = {
   title: string;
   description: string;
   duration?: number;
+  createdTimestamp: number;
 };
 
 const defaultToast: Omit<Toast, 'id'> = {
   type: 'info',
   title: '',
   description: '',
   duration: 4000,
+  createdTimestamp: 0,
 };
 
 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.push({ id, ...defaultToast, ...toast });
+    activeToasts.push({
+      id,
+      ...defaultToast,
+      ...toast,
+      createdTimestamp: Date.now(),
+    });
     return id;
   };
 

src/composables/useFileManagerStore.ts

@@ -89,9 +89,9 @@ export const useFileManagerStore = defineStore('file-manager', () => {
       return;
     }
 
-    const latestManualSnapshot = await snapshots.getLatestManualSnapshot();
+    const latestSnapshotByType = await snapshots.getLatestByType(snapshot.type);
 
-    if (snapshot.type !== 'manual' || !latestManualSnapshot) {
+    if (!latestSnapshotByType) {
       snapshots.create({
         sessionId: currentSession.value.id,
         files: replStore.getFiles(),
@@ -102,7 +102,7 @@ export const useFileManagerStore = defineStore('file-manager', () => {
       sessions.changeUpdatedAt(currentSession.value.id, new Date());
     }
     else {
-      const didFilesChange = replStore.getFiles()['App.vue'] !== latestManualSnapshot.files['App.vue'];
+      const didFilesChange = replStore.getFiles()['App.vue'] !== latestSnapshotByType.files['App.vue'];
 
       if (didFilesChange) {
         snapshots.create({
@@ -113,11 +113,14 @@ export const useFileManagerStore = defineStore('file-manager', () => {
         });
 
         sessions.changeUpdatedAt(currentSession.value.id, new Date());
-        toast.success('Snapshot saved');
+        if (snapshot.type === 'manual') {
+          toast.success('Snapshot saved');
+        }
       }
       else {
-        // toast.info('Nothing new to save', { duration: Infinity });
-        toast.info('Nothing new to save');
+        if (snapshot.type === 'manual') {
+          toast.info('Nothing new to save');
+        }
       }
     }
   }

src/db/snapshots.ts

@@ -1,14 +1,14 @@
 import type { Observable } from 'dexie';
 
-import type { Snapshot } from '@/db';
+import type { Snapshot, SnapshotType } from '@/db';
 import { liveQuery } from 'dexie';
 
 import { db } from '@/db';
 
 export const snapshots = {
   create,
   liveQuerySnapshots,
-  getLatestManualSnapshot,
+  getLatestByType,
   deleteSnapshot,
 };
 
@@ -31,8 +31,8 @@ function liveQuerySnapshots(sessionId: number): Observable<Snapshot[]> {
   return liveQuery(async () => await db.snapshots.where({ sessionId }).reverse().sortBy('createdAt'));
 }
 
-async function getLatestManualSnapshot(): Promise<Snapshot | undefined> {
-  return (await db.snapshots.where({ type: 'manual' }).sortBy('createdAt')).pop();
+async function getLatestByType(type: SnapshotType): Promise<Snapshot | undefined> {
+  return (await db.snapshots.where({ type }).sortBy('createdAt')).pop();
 }
 
 function deleteSnapshot(snapshotId: number): Promise<void> {