Claude/add create template button 01 c9sv d4 nb2pfqo p7ps n1tn u (#119)

jsonify · claude · Jason Rueckert · web-flow · commit 1867d62d2176 · 2025-11-16T17:37:48.000-08:00
* Add 'Create New Template' button to Template Browser

- Added prominent 'Create New Template' button in the header
- Button triggers the existing noted.createCustomTemplate command
- Auto-refreshes template list after creation
- Provides quick access to template creation from browser UI

* Add 'Create Template with Variables' button for JSON templates

- Created new command noted.createTemplateWithVariables
- Prompts for template name, description, and category
- Creates JSON template with variable system support
- Opens Template Browser and directs user to Variable Editor
- Added dedicated button in Template Browser header
- Provides clear separation between simple and advanced templates

* Improve variable editor UX with usage guide and workflow

Major improvements to help users understand how to use variables:

1. **Variable Usage Guide Panel**:
   - Replaced template preview with clear usage instructions
   - Shows step-by-step guide on how to use variables
   - Lists all custom variables with copy buttons
   - One-click copy of {variable_name} syntax

2. **Edit Template Content Button**:
   - Added prominent button in variable editor header
   - Opens template file directly from variable editor
   - Shows helpful tip when clicked

3. **Improved Save Flow**:
   - Success message now includes next steps
   - Keeps editor open for 8 seconds after save
   - Clear guidance to click "Edit Template Content"
   - User can immediately start using variables

4. **Enhanced Visual Feedback**:
   - Copy buttons show "✓ Copied!" confirmation
   - Green success banner with actionable next step
   - Variable types displayed as badges
   - Clearer separation between instructions and actions

This addresses the issue where users could save variables but didn't
know how to actually use them in their templates.

* feat(template): enhance template creation with custom variable support

* Update src/templates/templateBrowserView.ts

Co-authored-by: gemini-code-assist[bot] &lt;176961590+gemini-code-assist[bot]@users.noreply.github.com&gt;

* Update src/extension.ts

Co-authored-by: gemini-code-assist[bot] &lt;176961590+gemini-code-assist[bot]@users.noreply.github.com&gt;

* Fix CI/CD and address code review feedback

**CI/CD Fixes**:
- Add missing `import * as os from 'os'` for userInfo() usage
- Remove reference to undefined `templatesProvider` in createTemplateWithVariables

**Code Review: Race Condition Fixes**:
1. **Remove setTimeout race condition**:
   - Removed fragile 500ms setTimeout waiting for webview
   - Template browser auto-refreshes when opened
   - User gets clear instructions to click "Edit Variables"

2. **Fix TOCTOU race condition in file creation**:
   - Changed from access() check + writeFile() to atomic writeFile() with 'wx' flag
   - Prevents race condition where file could be created between check and write
   - Simplified error handling with specific EEXIST check

**Code Review: Improvements**:
3. **Pre-fill author field with system username**:
   - Changed `author: ''` to `author: os.userInfo().username`
   - Provides better default value for template metadata

4. **Improve error handling in templateService.ts**:
   - Added error logging for JSON parsing failures
   - Distinguish between ENOENT (file not found) and parsing errors
   - Helps debugging malformed template files

**Test Results**:
✓ All 579 unit tests passing
✓ TypeScript compilation successful
✓ No type errors or warnings

---------

Co-authored-by: Claude &lt;noreply@anthropic.com&gt;
Co-authored-by: Jason Rueckert &lt;jruecke@costco.com&gt;
Co-authored-by: gemini-code-assist[bot] &lt;176961590+gemini-code-assist[bot]@users.noreply.github.com&gt;
diff --git a/package.json b/package.json
@@ -257,6 +257,11 @@
         "title": "Noted: Create Custom Template",
         "icon": "$(add)"
       },
+      {
+        "command": "noted.createTemplateWithVariables",
+        "title": "Noted: Create Template with Variables",
+        "icon": "$(variable)"
+      },
       {
         "command": "noted.editCustomTemplate",
         "title": "Noted: Edit Custom Template",
diff --git a/src/extension.ts b/src/extension.ts
@@ -2,6 +2,7 @@ import * as vscode from 'vscode';
 import * as path from 'path';
 import * as fs from 'fs';
 import { promises as fsp } from 'fs';
+import * as os from 'os';
 import { showCalendarView } from './calendar/calendarView';
 import { showGraphView } from './graph/graphView';
 import { showActivityView } from './activity/activityView';
@@ -1754,6 +1755,11 @@ export function activate(context: vscode.ExtensionContext) {
         templatesProvider.refresh();
     });
 
