feat(payments): wallet screen with balances, benefits and storefront

Add the "Кошелёк" section to the settings hub: context-visible chip
balances, active benefits (no-ads term/forever, hints) and a storefront of
chip-priced values and money-priced chip packs. Guests have no wallet; the
Google Play build hides the money purchases behind a RuStore stub; a web
purchase that would draw VK/Telegram chips warns first.

Add the catalog read path the storefront needs — a context-projected
GET /api/v1/user/wallet/catalog (payments service + store, gateway op
wallet.catalog, FBS Catalog/CatalogProduct/CatalogAtom, client decode) —
plus the client leg for the existing wallet.get/buy ops. Value spends reuse
the existing spend path; the chip-pack purchase (money order flow) arrives
with payment intake, so its action is a disabled placeholder for now.

Covered by Go unit (catalog projection) + integration (/wallet/catalog over
Postgres), vitest (formatting, spendable selection, web-spend warning, GP
flag, codec + gateway encode round-trips) and Playwright mock e2e (render,
guest-hidden, GP stub, warning) on Chromium + WebKit.

ui/src/screens/Wallet.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Modal from '../components/Modal.svelte';
+  import { handleError } from '../lib/app.svelte';
+  import { gateway } from '../lib/gateway';
+  import { t, i18n, type MessageKey } from '../lib/i18n/index.svelte';
+  import { executionContext, formatAmount, needsWebSpendWarning, type SpendContext } from '../lib/wallet';
+  import { isGooglePlayBuild } from '../lib/distribution';
+  import type { Wallet, Catalog, CatalogProduct } from '../lib/model';
+
+  // The Wallet section: the context-visible chip balances, the active benefits, and the storefront.
+  // Values are bought with chips (they work once the player has any); chip packs are bought with
+  // money (the purchase itself arrives with payment intake — here they are shown priced only). On
+  // the Google Play build the money purchases are hidden behind a RuStore stub (store policy), while
+  // spending already-earned chips still works.
+
+  let wallet = $state<Wallet | null>(null);
+  let catalog = $state<Catalog | null>(null);
+  let loading = $state(true);
+  let busy = $state(false);
+  // The value awaiting a web-spend warning confirmation (a spend that would draw vk/tg chips).
+  let warnProduct = $state<CatalogProduct | null>(null);
+
+  const context: SpendContext = executionContext();
+  const gpBuild = isGooglePlayBuild();
+
+  const values = $derived(catalog?.products.filter((p) => p.kind === 'value') ?? []);
+  const packs = $derived(catalog?.products.filter((p) => p.kind === 'pack') ?? []);
+
+  async function load() {
+    try {
+      const [w, c] = await Promise.all([gateway.wallet(), gateway.catalog()]);
+      wallet = w;
+      catalog = c;
+    } catch (e) {
+      handleError(e);
+    } finally {
+      loading = false;
+    }
+  }
+  onMount(load);
+
+  function sourceLabel(source: string): string {
+    return t(`wallet.source.${source}` as MessageKey);
+  }
+
+  function currencyLabel(currency: string): string {
+    return t(`wallet.cur.${currency}` as MessageKey);
+  }
+
+  function adsLine(): string {
+    if (!wallet) return '';
+    if (wallet.adsForever) return t('wallet.noAdsForever');
+    if (wallet.adsPaidUntilMs > Date.now()) {
+      const date = new Date(wallet.adsPaidUntilMs).toLocaleDateString(i18n.locale === 'ru' ? 'ru-RU' : 'en-US');
+      return t('wallet.noAdsUntil', { date });
+    }
+    return t('wallet.adsOn');
+  }
+
+  function onBuy(p: CatalogProduct) {
+    if (needsWebSpendWarning(context, wallet?.segments ?? [], p.chips)) {
+      warnProduct = p;
+      return;
+    }
+    void doBuy(p);
+  }
+
+  async function doBuy(p: CatalogProduct) {
+    warnProduct = null;
+    if (busy) return;
+    busy = true;
+    try {
+      wallet = await gateway.walletBuy(p.productId);
+    } catch (e) {
+      handleError(e);
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<div class="wallet" data-testid="wallet">
+  <section>
+    <h3>{t('wallet.balance')}</h3>
+    {#if wallet && wallet.segments.length > 0}
+      {#each wallet.segments as s (s.source)}
+        <div class="row">
+          <span class="name">{sourceLabel(s.source)}</span>
+          <span class="value"
+            >🪙 {s.chips}{#if !s.spendable}&nbsp;<span class="muted">({t('wallet.viewOnly')})</span>{/if}</span
+          >
+        </div>
+      {/each}
+    {:else if !loading}
+      <p class="empty">{t('wallet.noChips')}</p>
+    {/if}
+  </section>
+
+  <section>
+    <h3>{t('wallet.benefits')}</h3>
+    <div class="row"><span class="name">{adsLine()}</span></div>
+    <div class="row"><span class="name">{t('wallet.hints', { n: wallet?.hints ?? 0 })}</span></div>
+  </section>
+
+  <section>
+    <h3>{t('wallet.store')}</h3>
+    {#each values as p (p.productId)}
+      <div class="row product" data-testid="product" data-kind="value" data-pid={p.productId}>
+        <span class="name">{p.title}</span>
+        <span class="price">🪙 {p.chips}</span>
+        <button class="buy" data-testid="buy" disabled={busy} onclick={() => onBuy(p)}>{t('wallet.buy')}</button>
+      </div>
+    {/each}
+
+    {#if gpBuild}
+      <p class="stub" data-testid="gp-stub">{t('wallet.gpStub')}</p>
+    {:else}
+      {#each packs as p (p.productId)}
+        <div class="row product" data-testid="product" data-kind="pack" data-pid={p.productId}>
+          <span class="name">{p.title}</span>
+          <span class="price">{formatAmount(p.moneyAmount, p.moneyCurrency)}&nbsp;{currencyLabel(p.moneyCurrency)}</span>
+          <button class="buy" disabled>{t('wallet.soon')}</button>
+        </div>
+      {/each}
+    {/if}
+
+    {#if !loading && values.length === 0 && (gpBuild || packs.length === 0)}
+      <p class="empty">{t('wallet.empty')}</p>
+    {/if}
+  </section>
+</div>
+
+{#if warnProduct}
+  <Modal title={t('wallet.warnTitle')} onclose={() => (warnProduct = null)}>
+    <p class="warn-body" data-testid="warn">{t('wallet.warnBody')}</p>
+    <div class="warn-actions">
+      <button class="cancel" onclick={() => (warnProduct = null)}>{t('wallet.warnCancel')}</button>
+      <button class="buy" data-testid="warn-confirm" onclick={() => warnProduct && doBuy(warnProduct)}
+        >{t('wallet.warnConfirm')}</button
+      >
+    </div>
+  </Modal>
+{/if}
+
+<style>
+  .wallet {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    padding: var(--pad);
+  }
+  section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  h3 {
+    margin: 0;
+    font-size: 0.95rem;
+    color: var(--text-muted);
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--surface);
+  }
+  .name {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .value,
+  .price {
+    flex: 0 0 auto;
+    font-weight: 600;
+    white-space: nowrap;
+  }
+  .muted {
+    color: var(--text-muted);
+    font-weight: 400;
+  }
+  .buy {
+    flex: 0 0 auto;
+    padding: 8px 14px;
+    border: 1px solid var(--accent);
+    background: var(--accent);
+    color: var(--accent-text);
+    border-radius: var(--radius-sm);
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .buy:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  .empty,
+  .stub {
+    margin: 0;
+    padding: 10px 12px;
+    color: var(--text-muted);
+  }
+  .stub {
+    border: 1px dashed var(--border);
+    border-radius: var(--radius-sm);
+  }
+  .warn-body {
+    margin: 0 0 14px;
+  }
+  .warn-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+  .cancel {
+    padding: 8px 14px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+  }
+</style>