feat: fix template toggle with session hash + add confirmation dialog

- Extract clearCloudSession() helper in cloud-share.js
- Call clearCloudSession() from selectTemplate() to clear stale session state
- Add confirmation dialog before replacing editor content with a template
- Confirmation only appears when editor has meaningful content
- Undo (Ctrl+Z) recovers previous content after template load

Author: ijbo

changelogs/CHANGELOG-template-confirm.md

@@ -0,0 +1,44 @@
+# Template Toggle Fix + Confirmation Dialog
+
+## Summary
+
+Fixed template switching bug when cloud session IDs are in the URL, and added a
+confirmation dialog before replacing editor content with a new template.
+
+## Changes
+
+### Bug Fix — Template toggle broken with cloud session hash
+
+When a cloud auto-save session hash (`#id=...&k=...`) was in the URL, toggling
+between template categories stopped working correctly.
+
+**Root cause:** `selectTemplate()` never cleared the shared-doc state
+(`readOnly`, `isViewingSharedDoc`, URL hash, cloud doc keys in localStorage).
+
+**Fix:** Extracted a reusable `clearCloudSession()` helper in `cloud-share.js`
+that clears all shared-doc state and stops the cloud-save timer. Called from
+`selectTemplate()` in `templates.js`.
+
+### Feature — Confirmation dialog before template replacement
+
+When the user selects a template while the editor has meaningful content (non-empty
+and not the default Feature Showcase), a confirmation dialog now appears:
+
+- **"Replace editor content?"** with the template name
+- **Cancel** button preserves current content
+- **Use Template** button loads the template
+- Undo hint reminds user they can `Ctrl+Z` to recover
+- Styled consistently with the existing clear-confirm overlay
+
+If the editor is empty or has the default content, the template loads immediately
+without prompting.
+
+## Files Modified
+
+- `js/cloud-share.js` — Extracted `clearCloudSession()`, refactored banner handlers
+- `js/templates.js` — Added confirmation dialog, refactored into `loadTemplate()` + `showTemplateConfirm()` + `selectTemplate()`
+
+## Testing
+
+- 13/13 Playwright tests pass (8 UI panel + 5 integration)
+- Browser-verified: category toggling, session hash clearing, confirmation flow

js/cloud-share.js

@@ -363,23 +363,32 @@
         document.body.classList.remove('shared-view-active');
         M.markdownEditor.readOnly = false;
     }
