bienvenida: paso Perfil (workflow) de un toque, Activismo primero; Ajustes con la misma lista; fuera Personal/Social de la barra de arriba

docs/USABILIDAD_PAD.txt

@@ -244,3 +244,11 @@ Con la navegación nueva (portada = actividad, pestaña Menú abajo).
   "Conversaciones" se partía a 360 px). En Ajustes, lo mismo, y la sección va justo
   después del idioma para encontrarla fácil. [vista propia + una línea en welcome_view
   y settings_view]
+- Bienvenida: faltaba elegir para qué se usa Oasis (el backend del dev quita ese paso
+  en el móvil). Vuelve como paso "Perfil", el segundo, justo después de la identidad:
+  Activismo primero, luego Acampada y el resto, cada uno con una línea de para qué
+  sirve. Un toque y guardado. En Ajustes, la misma lista. [vista propia + una línea
+  en welcome_view y settings_view]
+- Con el perfil Activismo (45 módulos) los botones Personal/Social de la barra de
+  arriba no cabían a 360 px y tapaban el logo. Ya no hacían falta (filtraban el
+  lanzador, que ahora está en la hoja del menú): quitados. [vista propia]

src/client/assets/styles/hive_acampada.css

@@ -472,19 +472,19 @@ label.welcome-ux-option:has(input:checked) { background: var(--a26-neon) !import
 .chat-reply-cancel,
 .chat-message-meta .chat-reply-btn { color: var(--a26-fg) !important; }
 
-/* ---------- skins y workflows en Ajustes ---------- */
+/* ---------- skins en Ajustes ---------- */
-.skin-card, .workflow-card {
+.skin-card {
   background: var(--a26-bg) !important; color: var(--a26-fg) !important;
   border: var(--a26-bd) !important; border-radius: var(--a26-radius) !important;
   box-shadow: 0 5px 0 var(--a26-fg) !important;
 }
 .skin-card .skin-shot { border: var(--a26-bd-fino); }
-.skin-card .skin-name, .workflow-card {
+.skin-card .skin-name {
   font-family: var(--a26-tit) !important; font-weight: 400 !important;
   text-transform: uppercase; letter-spacing: .02em; font-size: 21px !important;
 }
-.skin-card.is-current, .workflow-card.is-current { background: var(--a26-neon) !important; color: var(--a26-fg) !important; border: var(--a26-bd) !important; }
+.skin-card.is-current { background: var(--a26-neon) !important; color: var(--a26-fg) !important; border: var(--a26-bd) !important; }
-.skin-card:active, .workflow-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--a26-fg) !important; background: var(--a26-neon) !important; }
+.skin-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--a26-fg) !important; background: var(--a26-neon) !important; }
 
 /* ---------- letra y botones mas grandes, para leer sin gafas ---------- */
 body { font-size: 18px; }

src/client/assets/styles/mobile_base.css

