account page: popover instructions prototype

2026-01-28 20:43:12 -07:00
parent 8f38f141e5
commit 9ae8745b12
2 changed files with 226 additions and 27 deletions
@@ -58,11 +58,93 @@
 		border-sidebar-border
 	"
 >
-	<details class="flex flex-col items-stretch" open>
+	<details class="flex flex-col items-stretch">
 		<summary class="list-none cursor-pointer self-center">
-			<h2 class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg">
+			<h2
+				class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg"
+				style="anchor-name: --shops-button;"
+				_="
+					on click
+						set popover to the #shops-popover
+						-- popover.hidePopover()
+						send shopsButtonClicked to #shops-popover
+				"
+			>
 				Shops
 			</h2>
+			<div
+				popover="manual"
+				id="shops-popover"
+				class="
+					border-[1px] border-sidebar-border rounded-lg
+					bg-card
+					p-[1em]
+					animate-pulse
+					max-w-[80vw]
+					mt-[1.5em]
+					open:grid
+					cursor-default
+				"
+				style="
+					position: fixed;
+					position-anchor: --shops-button;
+					position-area: bottom;
+
+					grid-template-columns: 1fr max-content;
+					grid-template-rows: max-content;
+					gap: 1em;
+
+					box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
+
+					transition-behavior: allow-discrete;
+				"
+				_="
+					init
+						-- wait 1s
+						call me.showPopover()
+						set :shopButtonClicks to 0
+
+					on click
+						event.preventDefault()
+
+					on shopsButtonClicked
+						set :shopButtonClicks to :shopButtonClicks + 1
+						if :shopButtonClicks is 1 then
+							hide #shop-popover-msg-1
+							show #shop-popover-msg-2
+						else if :shopButtonClicks is 2 then
+							hide #shop-popover-msg-2
+							show #shop-popover-msg-3
+						else if :shopButtonClicks is 3 then
+							call me.hidePopover()
+						end
+				"
+			>
+				<span id="shop-popover-msg-1" style="grid-column: 1;">
+					Click <span class="font-bold italic">Shops</span> to display all shops and platforms available
+				</span>
+				<span id="shop-popover-msg-2" style="grid-column: 1; display: none;">
+					Click <span class="font-bold italic">Shops</span> to hide them again
+				</span>
+				<span id="shop-popover-msg-3" style="grid-column: 1; display: none;">
+					There you go!
+				</span>
+				<button
+					class="cursor-pointer"
+					style="
+						grid-column: 2;
+						font-size: 2em;
+						line-height: 0.5em;
+					"
+					_="
+						on click
+							set parent to the closest #shops-popover
+							call parent.hidePopover()
+					"
+				>
+					&#x00d7;
+				</button>
+			</div>
 		</summary>

 		<ul class="list-none" hx-swap="morph">