account page: can now reorder entries under shops sections by drag and drop

templates/pages/accounts/{acctID.int64}/index.html.tmpl

@@ -50,14 +50,20 @@
 
 
 <section
+	id="shops-section"
 	class="
 		m-[1rem]
 		pb-[1rem]
 		border-b-[2px]
 		border-sidebar-border
 	"
+	
+	hx-trigger="{{printf "sse:accounts_%d_platforms" $acctID}}"
+	hx-get="{{printf "/ui/accounts/%d" $acctID}}"
+	hx-select="#shops-section"
+	hx-swap="morph"
 >
-	<details class="flex flex-col items-stretch">
+	<details class="flex flex-col items-stretch" open>
 		<summary class="list-none cursor-pointer self-center">
 			<h2 class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg">
 				Shops
@@ -65,74 +71,9 @@
 		</summary>
 
 		<ul class="list-none">
-			{{- define "shop-list-entry" }}
-				{{/* .Platform, .AccountID */}}
-			<li class="my-[1rem] rounded-lg bg-accent">
-				<details
-					class="
-						group
-
-						details-content:opacity-[0]
-						open:details-content:opacity-[1]
-
-						details-content:transform-[translate(0px,-2em)]
-						open:details-content:transform-[translate(0px,0px)]
-
-						details-content:border-transparent
-						open:details-content:border-dotted
-						open:details-content:border-x-[0px]
-						open:details-content:border-x-transparent
-						open:details-content:border-b-[0px]
-						open:details-content:border-b-transparent
-						open:details-content:border-t-background
-						open:details-content:border-t-[0.25rem]
-						details-content:outline-transparent
-
-						details-content:transition-[opacity_transform]
-					"
-				>
-					<summary class="
-						list-none
-						p-[1em]
-						after:content-['+']
-						group-open:after:content-['-']
-						after:float-right
-						after:font-bold
-						after:text-[2em]
-						after:leading-[1em]
-						cursor-pointer
-					">
-						{{/*
-						group-open:border-b-background
-						group-open:border-b-[0.25rem]
-						border-dotted
-						*/}}
-						<h3 class="inline-block">{{.Platform}}</h3>
-					</summary>
-
-					<div class="p-[1em] text-center">
-						{{- $pathSegment := lowerCamelCase .Platform }}
-						{{-
-							component
-							(printf "/accounts/%d/shops/link-sections/%s" .AccountID $pathSegment)
-						}}
-					</div>
-				</details>
-			</li>
+			{{- range $i, $platform := .Accounts.GetOrderOfPlatformsOnAccountPage $acctID }}
+				{{ component (printf "/accounts/%d/shops/list-items/%s" $acctID $platform) "OrderIndex" $i }}
 			{{- end }}
-			{{- template "shop-list-entry" (props "Platform" "Amazon" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Big Cartel" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "eBay" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Etsy" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Ecwid" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Shopify" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Square Online" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Squarespace" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Tiktok" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Walmart Marketplace" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Wix" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Woo Commerce" "AccountID" $acctID) }}
-			{{- template "shop-list-entry" (props "Platform" "Zoho" "AccountID" $acctID) }}
 		</ul>
 	</details>
 </section>