#6: Small updates to the UI, showing exact creation time on hovering the time ago. Saving a snapshot with the contents of the repl right before restoring an existing snapshot.

Author: ackzell

src/components/YvVersioningDrawer/YvSnapshot.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Snapshot, SnapshotType } from '@/db';
 import { useTimeAgoIntl } from '@vueuse/core';
-import { Menu } from 'floating-vue';
+import { Menu, Tooltip } from 'floating-vue';
 import { motion } from 'motion-v';
 import { CodeDiff } from 'v-code-diff';
 import { computed } from 'vue';
@@ -120,12 +120,21 @@ const didFilesChange = computed(() => {
         </p>
       </div>
 
-      <span
-        inline-block
-        text="xs neutral-400 dark:neutral-500"
-      >
-        {{ useTimeAgoIntl(props.snapshot.createdAt) }}
-      </span>
+      <Tooltip placement="bottom">
+        <span
+          cursor-pointer
+          inline-block
+          text="xs neutral-400 dark:neutral-500"
+        >
+          {{ useTimeAgoIntl(props.snapshot.createdAt) }}
+        </span>
+
+        <template #popper>
+          <p text="xs">
+            {{ new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(props.snapshot.createdAt) }}
+          </p>
+        </template>
+      </Tooltip>
     </div>
 
     <div
@@ -146,7 +155,7 @@ const didFilesChange = computed(() => {
       :class="typeColors.line"
       pl-5 pb-3 ml-1
     >
-      <p font-bold class="text-foreground/70">
+      <p font-bold text-xs class="text-foreground/70">
         {{ props.snapshot.message }}
       </p>
 

src/components/toasts/YvToasts.vue

@@ -168,7 +168,7 @@ const hiddenCount = computed(() => {
           :key="activeToast.id"
           sc-toast-base bg="opacity-90 background"
           flex="~ items-center gap-3"
-          p-2 cursor-pointer select-none
+          py-2 px-4 cursor-pointer select-none
           hover="opacity-100 scale-105"
           transition="transition-all duration-200 ease-in-out"
           class="border rounded-lg pointer-events-auto active:scale-98"

src/composables/useFileManagerStore.ts

@@ -125,6 +125,12 @@ export const useFileManagerStore = defineStore('file-manager', () => {
   }
 
   async function restoreSnapshot(snapshot: Snapshot): Promise<void> {
+    // save the current contents of the repl in a snapshot before updating the repl
+    await saveSnapshot({
+      type: 'auto',
+      message: 'Before a snapshot was restored',
+    });
+
     replStore.setFiles(snapshot.files);
   }