Add Load Template feature to entry form

Allow users to load a template when creating new entries by clicking
the Load Template button in the create entry form.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: making

src/test/java/am/ik/blog/e2e/ConsoleE2ETest.java

@@ -297,6 +297,23 @@ void autoGenerateSummaryFailureShowsErrorWithStatusCode() {
 		formPage.verifyErrorContainsStatusCode(500);
 	}
 
+	@Test
+	void loadTemplateInCreateMode() {
+		// Login and navigate to create entry form
+		EntryListPage entryListPage = login();
+		entryListPage.waitForLoad();
+
+		EntryFormPage formPage = entryListPage.clickNewEntry();
+		formPage.waitForLoad();
+		formPage.verifyCreatePageDisplayed();
+
+		// Click Load Template button
+		formPage.clickLoadTemplate();
+
+		// Verify the form is populated with template data
+		formPage.verifyTitle("How to Build a REST API with Spring Boot");
+	}
+
 	void setupOpenAiMock(String summaryText) {
 		String sseResponse = """
 				data: {"id":"chatcmpl-123","object":"chat.completion.chunk","created":1234567890,"model":"gpt-4o-mini","choices":[{"index":0,"delta":{"role":"assistant","content":""},"finish_reason":null}]}

src/test/java/am/ik/blog/e2e/page/EntryFormPage.java

@@ -119,9 +119,11 @@ public EntryFormPage fillEntryId(String entryId) {
 	 * Click the Load button to load an existing entry.
 	 */
 	public EntryFormPage clickLoad() {
-		page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Load")).click();
+		page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Load").setExact(true)).click();
 		// Wait for loading to complete (button becomes enabled again)
-		page.locator("button:has-text('Load'):not([disabled])").waitFor();
+		page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Load").setExact(true))
+			.and(page.locator(":not([disabled])"))
+			.waitFor();
 		return this;
 	}
 
@@ -143,6 +145,16 @@ public EntryFormPage loadExistingEntry(String entryId) {
 		return clickLoad();
 	}
 
+	/**
+	 * Click the Load Template button to load the template.
+	 */
+	public EntryFormPage clickLoadTemplate() {
+		page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Load Template")).click();
+		// Wait for loading to complete (button becomes enabled again)
+		page.locator("button:has-text('Load Template'):not([disabled])").waitFor();
+		return this;
+	}
+
 	/**
 	 * Click the Preview & Create button.
 	 */

ui/src/pages/entries/EntryForm.tsx

@@ -38,8 +38,9 @@ export function EntryForm({ mode }: EntryFormProps) {
   const [isRestoredFromDraft, setIsRestoredFromDraft] = useState(false);
   const [isLoadingExisting, setIsLoadingExisting] = useState(false);
   const [isSummarizing, setIsSummarizing] = useState(false);
+  const [isLoadingTemplate, setIsLoadingTemplate] = useState(false);
 
-  const isFormBusy = isLoadingExisting || isSummarizing;
+  const isFormBusy = isLoadingExisting || isSummarizing || isLoadingTemplate;
 
   // Load existing entry for edit mode
   const {
@@ -286,6 +287,33 @@ export function EntryForm({ mode }: EntryFormProps) {
     }
   };
 
+  const handleLoadTemplate = async () => {
+    setIsLoadingTemplate(true);
+    setSubmitError(null);
+
+    try {
+      const templateMarkdown = await api.getTemplate();
+      const { frontMatter, content } = parseMarkdownWithFrontMatter(templateMarkdown);
+      setFormData({
+        title: frontMatter.title || '',
+        summary: frontMatter.summary || '',
+        categories: frontMatter.categories?.map(c => c.name) || [],
+        tags: frontMatter.tags?.map(t => t.name) || [],
+        content: content || '',
+      });
+      setMarkdownContent(templateMarkdown);
+    } catch (error) {
+      if (error instanceof ApiError) {
+        const detail = error.problemDetail?.detail || error.message;
+        setSubmitError(`HTTP ${error.status}: ${detail}`);
+      } else {
+        setSubmitError(error instanceof Error ? error.message : 'Failed to load template');
+      }
+    } finally {
+      setIsLoadingTemplate(false);
+    }
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     setSubmitError(null);
@@ -474,7 +502,21 @@ export function EntryForm({ mode }: EntryFormProps) {
           <>
             {/* Basic Information */}
             <div className="border border-gray-200 p-4">
-              <h3 className="text-base font-medium text-black mb-4">Basic Information</h3>
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-base font-medium text-black">Basic Information</h3>
+                {mode === 'create' && (
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => void handleLoadTemplate()}
+                    disabled={isFormBusy}
+                    loading={isLoadingTemplate}
+                  >
+                    Load Template
+                  </Button>
+                )}
+              </div>
               <div className="space-y-4">
                 <Input
                   label="Title *"

ui/src/services/api.ts

@@ -237,6 +237,14 @@ export const api = {
     const result = await handleResponse<{ summary: string }>(response);
     return result.summary;
   },
+
+  // Template operations
+  async getTemplate(): Promise<string> {
+    const response = await fetch('/entries/template.md', {
+      headers: buildHeaders(),
+    });
+    return handleResponse<string>(response);
+  },
 };
 
 export { ApiError };