From e59feebcf1846507f48086cf8944b47b2e38c212 Mon Sep 17 00:00:00 2001
From: Oleh Omelchenko <ptrvtch@protonmail.com>
Date: Sat, 25 Jan 2025 19:43:30 +0200
Subject: [PATCH] feat: add creation date to snippets and sort by date in UI

---
 src/SnippetManager.js | 4 +++-
 src/UIManager.js      | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/SnippetManager.js b/src/SnippetManager.js
index 9cbde34..441faee 100644
--- a/src/SnippetManager.js
+++ b/src/SnippetManager.js
@@ -62,6 +62,7 @@ export class SnippetManager {
         const newSnippet = {
             id,
             name,
+            createdAt: Date.now(),
             content: {
                 "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
                 "description": "New visualization",
@@ -176,7 +177,8 @@ export class SnippetManager {
         const storedSnippets = this.storageManager.loadSnippets();
         return storedSnippets.map(snippet => ({
             ...snippet,
-            comment: snippet.comment || ''
+            comment: snippet.comment || '',
+            createdAt: snippet.createdAt || Date.now() // Ensure backwards compatibility
         }));
     }
 
diff --git a/src/UIManager.js b/src/UIManager.js
index 873531e..dab14ae 100644
--- a/src/UIManager.js
+++ b/src/UIManager.js
@@ -37,6 +37,9 @@ export class UIManager {
         const container = document.getElementById('snippet-list');
         container.innerHTML = '';
 
+        // Sort snippets by creation date (most recent first)
+        snippets.sort((a, b) => b.createdAt - a.createdAt);
+
         snippets.forEach(snippet => {
             const div = document.createElement('div');
             div.className = `snippet-item ${snippet.id === currentSnippetId ? 'active' : ''}`;
@@ -48,6 +51,7 @@ export class UIManager {
             const contentDiv = document.createElement('div');
             contentDiv.className = 'snippet-content';
             contentDiv.textContent = `${indicator} ${snippet.name}`;
+            contentDiv.title = `Created at: ${new Date(snippet.createdAt).toLocaleString()}`;
             div.appendChild(contentDiv);
 
             const buttonsDiv = document.createElement('div');