Chat responsive para móvil: componentes React

Adaptación de Chat Móvil: Nuevos Componentes y Optimizaciones

El equipo ha implementado una completa responsividad móvil para aplicaciones basadas en WebView con funcionalidad optimizada para reducir la carga. Se añadió la biblioteca RNNoiser para procesamiento de audio, una función de mensajes programados, se renovó la entrada con formato ampliado, se redujo la latencia de solicitudes y se optimizó el almacenamiento de datos. Todos los cambios están dirigidos a desarrolladores de nivel medio/senior que trabajan con React Native y WebView.

Interfaz de Usuario Adaptativa para Pantallas Táctiles

Se desarrolló MobileBottomNav: una barra de navegación inferior minimalista con cinco pestañas: servidores, chats, kanban, búsqueda y perfil. El componente no tiene estado, pasando solo el ID de vista activa a través de onViewChange sin lógica interna ni llamadas API.

import { Icon } from '@shared/ui/Icon';
import { UserAvatar } from '@shared/ui/UserAvatar';

export function MobileBottomNav({ 
    currentView, 
    onViewChange,
    user
}) {
    const tabs = [
        { id: 'general-chats', icon: 'groupChat', label: 'Servidores' },
        { id: 'direct-chats', icon: 'chat', label: 'Chats' },
        { id: 'chat-board', icon: 'board', label: 'Kanban' },
        { id: 'mobile-search', icon: 'search', label: 'Búsqueda' },
        { id: 'profile', label: 'Perfil', isProfile: true },
    ];

    return (
        <nav className="mobile-bottom-nav">
            {tabs.map(tab => (
                <button
                    key={tab.id}
                    className={`mobile-bottom-nav-tab ${currentView === tab.id ? 'active' : ''}`}
                    onClick={() => onViewChange(tab.id)}
                >
                    <span className="mobile-bottom-nav-icon">
                        {tab.isProfile ? (
                            <UserAvatar
                                avatar={user?.avatar}
                                userId={user?.user_id}
                                username={user?.username}
                                status={user?.status}
                                size={28}
                                showStatus={false}
                                className="mobile-bottom-nav-avatar"
                            />
                        ) : (
                            <Icon name={tab.icon} size={22} />
                        )}
                    </span>
                    <span className="mobile-bottom-nav-label">{tab.label}</span>
                </button>
            ))}
        </nav>
    );
}

La pestaña de perfil usa UserAvatar en lugar de un icono para reconocimiento visual. El componente padre maneja el cambio de vista según el ID recibido.

Lista de Servidores Optimizada

En lugar del LeftMenu de escritorio, se creó MobileServersList para interacciones táctiles. El panel izquierdo muestra iconos de servidores al estilo Discord, el panel derecho muestra temas del servidor seleccionado. El componente reutiliza el hook useLeftMenu para lógica de negocio: cargar listas, eventos WebSocket, crear servidores. Esto minimiza la duplicación de código y elimina retrasos de renderizado del diseño de escritorio.

Al tocar un servidor, se actualizan los temas a la derecha sin recarga completa. Al tocar un tema, se abre el chat.

Entrada Renovada con Formato Ampliado

La entrada está adaptada al formato Mattermost, evitando el ajuste de elementos del editor. La funcionalidad incluye:

• Negrita y cursiva: formato Markdown estándar.
• Bloque de código: resaltado de sintaxis para insertar fragmentos.
• Diagramas PlantUML: generación de UML desde marcado de texto directamente en el mensaje.
• Cita: resaltado de bloque con >.
• Enlace: incrustación de hipervínculos.
• Lista: viñetas o numerada.
• Encuesta: votación interactiva.

Esto permite a desarrolladores senior intercambiar contenido técnico sin herramientas externas.

Menús Contextuales y Gestos

El menú inferior se activa con un toque largo: reutilizando un componente existente con estilos móviles bajo isMobile. Las reacciones de mensajes se abren en una superposición adaptativa. El menú derecho está optimizado con CSS y lógica condicional para dispositivos móviles.

Una sección separada "Programados" agrega todos los mensajes planificados para una vista rápida del programador.

Perfil de Usuario Móvil

Se creó un componente dedicado MobileProfilePage con tarjeta de usuario, estado y secciones de configuración.

return (
    <div className="mobile-profile-page">
        <div className="mobile-profile-page-header">
            <div className="mobile-profile-user-card">
                <div className="mobile-profile-avatar">
                    {avatarUrl ? (
                        <img src={avatarUrl} alt={user.username} className="mobile-profile-avatar-img" />
                    ) : (
                        <div className="mobile-profile-avatar-placeholder">{initials}</div>
                    )}
                    <span className={`status-icon ${user.status || 'offline'} mobile-profile-status"></span>
                </div>
                <div className="mobile-profile-info">
                    <div className="mobile-profile-username">{user.username}</div>
                    <div className="mobile-profile-handle">{user.handle || `@${user.username}`}</div>
                </div>
            </div>
        </div>

        <div className="mobile-profile-page-content">
            <div className="mobile-profile-section">
                <div className="mobile-profile-item" onClick={onOpenProfile}>
                    <span className="mobile-profile-item-icon"><Icon name="user" size={20} /></span>
                    <span className="mobile-profile-item-text">Editar Perfil</span>
                    <span className="mobile-profile-item-arrow"><Icon name="chevronRight" size={16} /></span>
                </div>
                {/* Otros elementos de manera similar */}
            </div>
            {/* Secciones de estado y cierre de sesión */}
        </div>
    </div>
);

Cada elemento activa una devolución de llamada; el componente no gestiona modales ni navegación.

Mejoras Adicionales

• RNNoiser: integrado para reducir ruido en mensajes de voz y llamadas.
• Latencia: solicitudes optimizadas mediante caché y agrupación.
• Almacenamiento de datos: completamente reconstruido considerando limitaciones de memoria móvil.

Estos cambios garantizan rendimiento en dispositivos de gama baja sin comprometer funcionalidad.

Conclusiones Clave

• Responsividad completa de WebView con componentes separados para interfaces táctiles.
• Reutilización de lógica de negocio mediante hooks sin duplicación.
• Entrada ampliada con PlantUML y encuestas para chats técnicos.
• Mensajes programados en una sección dedicada para conveniencia de planificación.
• Enfoque sin estado en componentes de UI para renderizado predecible.

— Editorial Team