-    document.getElementById('shared-banner-edit').addEventListener('click', function () {
+
+    /**
+     * Clear all cloud/shared-doc session state so subsequent edits create a
+     * NEW document instead of overwriting the original shared one.
+     * Called when: user clicks Edit/Close on shared banner, or loads a template.
+     */
+    function clearCloudSession() {
         hideSharedBanner();
-        // Clear shared state so edits create a NEW document, not overwrite the original
         M.isViewingSharedDoc = false;
         localStorage.removeItem(CLOUD_DOC_KEY);
         localStorage.removeItem(CLOUD_KEY_KEY);
         localStorage.removeItem(CLOUD_WT_KEY);
         window.history.replaceState({}, document.title, window.location.pathname);
+        // Stop the cloud-save timer so it doesn't re-inject the session hash
+        if (cloudSaveTimer) { clearInterval(cloudSaveTimer); cloudSaveTimer = null; }
+        cloudSaveDirty = false;
+        lastCloudContent = '';
+    }
+    M.clearCloudSession = clearCloudSession;
+
+    document.getElementById('shared-banner-edit').addEventListener('click', function () {
+        clearCloudSession();
         M.setViewMode('split');
     });
     document.getElementById('shared-banner-close').addEventListener('click', function () {
-        hideSharedBanner();
-        M.isViewingSharedDoc = false;
-        localStorage.removeItem(CLOUD_DOC_KEY);
-        localStorage.removeItem(CLOUD_KEY_KEY);
-        localStorage.removeItem(CLOUD_WT_KEY);
-        window.history.replaceState({}, document.title, window.location.pathname);
+        clearCloudSession();
     });
 
     // --- Share Options Modal ---

js/templates.js

@@ -304,7 +304,14 @@
     return true;
   }
 
-  function selectTemplate(tpl) {
+  /**
+   * Actually apply the template content into the editor (no confirmation).
+   */
+  function loadTemplate(tpl) {
+    // Clear any stale cloud/shared-doc session so the template loads cleanly
+    // and cloud auto-save doesn't re-inject the old session hash into the URL.
+    if (M.clearCloudSession) M.clearCloudSession();
+
     let content = tpl.content;
 
     // If the template defines variables, generate the block at the top
@@ -315,6 +322,9 @@
     // Resolve global built-in variables (date, time, etc.)
     content = resolveGlobalVariables(content);
 
+    // Push undo state so user can Ctrl+Z to recover previous content
+    M.markdownEditor.dispatchEvent(new Event('input'));  // ensure undo captures current state
+
     M.markdownEditor.value = content;
     M.renderMarkdown();
     closeTemplateModal();
@@ -323,6 +333,72 @@
     M.markdownEditor.scrollTop = 0;
   }
 
+  /**
+   * Show a confirmation overlay before replacing editor content with a template.
+   * Styled consistently with the clear-confirm overlay in editor-features.js.
+   */
+  function showTemplateConfirm(tpl) {
+    // Remove any existing modal
+    var old = document.getElementById('template-confirm-modal');
+    if (old) old.remove();
+
+    var overlay = document.createElement('div');
+    overlay.id = 'template-confirm-modal';
+    overlay.className = 'clear-confirm-overlay';
+    overlay.innerHTML =
+      '<div class="clear-confirm-card">' +
+      '<div class="clear-confirm-header">' +
+      '<i class="bi bi-arrow-repeat"></i> Replace editor content?' +
+      '</div>' +
+      '<div class="clear-confirm-body">' +
+      '<p>Loading <strong>' + tpl.name + '</strong> will replace your current work.</p>' +
+      '<p class="clear-confirm-hint"><i class="bi bi-arrow-counterclockwise"></i> You can Undo with <kbd>Ctrl+Z</kbd></p>' +
+      '</div>' +
+      '<div class="clear-confirm-actions">' +
+      '<button class="clear-confirm-cancel">Cancel</button>' +
+      '<button class="clear-confirm-ok"><i class="bi bi-file-earmark-text"></i> Use Template</button>' +
+      '</div>' +
+      '</div>';
+
+    document.body.appendChild(overlay);
+    requestAnimationFrame(function () { overlay.classList.add('active'); });
+
+    function close() {
+      overlay.classList.remove('active');
+      setTimeout(function () { overlay.remove(); }, 200);
+      document.removeEventListener('keydown', escHandler);
+    }
+
+    function escHandler(e) {
+      if (e.key === 'Escape') { e.stopPropagation(); close(); }
+    }
+    document.addEventListener('keydown', escHandler, true);
+
+    overlay.addEventListener('click', function (e) { if (e.target === overlay) close(); });
+    overlay.querySelector('.clear-confirm-cancel').addEventListener('click', close);
+    overlay.querySelector('.clear-confirm-ok').addEventListener('click', function () {
+      close();
+      loadTemplate(tpl);
+    });
+    overlay.querySelector('.clear-confirm-cancel').focus();
+  }
+
+  /**
+   * Select a template: if editor has meaningful content, confirm first;
+   * otherwise load immediately.
+   */
+  function selectTemplate(tpl) {
+    var editorContent = M.markdownEditor.value.trim();
+    var defaultContent = (M.getDefaultContent ? M.getDefaultContent().trim() : '');
+    var hasContent = editorContent.length > 0 && editorContent !== defaultContent;
+
+    if (hasContent) {
+      showTemplateConfirm(tpl);
+    } else {
+      loadTemplate(tpl);
+    }
+  }
+
   function openTemplateModal() {
     templateSearchInput.value = '';
     activeTemplateCategory = 'all';