mock shop page: search listings

styles/index.css

@@ -268,9 +268,6 @@
   .ml-\[1em\] {
     margin-left: 1em;
   }
-  .box-border {
-    box-sizing: border-box;
-  }
   .block {
     display: block;
   }
@@ -358,9 +355,6 @@
   .list-none {
     list-style-type: none;
   }
-  .grid-cols-\[1fr_1fr\] {
-    grid-template-columns: 1fr 1fr;
-  }
   .grid-cols-\[2fr_8fr_2fr\] {
     grid-template-columns: 2fr 8fr 2fr;
   }
@@ -802,11 +796,6 @@
       padding-block: calc(8vw - 0.5em);
     }
   }
-  .sm\:grid-cols-\[1fr_1fr\] {
-    @media (width >= 40rem) {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
   .md\:grid-cols-\[1fr_1fr\] {
     @media (width >= 48rem) {
       grid-template-columns: 1fr 1fr;

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

@@ -79,7 +79,7 @@
 			<h3 class="col-[span_2] text-center">
 				New Listing
 			</h3>
-			<label for="name">
+			<label for="name" class="self-center">
 				Name:
 			</label>
 			<input
@@ -90,7 +90,7 @@
 				placeholder="What's in a name..."
 				class="bg-accent p-[0.25em] rounded-sm"
 			/>
-			<label for="sku">
+			<label for="sku" class="self-center">
 				SKU:
 			</label>
 			<input
@@ -99,7 +99,7 @@
 				required
 				class="bg-accent p-[0.25em] rounded-sm"
 			/>
-			<label for="description">
+			<label for="description" class="self-center">
 				Description:
 			</label>
 			<input
@@ -160,7 +160,7 @@
 			<h3 class="col-[span_2] text-center">
 				Edit Listing
 			</h3>
-			<label for="name">
+			<label for="name" class="self-center">
 				Name:
 			</label>
 			<input
@@ -171,7 +171,7 @@
 				placeholder="What's in a name..."
 				class="bg-accent p-[0.25em] rounded-sm"
 			/>
-			<label for="sku">
+			<label for="sku" class="self-center">
 				SKU:
 			</label>
 			<input
@@ -180,7 +180,7 @@
 				required
 				class="bg-accent p-[0.25em] rounded-sm"
 			/>
-			<label for="description">
+			<label for="description" class="self-center">
 				Description:
 			</label>
 			<input
@@ -212,6 +212,45 @@
 			}}
 		</form>
 
+		<div>
+			<form
+				class="
+					grid
+					grid-cols-[max-content_1fr]
+					gap-[0.5em]
+					mb-[1em]
+					p-[1em]
+					bg-card
+					h-fit
+					rounded-lg
+				"
+			>
+				<label for="name" class="self-center">
+					Find Listing
+				</label>
+				<input
+					type="search"
+					name="name"
+					class="bg-accent p-[0.25em] rounded-sm"
+					_="
+						on input
+							set term to event.target.value
+							if (not term)
+								remove .hidden from <li/> in next <ul/>
+							else
+								for li in (<li/> in the next <ul/>)
+									set name to the (innerHTML of the first .listing-name in li).trim()
+									if not name.includes(term)
+										add .hidden to li
+									else
+										remove .hidden from li
+									end
+								end
+							end
+					"
+				/>
+			</form>
+
 			<ul class="max-h-[50em] overflow-y-auto flex flex-col gap-[1em]">
 			{{- range $listing := .Accounts.ListMockListingsForShop $acctID $platform $shopID }}
 				<li
@@ -242,7 +281,7 @@
 					<span>
 						Name:
 					</span>
-				<span>
+					<span class="listing-name">
 						{{ $listing.Name }}
 					</span>
 
@@ -270,6 +309,7 @@
 			{{- end }}
 			</ul>
 		</div>
+	</div>
 </section>
 
 <h2 class="mt-[5em] text-center block">