TOPUP INVOICE
diff --git a/the-matrix/js/session.js b/the-matrix/js/session.js
index 53314e3..54d5b5b 100644
--- a/the-matrix/js/session.js
+++ b/the-matrix/js/session.js
@@ -48,31 +48,52 @@ export function initSessionPanel() {
_on('session-topup-pay-btn', 'click', _payTopup);
_on('session-back-btn', 'click', () => _setStep('active'));
_on('topup-quick-btn', 'click', () => { _openPanel(); _setStep('topup'); });
+ _on('session-hud-topup', 'click', (e) => { e.preventDefault(); _openPanel(); _setStep('topup'); });
- // Amount preset buttons — deposit
+ // Amount preset buttons — deposit (quick-fill the number input)
_panel.querySelectorAll('[data-session-step="fund"] .session-amount-btn').forEach(btn => {
btn.addEventListener('click', () => {
_panel.querySelectorAll('[data-session-step="fund"] .session-amount-btn')
.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
_selectedSats = parseInt(btn.dataset.sats, 10);
- const el = document.getElementById('session-amount-display');
- if (el) el.textContent = _selectedSats + ' sats';
+ const inp = document.getElementById('session-amount-input');
+ if (inp) inp.value = _selectedSats;
});
});
- // Amount preset buttons — topup
+ // Free-text number input — deposit
+ document.getElementById('session-amount-input')?.addEventListener('input', () => {
+ const v = parseInt(document.getElementById('session-amount-input').value, 10);
+ if (Number.isFinite(v)) {
+ _selectedSats = v;
+ _panel.querySelectorAll('[data-session-step="fund"] .session-amount-btn')
+ .forEach(b => b.classList.toggle('active', parseInt(b.dataset.sats, 10) === v));
+ }
+ });
+
+ // Amount preset buttons — topup (quick-fill the topup number input)
_panel.querySelectorAll('[data-session-step="topup"] .session-amount-btn').forEach(btn => {
btn.addEventListener('click', () => {
_panel.querySelectorAll('[data-session-step="topup"] .session-amount-btn')
.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
_topupSats = parseInt(btn.dataset.sats, 10);
- const el = document.getElementById('session-topup-display');
- if (el) el.textContent = _topupSats + ' sats';
+ const inp = document.getElementById('session-topup-input');
+ if (inp) inp.value = _topupSats;
});
});
+ // Free-text number input — topup
+ document.getElementById('session-topup-input')?.addEventListener('input', () => {
+ const v = parseInt(document.getElementById('session-topup-input').value, 10);
+ if (Number.isFinite(v)) {
+ _topupSats = v;
+ _panel.querySelectorAll('[data-session-step="topup"] .session-amount-btn')
+ .forEach(b => b.classList.toggle('active', parseInt(b.dataset.sats, 10) === v));
+ }
+ });
+
// Try to restore from localStorage on init
_tryRestore();
}
@@ -168,6 +189,16 @@ function _closePanel() {
async function _createSession() {
_clearError();
+ // Read from the number input (may differ from the last preset clicked)
+ const inp = document.getElementById('session-amount-input');
+ if (inp) {
+ const v = parseInt(inp.value, 10);
+ if (Number.isFinite(v)) _selectedSats = v;
+ }
+ if (_selectedSats < 200 || _selectedSats > 10_000) {
+ _setError('Amount must be 200–10,000 sats.');
+ return;
+ }
_setStatus('fund', 'creating session…', '#ffaa00');
_btn('session-create-btn', true);
@@ -239,9 +270,8 @@ function _startDepositPolling() {
_sessionState = 'active';
_saveToStorage();
_applySessionUI();
- _setStep('active');
- _updateActiveStep();
- _setStatus('active', '⚡ Session live!', '#22aa66');
+ _closePanel(); // panel auto-closes; user types in input bar
+ appendSystemMessage(`Session active — ${_balanceSats} sats`);
return;
}
} catch { /* network hiccup */ }
@@ -261,6 +291,16 @@ function _startDepositPolling() {
async function _createTopup() {
if (!_sessionId || !_macaroon) return;
_clearError();
+ // Read from the topup number input
+ const inp = document.getElementById('session-topup-input');
+ if (inp) {
+ const v = parseInt(inp.value, 10);
+ if (Number.isFinite(v)) _topupSats = v;
+ }
+ if (_topupSats < 200 || _topupSats > 10_000) {
+ _setError('Topup amount must be 200–10,000 sats.');
+ return;
+ }
_setStatus('topup', 'creating topup invoice…', '#ffaa00');
_btn('session-topup-create-btn', true);
@@ -389,32 +429,35 @@ async function _tryRestore() {
// ── Session UI helpers ────────────────────────────────────────────────────────
function _applySessionUI() {
- const active = _sessionState === 'active';
- const lowBal = active && _balanceSats < MIN_BALANCE;
+ const anyActive = isSessionActive(); // true for both 'active' and 'paused'
+ const canSend = _sessionState === 'active';
+ // Show low-balance overlay whenever session exists but balance is too low
+ const lowBal = anyActive && _balanceSats < MIN_BALANCE;
- // HUD balance
- const $bal = document.getElementById('session-hud');
- if ($bal) {
- $bal.style.display = isSessionActive() ? '' : 'none';
- $bal.textContent = `SESSION ${_balanceSats} ⚡`;
+ // HUD balance: "Balance: X sats ⚡ Top Up"
+ const $hud = document.getElementById('session-hud');
+ if ($hud) {
+ $hud.style.display = anyActive ? '' : 'none';
+ const $span = document.getElementById('session-hud-balance');
+ if ($span) $span.textContent = `Balance: ${_balanceSats} sats`;
}
- // Open session button label
+ // Top button label
const $btn = document.getElementById('open-session-btn');
if ($btn) {
- $btn.textContent = isSessionActive()
- ? `⚡ ${_balanceSats} sats`
+ $btn.textContent = anyActive
+ ? `SESSION: ${_balanceSats} ⚡`
: '⚡ FUND SESSION';
- $btn.style.background = isSessionActive() ? '#1a4a30' : '';
+ $btn.style.background = anyActive ? '#1a4a30' : '';
}
- // Input bar session mode
- setInputBarSessionMode(active, 'Ask Timmy (session active)…');
+ // Input bar green border + placeholder when session can send
+ setInputBarSessionMode(canSend, 'Ask Timmy (session active)…');
- // Wire or un-wire the session send handler
- setSessionSendHandler(active ? sessionSendHandler : null);
+ // Route input bar to session handler only when active (not paused)
+ setSessionSendHandler(canSend ? sessionSendHandler : null);
- // Low balance notice
+ // Low balance notice above input bar
const $notice = document.getElementById('low-balance-notice');
if ($notice) $notice.style.display = lowBal ? '' : 'none';
}
@@ -438,8 +481,8 @@ function _clearSession() {
localStorage.removeItem(LS_KEY);
setInputBarSessionMode(false);
setSessionSendHandler(null);
- const $bal = document.getElementById('session-hud');
- if ($bal) $bal.style.display = 'none';
+ const $hud = document.getElementById('session-hud');
+ if ($hud) $hud.style.display = 'none';
const $btn = document.getElementById('open-session-btn');
if ($btn) { $btn.textContent = '⚡ FUND SESSION'; $btn.style.background = ''; }
const $notice = document.getElementById('low-balance-notice');