new migration in apps.applets to seed wallet applet models; many expanded styles in wallet.js, chiefly concerned w. wallet-oriented FTs tbh; some intermittent Windows cache errors quashed in dash view ITs; apps.dash.views & .urls now support wallet applets; apps.lyric.models now discerns tithe coins (available for purchase soon); new styles across many scss files, again many concerning wallet applets but also applets more generally and also unorthodox media query parameters to make UX more usable; a slew of new wallet partials

src/apps/dashboard/static/apps/scripts/wallet.js

@@ -3,6 +3,7 @@ const initWallet = () => {
 
     const addBtn = document.getElementById('id_add_payment_method');
     const saveBtn = document.getElementById('id_save_payment_method');
+    const cancelBtn = document.getElementById('id_cancel_payment_method');
     if (!addBtn) return;
 
     const getCsrf = () => document.cookie.match(/csrftoken=([^;]+)/)[1];
@@ -15,8 +16,25 @@ const initWallet = () => {
         const {client_secret, publishable_key} = await res.json();
         stripe = Stripe(publishable_key);
         elements = stripe.elements({clientSecret: client_secret});
-        elements.create('payment').mount('#id_stripe_payment_element');
+        const paymentEl = elements.create('payment');
+        paymentEl.mount('#id_stripe_payment_element');
         saveBtn.hidden = false;
+        cancelBtn.hidden = false;
+        const section = addBtn.closest('section');
+        const rowPx = 3 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        const updateRows = () => {
+            const rows = Math.ceil(section.scrollHeight / rowPx) + 1;
+            section.style.setProperty('--applet-rows', String(rows));
+        };
+        paymentEl.on('ready', () => {
+            updateRows();
+            const iframe = document.querySelector('#id_stripe_payment_element iframe');
+            if (iframe) {
+                const obs = new MutationObserver(updateRows);
+                obs.observe(iframe, { attributes: true, attributeFilter: ['style'] });
+                section._stripeObs = obs;
+            }
+        });
     });
 
     saveBtn.addEventListener('click', async () => {
@@ -37,7 +55,55 @@ const initWallet = () => {
         const pm = document.createElement('div');
         pm.textContent = `${brand} ····${last4}`;
         document.getElementById('id_payment_methods').appendChild(pm);
+        elements.getElement('payment').unmount();
+        elements = null;
+        stripe = null;
+        saveBtn.hidden = true;
+        cancelBtn.hidden = true;
+        const section = cancelBtn.closest('section');
+        section.style.setProperty('--applet-rows', '2');
+        if (section._stripeObs) { section._stripeObs.disconnect(); section._stripeObs = null; }
+    });
+
+    cancelBtn.addEventListener('click', () => {
+        if (elements) {
+            elements.getElement('payment').unmount();
+            elements = null;
+            stripe = null;
+        }
+        saveBtn.hidden = true;
+        cancelBtn.hidden = true;
+        const section = cancelBtn.closest('section');
+        section.style.setProperty('--applet-rows', '2');
+        if (section._stripeObs) { section._stripeObs.disconnect(); section._stripeObs = null; }
     });
 };
 
-document.addEventListener('DOMContentLoaded', initWallet);
+function initWalletTooltips() {
+    const portal = document.getElementById('id_tooltip_portal');
+    if (!portal) return;
+
+    document.querySelectorAll('.wallet-tokens .token').forEach(token => {
+        const tooltip = token.querySelector('.token-tooltip');
+        if (!tooltip) return;
+
+        token.addEventListener('mouseenter', () => {
+            const rect = token.getBoundingClientRect();
+            portal.innerHTML = tooltip.innerHTML;
+            portal.classList.add('active');
+            const halfW = portal.offsetWidth / 2;
+            const rawLeft = rect.left + rect.width / 2;
+            const clampedLeft = Math.max(halfW + 8, Math.min(rawLeft, window.innerWidth - halfW - 8));
+            portal.style.left = Math.round(clampedLeft) + 'px';
+            portal.style.top = Math.round(rect.top) + 'px';
+            portal.style.transform = 'translate(-50%, calc(-100% - 0.5rem))';
+        });
+
+        token.addEventListener('mouseleave', () => {
+            portal.classList.remove('active');
+        });
+    });
+}
+
+document.addEventListener('DOMContentLoaded', initWallet);
+document.addEventListener('DOMContentLoaded', initWalletTooltips);

src/apps/dashboard/tests/integrated/test_wallet_views.py

@@ -2,6 +2,7 @@ import lxml.html
 
 from django.test import override_settings, TestCase
 
+from apps.applets.models import Applet, UserApplet
 from apps.lyric.models import Token, User, Wallet
 
 
@@ -47,4 +48,95 @@ class WalletViewTest(TestCase):
         bundles = self.parsed.cssselect("#id_tithe_token_shop .token-bundle")
         self.assertGreater(len(bundles), 0)
 
