Adaptivní chat pro mobily: React komponenty

Mobilní adaptace chatu: nové komponenty a optimalizace

Tým implementoval plnou responzivitu pro mobilní zařízení založenou na WebView s omezenou funkcionalitou pro snížení zátěže. Přidána knihovna RNNoiser pro zpracování zvuku, funkce odložených zpráv, přepracován input s rozšířeným formátováním, snížena latence požadavků a optimalizováno ukládání dat. Všechny změny jsou zaměřeny na middle/senior-vývojáře pracující s React Native a WebView.

Adaptivní UI pro dotyková rozhraní

Vyvinut MobileBottomNav — minimalistický spodní navigační panel s pěti záložkami: servery, chaty, kanban, vyhledávání a profil. Komponenta je stateless, předává pouze ID aktivního zobrazení přes onViewChange bez vnitřní logiky nebo API-volání.

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: 'Servery' },
        { id: 'direct-chats', icon: 'chat', label: 'Chaty' },
        { id: 'chat-board', icon: 'board', label: 'Kanban' },
        { id: 'mobile-search', icon: 'search', label: 'Vyhledávání' },
        { 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>
    );
}

Záložka profilu používá UserAvatar místo ikony pro vizuální rozpoznání. Nadřazená komponenta zpracovává přepínání zobrazení na základě přijatého ID.

Optimalizovaný seznam serverů

Namísto desktopového LeftMenu vytvořen MobileServersList pro dotykové interakce. Levá panel — ikony serverů ve stylu Discord, pravá — témata vybraného serveru. Komponenta znovu používá hook useLeftMenu pro business logiku: načítání seznamů, WebSocket-události, vytváření serverů. Tím se minimalizuje duplikace kódu a eliminují lagy vykreslování desktopového layoutu.

Přechod po klepnutí na server aktualizuje témata vpravo bez úplného znovunačtení. Klepnutí na téma otevře chat.

Přepracovaný input s rozšířeným formátováním

Input adaptován na formát Mattermost s prevencí přesunu prvků editoru. Funkcionalita zahrnuje:

• Tučné a kurzíva: standardní Markdown-formátování.
• Blok kódu: zvýraznění syntaxe pro vkládání fragmentů.
• PlantUML-diagramy: generování UML z textové značkovací syntaxe přímo ve zprávě.
• Citace: blokové zvýraznění s >.
• Odkaz: vložení hyperlinků.
• Seznam: odrážkový nebo číslovaný.
• Anketa: interaktivní hlasování.

To umožňuje senior-vývojářům vyměňovat si technický obsah bez externích nástrojů.

Kontextové nabídky a gesta

Spodní nabídka se aktivuje dlouhým klepnutím — znovu použit existující komponent s mobilními styly pod isMobile. Reakce na zprávy se otevírají v responzivním overlay. Pravá nabídka optimalizována CSS s podmíněnou logikou pro mobilní zařízení.

Samostatná sekce "Odložené" agreguje všechny naplánované zprávy pro rychlý přehled plánovače.

Mobilní profil uživatele

Vytvořen dedicated komponent MobileProfilePage s kartou uživatele, stavem a sekcemi nastavení.

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">Upravit profil</span>
                    <span className="mobile-profile-item-arrow"><Icon name="chevronRight" size={16} /></span>
                </div>
                {/* Ostatní položky analogicky */}
            </div>
            {/* Sekce stavů a odhlášení */}
        </div>
    </div>
);

Každá položka volá callback, komponenta nespravuje modální okna ani navigaci.

Další vylepšení

• RNNoiser: integrována pro snížení šumu v hlasových zprávách a hovorech.
• Latence: optimalizovány požadavky přes cachování a batchování.
• Ukládání dat: kompletní přestavba s ohledem na mobilní omezení paměti.

Tyto změny zajišťují výkon na slabších zařízeních bez úhony na funkcionalitě.

Co je důležité

• Plná responzivita na WebView s oddělenými komponentami pro dotyková rozhraní.
• Znovupoužití business logiky přes hooky bez duplikace.
• Rozšířený input s PlantUML a anketami pro technické chaty.
• Odložené zprávy v dedicated sekci pro pohodlné plánování.
• Stateless-přístup v UI-komponentách pro předvídatelné vykreslování.

— Editorial Team