From 0924d0edb1cc991cc6e5f1156ea6721c5437b9e6 Mon Sep 17 00:00:00 2001
From: Angel Beltran <beltranbeaverdam@gmail.com>
Date: Thu, 5 Feb 2026 11:02:29 -0700
Subject: [PATCH] mock shop page: search listings

---
 styles/index.css                              |  11 --
 .../shops/mocks/{shopID}/index.html.tmpl      | 148 +++++++++++-------
 2 files changed, 94 insertions(+), 65 deletions(-)

diff --git a/styles/index.css b/styles/index.css
index f69c3a4..60d3a4e 100644
--- a/styles/index.css
+++ b/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;
diff --git a/templates/pages/accounts/{acctID.int64}/platforms/{platform}/shops/mocks/{shopID}/index.html.tmpl b/templates/pages/accounts/{acctID.int64}/platforms/{platform}/shops/mocks/{shopID}/index.html.tmpl
index 4bd57d6..8aa7394 100644
--- a/templates/pages/accounts/{acctID.int64}/platforms/{platform}/shops/mocks/{shopID}/index.html.tmpl
+++ b/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,63 +212,103 @@
 			}}
 		</form>
 
-		<ul class="max-h-[50em] overflow-y-auto flex flex-col gap-[1em]">
-		{{- range $listing := .Accounts.ListMockListingsForShop $acctID $platform $shopID }}
-			<li
-				id="listing-{{$listing.ListingID}}"
+		<div>
+			<form
 				class="
+					grid
+					grid-cols-[max-content_1fr]
+					gap-[0.5em]
+					mb-[1em]
 					p-[1em]
-					grid grid-cols-[max-content_1fr] gap-x-[1em]
 					bg-card
+					h-fit
 					rounded-lg
 				"
-				_="
-					on click
-						send startEditingExistingListing(
-							listingID: '{{$listing.ListingID}}',
-							name: '{{$listing.Name}}',
-							sku: '{{$listing.SKU}}',
-							description: '{{$listing.Description}}'
-						) to #listings-container
-						send reset() to <li/> in the closest <ul/>
-						add .border-foreground to me
-						add .border to me
-
-					on reset
-						remove .border-foreground from me
-						remove .border from me
-				"
 			>
-				<span>
-					Name:
-				</span>
-				<span>
-					{{ $listing.Name }}
-				</span>
+				<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>
 
-				<span>
-					SKU:
-				</span>
-				<span>
-					{{ $listing.SKU }}
-				</span>
+			<ul class="max-h-[50em] overflow-y-auto flex flex-col gap-[1em]">
+			{{- range $listing := .Accounts.ListMockListingsForShop $acctID $platform $shopID }}
+				<li
+					id="listing-{{$listing.ListingID}}"
+					class="
+						p-[1em]
+						grid grid-cols-[max-content_1fr] gap-x-[1em]
+						bg-card
+						rounded-lg
+					"
+					_="
+						on click
+							send startEditingExistingListing(
+								listingID: '{{$listing.ListingID}}',
+								name: '{{$listing.Name}}',
+								sku: '{{$listing.SKU}}',
+								description: '{{$listing.Description}}'
+							) to #listings-container
+							send reset() to <li/> in the closest <ul/>
+							add .border-foreground to me
+							add .border to me
 
-				<span>
-					Description:
-				</span>
-				<span>
-					{{ $listing.Description }}
-				</span>
+						on reset
+							remove .border-foreground from me
+							remove .border from me
+					"
+				>
+					<span>
+						Name:
+					</span>
+					<span class="listing-name">
+						{{ $listing.Name }}
+					</span>
 
-				<span>
-					Count:
-				</span>
-				<span>
-					{{ $listing.Count }}
-				</span>
-			</li>
-		{{- end }}
-		</ul>
+					<span>
+						SKU:
+					</span>
+					<span>
+						{{ $listing.SKU }}
+					</span>
+
+					<span>
+						Description:
+					</span>
+					<span>
+						{{ $listing.Description }}
+					</span>
+
+					<span>
+						Count:
+					</span>
+					<span>
+						{{ $listing.Count }}
+					</span>
+				</li>
+			{{- end }}
+			</ul>
+		</div>
 	</div>
 </section>