Chat responsive pour mobile : composants React

Adaptation du Chat Mobile : Nouveaux Composants et Optimisations

L'équipe a implémenté une réactivité mobile complète pour les applications basées sur WebView avec une fonctionnalité rationalisée pour réduire la charge. Ajout de la bibliothèque RNNoiser pour le traitement audio, une fonctionnalité de messages programmés, refonte de la saisie avec un formatage étendu, réduction de la latence des requêtes et optimisation du stockage des données. Tous ces changements visent les développeurs intermédiaires/seniors travaillant avec React Native et WebView.

Interface Utilisateur Adaptative pour les Écrans Tactiles

Développement de MobileBottomNav — une barre de navigation inférieure minimaliste avec cinq onglets : serveurs, chats, kanban, recherche et profil. Le composant est sans état, transmettant uniquement l'ID de la vue active via onViewChange sans logique interne ni appels 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: 'Serveurs' },
        { id: 'direct-chats', icon: 'chat', label: 'Chats' },
        { id: 'chat-board', icon: 'board', label: 'Kanban' },
        { id: 'mobile-search', icon: 'search', label: 'Recherche' },
        { id: 'profile', label: 'Profil', 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>
    );
}

L'onglet profil utilise UserAvatar au lieu d'une icône pour une reconnaissance visuelle. Le composant parent gère le changement de vue en fonction de l'ID reçu.

Liste de Serveurs Optimisée

Au lieu du LeftMenu de bureau, MobileServersList a été créé pour les interactions tactiles. Le panneau gauche affiche les icônes de serveurs dans un style similaire à Discord, le panneau droit montre les sujets du serveur sélectionné. Le composant réutilise le hook useLeftMenu pour la logique métier : chargement des listes, événements WebSocket, création de serveurs. Cela minimise la duplication de code et élimine les retards de rendu dus à la mise en page de bureau.

Toucher un serveur met à jour les sujets à droite sans rechargement complet. Toucher un sujet ouvre le chat.

Saisie Refondue avec Formatage Étendu

La saisie est adaptée au format Mattermost, empêchant l'habillage des éléments de l'éditeur. Les fonctionnalités incluent :

• Gras et italique : formatage Markdown standard.
• Bloc de code : coloration syntaxique pour insérer des extraits.
• Diagrammes PlantUML : génération d'UML à partir du balisage texte directement dans le message.
• Citation : mise en évidence de bloc avec >.
• Lien : intégration d'hyperliens.
• Liste : à puces ou numérotée.
• Sondage : vote interactif.

Cela permet aux développeurs seniors d'échanger du contenu technique sans outils externes.

Menus Contextuels et Gestes

Le menu inférieur est activé par un appui long — réutilisation d'un composant existant avec des styles mobiles sous isMobile. Les réactions aux messages s'ouvrent dans une superposition adaptative. Le menu droit est optimisé avec CSS et une logique conditionnelle pour les appareils mobiles.

Une section "Programmés" séparée agrège tous les messages planifiés pour un aperçu rapide du planificateur.

Profil Utilisateur Mobile

Création d'un composant MobileProfilePage dédié avec une carte utilisateur, des sections de statut et de paramètres.

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">Modifier le Profil</span>
                    <span className="mobile-profile-item-arrow"><Icon name="chevronRight" size={16} /></span>
                </div>
                {/* Autres éléments similaires */}
            </div>
            {/* Sections statut et déconnexion */}
        </div>
    </div>
);

Chaque élément déclenche un rappel ; le composant ne gère pas les modales ou la navigation.

Améliorations Supplémentaires

• RNNoiser : intégré pour réduire le bruit dans les messages vocaux et les appels.
• Latence : optimisation des requêtes via mise en cache et regroupement.
• Stockage des données : entièrement reconstruit en tenant compte des contraintes mémoire mobiles.

Ces changements garantissent les performances sur les appareils bas de gamme sans compromettre la fonctionnalité.

Points Clés

• Réactivité WebView complète avec des composants séparés pour les interfaces tactiles.
• Réutilisation de la logique métier via des hooks sans duplication.
• Saisie étendue avec PlantUML et sondages pour les chats techniques.
• Messages programmés dans une section dédiée pour une planification pratique.
• Approche sans état dans les composants UI pour un rendu prévisible.

— Editorial Team