mock shop page: store listing search in query

templates/pages/accounts/{acctID.int64}/platforms/{platform}/shops/mocks/{shopID}/index.html.tmpl

@@ -2,6 +2,7 @@
 {{ $platform := parsePlatform .PathParams.platform }}
 {{ $shopID := .PathParams.shopID }}
 {{- $shop := .Accounts.GetMockShop $acctID $platform $shopID }}
+{{- $initialSearchTerm := .Request.URL.Query.Get "search" }}
 
 <h1 class="mt-[1em] text-center">
 	{{ $shop.Name }}
@@ -21,9 +22,9 @@
 		<h2 class="text-center">
 			Listings
 		</h2>
-		<h3 class="text-center">
-			Add listings to your mock store to begin mocking store synchronization
-		</h3>
+		<p class="text-center">
+			Add listings to begin synchronization on your mocking store
+		</p>
 	</header>
 
 	<div
@@ -154,7 +155,7 @@
 					set the value of the first <input[name='name']/> in me to name
 					set the value of the first <input[name='sku']/> in me to sku
 					set the value of the first <input[name='description']/> in me to description
-					set the innerHTML of the <h3/> in me to ('Editing ' + name)
+					set the innerHTML of the <h3/> in me to ('Editing: ' + name)
 			"
 		>
 			<h3 class="col-[span_2] text-center">
@@ -224,6 +225,9 @@
 					h-fit
 					rounded-lg
 				"
+				{{/* the next two lines to prevent form submission */}}
+				onsubmit="return false;"
+				hx-boost="false" 
 			>
 				<label for="name" class="self-center">
 					Find Listing
@@ -232,9 +236,9 @@
 					type="search"
 					name="name"
 					class="bg-accent p-[0.25em] rounded-sm"
+					value="{{$initialSearchTerm}}"
 					_="
-						on input
-							set term to event.target.value
+						def filterList(term)
 							if (not term)
 								remove .hidden from <li/> in next <ul/>
 							else
@@ -247,6 +251,42 @@
 									end
 								end
 							end
+						end
+
+						init
+							set :prevTerm to '{{$initialSearchTerm}}'
+
+						on load
+							make a URL from window.location.href called url
+							set params to url.searchParams
+
+							set :prevTerm to params.get('search')
+							if (not :prevTerm)
+								set :prevTerm to ''
+							end
+							filterList(:prevTerm)
+							end
+
+						on input
+							event.preventDefault()
+							set term to event.target.value
+							filterList(term)
+							set :prevTerm to term
+
+							-- update the url query with the search term
+							-- including in the history
+
+							make a URL from window.location.href called url
+							set params to url.searchParams
+							if term
+								params.set('search', term)
+							else
+								params.delete('search')
+							end
+							history.replaceState(null, null, url.toString())
+
+						on rerun
+							filterList(:prevTerm)
 					"
 				/>
 			</form>