From 02893511baa670a9f1c6957b2f46cbe28a0eb84d Mon Sep 17 00:00:00 2001
From: Angel Beltran <beltranbeaverdam@gmail.com>
Date: Thu, 5 Feb 2026 10:33:39 -0700
Subject: [PATCH] mock shop page: order listings

---
 ...0020_mock_shop_listing_name_index.down.sql | 21 +++++++++++++++++++
 ...000020_mock_shop_listing_name_index.up.sql | 21 +++++++++++++++++++
 internal/domains/accounts/mocks.go            |  2 ++
 styles/index.css                              | 11 ++++++++++
 .../shops/mocks/{shopID}/index.html.tmpl      |  2 +-
 5 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 database_migrations/000020_mock_shop_listing_name_index.down.sql
 create mode 100644 database_migrations/000020_mock_shop_listing_name_index.up.sql

diff --git a/database_migrations/000020_mock_shop_listing_name_index.down.sql b/database_migrations/000020_mock_shop_listing_name_index.down.sql
new file mode 100644
index 0000000..4f29abd
--- /dev/null
+++ b/database_migrations/000020_mock_shop_listing_name_index.down.sql
@@ -0,0 +1,21 @@
+BEGIN;
+
+
+
+DROP INDEX mock.shop_tiktok_listings_name;
+DROP INDEX mock.shop_shopify_listings_name;
+DROP INDEX mock.shop_woo_commerce_listings_name;
+DROP INDEX mock.shop_wix_listings_name;
+DROP INDEX mock.shop_squarespace_listings_name;
+DROP INDEX mock.shop_square_online_listings_name;
+DROP INDEX mock.shop_zoho_listings_name;
+DROP INDEX mock.shop_ecwid_listings_name;
+DROP INDEX mock.shop_big_cartel_listings_name;
+DROP INDEX mock.shop_amazon_listings_name;
+DROP INDEX mock.shop_walmart_marketplace_listings_name;
+DROP INDEX mock.shop_ebay_listings_name;
+DROP INDEX mock.shop_etsy_listings_name;
+
+
+
+COMMIT;
diff --git a/database_migrations/000020_mock_shop_listing_name_index.up.sql b/database_migrations/000020_mock_shop_listing_name_index.up.sql
new file mode 100644
index 0000000..e7e9309
--- /dev/null
+++ b/database_migrations/000020_mock_shop_listing_name_index.up.sql
@@ -0,0 +1,21 @@
+BEGIN;
+
+
+
+CREATE INDEX shop_tiktok_listings_name ON mock.shop_tiktok_listings (name);
+CREATE INDEX shop_shopify_listings_name ON mock.shop_shopify_listings (name);
+CREATE INDEX shop_woo_commerce_listings_name ON mock.shop_woo_commerce_listings (name);
+CREATE INDEX shop_wix_listings_name ON mock.shop_wix_listings (name);
+CREATE INDEX shop_squarespace_listings_name ON mock.shop_squarespace_listings (name);
+CREATE INDEX shop_square_online_listings_name ON mock.shop_square_online_listings (name);
+CREATE INDEX shop_zoho_listings_name ON mock.shop_zoho_listings (name);
+CREATE INDEX shop_ecwid_listings_name ON mock.shop_ecwid_listings (name);
+CREATE INDEX shop_big_cartel_listings_name ON mock.shop_big_cartel_listings (name);
+CREATE INDEX shop_amazon_listings_name ON mock.shop_amazon_listings (name);
+CREATE INDEX shop_walmart_marketplace_listings_name ON mock.shop_walmart_marketplace_listings (name);
+CREATE INDEX shop_ebay_listings_name ON mock.shop_ebay_listings (name);
+CREATE INDEX shop_etsy_listings_name ON mock.shop_etsy_listings (name);
+
+
+
+COMMIT;
diff --git a/internal/domains/accounts/mocks.go b/internal/domains/accounts/mocks.go
index cf5193d..b2eacfd 100644
--- a/internal/domains/accounts/mocks.go
+++ b/internal/domains/accounts/mocks.go
@@ -400,6 +400,8 @@ func (db *Store) ListMockListingsForShop(ctx context.Context, acctID int64, plat
 				WHERE
 					(account_id IS NULL OR account_id = @account_id)
 					AND (shop_id IS NULL OR shop_id = @shop_id)
+				ORDER BY
+					name
 			`,
 			shopTableName,
 			listingsTableName,
diff --git a/styles/index.css b/styles/index.css
index 60d3a4e..f69c3a4 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -268,6 +268,9 @@
   .ml-\[1em\] {
     margin-left: 1em;
   }
+  .box-border {
+    box-sizing: border-box;
+  }
   .block {
     display: block;
   }
@@ -355,6 +358,9 @@
   .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;
   }
@@ -796,6 +802,11 @@
       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 313abf2..4bd57d6 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
@@ -16,7 +16,6 @@
 	hx-get={{ printf "/ui/accounts/%d/platforms/amazon/shops/mocks/%s" $acctID $shopID }}
 	hx-trigger={{ printf "sse:accounts_%d_platforms_amazon_shops_mocks_%s_listings" $acctID $shopID }}
 	hx-select="#listing-section"
-	hx-swap="morph"
 >
 	<header class="p-[1em]">
 		<h2 class="text-center">
@@ -216,6 +215,7 @@
 		<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]