From e90f10fe47bbbfd690e7aedd632113a81f0fe4e7 Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Fri, 22 May 2026 02:32:05 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20shop=20tooltip=20price=20moves=20to=20t?=
 =?UTF-8?q?he=20title=20row,=20right-aligned=20--priGn.=20The=20`<h4=20cla?=
 =?UTF-8?q?ss=3D"tt-title">`=20already=20has=20`display:=20flex;=20justify?=
 =?UTF-8?q?-content:=20space-between;=20align-items:=20baseline;=20gap:=20?=
 =?UTF-8?q?0.5rem`=20(from=20`=5Ftooltips.scss:31-46`'s=20`.tt`=20block,?=
 =?UTF-8?q?=20originally=20meant=20for=20the=20`.token-count`=20chip=20pat?=
 =?UTF-8?q?tern=20in=20Tokens=20row),=20so=20wrapping=20the=20name=20+=20p?=
 =?UTF-8?q?rice=20as=20two=20sibling=20`<span>`s=20inside=20the=20h4=20aut?=
 =?UTF-8?q?o-spaces:=20name=20pinned=20left,=20price=20pinned=20right,=20o?=
 =?UTF-8?q?n=20the=20same=20baseline.=20`.tt-price`=20joins=20`.tt-expiry`?=
 =?UTF-8?q?=20(priRd)=20+=20`.tt-date`=20(priGn)=20in=20the=20shared=20`%t?=
 =?UTF-8?q?t-token-fields`=20placeholder=20at=20`=5Ftooltips.scss:8-19`=20?=
 =?UTF-8?q?=E2=80=94=20same=20shape=20(1rem)=20as=20both,=20--priGn=20colo?=
 =?UTF-8?q?ring=20to=20mirror=20`.tt-date`'s=20"in=20the=20green"=20semant?=
 =?UTF-8?q?ics=20for=20the=20payment=20cue.=20Standalone=20`<p=20class=3D"?=
 =?UTF-8?q?tt-price">`=20line=20below=20the=20description=20is=20dropped?=
 =?UTF-8?q?=20(price=20now=20lives=20in=20the=20title=20row).=201211=20IT/?=
 =?UTF-8?q?UT=20still=20green;=20no=20test=20changes=20needed=20=E2=80=94?=
 =?UTF-8?q?=20existing=20FT=20assertion=20(`assertIn("$1",=20tithe1=5Ftt)`?=
 =?UTF-8?q?)=20reads=20`.tt`=20innerHTML=20which=20still=20contains=20the?=
 =?UTF-8?q?=20dollar=20string=20in=20either=20position?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/static_src/scss/_tooltips.scss                       | 5 +++++
 .../apps/wallet/_partials/_applet-wallet-shop.html       | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/static_src/scss/_tooltips.scss b/src/static_src/scss/_tooltips.scss
index c516a21..d7ef600 100644
--- a/src/static_src/scss/_tooltips.scss
+++ b/src/static_src/scss/_tooltips.scss
@@ -11,6 +11,11 @@
     .tt-shoptalk    { font-size: 0.75rem; opacity: 0.75; }
     .tt-expiry      { font-size: 1rem; color: rgba(var(--priRd), 1); }
     .tt-date        { font-size: 1rem; color: rgba(var(--priGn), 1); }
+    // `.tt-price` — wallet Shop tooltip. Same shape as .tt-expiry (size +
+    // semantics) but --priGn for the "in the green" payment cue. Lives
+    // inside the `.tt-title` h4 (which is `display: flex; justify-content:
+    // space-between`) so the price floats top-right opposite the name.
+    .tt-price       { font-size: 1rem; color: rgba(var(--priGn), 1); }
 }
 
 .token-tooltip,
diff --git a/src/templates/apps/wallet/_partials/_applet-wallet-shop.html b/src/templates/apps/wallet/_partials/_applet-wallet-shop.html
index 164d1fd..c57948a 100644
--- a/src/templates/apps/wallet/_partials/_applet-wallet-shop.html
+++ b/src/templates/apps/wallet/_partials/_applet-wallet-shop.html
@@ -23,12 +23,17 @@
                 {# DRY-reuses the Tokens row's 4-slot tooltip pattern — same #}
                 {# `.tt-title/.tt-description/.tt-shoptalk/.tt-expiry` SCSS  #}
                 {# classes so shop + token tooltips render as the same widget.#}
-                <h4 class="tt-title">{{ item.name }}</h4>
+                {# Price lives inside the h4 (which already has flex space-  #}
+                {# between for `.token-count`-style chips) so it pins top-   #}
+                {# right opposite the name — `.tt-price` styled --priGn.    #}
+                <h4 class="tt-title">
+                    <span>{{ item.name }}</span>
+                    <span class="tt-price">{{ item.price_display }}</span>
+                </h4>
                 <p class="tt-description">{{ item.description }}</p>
                 {% if item.shoptalk %}
                     <p class="tt-shoptalk"><em>{{ item.shoptalk }}</em></p>
                 {% endif %}
-                <p class="tt-price">{{ item.price_display }}</p>
                 <p class="tt-expiry">{{ item.tooltip_expiry }}</p>
             </div>
             {% comment %}