Bring back the notepad

1 files changed, 17 insertions, 8 deletions

diff --git a/templates/note.html.template b/templates/note.html.template
index fe6d073..07c2d8e 100644
--- a/templates/note.html.template
+++ b/templates/note.html.template
@@ -1,5 +1,5 @@
 {{define "head"}}
-	<script src="/static/note.js"></script>
+	<script src="/static/htmx.min.js"></script>
 	<title>Notepad</title>
 
 	<meta name="viewport" content="interactive-widget=resizes-content"> <!-- https://stackoverflow.com/q/76026292 -->
@@ -8,15 +8,24 @@
 <form id="form" method="post">
 	<input type="hidden" name="csrf-token" value="{{.CSRFToken}}">
 	<div class="save-indicator-container">
-		<div id="save-indicator-wrapper">
-			{{block "saveIndicator" ""}}
-				<span id="save-indicator">{{.}}</span>
-			{{end}}
-		</div>
-		<noscript><input type="submit" value="Save"></noscript>
+		{{block "saveIndicator" ""}}
+			<span id="save-indicator">{{.}}</span>
+		{{end}}
 	</div>
 	<div class="content-container">
-		<textarea id="content" name="content" oninput="autosave()" autofocus>
+		<textarea
+				name="content"
+				hx-post="/notepad"
+				hx-on:input="
+					const indicator = htmx.find('#save-indicator');
+					htmx.addClass(indicator, 'htmx-indicator');
+					indicator.innerHTML = 'Saving...';
+				"
+				hx-trigger="input delay:1s"
+				hx-indicator="#save-indicator"
+				hx-target="#save-indicator"
+				hx-swap="outerHTML"
+				autofocus>
 			{{- .Content -}}
 		</textarea>
 	</div>