Merge pull request steam-bell-92#999 from jyotish6699/feat/playground-draft-management

feat: add playground draft management and session persistence

Author: steam-bell-92

web-app/css/styles.css

@@ -2711,6 +2711,23 @@ body.sidebar-active .sidebar-dock {
   gap: 6px;
 }
 
+.draft-selector {
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 0.75rem;
+}
+
+.draft-status {
+  padding: 8px 12px;
+  border-top: 1px solid var(--border);
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  background: var(--bg-glass);
+}
+
 .btn-panel-action {
   background: var(--bg-glass);
   border: 1px solid var(--border);

web-app/index.html

@@ -639,9 +639,39 @@ <h2 class="playground-title">🐍 Python Playground</h2>
             >
               <i aria-hidden="true" class="fas fa-stop"></i> Stop
             </button>
+            <select
+              id="draftSelector"
+              class="draft-selector"
+              aria-label="Select draft">
+              <option value="">Select Draft</option>
+            </select>
+
+            <button
+              id="saveDraft"
+              class="btn-panel-action"
+              type="button">
+              Save Draft
+            </button>
+
+            <button
+              id="loadDraft"
+              class="btn-panel-action"
+              type="button">
+              Load Draft
+            </button>
+
+            <button
+              id="deleteDraft"
+              class="btn-panel-action"
+              type="button">
+              Delete Draft
+            </button>
+          </div>
+          <div id="draftStatus" class="draft-status">
+            No draft loaded
           </div>
         </div>
-      </section>
+        </section>
     </main>
 
     <!-- Project Modal -->

web-app/js/playground.js

@@ -39,6 +39,8 @@
     var EXECUTION_TIMEOUT_MS = 5000;  // 5 seconds timeout
     var currentTimeoutId = null;
     var WORKER_SCRIPT = 'js/playground-worker.js';
+    var DRAFTS_STORAGE_KEY = 'playground_drafts';
+    var ACTIVE_DRAFT_KEY   = 'playground_active_draft';
 
     /* ================================================================
        3.  EXAMPLE CODE SNIPPETS
@@ -127,6 +129,11 @@
     var clearConsoleBtn   = $id('clearConsole');
     var clearEditorBtn    = $id('clearEditor');
     var loadExampleBtn    = $id('loadExample');
+    var draftSelector     = $id('draftSelector');
+    var saveDraftBtn      = $id('saveDraft');
+    var loadDraftBtn      = $id('loadDraft');
+    var deleteDraftBtn    = $id('deleteDraft');
+    var draftStatus       = $id('draftStatus');
 
     /* Guard – abort gracefully if playground HTML is absent */
     if (!playgroundSection || !runBtn || !stopBtn || !editorMount || !consoleEl) {
@@ -518,6 +525,47 @@
     });
     themeObserver.observe(document.documentElement, { attributes: true });
 
+    function getDrafts() {
+        try {
+            var data = localStorage.getItem(DRAFTS_STORAGE_KEY);
+            return data ? JSON.parse(data) : {};
+        } catch (e) {
+            return {};
+        }
+    }
+
+    function saveDrafts(drafts) {
+        try {
+            localStorage.setItem(DRAFTS_STORAGE_KEY, JSON.stringify(drafts));
+        } catch (e) {
+            console.error('Failed to save drafts:', e);
+        }
+    }
+
+    function setDraftStatus(message) {
+        if (!draftStatus) return;
+
+        draftStatus.textContent = message;
+    }
+
+    function refreshDraftSelector() {
+        if (!draftSelector) return;
+
+        var drafts = getDrafts();
+
+        draftSelector.innerHTML =
+            '<option value="">Select Draft</option>';
+
+        Object.keys(drafts)
+            .sort()
+            .forEach(function(name) {
+                var option = document.createElement('option');
+                option.value = name;
+                option.textContent = name;
+                draftSelector.appendChild(option);
+            });
+    }
+
     /* ================================================================
        6.  UI HELPER FUNCTIONS
     ================================================================ */
