===============================================================
  TAREAS DE USABILIDAD — Oasis Mobile
  Creado: 2026-05-09
===============================================================

Lista de mejoras pendientes de UX/usabilidad en la app móvil.
Estado actual y especificacion de cada tarea.

===============================================================
  TAREA 1 — PAGINADOR MÓVIL EN TODAS LAS BARRAS DE FILTROS
===============================================================

OBJETIVO
--------
Aplicar el mismo paginador CSS-only (.actpager) que ya está en
activity/agenda/trending/etc al resto de submenús con filtros.

El paginador muestra 2 botones por página con flechas ‹ › que
permiten navegar 2 en 2. Sin scroll del dedo, sin JS, sin
problemas de CSP ni caché.

POR QUÉ
-------
Actualmente las vistas sin paginador tienen los botones en
flex-wrap (multilinea), ocupando muchas filas y obligando al
usuario a hacer scroll vertical para ver toda la pantalla.
Con el paginador queda compacto: 1 fila + flechas.

CÓMO IMPLEMENTAR (patrón replicable)
------------------------------------
Para cada vista:

1. Importar el helper:
     const { renderMobilePager } = require('./mobile_pager')

2. Construir el array de items:
     const items = FILTERS.map(f => ({
       type: f,
       label: i18n[`${prefijo}Filter${capitalize(f)}`] || f.toUpperCase()
     }))

3. Generar el paginador:
     const mobilePager = renderMobilePager({
       items,
       idPrefix: 'XXp',           // único en la página (3-4 letras)
       formAction: '/ruta',
       currentFilter: filter,
       pageSize: 2
     })

4. Insertar el paginador ANTES del contenedor desktop:
     mobilePager,
     div({ class: '<clase-original> actpager-desktop-only' },
       ...filtros originales
     )

5. La regla CSS .actpager-desktop-only { display: none } en
   mobile.css ya oculta el contenedor desktop en móvil.

ARCHIVOS DE REFERENCIA
----------------------
  src/views/mobile_pager.js       <- helper renderMobilePager
  src/views/activity_view.js      <- ejemplo más completo (36 filtros)
  src/views/banking_views.js      <- ejemplo con extraHidden / search
  src/client/assets/styles/mobile.css <- reglas del paginador

===============================================================
  INVENTARIO COMPLETO DE SUBMENÚS
===============================================================

YA TIENEN PAGINADOR (8 vistas)
------------------------------
  Submenú        Ruta              Filtros  Páginas
  -------------------------------------------------
  activity       /activity         36       18
  agenda         /agenda           13       7
  trending       /trending         13       7
  blockexplorer  /blockexplorer    ~31      16
  banking        /banking          10       5
  inhabitants    /inhabitants      9        5
  calendars      /calendars        6        3
  logs           /logs             5        3

PENDIENTES DE PAGINADOR (24 vistas)
-----------------------------------

  Prioridad ALTA (>=8 filtros):
    market         /market         ~12  filters
    transfer       /transfers      ~10  filters
    image          /images         ~8   filters
    event          /events         ~8   filters
    tribes         /tribes         8    tribe-mode-buttons
    opinions       /opinions       8    mode-buttons

  Prioridad MEDIA (5-7 filtros):
    audio          /audios         ~6   filters
    video          /videos         ~6   filters
    document       /docs           ~6   filters
    bookmark       /bookmarks      ~6   filters
    torrents       /torrents       ~6   filters
    task           /tasks          ~6   filters
    favorites      /favorites      ~6   filters
    maps           /maps           6    filters
    vote           /votations      5    filters
    pads           /pads           5    tribe-mode-buttons
    jobs           /jobs           5    filters
    projects       /projects       5    filters
    reports        /reports        5    filters
    forum          /forum          5+   filter-group + mode-buttons-cols

  Prioridad BAJA (4 filtros):
    chats          /chats          4    tribe-mode-buttons
    shops          /shops          4    tribe-mode-buttons
    games          /games          4    filter-group
    feed           /feed           4    mode-buttons-row

NO NECESITAN PAGINADOR (caben en una fila)
------------------------------------------
  modules        /modules          4 presets (minimal/social/economy/full)
  stats          /stats            3 modos
  tags           /tags             3
  parliament     /parliament       1
  courts         /courts           2

SIN FILTROS / CASOS ESPECIALES
------------------------------
  peers, wallet, AI, invites, settings, search, pixelia,
  legacy, cipher, pm, cv

===============================================================
  PATRONES ESPECIALES A TENER EN CUENTA
===============================================================

  1. tribe-mode-buttons (chats/pads/shops/tribes)
     Tienen un botón "Create" al final del array. Hay que
     decidir si meterlo en el paginador o dejarlo fuera.
     Recomendación: dejar el Create FUERA, antes o despues
     del paginador, como botón propio destacado.

  2. mode-buttons-cols / filter-group (forum)
     Tiene múltiples columnas con filtros agrupados.
     Aplanar todo en un solo array para el paginador.

  3. Filtros con parámetros extra (sort, q, etc)
     Algunos forms inyectan hidden inputs (sort, page, etc).
     Usar `extraHidden: { sort, q }` en renderMobilePager.
     Ya lo soporta el helper, ver banking_views.js como
     ejemplo.

  4. Vistas con filter-btn en otras secciones
     filter-btn se usa también para botones "View details",
     "Visit", etc. Importante NO tocar esos. Solo modificar
     la barra de filtros principal del listado.

===============================================================
  TAREA 2 — REVISAR mode-buttons-cols Y mode-buttons-row
===============================================================

En vistas como forum, feed y blockchain hay clases
mode-buttons-cols y mode-buttons-row que en móvil hacen
flex-wrap (multilinea) por la regla en mobile.css.

Decidir si:
  a) Aplicar paginador y dejar la versión desktop intacta
  b) Solo aplicar flex-wrap (lo actual)
  c) Otro layout específico

===============================================================
  TAREA 3 — UNIFORMAR EL HEADER MÓVIL EN VISTAS DE DETALLE
===============================================================

Cuando entras al detalle (ej: /tribe/X, /event/Y), el header
puede comportarse distinto. Revisar que el hamburger nav y
quicklinks siempre se muestren correctamente.

===============================================================
  TAREA 4 — REVISAR FORMULARIOS LARGOS EN MÓVIL
===============================================================

Vistas con formularios largos (create tribe, edit profile, etc):
  - tribes_view (create/edit form)
  - cv_view
  - settings_view

Verificar que los inputs se vean bien en móvil, sin overflow.

===============================================================
  TAREA 5 — CONSIDERAR DESACTIVAR PAGINADOR EN TABLET
===============================================================

El media query actual es @media (max-width: 768px). En tablets
estrechas en vertical (orientación portrait) puede ser que
caben más botones. Considerar punto de quiebre 600px y dejar
el desktop layout >600px.

===============================================================
  NOTA SOBRE PRIORIZACIÓN
===============================================================

El usuario quiere uniformidad pero hay que sopesar:
  - Vistas con 4 botones: el flex-wrap actual ya queda en
    una sola fila normalmente. Poner paginador NO mejora
    mucho (4 botones quedan en 2 páginas de 2).
  - Vistas con 5-7 botones: ahora ocupan 2-3 filas en móvil.
    El paginador las compacta a 1 fila.
  - Vistas con 8+ botones: claramente necesitan paginador.

Decisión recomendada: empezar por prioridad ALTA (6 vistas)
y MEDIA (14 vistas) — 20 vistas en total. La prioridad BAJA
(4 vistas con 4 botones cada una) se puede dejar para más
adelante.