-        
+
+@override_settings(COMPRESS_ENABLED=False)
+class WalletViewAppletContextTest(TestCase):
+    def setUp(self):
+        self.user = User.objects.create(email="walletctx@test.io")
+        Applet.objects.get_or_create(
+            slug="wallet-balances",
+            defaults={"name": "Wallet Balances", "grid_cols": 3, "grid_rows": 3, "context": "wallet"},
+        )
+        Applet.objects.get_or_create(
+            slug="wallet-tokens",
+            defaults={"name": "Wallet Tokens", "grid_cols": 3, "grid_rows": 3, "context": "wallet"},
+        )
+        Applet.objects.get_or_create(
+            slug="wallet-payment",
+            defaults={"name": "Payment Methods", "grid_cols": 6, "grid_rows": 2, "context": "wallet"},
+        )
+        self.client.force_login(self.user)
+
+    def test_wallet_view_passes_applets_context(self):
+        response = self.client.get("/dashboard/wallet/")
+        slugs = [e["applet"].slug for e in response.context["applets"]]
+        self.assertIn("wallet-balances", slugs)
+        self.assertIn("wallet-tokens", slugs)
+        self.assertIn("wallet-payment", slugs)
+
+    def test_wallet_page_renders_applets_container(self):
+        response = self.client.get("/dashboard/wallet/")
+        parsed = lxml.html.fromstring(response.content)
+        [_] = parsed.cssselect("#id_wallet_applets_container")
+
+    def test_wallet_page_renders_gear_button(self):
+        response = self.client.get("/dashboard/wallet/")
+        parsed = lxml.html.fromstring(response.content)
+        [_] = parsed.cssselect(".gear-btn")
+
+
+@override_settings(COMPRESS_ENABLED=False)
+class ToggleWalletAppletsTest(TestCase):
+    def setUp(self):
+        self.user = User.objects.create(email="wallettoggle@test.io")
+        self.balances = Applet.objects.get_or_create(
+            slug="wallet-balances",
+            defaults={"name": "Wallet Balances", "grid_cols": 3, "grid_rows": 3, "context": "wallet"},
+        )[0]
+        self.tokens = Applet.objects.get_or_create(
+            slug="wallet-tokens",
+            defaults={"name": "Wallet Tokens", "grid_cols": 3, "grid_rows": 3, "context": "wallet"},
+        )[0]
+        Applet.objects.get_or_create(
+            slug="wallet-payment",
+            defaults={"name": "Payment Methods", "grid_cols": 6, "grid_rows": 2, "context": "wallet"},
+        )
+        self.client.force_login(self.user)
+
+    def test_toggle_requires_login(self):
+        self.client.logout()
+        response = self.client.post("/dashboard/wallet/toggle-applets", {})
+        self.assertRedirects(
+            response, "/?next=/dashboard/wallet/toggle-applets",
+            fetch_redirect_response=False,
+        )
+
+    def test_toggle_redirects_to_wallet(self):
+        response = self.client.post(
+            "/dashboard/wallet/toggle-applets", {"applets": ["wallet-balances"]}
+        )
+        self.assertRedirects(response, "/dashboard/wallet/", fetch_redirect_response=False)
+
+    def test_toggle_hides_unchecked_applet(self):
+        self.client.post(
+            "/dashboard/wallet/toggle-applets", {"applets": ["wallet-balances"]}
+        )
+        ua = UserApplet.objects.get(user=self.user, applet=self.tokens)
+        self.assertFalse(ua.visible)
+
+    def test_toggle_shows_checked_applet(self):
+        UserApplet.objects.create(user=self.user, applet=self.balances, visible=False)
+        self.client.post(
+            "/dashboard/wallet/toggle-applets", {"applets": ["wallet-balances"]}
+        )
+        ua = UserApplet.objects.get(user=self.user, applet=self.balances)
+        self.assertTrue(ua.visible)
+
+    def test_toggle_htmx_returns_container_partial(self):
+        response = self.client.post(
+            "/dashboard/wallet/toggle-applets",
+            {"applets": ["wallet-balances"]},
+            HTTP_HX_REQUEST="true",
+        )
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "id_wallet_applets_container")

src/apps/dashboard/urls.py

@@ -10,6 +10,7 @@ urlpatterns = [
     path('users/<uuid:user_id>/', views.my_lists, name='my_lists'),
     path('toggle_applets', views.toggle_applets, name="toggle_applets"),
     path('wallet/', views.wallet, name='wallet'),
+    path('wallet/toggle-applets', views.toggle_wallet_applets, name='toggle_wallet_applets'),
     path('wallet/setup-intent', views.setup_intent, name='setup_intent'),
     path('wallet/save-payment-method', views.save_payment_method, name='save_payment_method'),
 ]

src/apps/dashboard/views.py

@@ -144,15 +144,34 @@ def toggle_applets(request):
 @login_required(login_url="/")
 @ensure_csrf_cookie
 def wallet(request):
-    wallet = request.user.wallet
-    coin = request.user.tokens.filter(token_type=Token.COIN).first()
-    free_tokens = list(request.user.tokens.filter(token_type=Token.FREE))
     return render(request, "apps/dashboard/wallet.html", {
-        "wallet": wallet,
-        "coin": coin,
-        "free_tokens": free_tokens,
+        "wallet": request.user.wallet,
+        "coin": request.user.tokens.filter(token_type=Token.COIN).first(),
+        "free_tokens": list(request.user.tokens.filter(token_type=Token.FREE)),
+        "tithe_tokens": list(request.user.tokens.filter(token_type=Token.TITHE)),
+        "applets": applet_context(request.user, "wallet"),
+        "page_class": "page-wallet",
     })
 
+@login_required(login_url="/")
+def toggle_wallet_applets(request):
+    checked = request.POST.getlist("applets")
+    for applet in Applet.objects.filter(context="wallet"):
+        UserApplet.objects.update_or_create(
+            user=request.user,
+            applet=applet,
+            defaults={"visible": applet.slug in checked},
+        )
+    if request.headers.get("HX-Request"):
+        return render(request, "apps/wallet/_partials/_applets.html", {
+            "applets": applet_context(request.user, "wallet"),
+            "wallet": request.user.wallet,
+            "coin": request.user.tokens.filter(token_type=Token.COIN).first(),
+            "free_tokens": list(request.user.tokens.filter(token_type=Token.FREE)),
+            "tithe_tokens": list(request.user.tokens.filter(token_type=Token.TITHE)),
+        })
+    return redirect("wallet")
+
 @login_required(login_url="/")
 def setup_intent(request):
     stripe.api_key = settings.STRIPE_SECRET_KEY