diff --git a/.claude/settings.json b/.claude/settings.json deleted file mode 100644 index 25175175..00000000 --- a/.claude/settings.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "permissions": { - "allow": [ - "Bash(git -C /home/sito/COFRE/CODERS/oasis_mobile add nodejs-project/nodejs-project/src/models/tribes_model.js nodejs-project/nodejs-project/src/models/main_models.js nodejs-project/nodejs-project/src/models/blockchain_model.js nodejs-project/nodejs-project/src/views/blockchain_view.js nodejs-project/nodejs-project/src/client/assets/styles/style.css)", - "Bash(git -C /home/sito/COFRE/CODERS/oasis_mobile commit -m ' *)" - ] - } -} diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..4aadb2b5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,21 @@ +# Claude Code +.claude/ +.claude + +# IDE +.idea/ +*.swp +*.swo + +# Node +node_modules/ +npm-debug.log +yarn-error.log + +# OS +.DS_Store +Thumbs.db + +# Build artifacts +*.apk.tmp +/tmp/ diff --git a/CONTEXT/tareas_usabilidad.txt b/CONTEXT/tareas_usabilidad.txt new file mode 100644 index 00000000..ceddb7d8 --- /dev/null +++ b/CONTEXT/tareas_usabilidad.txt @@ -0,0 +1,211 @@ +=============================================================== + 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: ' 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.