+    // Command to create JSON template with variables
+    let createTemplateWithVariablesCmd = vscode.commands.registerCommand('noted.createTemplateWithVariables', async () => {
+        await createTemplateWithVariables();
+    });
+
     // Command to edit custom template
     let editCustomTemplateCmd = vscode.commands.registerCommand('noted.editCustomTemplate', async () => {
         await editCustomTemplate();
@@ -2113,7 +2119,7 @@ export function activate(context: vscode.ExtensionContext) {
         searchTagCmd, renameTagCmd, mergeTagsCmd, deleteTagCmd, exportTagsCmd,
         showStats, exportNotes, duplicateNote, moveNotesFolder,
         setupDefaultFolder, setupCustomFolder, showNotesConfig,
-        createCustomTemplate, editCustomTemplateCmd, deleteCustomTemplateCmd,
+        createCustomTemplate, createTemplateWithVariablesCmd, editCustomTemplateCmd, deleteCustomTemplateCmd,
         duplicateCustomTemplateCmd, previewTemplateCmd, openTemplatesFolder,
         createTemplateWithAI, enhanceTemplate, selectAIModel,
         createBundle, createBundleFromTemplates, editBundle, deleteBundle,
@@ -2371,6 +2377,97 @@ Available placeholders:
     }
 }
 
+async function createTemplateWithVariables() {
+    const templateName = await vscode.window.showInputBox({
+        prompt: 'Enter template name',
+        placeHolder: 'my-advanced-template',
+        validateInput: (value) => {
+            if (!value) {
+                return 'Template name is required';
+            }
+            if (!/^[a-z0-9-_]+$/i.test(value)) {
+                return 'Template name can only contain letters, numbers, hyphens, and underscores';
+            }
+            return null;
+        }
+    });
+
+    if (!templateName) {
+        return;
+    }
+
+    const description = await vscode.window.showInputBox({
+        prompt: 'Enter template description',
+        placeHolder: 'A brief description of what this template is for'
+    });
+
+    if (description === undefined) {
+        return;
+    }
+
+    const category = await vscode.window.showInputBox({
+        prompt: 'Enter template category',
+        placeHolder: 'General',
+        value: 'General'
+    });
+
+    const templatesPath = getTemplatesPath();
+    if (!templatesPath) {
+        vscode.window.showErrorMessage('Please configure notes folder first');
+        return;
+    }
+
+    try {
+        // Create templates folder if it doesn't exist
+        try {
+            await fsp.access(templatesPath);
+        } catch {
+            await fsp.mkdir(templatesPath, { recursive: true });
+        }
+
+        const templateFile = path.join(templatesPath, `${templateName}.json`);
+
+        // Create template object with system username as author
+        const template = {
+            id: templateName,
+            name: templateName.replace(/[-_]/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
+            description: description || '',
+            category: category || 'General',
+            tags: [],
+            version: '1.0.0',
+            author: os.userInfo().username,
+            difficulty: 'beginner',
+            variables: [],
+            content: `# {filename}\n\nCreated: {date} at {time}\nAuthor: {user}\n\n---\n\n[Your template content here]\n\nAdd custom variables using the Variable Editor to make this template interactive!`,
+            created: new Date().toISOString(),
+            modified: new Date().toISOString(),
+            usage_count: 0
+        };
+
+        // Use atomic write with 'wx' flag to prevent race conditions
+        try {
+            await fsp.writeFile(templateFile, JSON.stringify(template, null, 2), { flag: 'wx' });
+
+            vscode.window.showInformationMessage(`Template created: ${templateName}. Opening variable editor...`);
+
+            // Open the template browser
+            await vscode.commands.executeCommand('noted.showTemplateBrowser');
+
+            // Note: The template browser will refresh automatically when it opens
+            // The user will see the new template and can click "Edit Variables" to add custom variables
+            vscode.window.showInformationMessage(`Click "Edit Variables" on the "${templateName}" template to add custom variables.`);
+        } catch (error: any) {
+            if (error.code === 'EEXIST') {
+                vscode.window.showErrorMessage('Template already exists');
+            } else {
+                throw error;
+            }
+        }
+    } catch (error) {
+        vscode.window.showErrorMessage(`Failed to create template: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
+
 async function moveNotesFolderLocation() {
     const workspaceFolders = vscode.workspace.workspaceFolders;
     if (!workspaceFolders) {
@@ -2513,6 +2610,23 @@ async function createNoteFromTemplate(templateType: string) {
     }
 
     try {
+        // Check if template has custom variables
+        const { loadTemplateMetadata, generateTemplate: generateTemplateContent } = await import('./services/templateService');
+        const templateMetadata = await loadTemplateMetadata(templateType);
+        let variableValues: Record<string, any> | undefined;
+
+        // Collect variable values if template has variables
+        if (templateMetadata?.variables && templateMetadata.variables.length > 0) {
+            const { BundleService } = await import('./templates/BundleService');
+            const bundleService = new BundleService();
+            try {
+                variableValues = await bundleService.collectVariables(templateMetadata.variables);
+            } catch (error) {
+                // User cancelled or error collecting variables
+                return;
+            }
+        }
+
         // Ask for note name
         const noteName = await vscode.window.showInputBox({
             prompt: 'Enter note name',
@@ -2552,7 +2666,7 @@ async function createNoteFromTemplate(templateType: string) {
             return;
         } catch {
             // File doesn't exist, create it
-            const content = await generateTemplate(templateType, now, fileName);
+            const content = await generateTemplateContent(templateType, now, fileName, variableValues);
             await fsp.writeFile(filePath, content);
 
             const document = await vscode.workspace.openTextDocument(filePath);
diff --git a/src/services/templateService.ts b/src/services/templateService.ts
@@ -36,6 +36,21 @@ function replacePlaceholders(content: string, date: Date, filename?: string): st
     return result;
 }
 
+/**
+ * Replace custom variables in template content
+ */
+function replaceCustomVariables(content: string, variableValues: Record<string, any>): string {
+    let result = content;
+
+    for (const [name, value] of Object.entries(variableValues)) {
+        // Replace all occurrences of {variable_name} with the value
+        const pattern = new RegExp(`\\{${name}\\}`, 'g');
+        result = result.replace(pattern, String(value ?? ''));
+    }
+
+    return result;
+}
+
 /**
  * Generate YAML frontmatter for a note
  */
@@ -59,7 +74,7 @@ function generateFrontmatter(date: Date, filename?: string): string {
 /**
  * Generate template content for a note
  */
-export async function generateTemplate(templateType: string | undefined, date: Date, filename?: string): Promise<string> {
+export async function generateTemplate(templateType: string | undefined, date: Date, filename?: string, variableValues?: Record<string, any>): Promise<string> {
     const dateStr = formatDateForNote(date);
     const yamlFrontmatter = generateFrontmatter(date, filename);
 
@@ -80,13 +95,22 @@ export async function generateTemplate(templateType: string | undefined, date: D
                     const jsonContent = await readFile(jsonPath);
                     const template: Template = JSON.parse(jsonContent);
 
-                    // Replace placeholders in template content
-                    const processedContent = replacePlaceholders(template.content, date, filename);
+                    // Replace built-in placeholders in template content
+                    let processedContent = replacePlaceholders(template.content, date, filename);
+
+                    // Replace custom variables if provided
+                    if (variableValues) {
+                        processedContent = replaceCustomVariables(processedContent, variableValues);
+                    }
 
                     // JSON templates include their own frontmatter
                     return processedContent;
-                } catch {
-                    // JSON template doesn't exist, try legacy format
+                } catch (error: any) {
+                    // Not a JSON template or doesn't exist. Log parsing errors for debugging.
+                    if (error.code !== 'ENOENT') {
+                        console.error(`Error parsing template metadata for '${templateType}.json':`, error);
+                    }
+                    // Try legacy format
                 }
 
                 // Try legacy .txt/.md template
@@ -126,6 +150,26 @@ export async function generateTemplate(templateType: string | undefined, date: D
     return yamlFrontmatter;
 }
 
+/**
+ * Load template metadata including variables (for JSON templates)
+ * Returns null for built-in or legacy templates
+ */
+export async function loadTemplateMetadata(templateType: string): Promise<Template | null> {
+    const templatesPath = getTemplatesPath();
+    if (!templatesPath) {
+        return null;
+    }
+
+    try {
+        const jsonPath = path.join(templatesPath, `${templateType}.json`);
+        const jsonContent = await readFile(jsonPath);
+        return JSON.parse(jsonContent) as Template;
+    } catch {
+        // Not a JSON template or doesn't exist
+        return null;
+    }
+}
+
 /**
  * Get list of custom template names
  */
diff --git a/src/templates/templateBrowserView.ts b/src/templates/templateBrowserView.ts
