Responsiver Chat für Mobile: React-Komponenten

Mobile-Chat-Anpassung: Neue Komponenten und Optimierungen

Das Team hat volle Mobile-Responsiveness für WebView-basierte Anwendungen mit optimierter Funktionalität zur Reduzierung der Ladezeit implementiert. Hinzugefügt wurden die RNNoiser-Bibliothek für Audioverarbeitung, eine Funktion für geplante Nachrichten, ein überarbeitetes Eingabefeld mit erweiterten Formatierungsoptionen, reduzierte Anforderungslatenz und optimierte Datenspeicherung. Alle Änderungen richten sich an mittlere/senior Entwickler, die mit React Native und WebView arbeiten.

Adaptive Benutzeroberfläche für Touch-Bedienung

Entwickelt wurde MobileBottomNav – eine minimalistische untere Navigationsleiste mit fünf Registerkarten: Server, Chats, Kanban, Suche und Profil. Die Komponente ist zustandslos und übergibt nur die ID der aktiven Ansicht über onViewChange ohne interne Logik oder API-Aufrufe.

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: 'Server' },
        { id: 'direct-chats', icon: 'chat', label: 'Chats' },
        { id: 'chat-board', icon: 'board', label: 'Kanban' },
        { id: 'mobile-search', icon: 'search', label: 'Suche' },
        { 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>
    );
}

Die Profil-Registerkarte verwendet UserAvatar anstelle eines Icons zur visuellen Erkennung. Die übergeordnete Komponente übernimmt die Ansichtsumschaltung basierend auf der empfangenen ID.

Optimierte Serverliste

Anstelle des Desktop-LeftMenu wurde MobileServersList für Touch-Interaktionen erstellt. Das linke Panel zeigt Server-Icons im Discord-ähnlichen Stil, das rechte Panel zeigt Themen des ausgewählten Servers. Die Komponente nutzt den useLeftMenu-Hook für Geschäftslogik: Laden von Listen, WebSocket-Ereignisse, Erstellen von Servern. Dies minimiert Code-Duplikation und eliminiert Render-Verzögerungen aus dem Desktop-Layout.

Ein Tipp auf einen Server aktualisiert die Themen rechts ohne vollständigen Neuladen. Ein Tipp auf ein Thema öffnet den Chat.

Überarbeitetes Eingabefeld mit erweiterten Formatierungsoptionen

Die Eingabe ist an das Mattermost-Format angepasst und verhindert das Umbrechen von Editor-Elementen. Die Funktionalität umfasst:

• Fett und kursiv: Standard-Markdown-Formatierung.
• Codeblock: Syntaxhervorhebung zum Einfügen von Snippets.
• PlantUML-Diagramme: Generierung von UML aus Text-Markup direkt in der Nachricht.
• Zitat: Blockhervorhebung mit >.
• Link: Einbetten von Hyperlinks.
• Liste: Aufzählungs- oder nummerierte Liste.
• Umfrage: Interaktive Abstimmung.

Dies ermöglicht es Senior-Entwicklern, technische Inhalte ohne externe Tools auszutauschen.

Kontextmenüs und Gesten

Das untere Menü wird durch einen langen Tipp aktiviert – Wiederverwendung einer bestehenden Komponente mit Mobile-Styles unter isMobile. Nachrichtenreaktionen öffnen in einem adaptiven Overlay. Das rechte Menü ist mit CSS und bedingter Logik für mobile Geräte optimiert.

Ein separater "Geplant"-Bereich fasst alle geplanten Nachrichten für einen schnellen Überblick im Scheduler zusammen.

Mobiles Benutzerprofil

Erstellt wurde eine dedizierte MobileProfilePage-Komponente mit einer Benutzerkarte, Status- und Einstellungsbereichen.

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">Profil bearbeiten</span>
                    <span className="mobile-profile-item-arrow"><Icon name="chevronRight" size={16} /></span>
                </div>
                {/* Andere Elemente ähnlich */}
            </div>
            {/* Status- und Abmeldebereiche */}
        </div>
    </div>
);

Jedes Element löst einen Callback aus; die Komponente verwaltet keine Modals oder Navigation.

Zusätzliche Verbesserungen

• RNNoiser: Integriert, um Rauschen in Sprachnachrichten und Anrufen zu reduzieren.
• Latenz: Optimierte Anforderungen durch Caching und Bündelung.
• Datenspeicherung: Vollständig neu aufgebaut unter Berücksichtigung mobiler Speicherbeschränkungen.

Diese Änderungen gewährleisten Leistung auf Low-End-Geräten ohne Kompromisse bei der Funktionalität.

Wichtige Erkenntnisse

• Volle WebView-Responsiveness mit separaten Komponenten für Touch-Bedienung.
• Wiederverwendung von Geschäftslogik über Hooks ohne Duplikation.
• Erweitertes Eingabefeld mit PlantUML und Umfragen für technische Chats.
• Geplante Nachrichten in einem dedizierten Bereich für Planungskomfort.
• Zustandsloser Ansatz in UI-Komponenten für vorhersehbares Rendering.

— Editorial Team