@@ -1000,11 +1000,3 @@ body:has(.oasis-nav-side-toggle) { padding-top: 84px !important; }
 .skin-card .skin-name { font-size: 17px; font-weight: 700; text-align: center; }
 .skin-card.is-current { border: 2px solid #FFD700 !important; background: #2a2412 !important; }
 .skin-card.is-current .skin-name::after { content: "  \2713"; }
-.workflow-pick { display: flex !important; flex-direction: column; gap: 10px; margin: 0; }
-.workflow-card {
-  width: 100% !important; min-height: 56px !important; margin: 0 !important; padding: 10px 16px !important;
-  font-size: 18px !important; text-align: left !important;
-  background: #1c1c1c !important; color: #e6e6e6 !important; border: 1px solid #444 !important; border-radius: 14px !important;
-}
-.workflow-card.is-current { border: 2px solid #FFD700 !important; background: #2a2412 !important; color: #FFD700 !important; }
-.workflow-card.is-current::after { content: "  \2713"; }

src/client/assets/styles/mobile_ux.css

@@ -384,7 +384,7 @@ body .main-content > .main-column { padding-left: 0 !important; padding-right: 0
 /* ---------- regla general de letra para botones ---------- */
 /* todo boton en letra del sistema; Anton solo en el principal de cada pantalla
    (el negro, .create-button) y en las tarjetas de aspecto */
-.main-column :is(button, input[type="submit"], input[type="button"], .filter-btn, a.filter-btn):not(.create-button):not(.welcome-banner-start):not(.skin-card):not(.workflow-card):not(.btn-singleview) {
+.main-column :is(button, input[type="submit"], input[type="button"], .filter-btn, a.filter-btn):not(.create-button):not(.welcome-banner-start):not(.skin-card):not(.ux-pick-card):not(.btn-singleview) {
   font-family: var(--ux-text) !important;
   font-weight: 700 !important;
   letter-spacing: .02em !important;
@@ -610,12 +610,19 @@ body:has(#oasis-menu-toggle:checked) form.oasis-phone-state { display: none !imp
 .main-column .ux-pick-shot { display: block; flex: 0 0 76px; width: 76px; height: auto; border-radius: 8px; margin: 0 12px 0 0; border: 1px solid rgba(0, 0, 0, .2); }
 .main-column .ux-pick-label { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 16px; font-weight: 700; line-height: 1.2; }
 .main-column .ux-pick-now { flex: 0 0 auto; margin-left: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
+/* perfil de uso: sin miniatura, nombre y una linea de para que sirve */
+.main-column .ux-pick-text { flex: 1 1 auto; min-width: 0; display: block; text-align: left; }
+.main-column .ux-pick-text .ux-pick-label { display: block; }
+.main-column .ux-pick-sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.3; opacity: .8; }
+.main-column .wf-pick button.ux-pick-card { padding: 10px 14px !important; }
+.main-column .wf-pick .ux-pick-grid { display: block !important; }
 @media (min-width: 700px) {
   .main-column .ux-pick-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 12px; }
   .main-column button.ux-pick-card { flex-direction: column; text-align: center; margin: 0 !important; padding: 10px !important; }
   .main-column .ux-pick-shot { width: 100%; flex: 0 0 auto; margin: 0 0 8px; }
   .main-column .ux-pick-now { margin: 4px 0 0; }
 }
+@media (min-width: 700px) { .main-column .wf-pick button.ux-pick-card { flex-direction: row; text-align: left; margin: 0 0 10px !important; } }
 
 /* ---------- tabletas y pantallas anchas ---------- */
 /* a 800dp todo se estiraba: lineas larguisimas y la hoja del menu con cinco iconos

src/client/assets/translations/i18n_fork.js

@@ -22,6 +22,18 @@ module.exports = {
     bbMenuClose: "Close",
     uxPickHint: "Tap one and it is saved. You can change it any time in Settings.",
     uxPickCurrent: "In use",
+    welcomeStepUseMobile: "Profile",
+    welcomeHintUseMobile: "What you use Oasis for. It turns on the modules you need.",
+    wfHint_activists: "Assemblies, tribes, votes, forums and shared documents",
+    wfHint_acampada: "Just what a camp needs: chats, rooms, committees and voting",
+    wfHint_full: "All modules",
+    wfHint_default: "All modules",
+    wfHint_social: "Feed, photos, events and friends",
+    wfHint_kids: "School, games and making things",
+    wfHint_night: "Blogs, music, videos and talk",
+    wfHint_jobs: "Work, projects, market and office",
+    wfHint_business: "Economy, banking, office and documents",
+    wfHint_mobile: "The basics for a phone",
     workflow_acampada: "Camp",
     tribeSectionsMore: "More",
     tribeSectionsLabel: "Sections",
@@ -104,6 +116,18 @@ module.exports = {
     bbMenuClose: "Cerrar",
     uxPickHint: "Toca uno y queda guardado. Puedes cambiarlo cuando quieras en Ajustes.",
     uxPickCurrent: "En uso",
+    welcomeStepUseMobile: "Perfil",
+    welcomeHintUseMobile: "Para qué usas Oasis. Enciende los módulos que hacen falta.",
+    wfHint_activists: "Asambleas, tribus, votaciones, foros y documentos compartidos",
+    wfHint_acampada: "Lo justo para una acampada: chats, salas, comisiones y votar",
+    wfHint_full: "Todos los módulos",
+    wfHint_default: "Todos los módulos",
+    wfHint_social: "Feed, fotos, eventos y amistades",
+    wfHint_kids: "Escuela, juegos y hacer cosas",
+    wfHint_night: "Blogs, música, vídeos y charla",
+    wfHint_jobs: "Trabajo, proyectos, mercado y oficina",
+    wfHint_business: "Economía, banca, oficina y documentos",
+    wfHint_mobile: "Lo básico para el móvil",
     workflow_acampada: "Acampada",
     tribeSectionsMore: "Más",
     tribeSectionsLabel: "Secciones",
@@ -192,6 +216,18 @@ module.exports = {
     bbMenuClose: "Fermer",
     uxPickHint: "Touchez-en un et c'est enregistré. Vous pouvez le changer à tout moment dans les Paramètres.",
     uxPickCurrent: "Actuel",
+    welcomeStepUseMobile: "Profil",
+    welcomeHintUseMobile: "À quoi vous sert Oasis. Active les modules nécessaires.",
+    wfHint_activists: "Assemblées, tribus, votes, forums et documents partagés",
+    wfHint_acampada: "Le nécessaire pour un campement : chats, salons, commissions et votes",
+    wfHint_full: "Tous les modules",
+    wfHint_default: "Tous les modules",
+    wfHint_social: "Fil, photos, événements et amis",
+    wfHint_kids: "École, jeux et création",
+    wfHint_night: "Blogs, musique, vidéos et discussions",
+    wfHint_jobs: "Travail, projets, marché et bureau",
+    wfHint_business: "Économie, banque, bureau et documents",
+    wfHint_mobile: "L'essentiel pour le téléphone",
     workflow_acampada: "Campement",
     tribeSectionsMore: "Plus",
     tribeSectionsLabel: "Sections",
@@ -274,6 +310,18 @@ module.exports = {
     bbMenuClose: "Itxi",
     uxPickHint: "Bat ukitu eta gordeta geratzen da. Nahi duzunean alda dezakezu Ezarpenetan.",
     uxPickCurrent: "Erabiltzen",
+    welcomeStepUseMobile: "Profila",
+    welcomeHintUseMobile: "Oasis zertarako erabiltzen duzun. Behar diren moduluak pizten ditu.",
+    wfHint_activists: "Batzarrak, tribuak, bozketak, foroak eta dokumentu partekatuak",
+    wfHint_acampada: "Kanpaldi baterako behar dena: txatak, gelak, batzordeak eta bozkatzea",
+    wfHint_full: "Modulu guztiak",
+    wfHint_default: "Modulu guztiak",
+    wfHint_social: "Jarioa, argazkiak, ekitaldiak eta lagunak",
+    wfHint_kids: "Eskola, jolasak eta sortzea",
+    wfHint_night: "Blogak, musika, bideoak eta solasa",
+    wfHint_jobs: "Lana, proiektuak, merkatua eta bulegoa",
+    wfHint_business: "Ekonomia, banka, bulegoa eta dokumentuak",
+    wfHint_mobile: "Mugikorrerako oinarrizkoa",
     workflow_acampada: "Kanpaldia",
     tribeSectionsMore: "Gehiago",
     tribeSectionsLabel: "Atalak",
@@ -356,6 +404,18 @@ module.exports = {
     bbMenuClose: "Schließen",
     uxPickHint: "Tippe eins an und es ist gespeichert. Du kannst es jederzeit in den Einstellungen ändern.",
     uxPickCurrent: "Aktiv",
+    welcomeStepUseMobile: "Profil",
+    welcomeHintUseMobile: "Wofür du Oasis nutzt. Schaltet die nötigen Module ein.",
+    wfHint_activists: "Versammlungen, Stämme, Abstimmungen, Foren und gemeinsame Dokumente",
+    wfHint_acampada: "Was ein Camp braucht: Chats, Räume, Arbeitsgruppen und Abstimmen",
+    wfHint_full: "Alle Module",
+    wfHint_default: "Alle Module",
+    wfHint_social: "Feed, Fotos, Termine und Freunde",
+    wfHint_kids: "Schule, Spiele und Selbermachen",
+    wfHint_night: "Blogs, Musik, Videos und Gespräche",
+    wfHint_jobs: "Arbeit, Projekte, Markt und Büro",
+    wfHint_business: "Wirtschaft, Bank, Büro und Dokumente",
+    wfHint_mobile: "Das Wichtigste fürs Handy",
     workflow_acampada: "Camp",
     tribeSectionsMore: "Mehr",
     tribeSectionsLabel: "Bereiche",
@@ -438,6 +498,18 @@ module.exports = {
     bbMenuClose: "Chiudi",
     uxPickHint: "Toccane uno ed è salvato. Puoi cambiarlo quando vuoi nelle Impostazioni.",
     uxPickCurrent: "In uso",
+    welcomeStepUseMobile: "Profilo",
+    welcomeHintUseMobile: "A cosa ti serve Oasis. Attiva i moduli necessari.",
+    wfHint_activists: "Assemblee, tribù, votazioni, forum e documenti condivisi",
+    wfHint_acampada: "Il necessario per un accampamento: chat, stanze, commissioni e voto",
+    wfHint_full: "Tutti i moduli",
+    wfHint_default: "Tutti i moduli",
+    wfHint_social: "Feed, foto, eventi e amicizie",
+    wfHint_kids: "Scuola, giochi e creatività",
+    wfHint_night: "Blog, musica, video e chiacchiere",
+    wfHint_jobs: "Lavoro, progetti, mercato e ufficio",
+    wfHint_business: "Economia, banca, ufficio e documenti",
+    wfHint_mobile: "L'essenziale per il telefono",
     workflow_acampada: "Accampata",
     tribeSectionsMore: "Altro",
     tribeSectionsLabel: "Sezioni",
@@ -520,6 +592,18 @@ module.exports = {
     bbMenuClose: "Fechar",
     uxPickHint: "Toque num e fica guardado. Pode mudá-lo quando quiser nas Definições.",
     uxPickCurrent: "Em uso",
+    welcomeStepUseMobile: "Perfil",
+    welcomeHintUseMobile: "Para que usa o Oasis. Liga os módulos necessários.",
+    wfHint_activists: "Assembleias, tribos, votações, fóruns e documentos partilhados",
+    wfHint_acampada: "O necessário para um acampamento: chats, salas, comissões e votar",
+    wfHint_full: "Todos os módulos",
+    wfHint_default: "Todos os módulos",
+    wfHint_social: "Feed, fotos, eventos e amizades",
+    wfHint_kids: "Escola, jogos e criar coisas",
+    wfHint_night: "Blogues, música, vídeos e conversa",
+    wfHint_jobs: "Trabalho, projetos, mercado e escritório",
+    wfHint_business: "Economia, banca, escritório e documentos",
+    wfHint_mobile: "O básico para o telemóvel",
     workflow_acampada: "Acampada",
     tribeSectionsMore: "Mais",
     tribeSectionsLabel: "Secções",
@@ -602,6 +686,18 @@ module.exports = {
     bbMenuClose: "关闭",
     uxPickHint: "点一下即保存。随时可以在设置中更改。",
     uxPickCurrent: "使用中",
+    welcomeStepUseMobile: "用途",
+    welcomeHintUseMobile: "你用 Oasis 做什么。会打开需要的模块。",
+    wfHint_activists: "集会、部落、投票、论坛和共享文档",
+    wfHint_acampada: "营地所需：聊天、房间、小组和投票",
+    wfHint_full: "全部模块",
+    wfHint_default: "全部模块",
+    wfHint_social: "动态、照片、活动和朋友",
+    wfHint_kids: "学校、游戏和创作",
+    wfHint_night: "博客、音乐、视频和闲聊",
+    wfHint_jobs: "工作、项目、市场和办公",
+    wfHint_business: "经济、银行、办公和文档",
+    wfHint_mobile: "手机基本功能",
     workflow_acampada: "营地",
     tribeSectionsMore: "更多",
     tribeSectionsLabel: "板块",
@@ -684,6 +780,18 @@ module.exports = {
     bbMenuClose: "إغلاق",
     uxPickHint: "المس واحدًا ويُحفظ. يمكنك تغييره في أي وقت من الإعدادات.",
     uxPickCurrent: "قيد الاستخدام",
+    welcomeStepUseMobile: "الملف",
+    welcomeHintUseMobile: "لماذا تستخدم Oasis. يفعّل الوحدات التي تحتاجها.",
+    wfHint_activists: "جمعيات وقبائل وتصويت ومنتديات ووثائق مشتركة",
+    wfHint_acampada: "ما يلزم للمخيم: دردشات وغرف ولجان وتصويت",
+    wfHint_full: "كل الوحدات",
+    wfHint_default: "كل الوحدات",
+    wfHint_social: "الموجز والصور والفعاليات والأصدقاء",
+    wfHint_kids: "المدرسة والألعاب والإبداع",
+    wfHint_night: "مدونات وموسيقى وفيديو ودردشة",
+    wfHint_jobs: "عمل ومشاريع وسوق ومكتب",
+    wfHint_business: "اقتصاد ومصرف ومكتب ووثائق",
+    wfHint_mobile: "الأساسيات للهاتف",
     workflow_acampada: "مخيم",
     tribeSectionsMore: "المزيد",
     tribeSectionsLabel: "الأقسام",
@@ -766,6 +874,18 @@ module.exports = {
     bbMenuClose: "बंद करें",
     uxPickHint: "एक पर टैप करें और वह सेव हो जाएगा। सेटिंग्स में इसे कभी भी बदल सकते हैं।",
     uxPickCurrent: "चालू",
+    welcomeStepUseMobile: "प्रोफ़ाइल",
+    welcomeHintUseMobile: "आप Oasis किस लिए इस्तेमाल करते हैं। ज़रूरी मॉड्यूल चालू करता है।",
+    wfHint_activists: "सभाएँ, ट्राइब, मतदान, फ़ोरम और साझा दस्तावेज़",
+    wfHint_acampada: "शिविर के लिए ज़रूरी: चैट, कमरे, समितियाँ और मतदान",
+    wfHint_full: "सभी मॉड्यूल",
+    wfHint_default: "सभी मॉड्यूल",
+    wfHint_social: "फ़ीड, फ़ोटो, कार्यक्रम और दोस्त",
+    wfHint_kids: "स्कूल, खेल और रचना",
+    wfHint_night: "ब्लॉग, संगीत, वीडियो और बातचीत",
+    wfHint_jobs: "काम, प्रोजेक्ट, बाज़ार और दफ़्तर",
+    wfHint_business: "अर्थव्यवस्था, बैंकिंग, दफ़्तर और दस्तावेज़",
+    wfHint_mobile: "फ़ोन के लिए बुनियादी",
     workflow_acampada: "शिविर",
     tribeSectionsMore: "और",
     tribeSectionsLabel: "खंड",
@@ -848,6 +968,18 @@ module.exports = {
     bbMenuClose: "Закрыть",
     uxPickHint: "Нажмите на вариант, и он сохранится. Изменить можно в любой момент в Настройках.",
     uxPickCurrent: "Сейчас",
+    welcomeStepUseMobile: "Профиль",
+    welcomeHintUseMobile: "Для чего вам Oasis. Включает нужные модули.",
+    wfHint_activists: "Собрания, племена, голосования, форумы и общие документы",
+    wfHint_acampada: "Всё для лагеря: чаты, комнаты, комиссии и голосование",
+    wfHint_full: "Все модули",
+    wfHint_default: "Все модули",
+    wfHint_social: "Лента, фото, события и друзья",
+    wfHint_kids: "Школа, игры и творчество",
+    wfHint_night: "Блоги, музыка, видео и общение",
+    wfHint_jobs: "Работа, проекты, рынок и офис",
+    wfHint_business: "Экономика, банк, офис и документы",
+    wfHint_mobile: "Основное для телефона",
     workflow_acampada: "Лагерь",
     tribeSectionsMore: "Ещё",
     tribeSectionsLabel: "Разделы",

src/models/fork_workflows.js

@@ -29,9 +29,10 @@ const register = () => {
     if (wf.WORKFLOWS.some(x => x.key === w.key)) continue;
     wf.WORKFLOWS.push(w);
     wf.WORKFLOW_KEYS.push(w.key);
-    // en el movil, la primera opcion del asistente
+    // en el asistente, detras de activistas (en el movil mobile_ui.workflowPick pone
-    if (process.env.OASIS_MOBILE === '1') wf.WIZARD_WORKFLOWS.unshift(w.key);
+    // Activismo y Acampada las primeras)
-    else wf.WIZARD_WORKFLOWS.push(w.key);
+    const at = wf.WIZARD_WORKFLOWS.indexOf('activists');
+    wf.WIZARD_WORKFLOWS.splice(at === -1 ? wf.WIZARD_WORKFLOWS.length : at + 1, 0, w.key);
   }
 };
 

src/views/hive_views.js

@@ -22,16 +22,13 @@ module.exports = ({ i18n }) => {
   const renderMobileTopbar = () => {
     // solo en movil: en escritorio manda la cabecera de upstream
     if (process.env.OASIS_MOBILE !== '1') return "";
-    // FORK_IA_UX v3: Personal/Community VUELVEN al topbar (ya funcionan: la hoja cerrada es
+    // Personal/Social ya no van aqui: filtraban el lanzador, que ahora esta en la hoja
-    // visibility:hidden y no bloquea los taps). Llena el top y da el filtro a un toque.
+    // del menu, y con muchos modulos (workflow activistas) no cabian a 360px y tapaban
-    const hiveFilter = (typeof global !== "undefined" && global.__OASIS_HIVE_FILTER__) || "";
+    // el logo. Queda el hueco para el boton de No molestar del telefono
     return div(
       { class: "oasis-mobile-topbar" },
       a({ class: "omt-logo", href: "/" }, img({ src: "/assets/images/snh-oasis.jpg", alt: "Oasis" })),
-      isCompact() ? div({ class: "omt-menus" }) : div({ class: "omt-menus" },
+      div({ class: "omt-menus" }),
-        a({ class: hiveFilter === "personal" ? "oasis-menu-btn active" : "oasis-menu-btn", href: hiveFilter === "personal" ? "/activity" : "/activity?hive=personal" }, span(i18n.menuPersonal || "Personal")),
-        a({ class: hiveFilter === "community" ? "oasis-menu-btn active" : "oasis-menu-btn", href: hiveFilter === "community" ? "/activity" : "/activity?hive=community" }, span(i18n.menuSocial || "Social"))
-      ),
       a({ class: "omt-avatar", href: "/profile" }, img({ src: (typeof global !== "undefined" && global.__OASIS_SELF_AVATAR__) || "/assets/images/default-avatar.png", alt: i18n.profile || "Profile" }))
     );
   };

src/views/mobile_ui.js

@@ -157,6 +157,36 @@ const uxPick = (action, cfg, withHint) => {
   );
 };
 
+// perfil de uso (workflow): igual, un boton por opcion con una linea de para que
+// sirve. Activismo y Acampada primero; el resto en el orden del dev
+const WORKFLOW_FIRST = ['activists', 'acampada'];
+const workflowPick = (action, current, keys, withHint) => {
+  const i18n = t();
+  const list = WORKFLOW_FIRST.filter(k => keys.includes(k)).concat(keys.filter(k => !WORKFLOW_FIRST.includes(k)));
+  const name = (k) => k === 'full' ? (i18n.welcomeWorkflow_full || k) : (i18n[`workflow_${k}`] || k);
+  return form({ method: 'POST', action, class: 'ux-pick wf-pick' },
+    withHint ? p({ class: 'ux-pick-hint' }, i18n.uxPickHint || 'Tap one and it is saved. You can change it any time in Settings.') : null,
+    div({ class: 'ux-pick-grid' },
+      ...list.map(k => button(Object.assign({ type: 'submit', name: 'workflow', value: k, class: k === current ? 'ux-pick-card is-current' : 'ux-pick-card' }, k === current ? { 'aria-current': 'true' } : {}),
+        span({ class: 'ux-pick-text' },
+          span({ class: 'ux-pick-label' }, name(k)),
+          i18n[`wfHint_${k}`] ? span({ class: 'ux-pick-sub' }, i18n[`wfHint_${k}`]) : null),
+        k === current ? span({ class: 'ux-pick-now' }, i18n.uxPickCurrent || 'In use') : null
+      ))
+    )
+  );
+};
+
+// pasos de la bienvenida en el movil: el backend del dev quita el de uso en el movil;
+// aqui vuelve, el segundo, justo despues de la identidad (/welcome/workflow es suyo)
+const welcomeSteps = (usable) => {
+  if (usable.includes('workflow')) return usable;
+  const out = usable.slice();
+  const at = out.indexOf('profile');
+  out.splice(at === -1 ? 0 : at + 1, 0, 'workflow');
+  return out;
+};
+
 // ---------- acciones de tarjeta ----------
 
 // borrar pide un segundo toque: la X abre "¿Borrar? Si, borrar" y solo ese boton
@@ -200,6 +230,6 @@ const welcomeBannerAction = () => t().welcomeBannerActionMobile || t().welcomeBa
 
 module.exports = {
   isMobile, VOTE_KINDS, voteKindPicker, voteBars, voteOwnNote, tribeRow, tribeTabs,
-  settingsOrder, languagePick, uxPick, deleteConfirm, footerLine,
+  settingsOrder, languagePick, uxPick, workflowPick, welcomeSteps, deleteConfirm, footerLine,
   welcomeBannerHere, welcomeBannerText, welcomeBannerAction
 };

src/views/settings_view.js

@@ -72,10 +72,7 @@ const settingsView = (params) => {
   );
   const workflowPicker = () => section({ id: "workflows" },
     div({ class: "tags-header" }, h2(i18n.workflowsTitle), p(i18n.workflowsDescriptionMobile)),
-    form({ action: "/settings/workflow", method: "POST", class: "workflow-pick" },
+    mobileUi.workflowPick("/settings/workflow", activeWorkflow, WORKFLOWS.map(w => w.key))
-      ...WORKFLOWS.map(w => button({ type: "submit", name: "workflow", value: w.key, class: activeWorkflow === w.key ? "workflow-card is-current" : "workflow-card" },
-        i18n[`workflow_${w.key}`] || w.key))
-    )
   );
 
   const workflowSection = isMobile ? workflowPicker() : section({ id: "workflows" },

src/views/welcome_view.js

@@ -17,6 +17,7 @@ const SECTIONS = {
   community: ["welcomeStepCommunity", "welcomeHintCommunity"],
   greeting: ["welcomeStepIntro", "welcomeHintIntro"]
 }
+if (mobileUi.isMobile()) SECTIONS.workflow = ["welcomeStepUseMobile", "welcomeHintUseMobile"]
 
 const submitRow = (text) => div({ class: "welcome-action" }, button({ type: "submit" }, text))
 
@@ -54,6 +55,7 @@ const stepAction = (key, profile, status) => {
   }
   if (key === "workflow") {
     const selected = WIZARD_WORKFLOWS.includes(status.workflow) ? status.workflow : "full"
+    if (mobileUi.isMobile()) return mobileUi.workflowPick("/welcome/workflow", WIZARD_WORKFLOWS.includes(status.workflow) ? status.workflow : null, WIZARD_WORKFLOWS, true)
     return form({ method: "POST", action: "/welcome/workflow", class: "welcome-select-form" },
       select({ name: "workflow" },
         WIZARD_WORKFLOWS.map(k => option({ value: k, ...(k === selected ? { selected: true } : {}) }, k === "full" ? i18n.welcomeWorkflow_full : (i18n[`workflow_${k}`] || k)))
@@ -104,7 +106,7 @@ const stepAction = (key, profile, status) => {
 
 exports.welcomeView = async (status, profile = {}) => {
   const steps = status.steps || {}
-  const usable = status.usable || []
+  const usable = mobileUi.isMobile() ? mobileUi.welcomeSteps(status.usable || []) : (status.usable || [])
   const opened = usable.find(key => !steps[key])
   const html = template(
     i18n.welcomeTitle,