@@ -718,6 +766,13 @@
 
     if (clearEditorBtn) {
         clearEditorBtn.addEventListener('click', function () {
+            if (
+                !confirm(
+                    'Clear editor contents? Unsaved changes will be lost.'
+                )
+            ) {
+                return;
+            }
             setCode('');
             if (cmView) cmView.focus();
         });
@@ -731,6 +786,122 @@
         });
     }
 
+    if (saveDraftBtn) {
+        saveDraftBtn.addEventListener('click', function() {
+
+            var draftName = prompt(
+                'Enter a name for this draft:'
+            );
+
+            if (!draftName) return;
+
+            draftName = draftName.trim();
+
+            if (!draftName) return;
+
+            var drafts = getDrafts();
+
+            drafts[draftName] = {
+                code: getCode(),
+                updatedAt: new Date().toISOString()
+            };
+
+            saveDrafts(drafts);
+
+            try {
+                localStorage.setItem(ACTIVE_DRAFT_KEY, draftName);
+            } catch (e) {
+                console.error('Failed to save active draft:', e);
+            }
+
+            refreshDraftSelector();
+
+            draftSelector.value = draftName;
+
+            setDraftStatus(
+                'Draft "' + draftName + '" saved'
+            );
+        });
+    }
+
+    if (loadDraftBtn) {
+        loadDraftBtn.addEventListener('click', function() {
+
+            var selectedDraft = draftSelector.value;
+
+            if (!selectedDraft) {
+                setDraftStatus('Select a draft first');
+                return;
+            }
+
+            var drafts = getDrafts();
+
+            if (!drafts[selectedDraft]) {
+                setDraftStatus('Draft not found');
+                return;
+            }
+
+            setCode(
+                drafts[selectedDraft].code || ''
+            );
+
+            try {
+                localStorage.setItem(ACTIVE_DRAFT_KEY, selectedDraft);
+            } catch (e) {
+                console.error('Failed to save active draft:', e);
+            }
+
+            setDraftStatus(
+                'Loaded draft "' +
+                selectedDraft +
+                '"'
+            );
+        });
+    }
+
+    if (deleteDraftBtn) {
+        deleteDraftBtn.addEventListener('click', function() {
+
+            var selectedDraft = draftSelector.value;
+
+            if (!selectedDraft) {
+                setDraftStatus('Select a draft first');
+                return;
+            }
+
+            var confirmed = confirm(
+                'Delete draft "' +
+                selectedDraft +
+                '" ?'
+            );
+
+            if (!confirmed) return;
+
+            var drafts = getDrafts();
+
+            delete drafts[selectedDraft];
+
+            saveDrafts(drafts);
+
+            try {
+                var activeDraft = localStorage.getItem(ACTIVE_DRAFT_KEY);
+                if (activeDraft === selectedDraft) {
+                    localStorage.removeItem(ACTIVE_DRAFT_KEY);
+                }
+            } catch (e) {
+                console.error('Failed to remove active draft:', e);
+            }
+
+            refreshDraftSelector();
+
+            setDraftStatus(
+                'Deleted "' +
+                selectedDraft +
+                '"'
+            );
+        });
+    }
+
     /* ================================================================
        11.  BOOT
     ================================================================ */
@@ -746,4 +917,35 @@
         'print("Hello, World!")'
     );
 
+    /* Populate the draft selector dropdown */
+    refreshDraftSelector();
+
+    /* Restore last active draft if available */
+    try {
+        var activeDraft = localStorage.getItem(ACTIVE_DRAFT_KEY);
+
+        var drafts = getDrafts();
+
+        if (
+            activeDraft &&
+            drafts[activeDraft]
+        ) {
+
+            draftSelector.value =
+                activeDraft;
+
+            setCode(
+                drafts[activeDraft].code || ''
+            );
+
+            setDraftStatus(
+                'Restored "' +
+                activeDraft +
+                '"'
+            );
+        }
+    } catch (e) {
+        console.error('Failed to restore active draft:', e);
+    }
+
 }());

web-app/js/storage.js

@@ -28,4 +28,7 @@ if (typeof window !== 'undefined') {
     window.appStorage = storageHelpers;
 }
 
-export { saveToStorage, loadFromStorage, removeFromStorage };
+// Support ES6 module export if needed
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { saveToStorage, loadFromStorage, removeFromStorage };
+}